From d1c58712aef7bea0163125a4b66b642d2508dcaa Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Tue, 24 Jun 2025 16:56:52 +0200 Subject: [PATCH] refactor: extract button styles --- .../buttons/BaseButtonStyles.module.scss | 81 +++++++++++++++++++ .../components/buttons/Button.module.scss | 70 ++-------------- .../src/common/components/buttons/Button.tsx | 11 ++- .../components/buttons/IconButton.module.scss | 54 +------------ .../common/components/buttons/IconButton.tsx | 2 +- 5 files changed, 98 insertions(+), 120 deletions(-) create mode 100644 apps/client/src/common/components/buttons/BaseButtonStyles.module.scss diff --git a/apps/client/src/common/components/buttons/BaseButtonStyles.module.scss b/apps/client/src/common/components/buttons/BaseButtonStyles.module.scss new file mode 100644 index 000000000..7a6fac43d --- /dev/null +++ b/apps/client/src/common/components/buttons/BaseButtonStyles.module.scss @@ -0,0 +1,81 @@ +.subtle { + background: $gray-1050; + color: $blue-400; + + &:hover:not(:disabled):not(:active) { + background: $gray-1000; + color: $blue-500; + } + + &:active:not(:disabled) { + background: $gray-1100; + border-color: $gray-1250; + } +} + +.subtle-white { + background: $gray-1050; + color: $ui-white; + + &:hover:not(:disabled):not(:active) { + background: $gray-1000; + color: $ui-white; + } + + &:active:not(:disabled) { + background: $gray-1100; + border-color: $gray-1250; + } + + &:disabled { + background: $gray-1050; + } +} + +.primary { + background: $blue-700; + color: $ui-white; + + &:hover:not(:disabled):not(:active) { + background: $blue-600; + } + + &:active:not(:disabled) { + background: $blue-800; + border-color: $blue-900; + } + + &:disabled { + opacity: $viewer-opacity-disabled; + } +} + +.destructive { + background: $red-700; + color: $ui-white; + + &:hover:not(:disabled):not(:active) { + background: $red-600; + color: $ui-white; + } + + &:active:not(:disabled) { + background: $red-800; + border-color: $red-900; + } +} + +.subtle-destructive { + background: $gray-1050; + color: $red-400; + + &:hover:not(:disabled):not(:active) { + background: $gray-1000; + color: $red-500; + } + + &:active:not(:disabled) { + background: $gray-1100; + border-color: $gray-1250; + } +} diff --git a/apps/client/src/common/components/buttons/Button.module.scss b/apps/client/src/common/components/buttons/Button.module.scss index 7e7e2f127..1ff7562ea 100644 --- a/apps/client/src/common/components/buttons/Button.module.scss +++ b/apps/client/src/common/components/buttons/Button.module.scss @@ -1,4 +1,5 @@ @use '../../../theme/viewerDefs' as *; +@import './BaseButtonStyles.module.scss'; .baseButton { display: flex; @@ -8,6 +9,7 @@ width: fit-content; padding-inline: 1em; + white-space: nowrap; border: 1px solid transparent; border-radius: $component-border-radius-md; @@ -20,71 +22,9 @@ } } -.subtle { - background: $gray-1050; - color: $blue-400; - - &:hover:not(:disabled):not(:active) { - background: $gray-1000; - color: $blue-500; - } - - &:active:not(:disabled) { - background: $gray-1100; - border-color: $gray-1250; - } -} - -.primary { - background: $blue-700; - color: $ui-white; - - &:hover:not(:disabled):not(:active) { - background: $blue-600; - } - - &:active:not(:disabled) { - background: $blue-800; - border-color: $blue-900; - } - - &:disabled { - opacity: $viewer-opacity-disabled; - } -} - -.destructive { - background: $red-700; - color: $ui-white; - - &:hover:not(:disabled):not(:active) { - background: $red-600; - color: $ui-white; - } - - &:active:not(:disabled) { - background: $red-800; - border-color: $red-900; - } -} - -.subtle-destructive { - background: $gray-1050; - color: $red-400; - - &:hover:not(:disabled):not(:active) { - background: $gray-1000; - color: $red-500; - } - - &:active:not(:disabled) { - background: $gray-1100; - border-color: $gray-1250; - } -} - .medium { height: 2rem; + font-size: calc(1rem - 2px); } .large { @@ -96,3 +36,7 @@ height: 3rem; font-weight: 600; } + +.fluid { + width: 100%; +} diff --git a/apps/client/src/common/components/buttons/Button.tsx b/apps/client/src/common/components/buttons/Button.tsx index b33c9fa9c..5a1061183 100644 --- a/apps/client/src/common/components/buttons/Button.tsx +++ b/apps/client/src/common/components/buttons/Button.tsx @@ -5,15 +5,20 @@ import { cx } from '../../utils/styleUtils'; import style from './Button.module.scss'; interface ButtonProps extends ButtonHTMLAttributes { - variant?: 'subtle' | 'primary' | 'destructive' | 'subtle-destructive'; + variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive'; size?: 'medium' | 'large' | 'xlarge'; + fluid?: boolean; } export default function Button(props: ButtonProps) { - const { className, children, variant = 'subtle', size = 'medium', ...buttonProps } = props; + const { className, children, variant = 'subtle', size = 'medium', fluid, ...buttonProps } = props; return ( - ); diff --git a/apps/client/src/common/components/buttons/IconButton.module.scss b/apps/client/src/common/components/buttons/IconButton.module.scss index a76ee0e85..d9cf9b7d1 100644 --- a/apps/client/src/common/components/buttons/IconButton.module.scss +++ b/apps/client/src/common/components/buttons/IconButton.module.scss @@ -1,4 +1,5 @@ @use '../../../theme/viewerDefs' as *; +@import './BaseButtonStyles.module.scss'; .baseIconButton { aspect-ratio: 1; @@ -16,59 +17,6 @@ } } -.subtle { - background: $gray-1050; - color: $blue-400; - - &:hover:not(:disabled):not(:active) { - background: $gray-1000; - color: $blue-500; - } - - &:active:not(:disabled){ - background: $gray-1100; - border-color: $gray-1250; - } - - &:disabled { - background: $gray-1050; - } -} - -.subtle-white { - background: $gray-1050; - color: $ui-white; - - &:hover:not(:disabled):not(:active) { - background: $gray-1000; - color: $ui-white; - } - - &:active:not(:disabled) { - background: $gray-1100; - border-color: $gray-1250; - } - - &:disabled { - background: $gray-1050; - } -} - -.destructive { - background: $red-700; - color: $ui-white; - - &:hover:not(:disabled):not(:active) { - background: $red-600; - color: $ui-white; - } - - &:active:not(:disabled) { - background: $red-800; - border-color: $red-900; - } -} - .medium { height: 2rem; width: 2rem; diff --git a/apps/client/src/common/components/buttons/IconButton.tsx b/apps/client/src/common/components/buttons/IconButton.tsx index d0d5a5caf..06785deeb 100644 --- a/apps/client/src/common/components/buttons/IconButton.tsx +++ b/apps/client/src/common/components/buttons/IconButton.tsx @@ -5,7 +5,7 @@ import { cx } from '../../utils/styleUtils'; import style from './IconButton.module.scss'; interface IconButtonProps extends ButtonHTMLAttributes { - variant?: 'subtle' | 'subtle-white' | 'destructive'; + variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive'; size?: 'medium' | 'large' | 'xlarge'; }