Fix filled button styles

This commit is contained in:
jeffvli 2023-03-28 16:13:18 -07:00
parent 219a9ed613
commit ececc394e2
3 changed files with 13 additions and 13 deletions

View file

@ -6,21 +6,21 @@ const MotionButton = styled(UnstyledButton)`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--btn-primary-bg); background-color: var(--btn-filled-bg);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
opacity: 0.8; opacity: 0.8;
svg { svg {
fill: var(--btn-primary-fg); fill: var(--btn-filled-fg);
} }
&:hover { &:hover {
background-color: var(--btn-primary-bg-hover); background-color: var(--btn-filled-bg-hover);
transform: scale(1.1); transform: scale(1.1);
svg { svg {
fill: var(--btn-primary-fg-hover); fill: var(--btn-filled-fg-hover);
} }
} }

View file

@ -43,12 +43,12 @@
--scrollbar-thumb-bg: rgba(160, 160, 160, 0.3); --scrollbar-thumb-bg: rgba(160, 160, 160, 0.3);
--scrollbar-thumb-bg-hover: rgba(160, 160, 160, 0.6); --scrollbar-thumb-bg-hover: rgba(160, 160, 160, 0.6);
--btn-primary-bg: var(--primary-color); --btn-filled-bg: var(--primary-color);
--btn-primary-bg-hover: rgb(34, 96, 255); --btn-filled-bg-hover: rgb(34, 96, 255);
--btn-primary-fg: #ffffff; --btn-filled-fg: #ffffff;
--btn-primary-fg-hover: #ffffff; --btn-filled-fg-hover: #ffffff;
--btn-primary-border: none; --btn-filled-border: none;
--btn-primary-radius: 4px; --btn-filled-radius: 4px;
--btn-default-bg: rgb(31, 31, 32); --btn-default-bg: rgb(31, 31, 32);
--btn-default-bg-hover: rgb(63, 63, 63); --btn-default-bg-hover: rgb(63, 63, 63);

View file

@ -38,9 +38,9 @@ body[data-theme='defaultLight'] {
--scrollbar-thumb-bg: rgba(140, 140, 140, 0.3); --scrollbar-thumb-bg: rgba(140, 140, 140, 0.3);
--scrollbar-thumb-bg: rgba(140, 140, 140, 0.6); --scrollbar-thumb-bg: rgba(140, 140, 140, 0.6);
--btn-primary-bg: var(--primary-color); --btn-filled-bg: var(--primary-color);
--btn-primary-fg: #ffffff; --btn-filled-fg: #ffffff;
--btn-primary-fg-hover: #ffffff; --btn-filled-fg-hover: #ffffff;
--btn-default-bg: rgb(220, 220, 220); --btn-default-bg: rgb(220, 220, 220);
--btn-default-bg-hover: rgb(210, 210, 210); --btn-default-bg-hover: rgb(210, 210, 210);