Stylesheet refactor.

Author: toddbirchard

flask_session_tutorial/static/dist/css/dashboard.css

@@ -1,14 +1,16 @@
 // Remove Alert on Close
-let alertButton = document.querySelector('.alert button');
+let alertButton = document.querySelector(".alert button");
 
-if (alertButton){
-  alertButton.addEventListener('click', function (event) {
+if (alertButton) {
+  alertButton.addEventListener(
+    "click",
+    function (event) {
+      // If the clicked element doesn't have the right selector, bail
+      alertButton.parentNode.style.display = "none";
 
-  	// If the clicked element doesn't have the right selector, bail
-    alertbutton.parentNode.style.display = 'none';
-
-  	// Don't follow the link
-  	event.preventDefault();
-
-  }, false);
+      // Don't follow the link
+      event.preventDefault();
+    },
+    false
+  );
 }

flask_session_tutorial/static/dist/js/main.min.js

@@ -103,9 +103,9 @@
       margin-bottom: 15px;
       width: -webkit-fill-available;
       border-radius: 2px;
-      border: 1px solid #d4d9e3;
+      border: 1px solid @input-border-color;
       font-weight: 200;
-      color: #4d5060;
+      color: @input-text-color;
       font-family: @body-font;
       transition: @transition;
       font-size: .9em;
@@ -116,12 +116,12 @@
       }
 
       &::placeholder {
-        color: #d4d9e3;
+        color: @input-placeholder-text;
       }
 
       &:hover {
         border-color: @theme-color;
-        background: #d9f6ff;
+        background: @input-background-highlight-color;
 
         &::placeholder {
           color: @theme-color;
@@ -134,7 +134,7 @@
         box-shadow: unset;
 
         &::placeholder {
-          color: #d4d9e3;
+          color: @input-border-color;
         }
       }
     }
@@ -176,7 +176,7 @@
       list-style: none;
       padding: 0;
       font-size: .9em;
-      color: #b75353;
+      color: @alert-error-font-color;
     }
   }
 

flask_session_tutorial/static/src/js/main.js

@@ -32,7 +32,7 @@ html {
     h1 {
       font-family: 'agenda', sans-serif;
       font-weight: 600;
-      text-shadow: -1px 1px 0 #3e798d;
+      text-shadow: -1px 1px 0 @text-highlight-color;
     }
 
     p {

flask_session_tutorial/static/src/less/account.less

@@ -1,12 +1,22 @@
 // Colors
+// -------------------------
 @theme-color: #0297f6;
 @background-color: #e1eaf5;
+@text-highlight-color: #3e798d;
 @box-shadow: 0 0 5px rgba(65, 67, 144, 0.15);
 @header-color: #5f6988;
 
+// Alerts
 @alert-font-color: #856404;
 @alert-background-color: #fff3cd;
 @alert-border-color: #ffeeba;
+@alert-error-font-color: #b75353;
+
+// Forms
+@input-text-color: #4d5060;
+@input-border-color: #d4d9e3;
+@input-background-highlight-color: #d9f6ff;
+@input-placeholder-text: #d4d9e3;
 
 // Fonts
 @body-font: 'Poppins', sans-serif;