Move common style definitions to its own file

8 files changed, 44 insertions, 59 deletions

diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index 2a38a6ca0d..e6e38ca457 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -42,24 +42,4 @@ export default {
     marginTop: 12,
     paddingHorizontal: 24,
   }),
-  advanced_settings__cell_hover: Styles.createButtonStyle({
-    backgroundColor: colors.blue80,
-  }),
-  advanced_settings__cell_selected_hover: Styles.createButtonStyle({
-    backgroundColor: colors.green,
-  }),
-  advanced_settings__cell_icon_invisible: Styles.createViewStyle({
-    opacity: 0,
-  }),
-  advanced_settings__cell_label: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 20,
-    fontWeight: '900',
-    lineHeight: 26,
-    color: colors.white,
-    flex: 0,
-  }),
-  advanced_settings__cell_footer_internet_warning_label: Styles.createTextStyle({
-    marginTop: 4,
-  }),
 };
diff --git a/gui/src/renderer/components/AppButtonStyles.tsx b/gui/src/renderer/components/AppButtonStyles.tsx
index e8100ca82c..c0ecb4a2b4 100644
--- a/gui/src/renderer/components/AppButtonStyles.tsx
+++ b/gui/src/renderer/components/AppButtonStyles.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colors } from '../../config.json';
+import { buttonText } from './common-styles';
 
 export const StyledLabelContainer = styled.div((props: { textAdjustment: number }) => ({
   display: 'flex',
@@ -8,13 +8,8 @@ export const StyledLabelContainer = styled.div((props: { textAdjustment: number
   paddingLeft: `${props.textAdjustment < 0 ? Math.abs(props.textAdjustment) : 0}px`,
 }));
 
-export const StyledLabel = styled.span({
-  fontFamily: 'DINPro',
-  fontSize: '20px',
-  fontWeight: 900,
-  lineHeight: '26px',
+export const StyledLabel = styled.span(buttonText, {
   flex: 1,
-  color: colors.white,
   textAlign: 'center',
 });
 
diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx
index 9ae67f733c..1d18e41420 100644
--- a/gui/src/renderer/components/CellStyles.tsx
+++ b/gui/src/renderer/components/CellStyles.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { buttonText, mediumText, smallText } from './common-styles';
 import ImageView, { IImageViewProps } from './ImageView';
 
 export const StyledContainer = styled.div({
@@ -16,15 +17,10 @@ export const StyledSection = styled.div({
   flexDirection: 'column',
 });
 
-export const StyledSectionTitle = styled.span({
+export const StyledSectionTitle = styled.span(buttonText, {
   backgroundColor: colors.blue,
   padding: '14px 24px',
   marginBottom: '1px',
-  fontFamily: 'DINPro',
-  fontSize: '20px',
-  fontWeight: 900,
-  lineHeight: '26px',
-  color: colors.white,
 });
 
 interface IStyledCellButtonProps {
@@ -51,22 +47,15 @@ export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps
   },
 }));
 
-export const StyledLabel = styled.div({}, (props: { disabled: boolean }) => ({
+export const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({
   margin: '14px 0 14px 8px',
   flex: 1,
-  fontFamily: 'DINPro',
-  fontSize: '20px',
-  fontWeight: 900,
-  lineHeight: '26px',
-  letterSpacing: -0.2,
   color: props.disabled ? colors.white40 : colors.white,
   textAlign: 'left',
 }));
 
-export const StyledSubText = styled.span({
+export const StyledSubText = styled.span(smallText, {
   color: colors.white60,
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
   fontWeight: 800,
   flex: -1,
   textAlign: 'right',
@@ -90,14 +79,7 @@ export const StyledFooter = styled.div({
   padding: '8px 24px 24px',
 });
 
-export const StyledFooterText = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 600,
-  lineHeight: '20px',
-  letterSpacing: -0.2,
-  color: colors.white80,
-});
+export const StyledFooterText = styled.span(smallText);
 
 export const StyledFooterBoldText = styled(StyledFooterText)({
   fontWeight: 900,
@@ -111,10 +93,8 @@ export const StyledInputFrame = styled.div({
 });
 
 const inputTextStyles: React.CSSProperties = {
-  fontFamily: 'Open Sans',
-  fontSize: '20px',
+  ...mediumText,
   fontWeight: 600,
-  lineHeight: '26px',
   height: '26px',
   textAlign: 'right',
   padding: '0px',
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index ccbf6cddad..0e65acfa4f 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -118,6 +118,7 @@ export default {
     lineHeight: 18,
     marginBottom: 8,
   }),
+  // TODO: Use bigText in comonStyles when converted from ReactXP
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
     fontSize: 32,
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index fa7c096fc8..2be0750c9e 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -12,6 +12,7 @@ const styles = {
       paddingBottom: 24,
     }),
   },
+  // TODO: Use bigText in comonStyles when converted from ReactXP
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
     fontSize: 32,
@@ -19,6 +20,7 @@ const styles = {
     lineHeight: 36,
     color: colors.white,
   }),
+  // TODO: Use smallText in comonStyles when converted from ReactXP
   subtitle: Styles.createTextStyle({
     fontFamily: 'Open Sans',
     fontSize: 13,
diff --git a/gui/src/renderer/components/SupportStyles.tsx b/gui/src/renderer/components/SupportStyles.tsx
index 13afda2705..7190d8d8db 100644
--- a/gui/src/renderer/components/SupportStyles.tsx
+++ b/gui/src/renderer/components/SupportStyles.tsx
@@ -105,6 +105,7 @@ export default {
     color: colors.green,
   }),
   support__send_status: Styles.createTextStyle({
+    // TODO: Use bigText in comonStyles when converted from ReactXP
     fontFamily: 'DINPro',
     fontSize: 34,
     fontWeight: '900',
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 6c6093aa04..15b7755f4b 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../../config.json';
 import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
+import { bigText } from './common-styles';
 import ImageView from './ImageView';
 import Marquee from './Marquee';
 import { MultiButton } from './MultiButton';
@@ -64,12 +64,8 @@ const Location = styled.div({
 });
 
 const StyledMarquee = styled(Marquee)({
-  fontFamily: 'DINPro',
-  fontSize: '34px',
-  lineHeight: '38px',
-  fontWeight: 900,
+  ...bigText,
   overflow: 'hidden',
-  color: colors.white,
 });
 
 export default class TunnelControl extends React.Component<ITunnelControlProps> {
diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts
new file mode 100644
index 0000000000..4a1fbb516b
--- /dev/null
+++ b/gui/src/renderer/components/common-styles.ts
@@ -0,0 +1,30 @@
+import { colors } from '../../config.json';
+
+export const smallText = {
+  fontFamily: 'Open Sans',
+  fontSize: '13px',
+  fontWeight: 600,
+  lineHeight: '20px',
+  color: colors.white80,
+};
+
+export const mediumText = {
+  fontFamily: 'Open Sans',
+  fontSize: '20px',
+  lineHeight: '26px',
+};
+
+export const buttonText = {
+  ...mediumText,
+  fontFamily: 'DINPro',
+  fontWeight: 900,
+  color: colors.white,
+};
+
+export const bigText = {
+  fontFamily: 'DINPro',
+  fontSize: '32px',
+  fontWeight: 900,
+  lineHeight: '36px',
+  color: colors.white,
+};