Simplify layout

4 files changed, 6 insertions, 25 deletions

diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index d7478cfaf0..44e50870ba 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -70,19 +70,11 @@
   vertical-align: middle;
 }
 
-.headerbar__left {
-  flex: 1 1 auto;
-}
-
-.headerbar__right {
-  flex: 0 0 auto;
-}
-
 .headerbar__settings {
   display: block;
   border: 0;
   padding: 0;
-  margin: 0;
+  margin: 0 0 0 auto;
   width: 24px;
   height: 24px;
   background-color: transparent;
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index 0f599a7a39..1b12f55613 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -30,14 +30,10 @@ export default class HeaderBar extends Component {
       <div className={ containerClass.join(' ') }>
         <If condition={ !this.props.hidden }>
           <div className="headerbar__container">
-            <div className="headerbar__left">
-              <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
-              <h2 className="headerbar__title">MULLVAD VPN</h2>
-            </div>
+            <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
+            <h2 className="headerbar__title">MULLVAD VPN</h2>
             <If condition={ !!this.props.showSettings }>
-              <div className="headerbar__right">
                 <button className="headerbar__settings" onClick={ this.props.onSettings } />
-              </div>
             </If>
           </div>
         </If>
diff --git a/app/components/Settings.css b/app/components/Settings.css
index 350ae406a5..c8e03e5e51 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -19,14 +19,7 @@
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-}
-
-.settings__options {
-  flex: 1 1 auto;
-}
-
-.settings__footer {
-  flex: 0 0 auto;
+  justify-content: space-between;
 }
 
 .settings__close {
@@ -114,7 +107,7 @@
 }
 
 .settings__footer {
-  margin: 24px;
+  padding: 24px;
 }
 
 .settings__logout-button {
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 0085cfc820..06b17adea4 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -44,7 +44,7 @@ export default class Settings extends Component {
                 </div>
               </div>
               <div className="settings__content">
-                <div className="settings__options">
+                <div>
                   <div className="settings__cell">
                     <div className="settings__cell-label">Auto-secure</div>
                     <div className="settings__cell-value">