feat(ui): simplify layout

blaskovicz · Nov 25, 2017 · e07198d · e07198d
1 parent c405e5c
commit e07198d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 27 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,10 +1,14 @@
+div.app {
+  display: flex;
+  flex-direction: column;
+}
 h2.title {
   margin: 0;
   padding: 0;
   padding-top: 2px;
-  float: right;
   font-family: monospace;
   font-weight: 700;
+  align-self: center;
 }
 h2.title img.logo {
   height: 32px;

diff --git a/src/Preferences.js b/src/Preferences.js
@@ -43,27 +43,22 @@ export default class Preferences extends Component {
   render() {
     const { state } = this;
     return (
-      <div>
-        <h3>Options</h3>
-        <div id="polish-options">
-          {Object.keys(DEFAULT_PREFERENCES).map(option => {
-            const loading = state[option] === undefined;
-            return (
-              <label key={option}>
-                <input
-                  disabled={loading}
-                  type="checkbox"
-                  name={option}
-                  onChange={this.updatePref}
-                  checked={
-                    loading ? DEFAULT_PREFERENCES[option] : state[option]
-                  }
-                />{" "}
-                {option.replace(/-/g, " ")}
-              </label>
-            );
-          })}
-        </div>
+      <div id="polish-options">
+        {Object.keys(DEFAULT_PREFERENCES).map(option => {
+          const loading = state[option] === undefined;
+          return (
+            <label key={option}>
+              <input
+                disabled={loading}
+                type="checkbox"
+                name={option}
+                onChange={this.updatePref}
+                checked={loading ? DEFAULT_PREFERENCES[option] : state[option]}
+              />{" "}
+              {option.replace(/-/g, " ")}
+            </label>
+          );
+        })}
       </div>
     );
   }

diff --git a/src/TabControls.css b/src/TabControls.css
@@ -1,3 +1,10 @@
+#tab-controls {
+  display: flex;
+  flex-direction: column;
+}
+#tab-controls h4.title {
+  align-self: center;
+}
 #active-windows {
   margin-bottom: 10px;
 }
@@ -7,7 +14,7 @@
   background: #fff;
   max-height: 300px;
   overflow-y: auto;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 }
 #active-tabs label.tab-description {
   display: block;
@@ -30,6 +37,8 @@
   width: 16px;
   height: 16px;
   vertical-align: middle;
+  position: relative;
+  top: -3px;
 }
 #active-tabs label.tab-description small.subtext {
   display: block;

diff --git a/src/TabControls.js b/src/TabControls.js
@@ -282,8 +282,8 @@ export default class TabControls extends Component {
     const allSelected = this.allSelected();
     const anySelected = allSelected || this.anySelected();
     return (
-      <div>
-        <h3>Move Tabs to Window</h3>
+      <div id="tab-controls">
+        <h4 className="title">Move Tabs to Window</h4>
         <div id="active-tabs">
           <form>
             {currentWindow &&

diff --git a/src/index.css b/src/index.css
@@ -4,11 +4,14 @@ body {
   max-height: 600px;
   background: rgb(249, 249, 249);
   overflow-y: hidden;
+  line-height: normal !important;
 }
 label {
   font-weight: 500;
-  margin-bottom: 2px;
-  margin-top: 2px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  margin-bottom: 3px;
+  margin-top: 3px;
 }
 button:hover:not(:disabled),
 input[type="checkbox"]:hover:not(:disabled),