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

src/App.vue

@@ -97,10 +97,14 @@ body{
   line-height: 1.6;
   background: $background-color;
   color: $text-color;
+  transition: background-color .5s ease, color .5s ease;
   &.hidden{
     overflow: hidden;
   }
 }
+h1,h2,h3 {
+  transition: color .5s ease;
+}
 a:any-link {
   color: inherit;
 }

src/components/LandingBanner.vue

@@ -26,7 +26,6 @@ export default {
     }
   }
 }
-  
 </script>
 
 <style lang="scss" scoped>
@@ -47,6 +46,7 @@ header {
   @include tablet-min {
     height: 284px;
   }
+
   &:before {
     content: "";
     position: absolute;
@@ -54,12 +54,14 @@ header {
     left: 0;
     width: 100%;
     height: 100%;
-    background: $background-70;
+    background-color: $background-70;
+    transition: background-color .5s ease;
   }
   
   .container {
     text-align: center;
     position: relative;
+    transition: color .5s ease;
   }
   
   .title {
@@ -69,6 +71,7 @@ header {
     letter-spacing: 0.5px;
     color: $text-color;
     margin: 0;
+
     @include tablet-min{
       font-size: 28px;
     }
@@ -80,6 +83,7 @@ header {
     font-weight: 300;
     color: $text-color-70;
     margin: 5px 0;
+
     @include tablet-min{
       font-size: 16px;
     }

src/components/MoviesListItem.vue

@@ -23,7 +23,7 @@ export default {
     img: img
   },
   data(){
-    return{
+    return {
       noImage: false
     }
   },
@@ -36,7 +36,7 @@ export default {
         this.noImage = true
       }
     },
-    openMoviePopup(id, type){
+    openMoviePopup(id, type) {
       this.$popup.open(id, type)
     }
   }
@@ -46,10 +46,12 @@ export default {
 <style lang="scss">
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
 .movies-item {
   padding: 10px;
   width: 50%;
   background-color: $background-color;
+  transition: background-color 0.5s ease;
 
   @include tablet-min{
     padding: 15px;

src/components/Navigation.vue

@@ -6,16 +6,15 @@
           <use xlink:href="#svgLogo"></use>
         </svg>
       </router-link>
+
       <div class="nav__hamburger" @click="toggleNav">
-        <div class="bar"></div>
+        <div v-for="_ in 3" class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
       </div>
+
       <ul class="nav__list">
         <li class="nav__item" v-for="item in listTypes">
           <router-link class="nav__link" :to="'/list/' + item.route">
             <div class="nav__link-wrap">
-              <!-- <img :src="item.icon" class="nav__link-icon"> -->
               <svg class="nav__link-icon">
                 <use :xlink:href="'#icon_' + item.route"></use>
               </svg>
@@ -23,8 +22,9 @@
             </div>
           </router-link>
         </li>
+
         <li class="nav__item nav__item--profile">
-           <router-link  class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
+          <router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
             <div class="nav__link-wrap">
               <svg class="nav__link-icon">
                 <use xlink:href="#iconLogin"></use>
@@ -32,7 +32,8 @@
               <span class="nav__link-title">Sign in</span>
             </div>
           </router-link>
-          <router-link  class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
+
+          <router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
             <div class="nav__link-wrap">
               <svg class="nav__link-icon">
                 <use xlink:href="#iconLogin"></use>
@@ -43,6 +44,7 @@
         </li>
       </ul>
     </nav>
+
     <div class="spacer"></div>
   </div>
 </template>
@@ -67,6 +69,7 @@ export default {
     }
   },
   created(){
+    // TODO move this to state manager
     eventHub.$on('setUserStatus', this.setUserStatus);
   }
 }
@@ -80,14 +83,15 @@ export default {
   width: 30px;
 }
 
-
 .spacer {
   @include mobile-only {
     width: 100%;
     height: $header-size;
   }
 }
+
 .nav {
+  transition: background .5s ease;
   position: fixed;
   top: 0;
   left: 0;
@@ -201,7 +205,6 @@ export default {
       opacity: 0;
       visibility: hidden;
       background-color: $background-95;
-      transition: all 0.5s ease;
       text-align: left;
       &--active{
         opacity: 1;
@@ -218,6 +221,7 @@ export default {
     }
   }
   &__item {
+    transition: background .5s ease, color .5s ease, border .5s ease;
     background-color: $background-color-secondary;
     color: $text-color-70;
 
@@ -264,7 +268,6 @@ export default {
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    transition: color 0.5s ease, background 0.5s ease;
     position: relative;
     cursor: pointer;
     &-wrap {
@@ -284,13 +287,13 @@ export default {
       &--profile {
         width: 75px;
         height: 75px;
+        background-color: $background-color-secondary;
       }
     }
     &-icon {
       width: 20px;
       height: 20px;
       fill: $text-color-70;
-      transition: fill 0.5s ease;
       @include tablet-min {
         width: 20px;
         height: 20px;

src/components/Profile.vue

@@ -73,16 +73,24 @@ export default {
     }
   },
   created(){
-    document.title = 'Profile' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
     if(!localStorage.getItem('token')){
       this.userLoggedIn = false;
     } else {
       this.userLoggedIn = true;
       this.getUserInfo();
 
+      getUserRequests()
+        .then(results => {
+          this.results = results.results
+          this.totalResults = results.total_results
+        })
+
       getEmoji()
-        .then(resp => this.emoji = resp.data.emoji )
+        .then(resp => {
+          const { emoji } = resp
+          this.emoji = emoji
+          store.dispatch('documentTitle/updateEmoji', emoji)
+        })
     }
   }
 }

src/components/Register.vue

@@ -93,10 +93,6 @@ export default {
       eventHub.$emit('setUserStatus');
       this.$router.push({ name: 'home' });
     }
-  },
-  created(){
-    document.title = 'Profile' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
   }
 }
 </script>

src/components/SearchInput.vue

@@ -228,6 +228,7 @@ export default {
   position: fixed;
   flex-wrap: wrap;
   z-index: 5;
+  border: 0;
   background-color: $background-color-secondary;
 
   // TODO check if this is for mobile
@@ -246,10 +247,13 @@ export default {
     width: 100%;
     padding: 13px 20px 13px 45px;
     outline: none;
+    margin: 0;
     border: 0;
-    background-color: transparent;
+    background-color: $background-color-secondary;
     font-weight: 300;
     font-size: 19px;
+    color: $text-color;
+    transition: background-color .5s ease, color .5s ease;
 
     @include tablet-min {
       padding: 13px 30px 13px 60px;

src/components/Settings.vue

@@ -53,15 +53,15 @@ export default {
   data(){
     return{
       userLoggedIn: '',
-      plexUsername: undefined,
+      messages: [],
-      plexPassword: undefined,
+      plexUsername: null,
-      newPass: undefined,
+      plexPassword: null,
-      newPassConfirm: undefined
+      newPassword: null,
+      newPasswordRepeat: null
     }
   },
   methods: {
     setValue(l, t) {
-      console.log('l, t', l, t)
       this[l] = t
     },
     changePassword() {
@@ -82,8 +82,6 @@ export default {
     }
   },
   created(){
-    document.title = 'Settings' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
     if (localStorage.getItem('token')){
       this.userLoggedIn = true
     }
@@ -94,6 +92,7 @@ export default {
 <style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
 a {
    text-decoration: none;
 }

src/components/Signin.vue

@@ -29,8 +29,8 @@ export default {
   data(){
     return{
       messages: [],
-      username: undefined,
+      username: null,
-      password: undefined
+      password: null
     }
   },
   methods: {

src/components/TorrentList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show">
+  <div v-if="show" class="container">
     <h2 class="torrentHeader-text">Searching for: {{ editedSearchQuery || query }}</h2>
 <!--     <div class="torrentHeader">
       <span class="torrentHeader-text">Searching for:&nbsp;</span>

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;
+  color: $text-color-70;
-  // background-color: red;
-
-  &:first-of-type {
-    background-color: navajowhite;
-  }
-  
 
   > 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;
     }
   }
 }