Skip to content

Commit

Permalink
Various Hover Tweaks (#1003)
Browse files Browse the repository at this point in the history
* Various Hover Tweaks

- remove hover from disabled buttons
- allow button tooltip placement to be defined with a fallback to "top"
- move theme's logo css below variables from the tailwind config
- add hover to series page tabs

* Formatting
  • Loading branch information
natyusha authored Aug 21, 2024
1 parent 7be69bf commit f82333c
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 21 deletions.
5 changes: 4 additions & 1 deletion src/components/Input/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type { PlacesType } from 'react-tooltip';
import { mdiLoading } from '@mdi/js';
import { Icon } from '@mdi/react';
import cx from 'classnames';
Expand All @@ -16,6 +17,7 @@ type Props = {
onClick?: React.MouseEventHandler<HTMLButtonElement>;
submit?: boolean;
tooltip?: string;
tooltipPlace?: PlacesType;
};

const Button = React.memo(
Expand All @@ -31,6 +33,7 @@ const Button = React.memo(
onClick,
submit,
tooltip,
tooltipPlace,
}: Props,
) => (
<button
Expand All @@ -46,7 +49,7 @@ const Button = React.memo(
disabled={disabled}
data-tooltip-id="tooltip"
data-tooltip-content={tooltip}
data-tooltip-place="top"
data-tooltip-place={tooltipPlace ?? 'top'}
>
{loading
? (
Expand Down
7 changes: 4 additions & 3 deletions src/components/Input/Button.utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ export type SizeType = 'normal' | 'small';

export const buttonTypeClasses: Record<ButtonType, string> = {
primary:
'bg-button-primary text-button-primary-text border-2 !border-button-primary-border hover:bg-button-primary-hover',
'bg-button-primary text-button-primary-text border-2 !border-button-primary-border enabled:hover:bg-button-primary-hover',
secondary:
'bg-button-secondary text-button-secondary-text border-2 !border-button-secondary-border hover:bg-button-secondary-hover',
danger: 'bg-button-danger text-button-danger-text border-2 !border-button-danger-border hover:bg-button-danger-hover',
'bg-button-secondary text-button-secondary-text border-2 !border-button-secondary-border enabled:hover:bg-button-secondary-hover',
danger:
'bg-button-danger text-button-danger-text border-2 !border-button-danger-border enabled:hover:bg-button-danger-hover',
};

export const buttonSizeClasses: Record<SizeType, string> = {
Expand Down
9 changes: 5 additions & 4 deletions src/components/Layout/TopNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -197,12 +197,13 @@ function TopNav() {
size={1}
/>
</NavLink>
<Button onClick={handleLogout}>
<Button
onClick={handleLogout}
tooltip="Log out"
tooltipPlace="bottom"
>
<Icon
className="transition-colors hover:text-header-icon-primary"
data-tooltip-id="tooltip"
data-tooltip-content="Log out"
data-tooltip-place="bottom"
path={mdiLogout}
size={1}
/>
Expand Down
24 changes: 12 additions & 12 deletions src/css/theme-shoko-gray.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,6 @@
--header-text-important: #10c469;
--header-user-background: #44a3ff;
--header-user-text: #010f1c;
--logo-outline: #000;
--logo-skin: #fdf5e8;
--logo-face-shadow: #fe514d;
--logo-eye-ref1: #e3e4d6;
--logo-eye-ref2: #e8c8bb;
--logo-eye-ref3: #ffc2b2;
--logo-hair-gradient1: #c33144;
--logo-hair-gradient2: #6b8cdb;
--logo-hair-gradient3: #79f0f8;
--logo-eye-gradient1: #ae303b;
--logo-eye-gradient2: #ec4050;
--logo-eye-gradient3: #fd877d;
--panel-background: #2c333e;
--panel-background-alt: #282e38;
--panel-background-selected-row: #283654;
Expand Down Expand Up @@ -71,4 +59,16 @@
--topnav-icon-warning: #f9c851;
--topnav-text: #cfd8e3;
--topnav-text-primary: #44a3ff;
--logo-outline: #000;
--logo-skin: #fdf5e8;
--logo-face-shadow: #fe514d;
--logo-eye-ref1: #e3e4d6;
--logo-eye-ref2: #e8c8bb;
--logo-eye-ref3: #ffc2b2;
--logo-eye-gradient1: #ae303b;
--logo-eye-gradient2: #ec4050;
--logo-eye-gradient3: #fd877d;
--logo-hair-gradient1: #c33144;
--logo-hair-gradient2: #6b8cdb;
--logo-hair-gradient3: #79f0f8;
}
2 changes: 1 addition & 1 deletion src/pages/collection/Series.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const SeriesTab: SeriesTabProps = ({ icon, text, to }) => (
to={to}
className={({ isActive }) =>
cx(
'flex items-center gap-x-3',
'flex items-center gap-x-3 transition-colors hover:text-panel-text-primary',
isActive && 'text-panel-text-primary',
)}
>
Expand Down

0 comments on commit f82333c

Please sign in to comment.