Scale down UI elements

25 files changed, 127 insertions, 100 deletions

diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index 1e70ee5637..108c1d4e96 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -17,8 +17,8 @@ export const AccountContainer = styled.div({
 });
 
 export const AccountRow = styled.div({
-  padding: '0 24px',
-  marginBottom: '24px',
+  padding: '0 22px',
+  marginBottom: '20px',
 });
 
 const AccountRowText = styled.span({
@@ -48,11 +48,11 @@ export const AccountOutOfTime = styled(AccountRowValue)({
 export const AccountFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '0 24px',
+  padding: '0 22px',
 });
 
 const buttonStyle = {
-  marginBottom: 24,
+  marginBottom: '18px',
 };
 
 export const StyledRedeemVoucherButton = styled(RedeemVoucherButton)(buttonStyle);
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index e6e38ca457..899bb5cc02 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -28,10 +28,10 @@ export default {
     flex: 0,
   }),
   advanced_settings__tunnel_protocol: Styles.createViewStyle({
-    marginBottom: 24,
+    marginBottom: 20,
   }),
   advanced_settings__wgkeys_cell: Styles.createViewStyle({
-    marginBottom: 24,
+    marginBottom: 20,
   }),
   advanced_settings__wg_no_key: Styles.createTextStyle({
     fontFamily: 'Open Sans',
@@ -40,6 +40,6 @@ export default {
     lineHeight: 20,
     color: colors.red,
     marginTop: 12,
-    paddingHorizontal: 24,
+    paddingHorizontal: 20,
   }),
 };
diff --git a/gui/src/renderer/components/AppButtonStyles.tsx b/gui/src/renderer/components/AppButtonStyles.tsx
index c0ecb4a2b4..fd77e231d8 100644
--- a/gui/src/renderer/components/AppButtonStyles.tsx
+++ b/gui/src/renderer/components/AppButtonStyles.tsx
@@ -30,5 +30,5 @@ export const StyledButtonContent = styled.div({
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'center',
-  padding: 9,
+  padding: '9px',
 });
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index 4abcb9f49e..085a18e3cc 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -15,12 +15,12 @@ export {
   StyledFooter as Footer,
   StyledFooterBoldText as FooterBoldText,
   StyledFooterText as FooterText,
-  StyledIcon as UntintedIcon,
   StyledInputFrame as InputFrame,
   StyledSectionTitle as SectionTitle,
   StyledSubText as SubText,
   StyledTintedIcon as Icon,
 } from './CellStyles';
+export { default as UntintedIcon } from './ImageView';
 
 const CellSectionContext = React.createContext<boolean>(false);
 const CellDisabledContext = React.createContext<boolean>(false);
diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx
index 1d18e41420..7c4d8c13bb 100644
--- a/gui/src/renderer/components/CellStyles.tsx
+++ b/gui/src/renderer/components/CellStyles.tsx
@@ -8,8 +8,8 @@ export const StyledContainer = styled.div({
   display: 'flex',
   backgroundColor: colors.blue,
   alignItems: 'center',
-  paddingLeft: '16px',
-  paddingRight: '12px',
+  paddingLeft: '22px',
+  paddingRight: '16px',
 });
 
 export const StyledSection = styled.div({
@@ -19,7 +19,7 @@ export const StyledSection = styled.div({
 
 export const StyledSectionTitle = styled.span(buttonText, {
   backgroundColor: colors.blue,
-  padding: '14px 24px',
+  padding: '14px 16px 14px 22px',
   marginBottom: '1px',
 });
 
@@ -30,7 +30,7 @@ interface IStyledCellButtonProps {
 
 export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({
   display: 'flex',
-  padding: '0 16px',
+  padding: '0 16px 0 22px',
   marginBottom: '1px',
   flex: 1,
   alignItems: 'center',
@@ -48,7 +48,7 @@ export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps
 }));
 
 export const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({
-  margin: '14px 0 14px 8px',
+  margin: '14px 0',
   flex: 1,
   color: props.disabled ? colors.white40 : colors.white,
   textAlign: 'left',
@@ -60,13 +60,10 @@ export const StyledSubText = styled.span(smallText, {
   flex: -1,
   textAlign: 'right',
   marginLeft: '8px',
+  marginRight: '8px',
 });
 
-export const StyledIcon = styled(ImageView)({
-  marginLeft: '8px',
-});
-
-export const StyledTintedIcon = styled(StyledIcon).attrs((props: IImageViewProps) => ({
+export const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
   tintColor: props.tintColor ?? colors.white60,
   tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
 }))((props: IImageViewProps) => ({
@@ -76,7 +73,7 @@ export const StyledTintedIcon = styled(StyledIcon).attrs((props: IImageViewProps
 }));
 
 export const StyledFooter = styled.div({
-  padding: '8px 24px 24px',
+  padding: '6px 22px 20px',
 });
 
 export const StyledFooterText = styled.span(smallText);
@@ -89,13 +86,13 @@ export const StyledInputFrame = styled.div({
   flexGrow: 0,
   backgroundColor: 'rgba(255,255,255,0.1)',
   borderRadius: '4px',
-  padding: '4px',
+  padding: '4px 8px',
 });
 
 const inputTextStyles: React.CSSProperties = {
   ...mediumText,
   fontWeight: 600,
-  height: '26px',
+  height: '28px',
   textAlign: 'right',
   padding: '0px',
 };
diff --git a/gui/src/renderer/components/ChevronButton.tsx b/gui/src/renderer/components/ChevronButton.tsx
index aed6bacaec..0c08408dff 100644
--- a/gui/src/renderer/components/ChevronButton.tsx
+++ b/gui/src/renderer/components/ChevronButton.tsx
@@ -13,8 +13,6 @@ const Icon = styled(Cell.Icon)({
   flex: 0,
   alignSelf: 'stretch',
   justifyContent: 'center',
-  paddingRight: '16px',
-  paddingLeft: '16px',
 });
 
 export default function ChevronButton(props: IProps) {
diff --git a/gui/src/renderer/components/CityRow.tsx b/gui/src/renderer/components/CityRow.tsx
index 65f8e1075c..91b9faa31e 100644
--- a/gui/src/renderer/components/CityRow.tsx
+++ b/gui/src/renderer/components/CityRow.tsx
@@ -25,11 +25,15 @@ interface IProps {
 }
 
 const Button = styled(Cell.CellButton)((props: { selected: boolean }) => ({
-  paddingRight: 0,
-  paddingLeft: 32,
+  paddingRight: '16px',
+  paddingLeft: '34px',
   backgroundColor: !props.selected ? colors.blue40 : undefined,
 }));
 
+const StyledChevronButton = styled(ChevronButton)({
+  marginLeft: '18px',
+});
+
 export default class CityRow extends Component<IProps> {
   private buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -83,7 +87,9 @@ export default class CityRow extends Component<IProps> {
           />
           <Cell.Label>{this.props.name}</Cell.Label>
 
-          {hasChildren && <ChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />}
+          {hasChildren && (
+            <StyledChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />
+          )}
         </Button>
 
         {hasChildren && (
diff --git a/gui/src/renderer/components/CountryRow.tsx b/gui/src/renderer/components/CountryRow.tsx
index 35a082a27a..7d07f5776e 100644
--- a/gui/src/renderer/components/CountryRow.tsx
+++ b/gui/src/renderer/components/CountryRow.tsx
@@ -31,8 +31,13 @@ const styles = {
 };
 
 const Button = styled(Cell.CellButton)({
-  paddingRight: 0,
-  paddingLeft: 16,
+  paddingRight: '16px',
+  // The actual padding is 22px except for the tick icon which has 18.
+  paddingLeft: '18px',
+});
+
+const StyledChevronButton = styled(ChevronButton)({
+  marginLeft: '18px',
 });
 
 export default class CountryRow extends Component<IProps> {
@@ -94,7 +99,7 @@ export default class CountryRow extends Component<IProps> {
           />
           <Cell.Label>{this.props.name}</Cell.Label>
           {hasChildren ? (
-            <ChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />
+            <StyledChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />
           ) : null}
         </Button>
 
diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index 4c44bb7fd8..8be0e8b5b8 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -37,7 +37,7 @@ const styles = {
     fontSize: 14,
     lineHeight: 20,
     color: colors.white40,
-    marginHorizontal: 20,
+    marginHorizontal: 22,
     textAlign: 'center',
   }),
   email: Styles.createTextStyle({
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index a8049095c3..7a719729dd 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -14,11 +14,13 @@ export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
 });
 
 export const ModalCellContainer = styled(Cell.Container)({
-  marginTop: '16px',
+  marginTop: '18px',
+  paddingLeft: '12px',
+  paddingRight: '12px',
 });
 
 const buttonStyle = {
-  marginBottom: 24,
+  marginBottom: '18px',
 };
 
 export const StyledBuyCreditButton = styled(AppButton.GreenButton)(buttonStyle);
@@ -31,7 +33,7 @@ export default {
   },
   container: Styles.createViewStyle({
     flex: 1,
-    paddingTop: 24,
+    paddingTop: 22,
     // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well
     // without the '@ts-ignore' when moving away from ReactXP.
     // @ts-ignore
@@ -39,19 +41,20 @@ export default {
   }),
   body: Styles.createViewStyle({
     flex: 1,
-    paddingHorizontal: 24,
+    paddingHorizontal: 22,
   }),
   footer: Styles.createViewStyle({
     flex: 0,
-    paddingVertical: 24,
-    paddingHorizontal: 24,
+    paddingTop: 18,
+    paddingBottom: 22,
+    paddingHorizontal: 22,
     backgroundColor: colors.darkBlue,
   }),
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
-    fontSize: 32,
+    fontSize: 30,
     fontWeight: '900',
-    lineHeight: 40,
+    lineHeight: 38,
     color: colors.white,
     marginBottom: 8,
   }),
@@ -61,7 +64,7 @@ export default {
     lineHeight: 20,
     fontWeight: '600',
     color: colors.white,
-    marginBottom: 24,
+    marginBottom: 20,
   }),
   statusIcon: Styles.createViewStyle({
     alignSelf: 'center',
diff --git a/gui/src/renderer/components/Launch.tsx b/gui/src/renderer/components/Launch.tsx
index 0cb17cc2fb..62c561c7b8 100644
--- a/gui/src/renderer/components/Launch.tsx
+++ b/gui/src/renderer/components/Launch.tsx
@@ -27,6 +27,7 @@ const styles = {
     fontFamily: 'Open Sans',
     fontSize: 14,
     lineHeight: 20,
+    marginHorizontal: 22,
     color: colors.white40,
     textAlign: 'center',
   }),
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index 0e65acfa4f..2cd9a8debb 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -50,10 +50,9 @@ export const AccountDropdownItemButtonLabel = styled(Cell.Label)({
 export default {
   login_footer: Styles.createViewStyle({
     flex: 0,
-    paddingTop: 16,
-    paddingBottom: 24,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingTop: 18,
+    paddingBottom: 22,
+    paddingHorizontal: 22,
     backgroundColor: colors.darkBlue,
   }),
   status_icon: Styles.createViewStyle({
@@ -68,8 +67,8 @@ export default {
     overflow: 'visible',
     paddingTop: 0,
     paddingBottom: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingLeft: 22,
+    paddingRight: 22,
     marginTop: 83,
     marginBottom: 0,
     marginRight: 0,
@@ -121,9 +120,9 @@ export default {
   // TODO: Use bigText in comonStyles when converted from ReactXP
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
-    fontSize: 32,
+    fontSize: 30,
     fontWeight: '900',
-    lineHeight: 44,
+    lineHeight: 40,
     color: colors.white,
     marginBottom: 7,
     flex: 0,
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index a9fffbed9a..ae46c414fc 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -77,7 +77,7 @@ const ModalAlertIcon = styled.div({
 const ModalAlertButtonContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  marginTop: '16px',
+  marginTop: '18px',
 });
 
 interface IModalAlertProps {
@@ -158,7 +158,7 @@ export class ModalAlert extends React.Component<IModalAlertProps> {
 
 export const ModalMessage = styled.span({
   fontFamily: 'Open Sans',
-  fontSize: '14px',
+  fontSize: '13px',
   fontWeight: 500,
   lineHeight: '20px',
   color: colors.white80,
diff --git a/gui/src/renderer/components/RelayRow.tsx b/gui/src/renderer/components/RelayRow.tsx
index f7f3998ab5..ff1614d846 100644
--- a/gui/src/renderer/components/RelayRow.tsx
+++ b/gui/src/renderer/components/RelayRow.tsx
@@ -16,7 +16,7 @@ interface IProps {
 
 const Button = styled(Cell.CellButton)((props: { selected: boolean }) => ({
   paddingRight: 0,
-  paddingLeft: 48,
+  paddingLeft: '50px',
   backgroundColor: !props.selected ? colors.blue20 : undefined,
 }));
 
diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx
index 26c7f616a1..4b6b5fea45 100644
--- a/gui/src/renderer/components/RelayStatusIndicator.tsx
+++ b/gui/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from 'styled-components';
 import { Component, Styles, View } from 'reactxp';
 import { colors } from '../../config.json';
 import * as Cell from './Cell';
@@ -8,8 +9,8 @@ const styles = {
     width: 16,
     height: 16,
     borderRadius: 8,
-    marginLeft: 12,
-    marginRight: 4,
+    marginLeft: 4,
+    marginRight: 12,
   }),
   inactive: Styles.createViewStyle({
     backgroundColor: colors.red95,
@@ -19,6 +20,10 @@ const styles = {
   }),
 };
 
+const TickIcon = styled(Cell.Icon)({
+  marginRight: '8px',
+});
+
 interface IProps {
   active: boolean;
   selected: boolean;
@@ -27,7 +32,7 @@ interface IProps {
 export default class RelayStatusIndicator extends Component<IProps> {
   public render() {
     return this.props.selected ? (
-      <Cell.Icon tintColor={colors.white} source="icon-tick" height={24} width={24} />
+      <TickIcon tintColor={colors.white} source="icon-tick" height={24} width={24} />
     ) : (
       <View style={[styles.relayStatus, this.props.active ? styles.active : styles.inactive]} />
     );
diff --git a/gui/src/renderer/components/Selector.tsx b/gui/src/renderer/components/Selector.tsx
index 57f2323cef..2ba66ece29 100644
--- a/gui/src/renderer/components/Selector.tsx
+++ b/gui/src/renderer/components/Selector.tsx
@@ -19,7 +19,7 @@ interface ISelectorProps<T> {
 }
 
 const Section = styled(Cell.Section)({
-  marginBottom: 24,
+  marginBottom: 20,
 });
 
 export default class Selector<T> extends React.Component<ISelectorProps<T>> {
@@ -55,6 +55,7 @@ export default class Selector<T> extends React.Component<ISelectorProps<T>> {
 
 const StyledCellIcon = styled(Cell.Icon)((props: { visible: boolean }) => ({
   opacity: props.visible ? 1 : 0,
+  marginRight: '8px',
 }));
 
 interface ISelectorCellProps<T> {
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index f01bfd7036..53bc8aedc8 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -15,7 +15,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import styles, { OutOfTimeSubText } from './SettingsStyles';
+import styles, { CellIcon, OutOfTimeSubText } from './SettingsStyles';
 
 import { LoginState } from '../redux/account/reducers';
 
@@ -168,7 +168,7 @@ export default class Settings extends Component<IProps> {
         ? inconsistentVersionMessage
         : updateAvailableMessage;
 
-      icon = <Cell.UntintedIcon source="icon-alert" tintColor={colors.red} />;
+      icon = <CellIcon source="icon-alert" tintColor={colors.red} />;
       footer = (
         <View style={styles.cellFooter}>
           <Text style={styles.cellFooterLabel}>{message}</Text>
@@ -215,7 +215,7 @@ export default class Settings extends Component<IProps> {
         </Cell.CellButton>
 
         <Cell.CellButton onClick={this.props.onViewSelectLanguage}>
-          <Cell.UntintedIcon width={24} height={24} source="icon-language" />
+          <CellIcon width={24} height={24} source="icon-language" />
           <Cell.Label>
             {
               // TRANSLATORS: Navigation button to the 'Language' settings view
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index 2be0750c9e..4cbd1c2077 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -6,18 +6,18 @@ const styles = {
   header: {
     default: Styles.createViewStyle({
       flex: 0,
-      paddingTop: 4,
-      paddingRight: 24,
-      paddingLeft: 24,
-      paddingBottom: 24,
+      paddingTop: 2,
+      paddingRight: 20,
+      paddingLeft: 20,
+      paddingBottom: 20,
     }),
   },
   // TODO: Use bigText in comonStyles when converted from ReactXP
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
-    fontSize: 32,
+    fontSize: 30,
     fontWeight: '900',
-    lineHeight: 36,
+    lineHeight: 34,
     color: colors.white,
   }),
   // TODO: Use smallText in comonStyles when converted from ReactXP
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 3523457210..806afb45ef 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -7,6 +7,10 @@ export const OutOfTimeSubText = styled(Cell.SubText)((props: { isOutOfTime: bool
   color: props.isOutOfTime ? colors.red : undefined,
 }));
 
+export const CellIcon = styled(Cell.UntintedIcon)({
+  marginRight: '8px',
+});
+
 export default {
   settings: Styles.createViewStyle({
     backgroundColor: colors.darkBlue,
@@ -27,20 +31,18 @@ export default {
     flex: 1,
   },
   cellSpacer: Styles.createViewStyle({
-    height: 24,
+    height: 20,
     flex: 0,
   }),
   cellFooter: Styles.createViewStyle({
-    paddingTop: 8,
-    paddingRight: 24,
-    paddingBottom: 24,
-    paddingLeft: 24,
+    paddingTop: 6,
+    paddingHorizontal: 22,
+    paddingBottom: 20,
   }),
   quitButtonFooter: Styles.createViewStyle({
-    paddingTop: 24,
-    paddingBottom: 19,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingTop: 20,
+    paddingBottom: 22,
+    paddingHorizontal: 22,
   }),
   cellFooterLabel: Styles.createTextStyle({
     fontFamily: 'Open Sans',
diff --git a/gui/src/renderer/components/SupportStyles.tsx b/gui/src/renderer/components/SupportStyles.tsx
index 7190d8d8db..eaee5770e7 100644
--- a/gui/src/renderer/components/SupportStyles.tsx
+++ b/gui/src/renderer/components/SupportStyles.tsx
@@ -4,7 +4,7 @@ import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 
 export const StyledBlueButton = styled(AppButton.BlueButton)({
-  marginBottom: 16,
+  marginBottom: 18,
 });
 
 export default {
@@ -46,10 +46,9 @@ export default {
     overflow: 'hidden',
   }),
   support__footer: Styles.createViewStyle({
-    paddingTop: 16,
-    paddingBottom: 16,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingTop: 18,
+    paddingBottom: 22,
+    paddingHorizontal: 22,
     flexDirection: 'column',
     flex: 0,
   }),
@@ -107,9 +106,9 @@ export default {
   support__send_status: Styles.createTextStyle({
     // TODO: Use bigText in comonStyles when converted from ReactXP
     fontFamily: 'DINPro',
-    fontSize: 34,
+    fontSize: 30,
     fontWeight: '900',
-    lineHeight: 38,
+    lineHeight: 34,
     color: colors.white,
     marginBottom: 4,
   }),
diff --git a/gui/src/renderer/components/Switch.tsx b/gui/src/renderer/components/Switch.tsx
index 5279181cda..ff56843e79 100644
--- a/gui/src/renderer/components/Switch.tsx
+++ b/gui/src/renderer/components/Switch.tsx
@@ -18,8 +18,8 @@ const PAN_DISTANCE = 10;
 
 const SwitchContainer = styled.div({}, (props: { disabled: boolean }) => ({
   position: 'relative',
-  width: '52px',
-  height: '32px',
+  width: '48px',
+  height: '30px',
   borderColor: props.disabled ? colors.white20 : colors.white80,
   borderWidth: '2px',
   borderStyle: 'solid',
@@ -35,10 +35,10 @@ const Knob = styled.div({}, (props: { isOn: boolean; isPressed: boolean; disable
 
   return {
     position: 'absolute',
-    height: '24px',
-    borderRadius: '12px',
+    height: '22px',
+    borderRadius: '11px',
     transition: 'all 200ms linear',
-    width: props.isPressed ? '28px' : '24px',
+    width: props.isPressed ? '26px' : '22px',
     backgroundColor,
     // When enabled the button should be placed all the way to the right (100%) minus padding (2px).
     left: props.isOn ? 'calc(100% - 2px)' : '2px',
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 15b7755f4b..04236750ee 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -23,7 +23,7 @@ interface ITunnelControlProps {
 }
 
 const SwitchLocationButton = styled(AppButton.TransparentButton)({
-  marginBottom: 16,
+  marginBottom: '18px',
 });
 
 const Secured = styled(SecuredLabel)({
@@ -38,15 +38,15 @@ const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  paddingBottom: '16px',
-  paddingLeft: '24px',
-  paddingRight: '24px',
+  paddingBottom: '22px',
+  paddingLeft: '22px',
+  paddingRight: '22px',
 });
 
 const Body = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '0 24px',
+  padding: '0 22px',
   marginTop: '176px',
   flex: 1,
 });
@@ -68,6 +68,10 @@ const StyledMarquee = styled(Marquee)({
   overflow: 'hidden',
 });
 
+const SelectedLocationChevron = styled(AppButton.Icon)({
+  margin: '0 4px',
+});
+
 export default class TunnelControl extends React.Component<ITunnelControlProps> {
   public render() {
     const SwitchLocation = () => {
@@ -81,7 +85,7 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
     const SelectedLocation = () => (
       <SwitchLocationButton onClick={this.props.onSelectLocation}>
         <AppButton.Label>{this.props.selectedRelayName}</AppButton.Label>
-        <AppButton.Icon height={12} width={7} source="icon-chevron" />
+        <SelectedLocationChevron height={12} width={7} source="icon-chevron" />
       </SwitchLocationButton>
     );
 
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index c2df53eeaa..0f8d3407f4 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -121,8 +121,8 @@ export default class WireguardKeys extends Component<IProps, IState> {
                       )}
                     </View>
 
-                    <View style={styles.wgkeys__row}>{this.getGenerateButton()}</View>
-                    <View style={styles.wgkeys__row}>
+                    <View style={styles.wgkeys__button_row}>{this.getGenerateButton()}</View>
+                    <View style={styles.wgkeys__button_row}>
                       <AppButton.BlueButton
                         disabled={this.isVerifyButtonDisabled()}
                         onClick={this.handleVerifyKeyPress}>
@@ -131,7 +131,7 @@ export default class WireguardKeys extends Component<IProps, IState> {
                         </AppButton.Label>
                       </AppButton.BlueButton>
                     </View>
-                    <View style={styles.wgkeys__row}>
+                    <View style={[styles.wgkeys__button_row, styles.wgkeys__last_button]}>
                       <AppButton.BlockingButton
                         disabled={this.props.isOffline}
                         onClick={this.props.onVisitWebsiteKey}>
diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx
index c9f1a43ba4..b5b18cc6cd 100644
--- a/gui/src/renderer/components/WireguardKeysStyles.tsx
+++ b/gui/src/renderer/components/WireguardKeysStyles.tsx
@@ -25,8 +25,15 @@ export default {
   }),
   wgkeys__row: Styles.createViewStyle({
     paddingVertical: 0,
-    paddingHorizontal: 24,
-    marginBottom: 24,
+    paddingHorizontal: 22,
+    marginBottom: 20,
+  }),
+  wgkeys__button_row: Styles.createViewStyle({
+    paddingHorizontal: 22,
+    marginBottom: 18,
+  }),
+  wgkeys__last_button: Styles.createViewStyle({
+    marginBottom: 22,
   }),
   wgkeys__row_label: Styles.createTextStyle({
     flex: 1,
diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts
index 4a1fbb516b..d08ad4f863 100644
--- a/gui/src/renderer/components/common-styles.ts
+++ b/gui/src/renderer/components/common-styles.ts
@@ -10,8 +10,8 @@ export const smallText = {
 
 export const mediumText = {
   fontFamily: 'Open Sans',
-  fontSize: '20px',
-  lineHeight: '26px',
+  fontSize: '18px',
+  lineHeight: '24px',
 };
 
 export const buttonText = {
@@ -23,8 +23,8 @@ export const buttonText = {
 
 export const bigText = {
   fontFamily: 'DINPro',
-  fontSize: '32px',
+  fontSize: '30px',
   fontWeight: 900,
-  lineHeight: '36px',
+  lineHeight: '34px',
   color: colors.white,
 };