Move OpenVPN and Wireguard settings styles from AdvancedSettingsStyles

6 files changed, 60 insertions, 45 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index df2c824358..4cd2a567d0 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -6,8 +6,6 @@ import { messages } from '../../shared/gettext';
 import { IpAddress } from '../lib/ip';
 import { WgKeyState } from '../redux/settings/reducers';
 import {
-  StyledButtonCellGroup,
-  StyledContainer,
   StyledNavigationScrollbars,
   StyledNoWireguardKeyError,
   StyledNoWireguardKeyErrorContainer,
@@ -23,7 +21,7 @@ import * as AppButton from './AppButton';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import CellList, { ICellListItem } from './cell/List';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType, ModalContainer, ModalMessage } from './Modal';
 import {
   BackBarItem,
@@ -80,7 +78,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
     return (
       <ModalContainer>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
@@ -159,7 +157,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                 </AriaInputGroup>
 
                 {(window.env.platform === 'linux' || window.env.platform === 'win32') && (
-                  <StyledButtonCellGroup>
+                  <Cell.CellButtonGroup>
                     <Cell.CellButton onClick={this.props.onViewSplitTunneling}>
                       <Cell.Label>
                         {window.env.platform === 'win32' && <StyledBetaLabel />}
@@ -167,7 +165,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                       </Cell.Label>
                       <Cell.Icon height={12} width={7} source="icon-chevron" />
                     </Cell.CellButton>
-                  </StyledButtonCellGroup>
+                  </Cell.CellButtonGroup>
                 )}
 
                 <AriaInputGroup>
@@ -193,7 +191,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                   </StyledTunnelProtocolContainer>
                 </AriaInputGroup>
 
-                <StyledButtonCellGroup>
+                <Cell.CellButtonGroup>
                   <Cell.CellButton
                     onClick={this.props.onViewWireguardSettings}
                     disabled={this.props.tunnelProtocol === 'openvpn'}>
@@ -211,7 +209,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                     </Cell.Label>
                     <Cell.Icon height={12} width={7} source="icon-chevron" />
                   </Cell.CellButton>
-                </StyledButtonCellGroup>
+                </Cell.CellButtonGroup>
 
                 <StyledCustomDnsSwitchContainer disabled={!this.customDnsAvailable()}>
                   <AriaInputGroup>
@@ -283,7 +281,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                 </StyledCustomDnsFooter>
               </StyledNavigationScrollbars>
             </NavigationContainer>
-          </StyledContainer>
+          </SettingsContainer>
         </Layout>
 
         {this.state.showConfirmBlockWhenDisconnectedAlert &&
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index 7190a166b7..4fc08160c2 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -2,14 +2,9 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import BetaLabel from './BetaLabel';
 import * as Cell from './cell';
-import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
 import Selector from './cell/Selector';
 
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
 export const StyledInputFrame = styled(Cell.InputFrame)({
   flex: 0,
 });
@@ -30,13 +25,6 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
 
-export const StyledButtonCellGroup = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '20px',
-});
-
 export const StyledNoWireguardKeyErrorContainer = styled(Cell.Footer)({
   paddingBottom: 0,
 });
diff --git a/gui/src/renderer/components/Layout.tsx b/gui/src/renderer/components/Layout.tsx
index 8caf983b40..f868c7671a 100644
--- a/gui/src/renderer/components/Layout.tsx
+++ b/gui/src/renderer/components/Layout.tsx
@@ -14,6 +14,10 @@ export const Container = styled.div({
   overflow: 'hidden',
 });
 
+export const SettingsContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
 export const Layout = styled.div({
   display: 'flex',
   flexDirection: 'column',
diff --git a/gui/src/renderer/components/OpenVPNSettings.tsx b/gui/src/renderer/components/OpenVPNSettings.tsx
index d3ce2ff507..72e672b681 100644
--- a/gui/src/renderer/components/OpenVPNSettings.tsx
+++ b/gui/src/renderer/components/OpenVPNSettings.tsx
@@ -1,22 +1,18 @@
 import * as React from 'react';
 import { sprintf } from 'sprintf-js';
+import styled from 'styled-components';
 import { BridgeState, RelayProtocol } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
-import {
-  StyledContainer,
-  StyledInputFrame,
-  StyledNavigationScrollbars,
-  StyledSelectorContainer,
-} from './AdvancedSettingsStyles';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import { ModalContainer } from './Modal';
 import {
   BackBarItem,
   NavigationBar,
   NavigationContainer,
   NavigationItems,
+  NavigationScrollbars,
   TitleBarItem,
 } from './NavigationBar';
 import Selector, { ISelectorItem } from './cell/Selector';
@@ -35,6 +31,18 @@ function mapPortToSelectorItem(value: number): ISelectorItem<number> {
   return { label: value.toString(), value };
 }
 
+export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
+  flex: 1,
+});
+
+export const StyledSelectorContainer = styled.div({
+  flex: 0,
+});
+
+export const StyledInputFrame = styled(Cell.InputFrame)({
+  flex: 0,
+});
+
 interface IProps {
   openvpn: {
     protocol?: RelayProtocol;
@@ -101,7 +109,7 @@ export default class OpenVpnSettings extends React.Component<IProps> {
     return (
       <ModalContainer>
         <Layout>
-          <StyledContainer>
+          <SettingsContainer>
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
@@ -212,7 +220,7 @@ export default class OpenVpnSettings extends React.Component<IProps> {
                 </AriaInputGroup>
               </StyledNavigationScrollbars>
             </NavigationContainer>
-          </StyledContainer>
+          </SettingsContainer>
         </Layout>
       </ModalContainer>
     );
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 91e55b2c49..f60ac9fb53 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -1,25 +1,19 @@
 import * as React from 'react';
 import { sprintf } from 'sprintf-js';
+import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
-import {
-  StyledButtonCellGroup,
-  StyledContainer,
-  StyledInputFrame,
-  StyledNavigationScrollbars,
-  StyledSelectorContainer,
-  StyledSelectorForFooter,
-} from './AdvancedSettingsStyles';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
-import { Layout } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import {
   BackBarItem,
   NavigationBar,
   NavigationContainer,
   NavigationItems,
+  NavigationScrollbars,
   TitleBarItem,
 } from './NavigationBar';
-import { ISelectorItem } from './cell/Selector';
+import Selector, { ISelectorItem } from './cell/Selector';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const MIN_WIREGUARD_MTU_VALUE = 1280;
@@ -32,6 +26,22 @@ function mapPortToSelectorItem(value: number): ISelectorItem<number> {
   return { label: value.toString(), value };
 }
 
+export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
+  flex: 1,
+});
+
+export const StyledSelectorContainer = styled.div({
+  flex: 0,
+});
+
+export const StyledSelectorForFooter = (styled(Selector)({
+  marginBottom: 0,
+}) as unknown) as new <T>() => Selector<T>;
+
+export const StyledInputFrame = styled(Cell.InputFrame)({
+  flex: 0,
+});
+
 interface IProps {
   wireguard: { port?: number };
   wireguardMtu?: number;
@@ -60,7 +70,7 @@ export default class WireguardSettings extends React.Component<IProps> {
   public render() {
     return (
       <Layout>
-        <StyledContainer>
+        <SettingsContainer>
           <NavigationContainer>
             <NavigationBar>
               <NavigationItems>
@@ -111,14 +121,14 @@ export default class WireguardSettings extends React.Component<IProps> {
                 </Cell.Footer>
               </AriaInputGroup>
 
-              <StyledButtonCellGroup>
+              <Cell.CellButtonGroup>
                 <Cell.CellButton onClick={this.props.onViewWireguardKeys}>
                   <Cell.Label>
                     {messages.pgettext('wireguard-settings-view', 'WireGuard key')}
                   </Cell.Label>
                   <Cell.Icon height={12} width={7} source="icon-chevron" />
                 </Cell.CellButton>
-              </StyledButtonCellGroup>
+              </Cell.CellButtonGroup>
 
               <AriaInputGroup>
                 <Cell.Container>
@@ -165,7 +175,7 @@ export default class WireguardSettings extends React.Component<IProps> {
               </AriaInputGroup>
             </StyledNavigationScrollbars>
           </NavigationContainer>
-        </StyledContainer>
+        </SettingsContainer>
       </Layout>
     );
   }
diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index 68f1dc1f32..993ac8bf23 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -9,7 +9,7 @@ interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement>
   containedInSection: boolean;
 }
 
-export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
+const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
   const backgroundColor = props.selected
     ? colors.green
     : props.containedInSection
@@ -47,3 +47,10 @@ export const CellButton = styled(
     );
   }),
 )({});
+
+export const CellButtonGroup = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: '20px',
+});