diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2024-04-08 08:12:00 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2024-04-11 17:21:23 +0200 |
| commit | 0f2f673890121a8aada58580dda89c222ef1de36 (patch) | |
| tree | a986ada71f93172d1b29107b074ba5327ed1a0c8 | |
| parent | cc37b2033af9e4e1665fabf195ca345a6e7061a7 (diff) | |
| download | mullvadvpn-0f2f673890121a8aada58580dda89c222ef1de36.tar.xz mullvadvpn-0f2f673890121a8aada58580dda89c222ef1de36.zip | |
Add possibility to left-align SmallButtons
| -rw-r--r-- | gui/src/renderer/components/SmallButton.tsx | 11 |
1 files changed, 11 insertions, 0 deletions
diff --git a/gui/src/renderer/components/SmallButton.tsx b/gui/src/renderer/components/SmallButton.tsx index 181a557fd2..ba82f15cd4 100644 --- a/gui/src/renderer/components/SmallButton.tsx +++ b/gui/src/renderer/components/SmallButton.tsx @@ -37,6 +37,11 @@ const StyledSmallButton = styled.button<{ $color?: SmallButtonColor; disabled?: borderRadius: '4px', marginLeft: '12px', + [`${SmallButtonGroupStart} &&`]: { + marginLeft: 0, + marginRight: '12px', + }, + [`${StyledSmallButtonGrid} &&`]: { marginLeft: 0, }, @@ -67,6 +72,12 @@ export const SmallButtonGroup = styled.div<{ $noMarginTop?: boolean }>((props) = marginTop: props.$noMarginTop ? 0 : '30px', })); +export const SmallButtonGroupStart = styled(SmallButtonGroup)({ + flex: 1, + justifyContent: 'start', + margin: 0, +}); + const StyledSmallButtonGrid = styled.div<{ $columns: number }>((props) => ({ display: 'grid', gridTemplateColumns: `repeat(${props.$columns}, 1fr)`, |