Misc cleanup, more definitions of color with scss variables and added a lot of color transitions for when switching theme color.

src/components/ui/Loader.vue

@@ -30,7 +30,7 @@
       height: 35px;
       width: 35px;
       &:after {
-        border: 7px solid rgba($green, 0.9);
+        border: 7px solid $green-90;
         border-radius: 50%;
         content: '';
         left: 8px;

src/components/ui/SeasonedButton.vue

@@ -39,7 +39,7 @@ export default {
   color: $text-color;
   background: $background-color-secondary;
   outline: none;
-  transition: background 0.5s ease, color 0.5s ease;
+  transition: background 0.5s ease, color 0.5s ease, border-color .5s ease;
 
   @include tablet-min{
     font-size: 12px;

src/components/ui/SeasonedInput.vue

@@ -68,7 +68,6 @@ export default {
     width: 100%;
     max-width: 35rem;
     padding: 10px 10px 10px 45px;
-    // padding: 15px 10px 15px 45px;
     outline: none;
     background-color: $background-color-secondary;
     color: $text-color;
@@ -77,9 +76,8 @@ export default {
     border: 1px solid $text-color-50;
     margin: 0;
     margin-left: -2.2rem !important;
-    // margin-bottom: 1rem;
     z-index: 3;
-    transition: border-color .5s ease;
+    transition: color .5s ease, background-color .5s ease, border .5s ease;
 
     border-radius: 0;
     -webkit-appearance: none;

src/components/ui/SeasonedMessages.vue

@@ -54,7 +54,7 @@ export default {
   transition: opacity .4s;
 }
 .fade-leave-active {
-  transition: opacitiy .1s;
+  transition: opacity .1s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
@@ -63,31 +63,31 @@ export default {
 .message {
   width: 100%;
   max-width: 35rem;
-  height: 80px;
+  height: 75px;
 
   display: flex;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  // padding-bottom: 1rem;
-  // background-color: red;
-
-  &:first-of-type {
-    background-color: navajowhite;
-  }
-  
+  color: $text-color-70;
 
   > div {
-    margin: 8px 24px;
+    margin: 6px 24px;
     width: 100%;
 
   }
 
   h2 {
     font-weight: 300;
+    letter-spacing: 0.25px;
     margin: 0;
+    font-size: 1.3rem;
+    color: $text-color;
+    transition: color .5s ease;
   }
   span {
     font-weight: 300;
+    color: $text-color-70;
+    transition: color .5s ease;
   }
 
   .pinstripe {
@@ -112,16 +112,15 @@ export default {
     padding: 0;
     margin-top: 0.5rem;
     margin-right: 0.5rem;
+    color: $text-color-70;
     transition: color .5s ease;
-    color: $white-80;
 
     &:hover {
-      color: $white;
+      color: $text-color;
     }
   }
 
   &.success {
-    color: $color-error-text;
     background-color: $color-success;
 
     .pinstripe {
@@ -130,7 +129,6 @@ export default {
   }
   
   &.error {
-    color: $color-error-text;
     background-color: $color-error;
 
     .pinstripe {
@@ -139,19 +137,10 @@ export default {
   }
 
   &.warning {
-    color: $black;
     background-color: $color-warning;
-
-    .dismiss {
-      color: $black-80;
-
-      &:hover {
-        color: $black;
-      }
-    }
     
     .pinstripe {
-      background-color: $color-warning-light;
+      background-color: $color-warning-highlight;
     }
   }
 }