idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +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

15
web/src/screens/Base.tsx
View file

@ -77,8 +77,7 @@ export default function Base() {
)}
>
Docs
<ArrowTopRightOnSquareIcon className="inline ml-1 h-5 w-5"
aria-hidden="true"/>
<ArrowTopRightOnSquareIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
</a>
</div>
</div>
@ -125,7 +124,7 @@ export default function Base() {
to="/settings"
className={classNames(
active ? "bg-gray-100 dark:bg-gray-600" : "",
"block px-4 py-2 text-sm text-gray-700 dark:text-gray-200"
"block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
)}
>
Settings
@ -138,7 +137,7 @@ export default function Base() {
to="/logout"
className={classNames(
active ? "bg-gray-100 dark:bg-gray-600" : "",
"block px-4 py-2 text-sm text-gray-700 dark:text-gray-200"
"block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
)}
>
Logout
@ -175,17 +174,17 @@ export default function Base() {
key={item.path}
to={item.path}
className={({ isActive }) => classNames(
// TODO: Double check whether this is correct
"dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
isActive ? "font-bold bg-gray-300 text-black" : "font-medium"
"shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
isActive ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black" : "font-medium"
)}
end={item.path === "/"}
>
{item.name}
</NavLink>
)}
<Link
to="/logout"
className="dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
className="shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Logout
</Link>