Merge branch 'visual-adjustments'

7 files changed, 48 insertions, 61 deletions

diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
index 0e4d840769..f93b69d9eb 100644
--- a/app/components/AdvancedSettingsStyles.js
+++ b/app/components/AdvancedSettingsStyles.js
@@ -1,11 +1,12 @@
 // @flow
 
 import { createViewStyles, createTextStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default {
   ...createViewStyles({
     advanced_settings: {
-      backgroundColor: '#192E45',
+      backgroundColor: colors.darkBlue,
       flex: 1,
     },
     advanced_settings__container: {
@@ -47,20 +48,20 @@ export default {
       overflow: 'visible',
     },
     advanced_settings__cell: {
-      backgroundColor: '#44AD4D',
+      backgroundColor: colors.green,
       flexDirection: 'row',
-      paddingTop: 15,
-      paddingBottom: 15,
+      paddingTop: 14,
+      paddingBottom: 14,
       paddingLeft: 24,
       paddingRight: 24,
       marginBottom: 1,
       justifyContent: 'flex-start',
     },
     advanced_settings__cell_hover: {
-      backgroundColor: 'rgba(41, 71, 115, 0.9)',
+      backgroundColor: colors.blue80,
     },
     advanced_settings__cell_selected_hover: {
-      backgroundColor: '#44AD4D',
+      backgroundColor: colors.green,
     },
     advanced_settings__cell_spacer: {
       height: 24,
@@ -70,15 +71,15 @@ export default {
       height: 24,
       marginRight: 8,
       flex: 0,
-      color: 'rgba(255, 255, 255, 0.8)',
+      color: colors.white80,
     },
     advanced_settings__cell_dimmed: {
-      paddingTop: 15,
-      paddingBottom: 15,
+      paddingTop: 14,
+      paddingBottom: 14,
       paddingLeft: 24,
       paddingRight: 24,
       marginBottom: 1,
-      backgroundColor: 'rgb(36, 57, 84)',
+      backgroundColor: colors.blue40,
       flexDirection: 'row',
       justifyContent: 'flex-start',
     },
@@ -89,18 +90,18 @@ export default {
       paddingLeft: 24,
     },
     advanced_settings__cell_label_container: {
-      paddingTop: 15,
+      paddingTop: 14,
       paddingRight: 12,
-      paddingBottom: 15,
+      paddingBottom: 14,
       paddingLeft: 24,
       flexGrow: 1,
     },
   }),
   ...createTextStyles({
     advanced_settings__section_title: {
-      backgroundColor: 'rgb(41, 71, 115)',
-      paddingTop: 15,
-      paddingBottom: 15,
+      backgroundColor: colors.blue,
+      paddingTop: 14,
+      paddingBottom: 14,
       paddingLeft: 24,
       paddingRight: 24,
       marginBottom: 1,
@@ -108,20 +109,20 @@ export default {
       fontSize: 20,
       fontWeight: '900',
       lineHeight: 26,
-      color: '#fff',
+      color: colors.white,
     },
     advanced_settings__close_title: {
       fontFamily: 'Open Sans',
       fontSize: 13,
       fontWeight: '600',
-      color: 'rgba(255, 255, 255, 0.6)',
+      color: colors.white60,
     },
     advanced_settings__title: {
       fontFamily: 'DINPro',
       fontSize: 32,
       fontWeight: '900',
       lineHeight: 40,
-      color: '#fff',
+      color: colors.white,
     },
     advanced_settings__cell_label: {
       fontFamily: 'DINPro',
@@ -129,7 +130,7 @@ export default {
       fontWeight: '900',
       lineHeight: 26,
       letterSpacing: -0.2,
-      color: '#fff',
+      color: colors.white,
       flex: 0,
     },
     advanced_settings__cell_footer_label: {
@@ -138,7 +139,7 @@ export default {
       fontWeight: '600',
       lineHeight: 20,
       letterSpacing: -0.2,
-      color: 'rgba(255,255,255,0.8)',
+      color: colors.white80,
     },
   }),
 };
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index c2d41c4ecb..9d0192df2f 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -61,9 +61,9 @@ export default {
       paddingLeft: 24,
     },
     preferences__cell_label_container: {
-      paddingTop: 15,
+      paddingTop: 14,
       paddingRight: 12,
-      paddingBottom: 15,
+      paddingBottom: 14,
       paddingLeft: 24,
       flexGrow: 1,
     },
diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js
index c1fca00d07..6268f6ea16 100644
--- a/app/components/SelectLocationStyles.js
+++ b/app/components/SelectLocationStyles.js
@@ -36,8 +36,8 @@ export default {
       borderRadius: 8,
       marginLeft: 4,
       marginRight: 4,
-      marginTop: 19.5,
-      marginBottom: 19.5,
+      marginTop: 20,
+      marginBottom: 20,
     },
     relay_status__inactive: {
       backgroundColor: colors.red95,
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 6063a5a567..5e4eee192e 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -1,8 +1,8 @@
 import { createViewStyles, createTextStyles } from '../lib/styles';
 import { colors } from '../config';
 
-export default Object.assign(
-  createViewStyles({
+export default {
+  ...createViewStyles({
     settings: {
       backgroundColor: colors.darkBlue,
       flex: 1,
@@ -18,7 +18,7 @@ export default Object.assign(
       paddingTop: 16,
       paddingRight: 24,
       paddingLeft: 24,
-      paddingBottom: 16,
+      paddingBottom: 24,
     },
     settings__content: {
       flexDirection: 'column',
@@ -51,7 +51,7 @@ export default Object.assign(
       paddingBottom: 16,
     },
   }),
-  createTextStyles({
+  ...createTextStyles({
     settings__title: {
       fontFamily: 'DINPro',
       fontSize: 32,
@@ -63,4 +63,4 @@ export default Object.assign(
       color: colors.red,
     },
   }),
-);
+};
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index f0251c942e..709260d2e6 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -10,7 +10,7 @@ import { createViewStyles, createTextStyles } from '../../lib/styles';
 const styles = {
   ...createViewStyles({
     cell: {
-      backgroundColor: colors.blue80,
+      backgroundColor: colors.blue,
       paddingTop: 14,
       paddingBottom: 14,
       paddingLeft: 16,
@@ -21,24 +21,9 @@ const styles = {
       alignItems: 'center',
       alignContent: 'center',
     },
-    blue: {
+    cellHover: {
       backgroundColor: colors.blue80,
     },
-    blueHover: {
-      backgroundColor: colors.blue60,
-    },
-    white40: {
-      color: colors.white40,
-    },
-    white60: {
-      color: colors.white60,
-    },
-    white80: {
-      color: colors.white80,
-    },
-    white: {
-      color: colors.white,
-    },
     icon: {
       color: colors.white60,
       marginLeft: 8,
@@ -85,7 +70,7 @@ export default class CellButton extends Component<CellButtonProps, State> {
   iconStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
   subtextStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
   backgroundStyle = (cellHoverStyle?: Types.ViewStyle) =>
-    this.state.hovered ? cellHoverStyle || styles.blueHover : null;
+    this.state.hovered ? cellHoverStyle || styles.cellHover : null;
 
   onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null);
   onHoverEnd = () => (!this.props.disabled ? this.setState({ hovered: false }) : null);
diff --git a/app/config.json b/app/config.json
index d634167048..f4a9d973c2 100644
--- a/app/config.json
+++ b/app/config.json
@@ -8,14 +8,14 @@
     "supportEmail": "mailto:support@mullvad.net"
   },
   "colors": {
-    "darkBlue": "#192e45",
-    "blue": "#294d73",
-    "green": "#44ad4d",
-    "darkGreen": "#205425",
-    "red": "#d0021b",
-    "darkYellow": "#8e4e13",
-    "yellow": "#ffd524",
-    "white": "#ffffff",
+    "darkBlue": "rgb(25, 46, 69)",
+    "blue": "rgb(41, 77, 115)",
+    "green": "rgb(68, 173, 77)",
+    "darkGreen": "rgb(32, 84, 37)",
+    "red": "rgb(208, 2, 27)",
+    "darkYellow": "rgb(142, 78, 19)",
+    "yellow": "rgb(255, 213, 36)",
+    "white": "rgb(255, 255, 255)",
     "white80": "rgba(255, 255, 255, 0.8)",
     "white60": "rgba(255, 255, 255, 0.6)",
     "white40": "rgba(255, 255, 255, 0.4)",
diff --git a/app/lib/styles.js b/app/lib/styles.js
index 4cde4fdfce..0bbec6fe79 100644
--- a/app/lib/styles.js
+++ b/app/lib/styles.js
@@ -1,25 +1,26 @@
 // @flow
 
-import { Styles } from 'reactxp';
+import * as RX from 'reactxp';
 
-type ExtractReturnType = (*) => Object;
+type ExtractViewReturnType = <V>(V) => Object;
+type ExtractTextReturnType = <V>(V) => Object;
 
 export function createViewStyles<T: { [string]: Object }>(
   styles: T,
-): $ObjMap<T, ExtractReturnType> {
+): $ObjMap<T, ExtractViewReturnType> {
   const viewStyles = {};
   for (const style of Object.keys(styles)) {
-    viewStyles[style] = Styles.createViewStyle(styles[style]);
+    viewStyles[style] = RX.Styles.createViewStyle(styles[style]);
   }
   return viewStyles;
 }
 
 export function createTextStyles<T: { [string]: Object }>(
   styles: T,
-): $ObjMap<T, ExtractReturnType> {
+): $ObjMap<T, ExtractTextReturnType> {
   const textStyles = {};
   for (const style of Object.keys(styles)) {
-    textStyles[style] = Styles.createTextStyle(styles[style]);
+    textStyles[style] = RX.Styles.createTextStyle(styles[style]);
   }
   return textStyles;
 }