Added basic UI styles to DistractMeNot popup.

ewliang · Sep 13, 2018 · 076a7f1 · 076a7f1
1 parent a707665
commit 076a7f1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 7 deletions.
diff --git a/popup.html b/popup.html
@@ -20,19 +20,19 @@
   <body>
     <h1>DistractMeNot</h1>
     <p>
-      To get started, simply just 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".
       Once you make an update to your tab, the program will start working.
     </p>
-    <form class = "flex-row">
-      <input type = "url" id = "urlInput" placeholder = "" required>
-      <input type = "submit" id = "addURLButton" value = "Add">
+    <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">
+    <small class = "flex-row toggle-activation-wrapper">
       <input type = "checkbox" id = "toggleActivation">
       <label for = "toggleActivation">Is Active?</label>
     </small>
     <button id = "resetButton">Reset</button>
-    <footer>Created by <a href = "https://www.eric-liang.com">Eric Liang</a></footer>
+    <footer><small>Created by <a href = "https://www.eric-liang.com">Eric Liang</a></small></footer>
     <script src = "popup.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -23,11 +23,50 @@ a {
 }
 
 p {
-  font-size: 0.875rem;
+  font-size: 0.857142857rem;
   line-height: 1.6;
 }
 
 .flex-row {
   display: flex;
   flex-direction: row;
 }
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+h1 {
+  color: #333;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #0288D1;
+  padding: 10px 25px;
+  border: 0px;
+  border-radius: 5px;
+}
+
+input::placeholder {
+  color: #ccc;
+  font-size: 0.857142857rem;
+  font-style: italic;
+  opacity: 1; /* Firefox */
+}
+
+input[type = "url"] {
+  font-size: 1rem;
+  background-color: #f2f2f2;
+  padding: 5px;
+  border: 0px;
+}
+
+.toggle-activation-wrapper {
+  margin: 3% 0;
+}
+
+footer {
+  text-align: center;
+}