Use common definition for button spacing

11 files changed, 108 insertions, 110 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index b5bbfd773c..b04bc88358 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -13,8 +13,6 @@ import {
   AccountRows,
   AccountRowValue,
   DeviceRowValue,
-  StyledBuyCreditButton,
-  StyledRedeemVoucherButton,
   StyledSpinnerContainer,
 } from './AccountStyles';
 import AccountTokenLabel from './AccountTokenLabel';
@@ -25,6 +23,7 @@ import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
+import { RedeemVoucherButton } from './RedeemVoucher';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 interface IProps {
@@ -97,31 +96,33 @@ export default class Account extends React.Component<IProps, IState> {
               </AccountRows>
 
               <AccountFooter>
-                <AppButton.BlockingButton
-                  disabled={this.props.isOffline}
-                  onClick={this.props.onBuyMore}>
-                  <AriaDescriptionGroup>
-                    <AriaDescribed>
-                      <StyledBuyCreditButton>
-                        <AppButton.Label>{messages.gettext('Buy more credit')}</AppButton.Label>
-                        <AriaDescription>
-                          <AppButton.Icon
-                            source="icon-extLink"
-                            height={16}
-                            width={16}
-                            aria-label={messages.pgettext('accessibility', 'Opens externally')}
-                          />
-                        </AriaDescription>
-                      </StyledBuyCreditButton>
-                    </AriaDescribed>
-                  </AriaDescriptionGroup>
-                </AppButton.BlockingButton>
+                <AppButton.ButtonGroup>
+                  <AppButton.BlockingButton
+                    disabled={this.props.isOffline}
+                    onClick={this.props.onBuyMore}>
+                    <AriaDescriptionGroup>
+                      <AriaDescribed>
+                        <AppButton.GreenButton>
+                          <AppButton.Label>{messages.gettext('Buy more credit')}</AppButton.Label>
+                          <AriaDescription>
+                            <AppButton.Icon
+                              source="icon-extLink"
+                              height={16}
+                              width={16}
+                              aria-label={messages.pgettext('accessibility', 'Opens externally')}
+                            />
+                          </AriaDescription>
+                        </AppButton.GreenButton>
+                      </AriaDescribed>
+                    </AriaDescriptionGroup>
+                  </AppButton.BlockingButton>
 
-                <StyledRedeemVoucherButton />
+                  <RedeemVoucherButton />
 
-                <AppButton.RedButton onClick={this.onTryLogout}>
-                  {messages.pgettext('account-view', 'Log out')}
-                </AppButton.RedButton>
+                  <AppButton.RedButton onClick={this.onTryLogout}>
+                    {messages.pgettext('account-view', 'Log out')}
+                  </AppButton.RedButton>
+                </AppButton.ButtonGroup>
               </AccountFooter>
             </AccountContainer>
           </SettingsContainer>
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index ceb5f587ed..6b54cd613a 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
-import * as AppButton from './AppButton';
 import { measurements, normalText, tinyText } from './common-styles';
-import { RedeemVoucherButton } from './RedeemVoucher';
 
 export const AccountContainer = styled.div({
   display: 'flex',
@@ -59,10 +57,3 @@ export const AccountFooter = styled.div({
   flexDirection: 'column',
   padding: `0 ${measurements.viewMargin}`,
 });
-
-const buttonStyle = {
-  marginBottom: '18px',
-};
-
-export const StyledRedeemVoucherButton = styled(RedeemVoucherButton)(buttonStyle);
-export const StyledBuyCreditButton = styled(AppButton.GreenButton)(buttonStyle);
diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx
index a9bc44a7f4..a3edc78ad3 100644
--- a/gui/src/renderer/components/AppButton.tsx
+++ b/gui/src/renderer/components/AppButton.tsx
@@ -13,6 +13,7 @@ import {
   StyledVisibleSide,
   transparentButton,
 } from './AppButtonStyles';
+import { measurements } from './common-styles';
 import ImageView from './ImageView';
 
 interface ILabelProps {
@@ -190,12 +191,12 @@ const StyledButtonWrapper = styled.div({
   flexDirection: 'column',
   flex: 0,
   ':not(:last-child)': {
-    marginBottom: '18px',
+    marginBottom: measurements.buttonVerticalMargin,
   },
 });
 
 interface IButtonGroupProps {
-  children: React.ReactElement[];
+  children: React.ReactNode | React.ReactNode[];
 }
 
 export function ButtonGroup(props: IButtonGroupProps) {
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index a2645dd14f..9624e0cd15 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -13,10 +13,8 @@ import {
   StyledAccountTokenLabel,
   StyledAccountTokenMessage,
   StyledBody,
-  StyledBuyCreditButton,
   StyledContainer,
   StyledCustomScrollbars,
-  StyledDisconnectButton,
   StyledFooter,
   StyledHeader,
   StyledMessage,
@@ -73,19 +71,21 @@ export default class ExpiredAccountErrorView extends React.Component<
             <StyledBody>{this.renderContent()}</StyledBody>
 
             <StyledFooter>
-              {this.getRecoveryAction() === RecoveryAction.disconnect && (
-                <AppButton.BlockingButton onClick={this.props.onDisconnect}>
-                  <StyledDisconnectButton>
-                    {messages.pgettext('connect-view', 'Disconnect')}
-                  </StyledDisconnectButton>
-                </AppButton.BlockingButton>
-              )}
+              <AppButton.ButtonGroup>
+                {this.getRecoveryAction() === RecoveryAction.disconnect && (
+                  <AppButton.BlockingButton onClick={this.props.onDisconnect}>
+                    <AppButton.RedButton>
+                      {messages.pgettext('connect-view', 'Disconnect')}
+                    </AppButton.RedButton>
+                  </AppButton.BlockingButton>
+                )}
 
-              {this.renderExternalPaymentButton()}
+                {this.renderExternalPaymentButton()}
 
-              <AppButton.GreenButton onClick={this.props.navigateToRedeemVoucher}>
-                {messages.pgettext('connect-view', 'Redeem voucher')}
-              </AppButton.GreenButton>
+                <AppButton.GreenButton onClick={this.props.navigateToRedeemVoucher}>
+                  {messages.pgettext('connect-view', 'Redeem voucher')}
+                </AppButton.GreenButton>
+              </AppButton.ButtonGroup>
             </StyledFooter>
 
             {this.renderBlockWhenDisconnectedAlert()}
@@ -173,7 +173,7 @@ export default class ExpiredAccountErrorView extends React.Component<
         onClick={this.onOpenExternalPayment}>
         <AriaDescriptionGroup>
           <AriaDescribed>
-            <StyledBuyCreditButton>
+            <AppButton.GreenButton>
               <AppButton.Label>{buttonText}</AppButton.Label>
               <AriaDescription>
                 <AppButton.Icon
@@ -183,7 +183,7 @@ export default class ExpiredAccountErrorView extends React.Component<
                   aria-label={messages.pgettext('accessibility', 'Opens externally')}
                 />
               </AriaDescription>
-            </StyledBuyCreditButton>
+            </AppButton.GreenButton>
           </AriaDescribed>
         </AriaDescriptionGroup>
       </AppButton.BlockingButton>
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 37c2ec8bf3..e203c7fbc1 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import AccountTokenLabel from './AccountTokenLabel';
-import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { hugeText, measurements, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
@@ -27,13 +26,6 @@ export const StyledModalCellContainer = styled(Cell.Container)({
   paddingRight: '12px',
 });
 
-const buttonStyle = {
-  marginBottom: '18px',
-};
-
-export const StyledBuyCreditButton = styled(AppButton.GreenButton)(buttonStyle);
-export const StyledDisconnectButton = styled(AppButton.RedButton)(buttonStyle);
-
 export const StyledCustomScrollbars = styled(CustomScrollbars)({
   flex: 1,
 });
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 723235a839..fc5c05312a 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -5,7 +5,8 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import log from '../../shared/logging';
 import { useWillExit } from '../lib/will-exit';
-import { tinyText } from './common-styles';
+import * as AppButton from './AppButton';
+import { measurements, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
@@ -142,10 +143,13 @@ const ModalAlertIcon = styled.div({
   marginTop: '8px',
 });
 
+const ModalAlertButtonGroup = styled(AppButton.ButtonGroup)({
+  marginTop: measurements.buttonVerticalMargin,
+});
+
 const ModalAlertButtonContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  marginTop: '18px',
   marginRight: '16px',
 });
 
@@ -265,9 +269,11 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
                 {this.props.children}
               </StyledCustomScrollbars>
 
-              {this.props.buttons.map((button, index) => (
-                <ModalAlertButtonContainer key={index}>{button}</ModalAlertButtonContainer>
-              ))}
+              <ModalAlertButtonGroup>
+                {this.props.buttons.map((button, index) => (
+                  <ModalAlertButtonContainer key={index}>{button}</ModalAlertButtonContainer>
+                ))}
+              </ModalAlertButtonGroup>
             </StyledModalAlert>
           </ModalAlertContainer>
         </ModalBackground>
diff --git a/gui/src/renderer/components/ProblemReport.tsx b/gui/src/renderer/components/ProblemReport.tsx
index e2c3bf4d5b..47fb8a780c 100644
--- a/gui/src/renderer/components/ProblemReport.tsx
+++ b/gui/src/renderer/components/ProblemReport.tsx
@@ -12,7 +12,6 @@ import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import {
-  StyledBlueButton,
   StyledContent,
   StyledContentContainer,
   StyledEmail,
@@ -346,19 +345,21 @@ export default class ProblemReport extends React.Component<
         <StyledFooter>
           <AriaDescriptionGroup>
             <AriaDescribed>
-              <StyledBlueButton onClick={this.onViewLog} disabled={this.state.disableActions}>
-                <AppButton.Label>
-                  {messages.pgettext('support-view', 'View app logs')}
-                </AppButton.Label>
-                <AriaDescription>
-                  <AppButton.Icon
-                    source="icon-extLink"
-                    height={16}
-                    width={16}
-                    aria-label={messages.pgettext('accessibility', 'Opens externally')}
-                  />
-                </AriaDescription>
-              </StyledBlueButton>
+              <AppButton.ButtonGroup>
+                <AppButton.BlueButton onClick={this.onViewLog} disabled={this.state.disableActions}>
+                  <AppButton.Label>
+                    {messages.pgettext('support-view', 'View app logs')}
+                  </AppButton.Label>
+                  <AriaDescription>
+                    <AppButton.Icon
+                      source="icon-extLink"
+                      height={16}
+                      width={16}
+                      aria-label={messages.pgettext('accessibility', 'Opens externally')}
+                    />
+                  </AriaDescription>
+                </AppButton.BlueButton>
+              </AppButton.ButtonGroup>
             </AriaDescribed>
           </AriaDescriptionGroup>
           <AppButton.GreenButton
@@ -430,12 +431,14 @@ export default class ProblemReport extends React.Component<
           </StyledSentMessage>
         </StyledForm>
         <StyledFooter>
-          <StyledBlueButton onClick={this.handleEditMessage}>
-            {messages.pgettext('support-view', 'Edit message')}
-          </StyledBlueButton>
-          <AppButton.GreenButton onClick={this.onSend}>
-            {messages.pgettext('support-view', 'Try again')}
-          </AppButton.GreenButton>
+          <AppButton.ButtonGroup>
+            <AppButton.BlueButton onClick={this.handleEditMessage}>
+              {messages.pgettext('support-view', 'Edit message')}
+            </AppButton.BlueButton>
+            <AppButton.GreenButton onClick={this.onSend}>
+              {messages.pgettext('support-view', 'Try again')}
+            </AppButton.GreenButton>
+          </AppButton.ButtonGroup>
         </StyledFooter>
       </StyledContent>
     );
diff --git a/gui/src/renderer/components/ProblemReportStyles.tsx b/gui/src/renderer/components/ProblemReportStyles.tsx
index 0ce3631e43..50ea2bc09b 100644
--- a/gui/src/renderer/components/ProblemReportStyles.tsx
+++ b/gui/src/renderer/components/ProblemReportStyles.tsx
@@ -1,13 +1,8 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
-import * as AppButton from './AppButton';
 import { hugeText, measurements, smallText } from './common-styles';
 
-export const StyledBlueButton = styled(AppButton.BlueButton)({
-  marginBottom: '18px',
-});
-
 export const StyledContentContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 13ae090c6e..dadb3404e5 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -89,7 +89,7 @@ export const StyledCellContainer = styled(Cell.Container)({
 
 export const StyledSearchContainer = styled.div({
   position: 'relative',
-  marginBottom: '18px',
+  marginBottom: measurements.buttonVerticalMargin,
 });
 
 export const StyledSearchInput = styled.input.attrs({ type: 'text' })({
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 5def065ddf..67444e3ee4 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -24,10 +24,6 @@ interface ITunnelControlProps {
   onSelectLocation: () => void;
 }
 
-const SwitchLocationButton = styled(AppButton.TransparentButton)({
-  marginBottom: '18px',
-});
-
 const Secured = styled(SecuredLabel)(normalText, {
   fontWeight: 700,
   lineHeight: '22px',
@@ -117,8 +113,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
               <ConnectionPanelContainer />
             </Body>
             <Footer>
-              {this.switchLocationButton()}
-              <MultiButton mainButton={this.cancelButton} sideButton={this.reconnectButton} />
+              <AppButton.ButtonGroup>
+                {this.switchLocationButton()}
+                <MultiButton mainButton={this.cancelButton} sideButton={this.reconnectButton} />
+              </AppButton.ButtonGroup>
             </Footer>
           </Wrapper>
         );
@@ -137,8 +135,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
               <ConnectionPanelContainer />
             </Body>
             <Footer>
-              {this.switchLocationButton()}
-              <MultiButton mainButton={this.disconnectButton} sideButton={this.reconnectButton} />
+              <AppButton.ButtonGroup>
+                {this.switchLocationButton()}
+                <MultiButton mainButton={this.disconnectButton} sideButton={this.reconnectButton} />
+              </AppButton.ButtonGroup>
             </Footer>
           </Wrapper>
         );
@@ -155,8 +155,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
                 <Secured displayStyle={SecuredDisplayStyle.failedToSecure} />
               </Body>
               <Footer>
-                {this.switchLocationButton()}
-                <MultiButton mainButton={this.dismissButton} sideButton={this.reconnectButton} />
+                <AppButton.ButtonGroup>
+                  {this.switchLocationButton()}
+                  <MultiButton mainButton={this.dismissButton} sideButton={this.reconnectButton} />
+                </AppButton.ButtonGroup>
               </Footer>
             </Wrapper>
           );
@@ -167,8 +169,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
                 <Secured displayStyle={SecuredDisplayStyle.blocked} />
               </Body>
               <Footer>
-                {this.switchLocationButton()}
-                <MultiButton mainButton={this.cancelButton} sideButton={this.reconnectButton} />
+                <AppButton.ButtonGroup>
+                  {this.switchLocationButton()}
+                  <MultiButton mainButton={this.cancelButton} sideButton={this.reconnectButton} />
+                </AppButton.ButtonGroup>
               </Footer>
             </Wrapper>
           );
@@ -185,8 +189,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
               </Location>
             </Body>
             <Footer>
-              {this.selectLocationButton()}
-              {this.connectButton()}
+              <AppButton.ButtonGroup>
+                {this.selectLocationButton()}
+                {this.connectButton()}
+              </AppButton.ButtonGroup>
             </Footer>
           </Wrapper>
         );
@@ -205,8 +211,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
               </Location>
             </Body>
             <Footer>
-              {this.selectLocationButton()}
-              {this.connectButton()}
+              <AppButton.ButtonGroup>
+                {this.selectLocationButton()}
+                {this.connectButton()}
+              </AppButton.ButtonGroup>
             </Footer>
           </Wrapper>
         );
@@ -238,15 +246,15 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
 
   private switchLocationButton() {
     return (
-      <SwitchLocationButton onClick={this.props.onSelectLocation}>
+      <AppButton.TransparentButton onClick={this.props.onSelectLocation}>
         {messages.pgettext('tunnel-control', 'Switch location')}
-      </SwitchLocationButton>
+      </AppButton.TransparentButton>
     );
   }
 
   private selectLocationButton() {
     return (
-      <SwitchLocationButton
+      <AppButton.TransparentButton
         onClick={this.props.onSelectLocation}
         aria-label={sprintf(
           messages.pgettext('accessibility', 'Select location. Current location is %(location)s'),
@@ -254,7 +262,7 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
         )}>
         <AppButton.Label>{this.props.selectedRelayName}</AppButton.Label>
         <SelectedLocationChevron height={12} width={7} source="icon-chevron" />
-      </SwitchLocationButton>
+      </AppButton.TransparentButton>
     );
   }
 
diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts
index dc64b06080..b1a4af250b 100644
--- a/gui/src/renderer/components/common-styles.ts
+++ b/gui/src/renderer/components/common-styles.ts
@@ -62,4 +62,5 @@ export const measurements = {
   rowMinHeight: '44px',
   viewMargin: '22px',
   rowVerticalMargin: '20px',
+  buttonVerticalMargin: '18px',
 };