idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 01:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): better tooltips and uniformity (#474)

Browse source 
* - fix: changed all {text,bg}-{teal,indigo}-* color properties to {text,bg}-{blue}-* so there is only one dominant primary color in the UI -- blue
- enhancement: added `cursor: pointer` to the PageButton component (used in pagination)
- enhancement: modified TitleCell to use the new Tooltip component and modified the width selectors to a more sane default value, now instead of scrolling one just has to tap the cell to see it's untruncated value
- enhancement: modified the Tooltip component to use react-popper-tooltip (which in turn uses popper.js) which is a much better alternative, since it uses auto-positioning in case there's not enough space and some things aren't as broken as in the previous version (e.g. there was a problem with forcing the previous tooltip to use a specific width)
- enhancement: added a useMedia hook selector from the react-use repository, which might come in handy in the future for better/easier decoupling of Desktop and Mobile UI/UX patterns via JS (versus CSS-only)
- enhancement: made the mobile navbar more visible and clear. also fixed previous path === "/" bug which was fixed on desktop.
- fix: fixed table headers/footers so they're rounded
- enhancement: made pagination components more compact (buttons and show N result selector)

* changed {ring, border}-indigo-* to ring-blue-*

* build: add yarn.lock

* fix: formatting warnings

* fix: formatting warnings

* fix: more formatting warnings

* fix: more formatting
This commit is contained in:
stacksmash76 2022-10-14 21:54:21 +02:00 • committed by GitHub
parent 71d0424b61
commit ac988f28f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 531 additions and 318 deletions
Download patch file Download diff file Expand all files Collapse all files

26
web/src/screens/settings/Api.tsx
View file

@ -1,21 +1,21 @@
import {queryClient} from "../../App";
import {useRef} from "react";
import {useMutation, useQuery} from "react-query";
import {KeyField} from "../../components/fields/text";
import {DeleteModal} from "../../components/modals";
import { queryClient } from "../../App";
import { useRef } from "react";
import { useMutation, useQuery } from "react-query";
import { KeyField } from "../../components/fields/text";
import { DeleteModal } from "../../components/modals";
import APIKeyAddForm from "../../forms/settings/APIKeyAddForm";
import Toast from "../../components/notifications/Toast";
import {APIClient} from "../../api/APIClient";
import {useToggle} from "../../hooks/hooks";
import {toast} from "react-hot-toast";
import {classNames} from "../../utils";
import {TrashIcon} from "@heroicons/react/24/outline";
import {EmptySimple} from "../../components/emptystates";
import { APIClient } from "../../api/APIClient";
import { useToggle } from "../../hooks/hooks";
import { toast } from "react-hot-toast";
import { classNames } from "../../utils";
import { TrashIcon } from "@heroicons/react/24/outline";
import { EmptySimple } from "../../components/emptystates";
function APISettings() {
const [addFormIsOpen, toggleAddForm] = useToggle(false);
const { isLoading, data } = useQuery(
const { data } = useQuery(
["apikeys"],
() => APIClient.apikeys.getAll(),
{
@ -40,7 +40,7 @@ function APISettings() {
<div className="ml-4 mt-4 flex-shrink-0">
<button
type="button"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={toggleAddForm}
>
Add new