Switch to SettingsContainer in all settings views

16 files changed, 36 insertions, 93 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index e0596a2b79..eabde95dbb 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -13,7 +13,6 @@ import {
   AccountRowValue,
   DeviceRowValue,
   StyledBuyCreditButton,
-  StyledContainer,
   StyledRedeemVoucherButton,
   StyledSpinnerContainer,
 } from './AccountStyles';
@@ -22,7 +21,7 @@ import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
@@ -57,7 +56,7 @@ export default class Account extends React.Component<IProps, IState> {
     return (
       <BackAction action={this.props.onClose}>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationBar>
               <NavigationItems>
                 <TitleBarItem>
@@ -131,7 +130,7 @@ export default class Account extends React.Component<IProps, IState> {
                 </AppButton.RedButton>
               </AccountFooter>
             </AccountContainer>
-          </StyledContainer>
+          </SettingsContainer>
 
           {this.renderLogoutDialog()}
         </Layout>
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index cccb1c95af..5e736a1ded 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -3,14 +3,8 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import { normalText, tinyText } from './common-styles';
-import { Container } from './Layout';
 import { RedeemVoucherButton } from './RedeemVoucher';
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-  flexDirection: 'column',
-});
-
 export const AccountContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index 1798985070..86e0d2dbb3 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -18,7 +18,7 @@ import Selector from './cell/Selector';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -27,10 +27,6 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 
-const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   backgroundColor: colors.darkBlue,
   flex: 1,
@@ -81,7 +77,7 @@ export default function Filter() {
   return (
     <BackAction action={history.pop}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar alwaysDisplayBarTitle={true}>
               <NavigationItems>
@@ -113,7 +109,7 @@ export default function Filter() {
               </AppButton.GreenButton>
             </StyledFooter>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );
diff --git a/gui/src/renderer/components/InterfaceSettings.tsx b/gui/src/renderer/components/InterfaceSettings.tsx
index bc7f823e7c..4598c1058e 100644
--- a/gui/src/renderer/components/InterfaceSettings.tsx
+++ b/gui/src/renderer/components/InterfaceSettings.tsx
@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -10,7 +9,7 @@ import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -20,10 +19,6 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -42,7 +37,7 @@ export default function InterfaceSettings() {
   return (
     <BackAction action={pop}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar>
               <NavigationItems>
@@ -89,7 +84,7 @@ export default function InterfaceSettings() {
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );
diff --git a/gui/src/renderer/components/ProblemReport.tsx b/gui/src/renderer/components/ProblemReport.tsx
index d98520640a..e2c3bf4d5b 100644
--- a/gui/src/renderer/components/ProblemReport.tsx
+++ b/gui/src/renderer/components/ProblemReport.tsx
@@ -8,12 +8,11 @@ import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
 import {
   StyledBlueButton,
-  StyledContainer,
   StyledContent,
   StyledContentContainer,
   StyledEmail,
@@ -156,7 +155,7 @@ export default class ProblemReport extends React.Component<
     return (
       <BackAction action={this.props.onClose}>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationBar>
               <NavigationItems>
                 <TitleBarItem>
@@ -174,7 +173,7 @@ export default class ProblemReport extends React.Component<
 
             {this.renderNoEmailDialog()}
             {this.renderOutdateVersionWarningDialog()}
-          </StyledContainer>
+          </SettingsContainer>
         </Layout>
       </BackAction>
     );
diff --git a/gui/src/renderer/components/ProblemReportStyles.tsx b/gui/src/renderer/components/ProblemReportStyles.tsx
index bc5166297c..25457c2593 100644
--- a/gui/src/renderer/components/ProblemReportStyles.tsx
+++ b/gui/src/renderer/components/ProblemReportStyles.tsx
@@ -3,16 +3,11 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import { hugeText, smallText } from './common-styles';
-import { Container } from './Layout';
 
 export const StyledBlueButton = styled(AppButton.BlueButton)({
   marginBottom: '18px',
 });
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 export const StyledContentContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx
index f0e5ffb624..86d0c8166f 100644
--- a/gui/src/renderer/components/SelectLanguage.tsx
+++ b/gui/src/renderer/components/SelectLanguage.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { AriaInputGroup } from './AriaGroup';
 import Selector, { ISelectorItem } from './cell/Selector';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -28,10 +27,6 @@ interface IState {
   source: Array<ISelectorItem<string>>;
 }
 
-const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
@@ -62,7 +57,7 @@ export default class SelectLanguage extends React.Component<IProps, IState> {
     return (
       <BackAction action={this.props.onClose}>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
@@ -92,7 +87,7 @@ export default class SelectLanguage extends React.Component<IProps, IState> {
                 </AriaInputGroup>
               </StyledNavigationScrollbars>
             </NavigationContainer>
-          </StyledContainer>
+          </SettingsContainer>
         </Layout>
       </BackAction>
     );
diff --git a/gui/src/renderer/components/SelectLocation.tsx b/gui/src/renderer/components/SelectLocation.tsx
index 34059f3e85..4c228c9a53 100644
--- a/gui/src/renderer/components/SelectLocation.tsx
+++ b/gui/src/renderer/components/SelectLocation.tsx
@@ -14,7 +14,7 @@ import BridgeLocations, { SpecialBridgeLocationType } from './BridgeLocations';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import LocationList, {
   DisabledReason,
   LocationSelection,
@@ -31,7 +31,6 @@ import {
 import { ScopeBarItem } from './ScopeBar';
 import {
   StyledClearFilterButton,
-  StyledContainer,
   StyledContent,
   StyledFilter,
   StyledFilterIconButton,
@@ -140,7 +139,7 @@ export default class SelectLocation extends React.Component<IProps, IState> {
     return (
       <BackAction icon="close" action={this.props.onClose}>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
@@ -242,7 +241,7 @@ export default class SelectLocation extends React.Component<IProps, IState> {
                 </SpacePreAllocationView>
               </NavigationScrollbars>
             </NavigationContainer>
-          </StyledContainer>
+          </SettingsContainer>
         </Layout>
       </BackAction>
     );
diff --git a/gui/src/renderer/components/SelectLocationStyles.tsx b/gui/src/renderer/components/SelectLocationStyles.tsx
index 15211389f6..d4a0450c7c 100644
--- a/gui/src/renderer/components/SelectLocationStyles.tsx
+++ b/gui/src/renderer/components/SelectLocationStyles.tsx
@@ -2,14 +2,9 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import { tinyText } from './common-styles';
-import { Container } from './Layout';
 import { ScopeBar } from './ScopeBar';
 import SettingsHeader from './SettingsHeader';
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 export const StyledScopeBar = styled(ScopeBar)({
   marginTop: '8px',
 });
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 812deef142..56c75f0602 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -10,12 +10,11 @@ import { useSelector } from '../redux/store';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import {
   StyledCellIcon,
-  StyledContainer,
   StyledContent,
   StyledNavigationScrollbars,
   StyledOutOfTimeSubText,
@@ -42,7 +41,7 @@ export default function Support() {
   return (
     <BackAction icon="close" action={history.dismiss}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar alwaysDisplayBarTitle={!showLargeTitle}>
               <NavigationItems>
@@ -90,7 +89,7 @@ export default function Support() {
               <QuitButton />
             </StyledNavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 687b448424..612af16dab 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
 
 export const StyledOutOfTimeSubText = styled(Cell.SubText)((props: { isOutOfTime: boolean }) => ({
@@ -18,10 +17,6 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 export const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index 77af2b4905..c0fc4e07bf 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -20,7 +20,7 @@ import * as Cell from './cell';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import List from './List';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
@@ -33,7 +33,6 @@ import {
   StyledCellWarningIcon,
   StyledClearButton,
   StyledClearIcon,
-  StyledContainer,
   StyledContent,
   StyledHeaderTitle,
   StyledHeaderTitleContainer,
@@ -63,7 +62,7 @@ export default function SplitTunneling() {
       <StyledPageCover show={browsing} />
       <BackAction action={pop}>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
@@ -80,7 +79,7 @@ export default function SplitTunneling() {
                 </StyledContent>
               </StyledNavigationScrollbars>
             </NavigationContainer>
-          </StyledContainer>
+          </SettingsContainer>
         </Layout>
       </BackAction>
     </>
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 1c946d8c72..412d04181f 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -5,7 +5,6 @@ import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
-import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
 import { HeaderTitle } from './SettingsHeader';
 
@@ -21,10 +20,6 @@ export const StyledPageCover = styled.div({}, (props: { show: boolean }) => ({
   display: props.show ? 'block' : 'none',
 }));
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index ef2c82dd4e..0579b1d944 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors, links } from '../../config.json';
+import { links } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -17,7 +17,7 @@ import {
 } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -27,10 +27,6 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -44,7 +40,7 @@ export default function Support() {
   return (
     <BackAction action={pop}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar>
               <NavigationItems>
@@ -74,7 +70,7 @@ export default function Support() {
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );
diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index 03274c0b2a..47b48e4fcd 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, strings } from '../../config.json';
+import { strings } from '../../config.json';
 import { IDnsOptions, TunnelProtocol } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
@@ -21,7 +21,7 @@ import Selector, { ISelectorItem } from './cell/Selector';
 import CustomDnsSettings from './CustomDnsSettings';
 import InfoButton, { InfoIcon } from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import {
   NavigationBar,
@@ -32,10 +32,6 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -57,7 +53,7 @@ export default function VpnSettings() {
   return (
     <BackAction action={pop}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar>
               <NavigationItems>
@@ -117,7 +113,7 @@ export default function VpnSettings() {
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index d11d57e0fc..a4c7a11e08 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, strings } from '../../config.json';
+import { strings } from '../../config.json';
 import { IpVersion } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
@@ -17,7 +17,7 @@ import * as Cell from './cell';
 import Selector, { ISelectorItem } from './cell/Selector';
 import { InfoIcon } from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
-import { Container, Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import {
   NavigationBar,
@@ -39,10 +39,6 @@ function mapPortToSelectorItem(value: number): ISelectorItem<number> {
   return { label: value.toString(), value };
 }
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 export const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -68,7 +64,7 @@ export default function WireguardSettings() {
   return (
     <BackAction action={pop}>
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar>
               <NavigationItems>
@@ -115,7 +111,7 @@ export default function WireguardSettings() {
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     </BackAction>
   );