idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 09:49: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/forms/settings/IrcForms.tsx
View file

@ -1,16 +1,16 @@
import {useMutation} from "react-query";
import {toast} from "react-hot-toast";
import {XMarkIcon} from "@heroicons/react/24/solid";
import type {FieldProps} from "formik";
import {Field, FieldArray, FormikErrors, FormikValues} from "formik";
import { useMutation } from "react-query";
import { toast } from "react-hot-toast";
import { XMarkIcon } from "@heroicons/react/24/solid";
import type { FieldProps } from "formik";
import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
import {queryClient} from "../../App";
import {APIClient} from "../../api/APIClient";
import { queryClient } from "../../App";
import { APIClient } from "../../api/APIClient";
import {NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide} from "../../components/inputs";
import {SlideOver} from "../../components/panels";
import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
import { SlideOver } from "../../components/panels";
import Toast from "../../components/notifications/Toast";
import {ExclamationTriangleIcon} from "@heroicons/react/24/outline";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
interface ChannelsFieldArrayProps {
channels: IrcChannel[];
@ -33,7 +33,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
value={field.value ?? ""}
onChange={field.onChange}
placeholder="#Channel"
className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
className="mr-4 dark:bg-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
)}
</Field>
@ -46,7 +46,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
value={field.value ?? ""}
onChange={field.onChange}
placeholder="Password"
className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
className="mr-4 dark:bg-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
/>
)}
</Field>
@ -54,7 +54,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
<button
type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={() => remove(index)}
>
<span className="sr-only">Remove</span>