Create common component for all view footers

14 files changed, 50 insertions, 99 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index b04bc88358..83d06fa290 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -6,7 +6,6 @@ import { messages } from '../../shared/gettext';
 import { useSelector } from '../redux/store';
 import {
   AccountContainer,
-  AccountFooter,
   AccountOutOfTime,
   AccountRow,
   AccountRowLabel,
@@ -20,7 +19,7 @@ import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import { Footer, Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import { RedeemVoucherButton } from './RedeemVoucher';
@@ -95,7 +94,7 @@ export default class Account extends React.Component<IProps, IState> {
                 </AccountRow>
               </AccountRows>
 
-              <AccountFooter>
+              <Footer>
                 <AppButton.ButtonGroup>
                   <AppButton.BlockingButton
                     disabled={this.props.isOffline}
@@ -123,7 +122,7 @@ export default class Account extends React.Component<IProps, IState> {
                     {messages.pgettext('account-view', 'Log out')}
                   </AppButton.RedButton>
                 </AppButton.ButtonGroup>
-              </AccountFooter>
+              </Footer>
             </AccountContainer>
           </SettingsContainer>
 
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index 6b54cd613a..5cb934134a 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -7,7 +7,6 @@ export const AccountContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  paddingBottom: measurements.viewMargin,
 });
 
 export const AccountRows = styled.div({
@@ -51,9 +50,3 @@ export const StyledSpinnerContainer = styled.div({
   justifyContent: 'center',
   padding: '8px 0',
 });
-
-export const AccountFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  padding: `0 ${measurements.viewMargin}`,
-});
diff --git a/gui/src/renderer/components/DeviceRevokedView.tsx b/gui/src/renderer/components/DeviceRevokedView.tsx
index fdac4992d6..f12bbbf9ff 100644
--- a/gui/src/renderer/components/DeviceRevokedView.tsx
+++ b/gui/src/renderer/components/DeviceRevokedView.tsx
@@ -9,7 +9,7 @@ import { bigText, measurements, smallText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { calculateHeaderBarStyle, DefaultHeaderBar } from './HeaderBar';
 import ImageView from './ImageView';
-import { Container } from './Layout';
+import { Container, Footer } from './Layout';
 import { Layout } from './Layout';
 
 export const StyledHeader = styled(DefaultHeaderBar)({
@@ -33,13 +33,6 @@ export const StyledBody = styled.div({
   padding: `0 ${measurements.viewMargin}`,
 });
 
-export const StyledFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 0,
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
-});
-
 export const StyledStatusIcon = styled.div({
   alignSelf: 'center',
   width: '60px',
@@ -91,11 +84,11 @@ export function DeviceRevokedView() {
             </StyledMessage>
           </StyledBody>
 
-          <StyledFooter>
+          <Footer>
             <Button onClick={leaveRevokedDevice}>
               {messages.pgettext('device-management', 'Go to login')}
             </Button>
-          </StyledFooter>
+          </Footer>
         </StyledContainer>
       </StyledCustomScrollbars>
     </Layout>
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 1a9eb145fc..75363c4d79 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -19,7 +19,7 @@ import { hugeText, measurements, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { calculateHeaderBarStyle, DefaultHeaderBar, HeaderBarStyle } from './HeaderBar';
 import ImageView from './ImageView';
-import { Container, Layout } from './Layout';
+import { Container, Footer, Layout } from './Layout';
 import {
   RedeemVoucherContainer,
   RedeemVoucherInput,
@@ -49,13 +49,6 @@ export const StyledBody = styled.div({
   paddingBottom: 'auto',
 });
 
-export const StyledFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 0,
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
-});
-
 export const StyledTitle = styled.span(hugeText, {
   lineHeight: '38px',
   marginBottom: '8px',
@@ -106,14 +99,14 @@ export function VoucherInput() {
               <RedeemVoucherResponse />
             </StyledBody>
 
-            <StyledFooter>
+            <Footer>
               <AppButton.ButtonGroup>
                 <RedeemVoucherSubmitButton />
                 <AppButton.BlueButton onClick={navigateBack}>
                   {messages.gettext('Cancel')}
                 </AppButton.BlueButton>
               </AppButton.ButtonGroup>
-            </StyledFooter>
+            </Footer>
           </RedeemVoucherContainer>
         </StyledContainer>
       </StyledCustomScrollbars>
@@ -193,11 +186,11 @@ export function TimeAdded(props: ITimeAddedProps) {
             </StyledLabel>
           </StyledBody>
 
-          <StyledFooter>
+          <Footer>
             <AppButton.BlueButton onClick={navigateToSetupFinished}>
               {messages.gettext('Next')}
             </AppButton.BlueButton>
-          </StyledFooter>
+          </Footer>
         </StyledContainer>
       </StyledCustomScrollbars>
     </Layout>
@@ -231,7 +224,7 @@ export function SetupFinished() {
             </StyledLabel>
           </StyledBody>
 
-          <StyledFooter>
+          <Footer>
             <AppButton.ButtonGroup>
               <AriaDescriptionGroup>
                 <AriaDescribed>
@@ -254,7 +247,7 @@ export function SetupFinished() {
                 {messages.pgettext('connect-view', 'Start using the app')}
               </AppButton.GreenButton>
             </AppButton.ButtonGroup>
-          </StyledFooter>
+          </Footer>
         </StyledContainer>
       </StyledCustomScrollbars>
     </Layout>
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 9624e0cd15..2d4fcdb216 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -15,7 +15,6 @@ import {
   StyledBody,
   StyledContainer,
   StyledCustomScrollbars,
-  StyledFooter,
   StyledHeader,
   StyledMessage,
   StyledModalCellContainer,
@@ -24,7 +23,7 @@ import {
 } from './ExpiredAccountErrorViewStyles';
 import { calculateHeaderBarStyle, HeaderBarStyle } from './HeaderBar';
 import ImageView from './ImageView';
-import { Layout } from './Layout';
+import { Footer, Layout } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 
 export enum RecoveryAction {
@@ -70,7 +69,7 @@ export default class ExpiredAccountErrorView extends React.Component<
           <StyledContainer>
             <StyledBody>{this.renderContent()}</StyledBody>
 
-            <StyledFooter>
+            <Footer>
               <AppButton.ButtonGroup>
                 {this.getRecoveryAction() === RecoveryAction.disconnect && (
                   <AppButton.BlockingButton onClick={this.props.onDisconnect}>
@@ -86,7 +85,7 @@ export default class ExpiredAccountErrorView extends React.Component<
                   {messages.pgettext('connect-view', 'Redeem voucher')}
                 </AppButton.GreenButton>
               </AppButton.ButtonGroup>
-            </StyledFooter>
+            </Footer>
 
             {this.renderBlockWhenDisconnectedAlert()}
           </StyledContainer>
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index e203c7fbc1..17c02cfc3c 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -43,13 +43,6 @@ export const StyledBody = styled.div({
   padding: `0 ${measurements.viewMargin}`,
 });
 
-export const StyledFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 0,
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
-});
-
 export const StyledTitle = styled.span(hugeText, {
   lineHeight: '38px',
   marginBottom: '8px',
diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index 5d64c5e007..1bb208cd7f 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -15,10 +15,10 @@ import * as AppButton from './AppButton';
 import { AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector from './cell/Selector';
-import { measurements, normalText } from './common-styles';
+import { normalText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import { Footer, Layout, SettingsContainer } from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -32,12 +32,6 @@ const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
 
-const StyledFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
-});
-
 export default function Filter() {
   const history = useHistory();
   const { updateRelaySettings } = useAppContext();
@@ -101,13 +95,13 @@ export default function Filter() {
                 setProviders={setProviders}
               />
             </StyledNavigationScrollbars>
-            <StyledFooter>
+            <Footer>
               <AppButton.GreenButton
                 disabled={Object.values(providers).every((provider) => !provider)}
                 onClick={onApply}>
                 {messages.gettext('Apply')}
               </AppButton.GreenButton>
-            </StyledFooter>
+            </Footer>
           </NavigationContainer>
         </SettingsContainer>
       </Layout>
diff --git a/gui/src/renderer/components/Layout.tsx b/gui/src/renderer/components/Layout.tsx
index 500084e5b1..b74cfd929f 100644
--- a/gui/src/renderer/components/Layout.tsx
+++ b/gui/src/renderer/components/Layout.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
+import { measurements } from './common-styles';
 import HeaderBar from './HeaderBar';
 
 export const Header = styled(HeaderBar)({
@@ -25,3 +26,13 @@ export const Layout = styled.div({
   flex: 1,
   height: '100vh',
 });
+
+export const Footer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 0,
+  paddingTop: '18px',
+  paddingLeft: measurements.viewMargin,
+  paddingRight: measurements.viewMargin,
+  paddingBottom: measurements.viewMargin,
+});
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index 9146711bfe..cff3cdfc67 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -5,6 +5,7 @@ import * as Cell from './cell';
 import { hugeText, largeText, measurements, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 import ImageView from './ImageView';
+import { Footer } from './Layout';
 
 export const StyledAccountDropdownContainer = styled.ul({
   display: 'flex',
@@ -74,15 +75,11 @@ export const StyledTopInfo = styled.div({
   flex: 1,
 });
 
-export const StyledFooter = styled.div({}, (props: { show: boolean }) => ({
+export const StyledFooter = styled(Footer)({}, (props: { show: boolean }) => ({
   position: 'relative',
   width: '100%',
   bottom: 0,
   transform: `translateY(${props.show ? 0 : 100}%)`,
-  display: 'flex',
-  flex: '0',
-  flexDirection: 'column',
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
   backgroundColor: colors.darkBlue,
   transition: 'transform 250ms ease-in-out',
 }));
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index fc5c05312a..97631caec4 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -143,7 +143,7 @@ const ModalAlertIcon = styled.div({
   marginTop: '8px',
 });
 
-const ModalAlertButtonGroup = styled(AppButton.ButtonGroup)({
+const ModalAlertButtonGroupContainer = styled.div({
   marginTop: measurements.buttonVerticalMargin,
 });
 
@@ -269,11 +269,13 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
                 {this.props.children}
               </StyledCustomScrollbars>
 
-              <ModalAlertButtonGroup>
-                {this.props.buttons.map((button, index) => (
-                  <ModalAlertButtonContainer key={index}>{button}</ModalAlertButtonContainer>
-                ))}
-              </ModalAlertButtonGroup>
+              <ModalAlertButtonGroupContainer>
+                <AppButton.ButtonGroup>
+                  {this.props.buttons.map((button, index) => (
+                    <ModalAlertButtonContainer key={index}>{button}</ModalAlertButtonContainer>
+                  ))}
+                </AppButton.ButtonGroup>
+              </ModalAlertButtonGroupContainer>
             </StyledModalAlert>
           </ModalAlertContainer>
         </ModalBackground>
diff --git a/gui/src/renderer/components/ProblemReport.tsx b/gui/src/renderer/components/ProblemReport.tsx
index 47fb8a780c..f7f5e4cd5a 100644
--- a/gui/src/renderer/components/ProblemReport.tsx
+++ b/gui/src/renderer/components/ProblemReport.tsx
@@ -8,7 +8,7 @@ import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import { Footer, Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import {
@@ -16,7 +16,6 @@ import {
   StyledContentContainer,
   StyledEmail,
   StyledEmailInput,
-  StyledFooter,
   StyledForm,
   StyledFormEmailRow,
   StyledFormMessageRow,
@@ -342,7 +341,7 @@ export default class ProblemReport extends React.Component<
             />
           </StyledFormMessageRow>
         </StyledForm>
-        <StyledFooter>
+        <Footer>
           <AriaDescriptionGroup>
             <AriaDescribed>
               <AppButton.ButtonGroup>
@@ -367,7 +366,7 @@ export default class ProblemReport extends React.Component<
             onClick={this.onSend}>
             {messages.pgettext('support-view', 'Send')}
           </AppButton.GreenButton>
-        </StyledFooter>
+        </Footer>
       </StyledContent>
     );
   }
@@ -430,7 +429,7 @@ export default class ProblemReport extends React.Component<
             )}
           </StyledSentMessage>
         </StyledForm>
-        <StyledFooter>
+        <Footer>
           <AppButton.ButtonGroup>
             <AppButton.BlueButton onClick={this.handleEditMessage}>
               {messages.pgettext('support-view', 'Edit message')}
@@ -439,7 +438,7 @@ export default class ProblemReport extends React.Component<
               {messages.pgettext('support-view', 'Try again')}
             </AppButton.GreenButton>
           </AppButton.ButtonGroup>
-        </StyledFooter>
+        </Footer>
       </StyledContent>
     );
   }
diff --git a/gui/src/renderer/components/ProblemReportStyles.tsx b/gui/src/renderer/components/ProblemReportStyles.tsx
index 50ea2bc09b..4b32c3fd53 100644
--- a/gui/src/renderer/components/ProblemReportStyles.tsx
+++ b/gui/src/renderer/components/ProblemReportStyles.tsx
@@ -52,13 +52,6 @@ export const StyledMessageInput = styled.textarea(smallText, input, {
   fontWeight: 400,
 });
 
-export const StyledFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 0,
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
-});
-
 export const StyledStatusIcon = styled.div({
   display: 'flex',
   justifyContent: 'center',
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 8dc4264d9f..1d824d2d50 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -19,7 +19,7 @@ import { bigText, measurements } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { Brand, HeaderBarSettingsButton } from './HeaderBar';
 import ImageView from './ImageView';
-import { Header, Layout, SettingsContainer } from './Layout';
+import { Footer, Header, Layout, SettingsContainer } from './Layout';
 import List from './List';
 import { ModalAlert, ModalAlertType, ModalContainer, ModalMessage } from './Modal';
 
@@ -39,13 +39,6 @@ const StyledBody = styled.div({
   paddingBottom: 'auto',
 });
 
-const StyledFooter = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 0,
-  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
-});
-
 const StyledStatusIcon = styled.div({
   alignSelf: 'center',
   width: '60px',
@@ -136,7 +129,7 @@ export default function TooManyDevices() {
             </StyledBody>
 
             {devices !== undefined && (
-              <StyledFooter>
+              <Footer>
                 <AppButton.ButtonGroup>
                   <AppButton.GreenButton onClick={continueLogin} disabled={continueButtonDisabled}>
                     {
@@ -148,7 +141,7 @@ export default function TooManyDevices() {
                     {messages.gettext('Back')}
                   </AppButton.BlueButton>
                 </AppButton.ButtonGroup>
-              </StyledFooter>
+              </Footer>
             )}
           </StyledContainer>
         </StyledCustomScrollbars>
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 67444e3ee4..db0503cb0a 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -8,6 +8,7 @@ import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
 import { hugeText, measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
+import { Footer } from './Layout';
 import Marquee from './Marquee';
 import { MultiButton } from './MultiButton';
 import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel';
@@ -29,15 +30,6 @@ const Secured = styled(SecuredLabel)(normalText, {
   lineHeight: '22px',
 });
 
-const Footer = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 0,
-  paddingBottom: measurements.viewMargin,
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
-});
-
 const Body = styled.div({
   display: 'flex',
   flexDirection: 'column',