Refine Advanced Settings styles

4 files changed, 67 insertions, 37 deletions

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 9700698e75..eb4353b67e 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -11,6 +11,7 @@
 @import '../../components/Login.css';
 @import '../../components/Connect.css';
 @import '../../components/Settings.css';
+@import '../../components/AdvancedSettings.css';
 @import '../../components/Account.css';
 @import '../../components/Support.css';
 @import '../../components/SelectLocation.css';
diff --git a/app/components/AdvancedSettings.css b/app/components/AdvancedSettings.css
new file mode 100644
index 0000000000..8f6c352bd7
--- /dev/null
+++ b/app/components/AdvancedSettings.css
@@ -0,0 +1,55 @@
+.advanced-settings__section-title {
+  background-color:rgb(41, 71, 115);
+  padding: 15px 24px;
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+  color: #fff;
+}
+
+.advanced-settings__cell {
+  background-color:rgb(41, 71, 115);
+  padding: 15px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.advanced-settings__cell--dimmed {
+  background-color: rgb(36, 57, 84);
+}
+
+.advanced-settings__cell--dimmed:hover {
+  background-color: rgba(41, 71, 115, 0.9);
+}
+
+.advanced-settings__cell--selected,
+.advanced-settings__cell--selected:hover {
+  background-color: #44AD4D;
+}
+
+.advanced-settings__cell--active:hover {
+  background-color: rgba(41, 71, 115, 0.9);
+}
+
+.advanced-settings__section-title + .advanced-settings__cell,
+.advanced-settings__cell + .advanced-settings__cell {
+  margin-top: 1px;
+}
+
+.advanced-settings__cell-label {
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+  color: #FFFFFF;
+  flex: 1 0 auto;
+}
+
+.advanced-settings__cell-icon {
+  width: 24px;
+  flex: 0 0 auto;
+  margin-right: 8px;
+  color: #fff;
+}
\ No newline at end of file
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 3836ff9ca1..56c5844346 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -70,8 +70,8 @@ class Selector extends React.Component {
 
   render() {
     return <div>
-      <div className="settings__cell">
-        <div className="settings__cell-label">{ this.props.title }</div>
+      <div className="advanced-settings__section-title">
+        { this.props.title }
       </div>
 
       { this.props.values.map(value => this._renderCell(value)) }
@@ -88,31 +88,22 @@ class Selector extends React.Component {
   }
 
   _renderSelectedCell(value) {
-    const onCellClick = () => this.props.onSelect(value);
-
     return <div
       key={ value }
-      className="settings__cell--selected settings__cell"
-      onClick={ onCellClick } >
-      <div className="settings__cell-label">
-        <div className="settings__sub-cell--label">
-          <TickSVG />
-          { value }
-        </div>
-      </div>
+      className="advanced-settings__cell advanced-settings__cell--selected"
+      onClick={ () => this.props.onSelect(value) } >
+      <div className="advanced-settings__cell-icon"><TickSVG /></div>
+      <div className="advanced-settings__cell-label">{ value }</div>
     </div>;
   }
 
   _renderUnselectedCell(value) {
-    const onCellClick = () => this.props.onSelect(value);
-
     return <div
       key={ value }
-      className={ 'settings__cell settings__sub-cell' }
-      onClick={ onCellClick } >
-      <div className="settings__cell-label">
-        <div className="settings__sub-cell--label">{ value }</div>
-      </div>
+      className="advanced-settings__cell advanced-settings__cell--dimmed"
+      onClick={ () => this.props.onSelect(value) }>
+      <div className="advanced-settings__cell-icon"></div>
+      <div className="advanced-settings__cell-label">{ value }</div>
     </div>;
   }
 }
@@ -133,9 +124,7 @@ function BaseLayout(props) {
           <CustomScrollbars autoHide={ true }>
             <div className="settings__content">
               <div className="settings__main">
-                <div className="settings__advanced">
-                  { props.children }
-                </div>
+                { props.children }
               </div>
             </div>
           </CustomScrollbars>
diff --git a/app/components/Settings.css b/app/components/Settings.css
index b6bde605c7..9e49c814f9 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -96,21 +96,6 @@
   flex: 0 0 auto;
 }
 
-.settings__sub-cell {
-  background-color: rgb(36, 57, 84);
-}
-.settings__sub-cell:hover {
-  background-color: rgba(41,71,115,0.9);
-}
-
-.settings__sub-cell--label {
-  padding-left: 15px;
-}
-
-.settings__sub-cell--label img {
-  padding-right: 8px;
-}
-
 .settings__account-paid-until-label {
   font-family: "Open Sans";
   font-size: 13px;