Use common definition for view margin

17 files changed, 47 insertions, 44 deletions

diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index 5e736a1ded..1fd6b72e2e 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -2,14 +2,14 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
-import { normalText, tinyText } from './common-styles';
+import { measurements, normalText, tinyText } from './common-styles';
 import { RedeemVoucherButton } from './RedeemVoucher';
 
 export const AccountContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  paddingBottom: '22px',
+  paddingBottom: measurements.viewMargin,
 });
 
 export const AccountRows = styled.div({
@@ -19,7 +19,7 @@ export const AccountRows = styled.div({
 });
 
 export const AccountRow = styled.div({
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
   marginBottom: '20px',
 });
 
@@ -57,7 +57,7 @@ export const StyledSpinnerContainer = styled.div({
 export const AccountFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
 });
 
 const buttonStyle = {
diff --git a/gui/src/renderer/components/DeviceRevokedView.tsx b/gui/src/renderer/components/DeviceRevokedView.tsx
index 74d4c0fd53..0302e15026 100644
--- a/gui/src/renderer/components/DeviceRevokedView.tsx
+++ b/gui/src/renderer/components/DeviceRevokedView.tsx
@@ -5,7 +5,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
-import { bigText, smallText } from './common-styles';
+import { bigText, measurements, smallText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { calculateHeaderBarStyle, DefaultHeaderBar } from './HeaderBar';
 import ImageView from './ImageView';
@@ -30,14 +30,14 @@ export const StyledBody = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
 });
 
 export const StyledFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 export const StyledStatusIcon = styled.div({
diff --git a/gui/src/renderer/components/ErrorView.tsx b/gui/src/renderer/components/ErrorView.tsx
index 527b982860..12ca510396 100644
--- a/gui/src/renderer/components/ErrorView.tsx
+++ b/gui/src/renderer/components/ErrorView.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
+import { measurements } from './common-styles';
 import { HeaderBarSettingsButton } from './HeaderBar';
 import ImageView from './ImageView';
 import { Container, Header, Layout } from './Layout';
@@ -26,7 +27,7 @@ const Subtitle = styled.span({
   fontFamily: 'Open Sans',
   fontSize: '14px',
   lineHeight: '20px',
-  marginHorizontal: '22px',
+  margin: `0 ${measurements.viewMargin}`,
   color: colors.white40,
   textAlign: 'center',
 });
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 276af92e26..1a9eb145fc 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -15,7 +15,7 @@ import account from '../redux/account/actions';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
-import { hugeText, tinyText } from './common-styles';
+import { hugeText, measurements, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { calculateHeaderBarStyle, DefaultHeaderBar, HeaderBarStyle } from './HeaderBar';
 import ImageView from './ImageView';
@@ -45,7 +45,7 @@ export const StyledBody = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
   paddingBottom: 'auto',
 });
 
@@ -53,7 +53,7 @@ export const StyledFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 export const StyledTitle = styled.span(hugeText, {
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index c1edce3599..37c2ec8bf3 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -4,7 +4,7 @@ import { colors } from '../../config.json';
 import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { hugeText, tinyText } from './common-styles';
+import { hugeText, measurements, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { DefaultHeaderBar } from './HeaderBar';
 import { Container } from './Layout';
@@ -48,14 +48,14 @@ export const StyledBody = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
 });
 
 export const StyledFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 export const StyledTitle = styled.span(hugeText, {
diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index 710e7dd2dc..5d64c5e007 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -15,7 +15,7 @@ import * as AppButton from './AppButton';
 import { AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector from './cell/Selector';
-import { normalText } from './common-styles';
+import { measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
@@ -35,7 +35,7 @@ const StyledNavigationScrollbars = styled(NavigationScrollbars)({
 const StyledFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 export default function Filter() {
diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx
index 630ae68531..9172f8bcd3 100644
--- a/gui/src/renderer/components/LocationRow.tsx
+++ b/gui/src/renderer/components/LocationRow.tsx
@@ -8,7 +8,7 @@ import { messages } from '../../shared/gettext';
 import Accordion from './Accordion';
 import * as Cell from './cell';
 import ChevronButton from './ChevronButton';
-import { normalText } from './common-styles';
+import { measurements, normalText } from './common-styles';
 import RelayStatusIndicator from './RelayStatusIndicator';
 
 interface IButtonColorProps {
@@ -73,7 +73,7 @@ export const StyledLocationRowIcon = styled.button(buttonColor, {
   position: 'relative',
   alignSelf: 'stretch',
   paddingLeft: '22px',
-  paddingRight: '22px',
+  paddingRight: measurements.viewMargin,
 
   '&::before': {
     content: '""',
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index dcfc85c6c3..9146711bfe 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import * as Cell from './cell';
-import { hugeText, largeText, smallText, tinyText } from './common-styles';
+import { hugeText, largeText, measurements, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 import ImageView from './ImageView';
 
@@ -82,7 +82,7 @@ export const StyledFooter = styled.div({}, (props: { show: boolean }) => ({
   display: 'flex',
   flex: '0',
   flexDirection: 'column',
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
   backgroundColor: colors.darkBlue,
   transition: 'transform 250ms ease-in-out',
 }));
@@ -102,7 +102,7 @@ export const StyledLoginForm = styled.div({
   flex: '0 1 225px',
   flexDirection: 'column',
   overflow: 'visible',
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
 });
 
 interface IStyledAccountInputGroupProps {
diff --git a/gui/src/renderer/components/ProblemReportStyles.tsx b/gui/src/renderer/components/ProblemReportStyles.tsx
index 25457c2593..0ce3631e43 100644
--- a/gui/src/renderer/components/ProblemReportStyles.tsx
+++ b/gui/src/renderer/components/ProblemReportStyles.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
-import { hugeText, smallText } from './common-styles';
+import { hugeText, measurements, smallText } from './common-styles';
 
 export const StyledBlueButton = styled(AppButton.BlueButton)({
   marginBottom: '18px',
@@ -25,7 +25,7 @@ export const StyledForm = styled.div({
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
-  margin: '0 22px',
+  margin: `0 ${measurements.viewMargin}`,
 });
 
 export const StyledFormEmailRow = styled.div({
@@ -61,7 +61,7 @@ export const StyledFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 export const StyledStatusIcon = styled.div({
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index 01e62e50d0..0b0ff59f71 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
-import { hugeText, tinyText } from './common-styles';
+import { hugeText, measurements, tinyText } from './common-styles';
 
 export const Container = styled.div({
   flex: 0,
-  padding: '2px 22px 20px',
+  padding: `2px ${measurements.viewMargin} 20px`,
 });
 
 export const ContentWrapper = styled.div({
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 612af16dab..90c5a6cb19 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
+import { measurements } from './common-styles';
 import { NavigationScrollbars } from './NavigationBar';
 
 export const StyledOutOfTimeSubText = styled(Cell.SubText)((props: { isOutOfTime: boolean }) => ({
@@ -30,5 +31,5 @@ export const StyledSettingsContent = styled.div({
 });
 
 export const StyledQuitButton = styled(AppButton.RedButton)({
-  margin: '20px 22px 22px',
+  margin: `20px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 412d04181f..886d2d37b5 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { normalText } from './common-styles';
+import { measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { NavigationScrollbars } from './NavigationBar';
 import { HeaderTitle } from './SettingsHeader';
@@ -80,7 +80,7 @@ export const StyledListContainer = styled.div({
 });
 
 export const StyledBrowseButton = styled(AppButton.BlueButton)({
-  margin: '0 22px 22px',
+  margin: `0 ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 export const StyledCellContainer = styled(Cell.Container)({
@@ -94,11 +94,11 @@ export const StyledSearchContainer = styled.div({
 
 export const StyledSearchInput = styled.input.attrs({ type: 'text' })({
   ...normalText,
-  width: 'calc(100% - 22px * 2)',
+  width: `calc(100% - ${measurements.viewMargin} * 2)`,
   border: 'none',
   borderRadius: '4px',
   padding: '9px 38px',
-  margin: '0 22px',
+  margin: `0 ${measurements.viewMargin}`,
   color: colors.white60,
   backgroundColor: colors.white10,
   '::placeholder': {
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 83789c8bfe..8dc4264d9f 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -15,7 +15,7 @@ import { formatMarkdown } from '../markdown-formatter';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { bigText } from './common-styles';
+import { bigText, measurements } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { Brand, HeaderBarSettingsButton } from './HeaderBar';
 import ImageView from './ImageView';
@@ -43,7 +43,7 @@ const StyledFooter = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: '18px 22px 22px',
+  padding: `18px ${measurements.viewMargin} ${measurements.viewMargin}`,
 });
 
 const StyledStatusIcon = styled.div({
@@ -55,7 +55,7 @@ const StyledStatusIcon = styled.div({
 
 const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
-  margin: '0 22px 8px',
+  margin: `0 ${measurements.viewMargin} 8px`,
   color: colors.white,
 });
 
@@ -65,7 +65,7 @@ const StyledLabel = styled.span({
   fontWeight: 600,
   lineHeight: '20px',
   color: colors.white,
-  margin: '0 22px 18px',
+  margin: `0 ${measurements.viewMargin} 18px`,
 });
 
 const StyledSpacer = styled.div({
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 0e282d88aa..5def065ddf 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -6,7 +6,7 @@ import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages, relayLocations } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
-import { hugeText, normalText } from './common-styles';
+import { hugeText, measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import Marquee from './Marquee';
 import { MultiButton } from './MultiButton';
@@ -37,15 +37,15 @@ const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  paddingBottom: '22px',
-  paddingLeft: '22px',
-  paddingRight: '22px',
+  paddingBottom: measurements.viewMargin,
+  paddingLeft: measurements.viewMargin,
+  paddingRight: measurements.viewMargin,
 });
 
 const Body = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '0 22px',
+  padding: `0 ${measurements.viewMargin}`,
   marginTop: '176px',
   flex: 1,
 });
diff --git a/gui/src/renderer/components/cell/Footer.tsx b/gui/src/renderer/components/cell/Footer.tsx
index 466ef4acca..abd0f24d9c 100644
--- a/gui/src/renderer/components/cell/Footer.tsx
+++ b/gui/src/renderer/components/cell/Footer.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
-import { tinyText } from '../common-styles';
+import { measurements, tinyText } from '../common-styles';
 
 export const Footer = styled.div({
-  padding: '6px 22px 0px',
+  padding: `6px ${measurements.viewMargin} 0px`,
 });
 
 export const FooterText = styled.span(tinyText, {
diff --git a/gui/src/renderer/components/cell/Row.tsx b/gui/src/renderer/components/cell/Row.tsx
index ca8cc306f8..e00aa0e34e 100644
--- a/gui/src/renderer/components/cell/Row.tsx
+++ b/gui/src/renderer/components/cell/Row.tsx
@@ -8,7 +8,7 @@ export const Row = styled.div({
   alignItems: 'center',
   backgroundColor: colors.blue,
   minHeight: measurements.rowMinHeight,
-  paddingLeft: '22px',
-  paddingRight: '22px',
+  paddingLeft: measurements.viewMargin,
+  paddingRight: measurements.viewMargin,
   marginBottom: '1px',
 });
diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts
index 7713f04d94..afa3dea8b1 100644
--- a/gui/src/renderer/components/common-styles.ts
+++ b/gui/src/renderer/components/common-styles.ts
@@ -60,4 +60,5 @@ export const hugeText = {
 
 export const measurements = {
   rowMinHeight: '44px',
+  viewMargin: '22px',
 };