Merge branch 'settings-layout-fixes'

6 files changed, 102 insertions, 33 deletions

diff --git a/app/components/AdvancedSettings.css b/app/components/AdvancedSettings.css
index 8f6c352bd7..5a071004d5 100644
--- a/app/components/AdvancedSettings.css
+++ b/app/components/AdvancedSettings.css
@@ -1,3 +1,31 @@
+.advanced-settings {
+  background: #192E45;
+  height: 100%;
+}
+
+.advanced-settings__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.advanced-settings__main {
+  margin-bottom: 24px;
+}
+
+.advanced-settings__header {
+  flex: 0 0 auto;
+  padding: 40px 24px 24px;
+  position: relative; /* anchor for close button */
+}
+
+.advanced-settings__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .advanced-settings__section-title {
   background-color:rgb(41, 71, 115);
   padding: 15px 24px;
@@ -8,6 +36,14 @@
   color: #fff;
 }
 
+.advanced-settings__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+}
+
 .advanced-settings__cell {
   background-color:rgb(41, 71, 115);
   padding: 15px 24px;
@@ -52,4 +88,8 @@
   flex: 0 0 auto;
   margin-right: 8px;
   color: #fff;
-}
\ No newline at end of file
+}
+
+.advanced-settings__cell-spacer {
+  height: 24px;
+}
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 56c5844346..9898d4b02e 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -35,7 +35,7 @@ export class AdvancedSettings extends React.Component {
           this.props.onUpdate(protocol, 'Automatic');
         }}/>
 
-      <div className="settings__cell-spacer"></div>
+      <div className="advanced-settings__cell-spacer"></div>
 
       { portSelector }
 
@@ -112,18 +112,18 @@ function BaseLayout(props) {
   return <Layout>
     <Header hidden={ true } style={ 'defaultDark' } />
     <Container>
-      <div className="settings">
+      <div className="advanced-settings">
         <div className="support__close" onClick={ props.onClose }>
           <img className="support__close-icon" src="./assets/images/icon-back.svg" />
           <span className="support__close-title">Settings</span>
         </div>
-        <div className="settings__container">
-          <div className="settings__header">
-            <h2 className="settings__title">Advanced</h2>
+        <div className="advanced-settings__container">
+          <div className="advanced-settings__header">
+            <h2 className="advanced-settings__title">Advanced</h2>
           </div>
           <CustomScrollbars autoHide={ true }>
-            <div className="settings__content">
-              <div className="settings__main">
+            <div className="advanced-settings__content">
+              <div className="advanced-settings__main">
                 { props.children }
               </div>
             </div>
diff --git a/app/components/Settings.js b/app/components/Settings.js
index effd366ba7..fe73ffd0af 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,7 +1,8 @@
 // @flow
 import moment from 'moment';
 import React from 'react';
-import { Component, Text, Button, View } from 'reactxp';
+import { Component, Text, View } from 'reactxp';
+import { Button } from './styled';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
@@ -42,7 +43,7 @@ export default class Settings extends Component {
         <Container>
           <View style={styles.settings}>
             <Button style={styles.settings__close} onPress={ this.props.onClose } testName='settings__close'>
-              <Img style={styles.settings__close_icon} source='icon-close' tintColor='currentColor'/>
+              <Img style={styles.settings__close_icon} source='icon-close'/>
             </Button>
 
             <View style={styles.settings__container}>
@@ -60,18 +61,16 @@ export default class Settings extends Component {
                         <Button onPress={ this.props.onViewAccount } testName='settings__view_account'>
                           <View style={styles.settings__cell}>
                             <Text style={styles.settings__cell_label}>Account</Text>
-                            <View style={styles.settings__cell_value}>
+                            <View style={styles.settings__account_paid_until_label_container}>
                               {isOutOfTime ? (
                                 <Text style={styles.settings__account_paid_until_label__error} testName='settings__account_paid_until_label'>OUT OF TIME</Text>
                               ) : (
                                 <Text style={styles.settings__account_paid_until_label} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
                               )}
                             </View>
-                            {/* HERE */}
-                            <Img style={styles.settings__cell_disclosure} source='icon-chevron'/>
+                            <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
                           </View>
                         </Button>
-                        <View style={styles.settings__cell_spacer} />
                       </View>
                     ) : null}
 
@@ -79,16 +78,6 @@ export default class Settings extends Component {
                       <Button onPress={ this.props.onViewAdvancedSettings }>
                         <View style={styles.settings__cell}>
                           <Text style={styles.settings__cell_label}>Advanced</Text>
-                          <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor' />
-                        </View>
-                        <View style={styles.settings__cell_spacer}></View>
-                      </Button>
-                    ) : null}
-
-                    {isLoggedIn ? (
-                      <Button onPress={ this.props.onViewAdvancedSettings }>
-                        <View style={styles.settings__cell}>
-                          <Text style={styles.settings__cell_label}>Advanced</Text>
                           <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
                         </View>
                         <View style={styles.settings__cell_spacer}></View>
@@ -112,7 +101,7 @@ export default class Settings extends Component {
                     <Button onPress={ this.props.onViewSupport }  testName='settings__view_support'>
                       <View style={styles.settings__cell}>
                         <Text style={styles.settings__cell_label}>Contact support</Text>
-                        <Img style={styles.settings__cell_icon} source='icon-chevron' tintColor='currentColor'/>
+                        <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
                       </View>
                     </Button>
                   </View>
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index d5daef85b5..4ea470b9f6 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -20,6 +20,8 @@ export default Object.assign(createViewStyles({
   settings__content:{
     flexDirection: 'column',
     flex: 1,
+    justifyContent: 'space-between',
+    height: '100%',
   },
   settings__close:{
     flexDirection: 'row',
@@ -41,10 +43,7 @@ export default Object.assign(createViewStyles({
     paddingBottom: 15,
     paddingLeft: 24,
     paddingRight: 24,
-    marginLeft: -6, //Because of button.css, when removed remove this
-    marginRight: -6, //Because of button.css, when removed remove this
-    marginTop: -1, //Because of button.css, when removed remove this
-    marginBottom: 0, //Because of button.css, when removed remove this
+    marginBottom: 1,
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
@@ -64,11 +63,14 @@ export default Object.assign(createViewStyles({
   settings__cell_icon:{
     width: 16,
     height: 16,
-    flex: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    alignItems: 'flex-end',
     color: 'rgba(255, 255, 255, 0.8)',
   },
   settings__account_paid_until_label__error:{
-    color: '#d0021b'
+    color: '#d0021b',
   },
   settings__footer_button:{
     backgroundColor: 'rgba(208,2,27,1)',
@@ -103,7 +105,10 @@ export default Object.assign(createViewStyles({
     fontSize: 20,
     fontWeight: '900',
     lineHeight: 26,
-    color: '#FFFFFF'
+    color: '#FFFFFF',
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 'auto',
   },
   settings__footer_button_label:{
     fontFamily: 'DINPro',
@@ -112,10 +117,15 @@ export default Object.assign(createViewStyles({
     lineHeight: 26,
     color: 'rgba(255,255,255,0.8)'
   },
+  settings__account_paid_until_label_container :{
+    flexGrow: 0,
+    textAlign: 'end',
+  },
   settings__account_paid_until_label:{
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '800',
-    color: 'rgba(255, 255, 255, 0.8)'
+    color: 'rgba(255, 255, 255, 0.8)',
+    textTransform: 'uppercase',
   },
 }));
diff --git a/app/components/styled/Button.js b/app/components/styled/Button.js
new file mode 100644
index 0000000000..df880701cd
--- /dev/null
+++ b/app/components/styled/Button.js
@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react';
+import ReactXP from 'reactxp';
+
+const defaultStyle = ReactXP.Styles.createViewStyle({
+  cursor: 'default',
+});
+
+export function Button(props: *) {
+  const { style, cursor, ...rest } = props;
+
+  const stylePropArray = Array.isArray(props.style)
+    ? props.style
+    : [props.style];
+
+  const concreteStyle = ReactXP.Styles.combine([defaultStyle, ...stylePropArray]);
+
+  // Can be removed when we upgrade to ReactXP 0.51
+  const concreteCursor = cursor || concreteStyle.cursor || 'default';
+
+  return <ReactXP.Button style={concreteStyle} cursor={concreteCursor} {...rest} />;
+}
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
new file mode 100644
index 0000000000..6699594f18
--- /dev/null
+++ b/app/components/styled/index.js
@@ -0,0 +1,7 @@
+// @flow
+
+import { Button } from './Button';
+
+export {
+  Button
+};