diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx index 52a7192ee7..26b8dcae92 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx @@ -33,21 +33,11 @@ const styles = { disabled: colors.red40, }, }, - flex: { - fill: '1 1 0', - fit: '0 0 auto', - }, - widths: { - fill: undefined, - fit: 'fit-content', - }, }; export const StyledButton = styled.button<TransientProps<Pick<ButtonProps, 'variant' | 'width'>>>` ${({ $width = 'fill', $variant = 'primary' }) => { const variant = styles.variants[$variant]; - const size = styles.flex[$width]; - const width = styles.widths[$width]; return css` --background: ${variant.background}; @@ -55,8 +45,6 @@ export const StyledButton = styled.button<TransientProps<Pick<ButtonProps, 'vari --pressed: ${variant.pressed}; --disabled: ${variant.disabled}; --radius: ${styles.radius}; - --size: ${size}; - --width: ${width}; --transition-duration: 0.15s; display: flex; @@ -67,10 +55,22 @@ export const StyledButton = styled.button<TransientProps<Pick<ButtonProps, 'vari min-height: 32px; min-width: 60px; - width: var(--width); border-radius: var(--radius); background: var(--background); + ${() => { + if ($width === 'fill') { + return css` + width: 100%; + `; + } else if ($width === 'fit') { + return css` + width: fit-content; + `; + } + return null; + }} + @media (prefers-reduced-motion: no-preference) { transition: background-color var(--transition-duration) ease; } |