diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2021-06-15 11:49:18 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2021-06-28 09:00:49 +0200 |
| commit | bf25dd0884358e74d1a298ebcd89ed8986477f29 (patch) | |
| tree | ca8d5f12858f66519dd0e83fb2fdf150d1121bd8 /gui/src | |
| parent | de10b8a65b37e846bed01956e3a5ac87629d5c16 (diff) | |
| download | mullvadvpn-bf25dd0884358e74d1a298ebcd89ed8986477f29.tar.xz mullvadvpn-bf25dd0884358e74d1a298ebcd89ed8986477f29.zip | |
Add button group component to properly space buttons
Diffstat (limited to 'gui/src')
| -rw-r--r-- | gui/src/renderer/components/AppButton.tsx | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx index 352d70d9e9..d424e8b54e 100644 --- a/gui/src/renderer/components/AppButton.tsx +++ b/gui/src/renderer/components/AppButton.tsx @@ -191,3 +191,26 @@ export const RedTransparentButton = styled(BaseButton)({ backgroundColor: colors.red80, }, }); + +const StyledButtonWrapper = styled.div({ + display: 'flex', + flexDirection: 'column', + flex: 0, + ':not(:last-child)': { + marginBottom: '18px', + }, +}); + +interface IButtonGroupProps { + children: React.ReactElement[]; +} + +export function ButtonGroup(props: IButtonGroupProps) { + return ( + <> + {React.Children.map(props.children, (button, index) => ( + <StyledButtonWrapper key={index}>{button}</StyledButtonWrapper> + ))} + </> + ); +} |