Rearranged elements and updated style.

ewliang · Sep 14, 2018 · cb38e28 · cb38e28
1 parent 056d247
commit cb38e28
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/popup.html b/popup.html
@@ -18,20 +18,24 @@
     <link href = "style.css" rel = "stylesheet" type = "text/css">
   </head>
   <body>
-    <h1>DistractMeNot</h1>
+    <header>
+      <h1>DistractMeNot</h1>
+    </header>
     <p>
-      To get started, simply type in a URL with (http or https) and hit [Enter] or click "Add".
+      To get started, simply type in a URL with (http or https) and hit [Enter] or click "Add To Blacklist".
       Once you make an update to your tab, the program will start working.
     </p>
-    <form class = "flex-column">
-      <input type = "url" id = "urlInput" placeholder = "(e.g. https://www.example.com)" required>
-      <input type = "submit" class = "btn-primary" id = "addURLButton" value = "Add To Blacklist">
-    </form>
     <small class = "flex-row toggle-activation-wrapper">
       <input type = "checkbox" id = "toggleActivation">
       <label for = "toggleActivation">Is Active?</label>
     </small>
-    <button id = "resetButton">Reset</button>
+    <form class = "flex-column">
+      <input type = "url" id = "urlInput" placeholder = "(e.g. https://www.example.com)" required>
+      <div class = "flex-row">
+        <button class = "btn-neutral" id = "resetButton">Reset</button>
+        <input type = "submit" class = "btn-primary" id = "addURLButton" value = "Add To Blacklist">
+      </div>
+    </form>
     <footer><small>Created by <a href = "https://www.eric-liang.com">Eric Liang</a></small></footer>
     <script src = "popup.js"></script>
   </body>

diff --git a/style.css b/style.css
@@ -4,14 +4,16 @@
 
 html {
   font-size: 100%;
+  padding: 5%;
 }
 
 body {
+  color: #6a737d;
   font-size: 16px;
   font-size: 1rem;
   line-height: 1;
   min-width: 360px;
-  max-width: 480px;
+  max-width: 480px !important;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -23,8 +25,9 @@ a {
 }
 
 p {
+  color: #6a737d;
   font-size: 0.857142857rem;
-  line-height: 1.6;
+  line-height: 1.4;
 }
 
 .flex-row {
@@ -37,18 +40,33 @@ p {
   flex-direction: column;
 }
 
+header {
+  color: #0288D1;
+}
+
 h1 {
-  color: #333;
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0px 0px 15px 0px;
 }
 
 .btn-primary {
+  width: 100%;
   color: #fff;
   background-color: #0288D1;
   padding: 10px 25px;
   border: 0px;
   border-radius: 5px;
 }
 
+.btn-neutral {
+  width: 100%;
+  background-color: #eee;
+  padding: 10px 25px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
 input::placeholder {
   color: #ccc;
   font-size: 0.857142857rem;
@@ -58,15 +76,21 @@ input::placeholder {
 
 input[type = "url"] {
   font-size: 1rem;
+  height: 25px;
   background-color: #f2f2f2;
   padding: 5px;
   border: 0px;
+  border-radius: 5px;
 }
 
 .toggle-activation-wrapper {
   margin: 3% 0;
 }
 
+form {
+  margin: 10px 0;
+}
+
 footer {
   text-align: center;
 }