granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix button styles

Browse source
This commit is contained in:
Justin Edmund 2023-06-23 19:14:01 -07:00
parent bf051376d0
commit ea099881c6
2 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
components/common/Button/index.module.scss
View file

@ -1,4 +1,4 @@
.Button { .button {
align-items: center; align-items: center;
background: var(--button-bg); background: var(--button-bg);
border: 2px solid transparent; border: 2px solid transparent;
@ -12,13 +12,13 @@
user-select: none; user-select: none;
&:hover, &:hover,
&.Blended:hover, &.blended:hover,
&.Blended.Active { &.blended.active {
background: var(--button-bg-hover); background: var(--button-bg-hover);
cursor: pointer; cursor: pointer;
color: var(--button-text-hover); color: var(--button-text-hover);
.Accessory svg { .accessory svg {
fill: var(--button-text-hover); fill: var(--button-text-hover);
} }
@ -28,11 +28,11 @@
} }
} }
&.Blended { &.blended {
background: transparent; background: transparent;
} }
&.IconButton.medium { &.iconButton.medium {
height: inherit; height: inherit;
padding: $unit-half; padding: $unit-half;
@ -40,7 +40,7 @@
background: none; background: none;
} }
.Text { .text {
font-size: $font-small; font-size: $font-small;
font-weight: $bold; font-weight: $bold;
@ -50,19 +50,19 @@
} }
} }
&.Contained { &.contained {
background: var(--button-contained-bg); background: var(--button-contained-bg);
&:hover { &:hover {
background: var(--button-contained-bg-hover); background: var(--button-contained-bg-hover);
} }
&.Save:hover .Accessory svg { &.save:hover .Accessory svg {
fill: #ff4d4d; fill: #ff4d4d;
stroke: #ff4d4d; stroke: #ff4d4d;
} }
&.Save { &.save {
color: #ff4d4d; color: #ff4d4d;
&.Active .Accessory svg { &.Active .Accessory svg {
@ -81,7 +81,7 @@
} }
} }
&.Options { &.options {
box-shadow: 0px 1px 3px rgb(0 0 0 / 14%); box-shadow: 0px 1px 3px rgb(0 0 0 / 14%);
position: absolute; position: absolute;
left: 8px; left: 8px;
@ -124,13 +124,13 @@
background: $error; background: $error;
color: $grey-100; color: $grey-100;
.Accessory svg { .accessory svg {
fill: $grey-100; fill: $grey-100;
} }
} }
&.Save { &.Save {
.Accessory svg { .accessory svg {
fill: none; fill: none;
stroke: var(--button-text); stroke: var(--button-text);
} }
@ -138,7 +138,7 @@
&.Saved { &.Saved {
color: #ff4d4d; color: #ff4d4d;
.Accessory svg { .accessory svg {
fill: #ff4d4d; fill: #ff4d4d;
stroke: none; stroke: none;
} }
@ -147,7 +147,7 @@
&:hover { &:hover {
color: #ff4d4d; color: #ff4d4d;
.Accessory svg { .accessory svg {
fill: none; fill: none;
stroke: #ff4d4d; stroke: #ff4d4d;
} }
@ -166,7 +166,7 @@
} }
} }
&.Destructive { &.destructive {
background: $error; background: $error;
color: white; color: white;
@ -175,7 +175,7 @@
} }
} }
.Accessory { .accessory {
$dimension: $unit-2x; $dimension: $unit-2x;
display: flex; display: flex;
@ -319,7 +319,7 @@
} }
} }
.Text { .text {
color: inherit; color: inherit;
display: block; display: block;
width: 100%; width: 100%;

21
components/common/Button/index.tsx
View file

@ -42,20 +42,23 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
forwardedRef forwardedRef
) { ) {
const classes = classNames(buttonSize, props.className, { const classes = classNames(buttonSize, props.className, {
Button: true, [styles.button]: true,
Active: active, [styles.active]: active,
Blended: blended, [styles.blended]: blended,
Contained: contained, [styles.contained]: contained,
[styles.small]: buttonSize === 'small',
[styles.medium]: buttonSize === 'medium',
[styles.large]: buttonSize === 'large',
}) })
const leftAccessoryClasses = classNames(leftAccessoryClassName, { const leftAccessoryClasses = classNames(leftAccessoryClassName, {
Accessory: true, [styles.accessory]: true,
Left: true, [styles.left]: true,
}) })
const rightAccessoryClasses = classNames(rightAccessoryClassName, { const rightAccessoryClasses = classNames(rightAccessoryClassName, {
Accessory: true, [styles.accessory]: true,
Right: true, [styles.right]: true,
}) })
const hasLeftAccessory = () => { const hasLeftAccessory = () => {
@ -69,7 +72,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
} }
const hasText = () => { const hasText = () => {
if (text) return <span className="Text">{text}</span> if (text) return <span className={styles.text}>{text}</span>
} }
return ( return (