From ae303ebb83b73663d52a42f1c99829bd19bcd2a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Brugarolas?= <brugarolas.92@gmail.com>
Date: Thu, 18 Apr 2019 20:53:47 +0200
Subject: [PATCH] Design changes #3

---
 .babelrc                                  |  6 --
 package.json                              |  6 +-
 src/App.vue                               |  2 +-
 src/api/lastfm/adapt.js                   | 12 ++--
 src/api/youtube/widget.js                 | 24 ++++---
 src/assets/styles/colors.less             | 22 +++---
 src/assets/styles/details.less            | 11 +--
 src/assets/styles/loading.less            | 23 ++++++
 src/assets/styles/main.less               | 16 +----
 src/components/Album.vue                  | 86 ++++++++++++++---------
 src/components/Artist.vue                 | 64 +++++++++++------
 src/components/Result.vue                 |  8 +--
 src/components/Search.vue                 |  4 +-
 src/components/Song.vue                   |  7 +-
 src/components/artist/Albums.vue          |  6 +-
 src/components/artist/Similar.vue         | 44 ++++++------
 src/components/player/ButtonsPanel.vue    | 10 +--
 src/components/player/Player.vue          | 19 ++---
 src/components/player/Playlist.vue        |  4 +-
 src/components/player/ProgressBar.vue     | 14 ++--
 src/components/player/SoundControl.vue    | 12 ++--
 src/components/player/VolumeBar.vue       | 14 ++--
 src/components/playlist/Song.vue          |  2 +-
 src/components/static/Header.vue          |  6 +-
 src/index.html                            |  1 -
 src/partials/spinners/bouncing-balls.html |  5 +-
 webpack.config.js                         |  5 +-
 27 files changed, 246 insertions(+), 187 deletions(-)
 delete mode 100644 .babelrc
 create mode 100644 src/assets/styles/loading.less

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 4d55b2e..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "presets": [
-    [ "minify", { "builtIns": false } ],
-    [ "@babel/env", { "targets": { "browsers": [ "last 2 versions" ] }, "useBuiltIns": "usage", "modules": false } ]
-  ]
-}
diff --git a/package.json b/package.json
index 54e6ae4..df55b8a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "gh-pages": "cross-env NODE_ENV=production PUBLIC_PATH=bruga-music webpack -p --progress --hide-modules"
   },
   "dependencies": {
+    "core-js": "^3.0.1",
+    "@babel/runtime-corejs3": "^7.4.3",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.1.0",
@@ -34,7 +36,7 @@
     "@babel/cli": "^7.4.3",
     "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
-    "@babel/polyfill": "^7.4.3",
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "babel-preset-minify": "^0.5.0",
     "less": "^3.9.0",
     "cross-env": "^5.2.0",
@@ -46,8 +48,8 @@
     "vue-template-compiler": "^2.6.10",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.6.0",
-    "html-webpack-include-assets-plugin": "^1.0.7",
     "remote-file-webpack-plugin": "^1.0.2",
+    "html-webpack-include-assets-plugin": "^1.0.10",
     "webpack": "^4.29.6",
     "webpack-dev-server": "^3.3.1",
     "webpack-cli": "^3.3.0",
diff --git a/src/App.vue b/src/App.vue
index e855f4f..90a3bb2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <Header />
-    <main class="main">
+    <main class="main loading-scale">
       <transition :name="transitionName" :mode="transitionMode">
         <keep-alive :max="5">
           <router-view />
diff --git a/src/api/lastfm/adapt.js b/src/api/lastfm/adapt.js
index 3d29681..435ef92 100644
--- a/src/api/lastfm/adapt.js
+++ b/src/api/lastfm/adapt.js
@@ -5,11 +5,11 @@ const findImage = (imageArray, size) => {
   return selected['#text'];
 };
 
-const getNameFromArtist = (track) => {
-  if (typeof track.artist === 'string') {
-    return track.artist;
+const getNameFromArtist = (artist) => {
+  if (typeof artist === 'string') {
+    return artist;
   }
-  return track.artist.name;
+  return artist.name;
 };
 
 /* Adapt funcs */
@@ -57,7 +57,7 @@ const artistDetail = (artist) => {
 const albumsArray = (albums) => {
   return albums.map(album => ({
     name: album.name,
-    artist: album.artist.name,
+    artist: getNameFromArtist(album.artist),
     image: findImage(album.image, 'large')
   }));
 };
@@ -93,7 +93,7 @@ const albumDetail = (album) => {
 const tracksArray = (tracks, image) => {
   return tracks.map(track => ({
     mbid: track.mbid,
-    artist: getNameFromArtist(track),
+    artist: getNameFromArtist(track.artist),
     name: track.name,
     image: image || findImage(track.image, 'medium')
   }));
diff --git a/src/api/youtube/widget.js b/src/api/youtube/widget.js
index fe00367..b239a0b 100644
--- a/src/api/youtube/widget.js
+++ b/src/api/youtube/widget.js
@@ -7,7 +7,7 @@
 /* Own Player Loader */
 const youtubeApiPromise = new Promise((resolve, reject) => {
   window.onYouTubeIframeAPIReady = function () {
-    var player = new window.YT.Player('ytPlayer', {
+    const player = new window.YT.Player('ytPlayer', {
       // videoId: 'M7lc1UVf-VE',
       host: 'https://www.youtube.com',
       height: '360',
@@ -61,7 +61,9 @@ const getCurrentNonce = () => {
 const loadScript = (attributes) => {
   let newScript = document.createElement('script');
   for (let attribute in attributes) {
-    if (attributes[attribute]) newScript[attribute] = attributes[attribute];
+    if (attributes[attribute]) {
+      newScript[attribute] = attributes[attribute];
+    }
   }
 
   let firstScript = document.getElementsByTagName('script')[0];
@@ -73,8 +75,8 @@ window.YT = window.YT || { loading: 0, loaded: 0 };
 window.YTConfig = window.YTConfig || { 'host': 'https://www.youtube.com' };
 
 const loadYouTubeWidgetPlayer = () => {
-  let asyncFunctionality = [ () => { window.YT.Loaded = 1; } ];
-  window.YT.ready = deferExecution(() => window.YT.Loaded, asyncFunctionality);
+  let asyncFunctionality = [ () => { window.YT.loaded = 1; } ];
+  window.YT.ready = deferExecution(() => window.YT.loaded, asyncFunctionality);
   window.onYTReady = executeFunctions(asyncFunctionality);
 
   window.YT.setConfig = createConfigurator(window.YTConfig);
@@ -82,16 +84,20 @@ const loadYouTubeWidgetPlayer = () => {
   loadScript({
     type: 'text/javascript',
     id: 'www-widgetapi-script',
-    src: 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflkA4wlR/www-widgetapi.js',
+    src: 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflVx0w83/www-widgetapi.js',
     async: true,
     nonce: getCurrentNonce()
   });
 };
 
-if (!window.YT.loading) {
-  window.YT.loading = 1;
-  loadYouTubeWidgetPlayer();
-}
+const initYouTubeAPI = () => {
+  if (!window.YT.loading) {
+    window.YT.loading = 1;
+    loadYouTubeWidgetPlayer();
+  }
+};
+
+initYouTubeAPI();
 
 // Exports
 export default youtubeApiPromise;
diff --git a/src/assets/styles/colors.less b/src/assets/styles/colors.less
index 3784249..60952ad 100644
--- a/src/assets/styles/colors.less
+++ b/src/assets/styles/colors.less
@@ -2,21 +2,25 @@
 @main-dark-color: darken(@main-color, 20%);
 @main-light-color: lighten(@main-color, 25%);
 
-@color-letter: #495057;
-@color-light-letter: #6d7379; //opacity 0.80
-@color-lighter-letter: lighten(@color-light-letter, 20);
-@color-shadow: rgba(0, 0, 0, 0.25);
-@color-shadow-dark: rgba(0, 0, 0, 0.40);
-@color-background: #f8f9fa;
-@color-background-dark: #ccc2;
+@color-header-background: #191a28;
+@color-card-background: #2a2a2e;
+@color-card-transparent: fade(@color-header-background, 32%);
+@color-background-transparent: #ccc2;
 
-@color-gray: #ccc;
+@color-letter: #fff;
+@color-light-letter: #eee;
+
+@color-gray: #495057;
 @color-light-gray: lighten(@color-gray, 20%);
+@color-lighter-gray: lighten(@color-gray, 40%);
 @color-dark-gray: darken(@color-gray, 40%);
 
 @color-music: #1565c0;
 @color-white: #fff;
-@color-red: #e53935;
+@color-red: #c83430;
 @color-heart: #d90000;
 
+@color-shadow-light: rgba(0, 0, 0, 0.10);
+@color-shadow: rgba(0, 0, 0, 0.20);
 @default-shadow: 0 0 1/4rem 1/8rem @color-shadow;
+@background-shadow: 0 1/4rem 1/8rem 0 @color-shadow;
diff --git a/src/assets/styles/details.less b/src/assets/styles/details.less
index 4513b9c..6bb25c4 100644
--- a/src/assets/styles/details.less
+++ b/src/assets/styles/details.less
@@ -7,7 +7,7 @@
   width: 80%;
   margin: 25px 10%;
   padding: 25px 5%;
-  background-color: #fff;
+  background-color: @color-card-background;
   border-radius: 4px;
   box-shadow: @default-shadow;
 
@@ -21,7 +21,11 @@
   &__big {
     width: 96%;
     margin: 25px 2%;
-    padding: 2%;
+    padding: 25px;
+  }
+
+  &__transparent {
+    background-color: @color-card-transparent;
   }
 }
 
@@ -39,7 +43,6 @@
     border-radius: 50%;
     cursor: inherit;
     float: left;
-    background-color: #ccc;
     box-sizing: border-box;
   }
 
@@ -165,7 +168,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: space-around;
     max-width: 100%;
     padding-left: 0;
 
diff --git a/src/assets/styles/loading.less b/src/assets/styles/loading.less
new file mode 100644
index 0000000..ade9609
--- /dev/null
+++ b/src/assets/styles/loading.less
@@ -0,0 +1,23 @@
+.loading-translate {
+  transition: transform .55s ease-in-out;
+  transform: none;
+  transform-origin: top center;
+}
+
+.loading-scale {
+  transition: transform .55s ease-in-out, opacity .55s ease-in-out;
+  opacity: 1;
+  transform: none;
+  transform-origin: bottom center;
+}
+
+:root:not(.loading):not(.loaded) {
+  .loading-translate {
+    transform: translate3d(0, -80px, 0);
+  }
+
+  .loading-scale {
+    opacity: 0.25;
+    transform: scale3d(0.95, 0.95, 1);
+  }
+}
diff --git a/src/assets/styles/main.less b/src/assets/styles/main.less
index 31fd3d6..3690835 100644
--- a/src/assets/styles/main.less
+++ b/src/assets/styles/main.less
@@ -10,14 +10,12 @@
 body {
   padding: 0;
   margin: 0;
-  color: @color-letter;
-  background-color: @color-background;
 }
 .main {
   font-family: 'Roboto', 'Avenir', Helvetica, Arial, sans-serif;
   text-align: center;
   .fontFixes();
-  color: #2c3e50;
+  color: @color-white;
   margin-top: 68px;
   padding-top: 30px;
   padding-bottom: 100px;
@@ -37,18 +35,9 @@ li {
   margin: 0 10px;
 }
 a {
-  color: @main-color;
+  color: @color-white;
   text-decoration: none;
 }
-img {
-  cursor: pointer;
-  display: inline-block;
-  transition: all .3s ease-in-out;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
 
 .footer {
   font-family: 'Open Sans', sans-serif;
@@ -63,3 +52,4 @@ img {
 }
 
 @import (less) "./details.less";
+@import (less) "./loading.less";
diff --git a/src/components/Album.vue b/src/components/Album.vue
index d8f7524..63cd463 100644
--- a/src/components/Album.vue
+++ b/src/components/Album.vue
@@ -1,8 +1,10 @@
 <template>
-  <router-link :to="{ name: 'Album', params: { name: album.artist, album: album.name } }" :class="'album'">
-    <h2 class="album-name">{{ title }}</h2>
-    <img :src="album.image" class="album-image">
-  </router-link>
+  <component :is="tagName" class="album-wrapper" :class="[extraClass]">
+    <router-link :to="{ name: 'Album', params: { name: album.artist, album: album.name } }" :class="'album'">
+      <img :src="album.image" class="album-image">
+      <h2 class="album-name">{{ title }}</h2>
+    </router-link>
+  </component>
 </template>
 
 <script>
@@ -16,6 +18,14 @@ export default {
     ignoreArtist: {
       type: Boolean,
       default: false
+    },
+    tagName: {
+      type: String,
+      default: 'li'
+    },
+    extraClass: {
+      type: String,
+      default: undefined
     }
   },
   computed: {
@@ -27,40 +37,50 @@ export default {
 </script>
 
 <style lang="less">
-  .album-list {
-    text-align: center;
-  }
+@import (reference, less) "../assets/styles/colors.less";
+
+@album-width: 180px;
+@image-size: 156px;
+@border-radius: 4px;
+
+.album-wrapper {
+  margin: 12px;
+}
 
-  .album {
-    width: 200px;
-    padding: 5px;
-    margin: 10px 0 5px 0;
+.album {
+  width: @album-width;
+  padding: 5px;
+  margin: 10px 0 5px 0;
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  transition: transform 0.3s ease-in-out;
+  overflow: hidden;
+
+  .album-image {
     display: inline-block;
-    box-sizing: border-box;
-    background-color: #ccc0;
-    transition: all 0.3s ease-in-out;
+    width: @image-size;
+    height: @image-size;
+    margin: 0 auto;
+    border-radius: @border-radius;
+    object-fit: cover;
 
-    .album-name {
-      display: block;
-      text-align: center;
-      width: 100%;
-      font-size: 20px;
-      max-height: 50px;
-      overflow: hidden;
+    &[src=""] {
+      background-color: @color-background-transparent;
     }
+  }
 
-    .album-image {
-      display: inline-block;
-      border-radius: 4px;
-      width: 156px;
-      height: 156px;
-      margin: 0 22px;
-      background-color: #ccc;
-      object-fit: cover;
-    }
+  .album-name {
+    display: block;
+    width: @image-size;
+    font-size: 16px;
+    max-height: 40px;
+    overflow: hidden;
+    margin: 0 auto;
+  }
 
-    &:hover {
-      background-color: #ccc2;
-    }
+  &:hover {
+    transform: scale3d(1.05, 1.05, 1);
   }
+}
 </style>
diff --git a/src/components/Artist.vue b/src/components/Artist.vue
index 81b40ba..3704c29 100644
--- a/src/components/Artist.vue
+++ b/src/components/Artist.vue
@@ -1,8 +1,10 @@
 <template>
-  <router-link class="artist" :to="{ name: 'Artist', params: { name: artist.name } }">
-    <h2 class="artist-name flex-no-borders">{{ artist.name }}</h2>
-    <img :src="artist.image" class="artist-image">
-  </router-link>
+  <component :is="tagName" class="artist-wrapper" :class="[extraClass]">
+    <router-link class="artist" :to="{ name: 'Artist', params: { name: artist.name } }">
+      <img :src="artist.image" class="artist-image">
+      <h2 class="artist-name">{{ artist.name }}</h2>
+    </router-link>
+  </component>
 </template>
 
 <script>
@@ -12,14 +14,29 @@ export default {
     artist: {
       type: Object,
       required: true
+    },
+    tagName: {
+      type: String,
+      default: 'li'
+    },
+    extraClass: {
+      type: String,
+      default: undefined
     }
   }
 };
 </script>
 
 <style lang="less">
+@import (reference, less) "../assets/styles/colors.less";
+
 @artist-width: 200px;
-@image-size: 156px;
+@image-size: 174px;
+@border-radius: 8px;
+
+.artist-wrapper {
+  margin: 18px;
+}
 
 .artist {
   width: @artist-width;
@@ -27,29 +44,33 @@ export default {
   margin: 10px 0 5px 0;
   display: inline-block;
   box-sizing: border-box;
-  background-color: #ccc0;
-  transition: all 0.3s ease-in-out;
-
-  .artist-name {
-    display: block;
-    width: 100%;
-    font-size: 20px;
-    max-height: 50px;
-    overflow: hidden;
-  }
+  transition: transform .3s ease-in-out;
+  overflow: hidden;
 
   .artist-image {
     display: inline-block;
-    border-radius: 4px;
     width: @image-size;
     height: @image-size;
     margin: 0 auto;
-    background-color: #ccc;
+    border-radius: @border-radius;
     object-fit: cover;
+
+    &[src=""] {
+      background-color: @color-background-transparent;
+    }
+  }
+
+  .artist-name {
+    display: block;
+    width: @image-size;
+    font-size: 20px;
+    max-height: 50px;
+    overflow: hidden;
+    margin: 0 auto;
   }
 
   &:hover {
-    background-color: #ccc2;
+    transform: scale3d(1.05, 1.05, 1);
   }
 }
 
@@ -58,13 +79,14 @@ export default {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
-    justify-content: flex-end;
-    height: 240px;
+    justify-content: flex-start;
+    width: auto;
+    height: 236px;
     padding: 0;
     margin: 0;
 
     .artist-name {
-      min-height: 48px;
+      margin-top: 10px;
     }
   }
 }
diff --git a/src/components/Result.vue b/src/components/Result.vue
index ca247b0..b43a820 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -7,15 +7,11 @@
     <h2 v-if="!showDefaultSearch" class="search-title">{{ type }}s</h2>
 
     <ul v-if="isArtist" class="artist-list flex-list">
-      <li v-for="artist in artists" :key="artist.mbid" class="artist-wrapper flex-no-borders">
-        <Artist :artist="artist" />
-      </li>
+      <Artist v-for="artist in artists" :key="artist.mbid" :artist="artist" />
     </ul>
 
     <ul v-if="isAlbum" class="album-list flex-list">
-      <li v-for="album in albums" :key="album.id" class="album-wrapper flex-no-borders">
-        <Album :album="album" />
-      </li>
+      <Album v-for="album in albums" :key="album.id" :album="album" />
     </ul>
 
     <ul v-if="isTrack" class="track-list flex-list">
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 73c2f03..be8ec61 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -23,8 +23,8 @@ export default {
       old: { search: '', type: 'track' },
       types: [
         { name: 'Tracks', value: 'track' },
-        { name: 'Artists', value: 'artist' },
-        { name: 'Albums', value: 'album' }
+        { name: 'Albums', value: 'album' },
+        { name: 'Artists', value: 'artist' }
       ]
     };
   },
diff --git a/src/components/Song.vue b/src/components/Song.vue
index 0923c59..032e384 100644
--- a/src/components/Song.vue
+++ b/src/components/Song.vue
@@ -101,7 +101,8 @@ export default {
     margin: 0;
     margin-left: 10px;
     vertical-align: 65%;
-    font-size: 20px;
+    font-size: 18px;
+    font-weight: 300;
     width: calc(100% - 80px);
     overflow: hidden;
     white-space: nowrap;
@@ -134,7 +135,7 @@ export default {
   }
 
   &:hover {
-    background-color: @color-background-dark;
+    background-color: @color-background-transparent;
 
     .track-play {
       opacity: 0.90;
@@ -142,7 +143,7 @@ export default {
   }
 
   &.track-in-playlist {
-    background-color: @color-background-dark;
+    background-color: @color-background-transparent;
 
     .track-title {
       font-weight: 600;
diff --git a/src/components/artist/Albums.vue b/src/components/artist/Albums.vue
index d2d938d..2476c58 100644
--- a/src/components/artist/Albums.vue
+++ b/src/components/artist/Albums.vue
@@ -2,10 +2,8 @@
   <div v-if="ready" class="albums margin-top-xl">
     <h4 class="title">Albums</h4>
 
-    <ul class="album-list">
-      <li v-for="album in visibleAlbums" :key="album.id" class="album-wrapper">
-        <Album :album="album" :ignore-artist="true" />
-      </li>
+    <ul class="album-list flex-list">
+      <Album v-for="album in visibleAlbums" :key="album.id" :album="album" :ignore-artist="true" />
 
       <li v-if="showSeeMore" class="see-more" @click="seeMore">
         <h2 class="see-more-text">See more</h2>
diff --git a/src/components/artist/Similar.vue b/src/components/artist/Similar.vue
index 33345b3..2b59461 100644
--- a/src/components/artist/Similar.vue
+++ b/src/components/artist/Similar.vue
@@ -2,10 +2,8 @@
   <div class="similar">
     <h4 class="title">Similar Artists</h4>
 
-    <ul class="artist-list">
-      <li v-for="similar in similars" :key="similar.name" class="artist-wrapper">
-        <Artist :artist="similar" />
-      </li>
+    <ul class="artist-list flex-list">
+      <Artist v-for="similar in similars" :key="similar.mbid" :artist="similar" extra-class="similar-artist" />
     </ul>
   </div>
 </template>
@@ -33,27 +31,31 @@ export default {
 </script>
 
 <style lang="less">
-.similar {
-  .artist-wrapper {
-    display: block;
-    padding: 0;
-  }
+.artist-wrapper.similar-artist {
+  margin: 0;
 
-  .artist {
-    .name {
-      font-size: 18px;
-      letter-spacing: 0.5px;
-    }
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
 
-    .image {
-      width: 87px;
-      height: 87px;
-      border-radius: 50%;
-    }
+  .artist .artist-name {
+    font-size: 18px;
   }
 
-  .artist-wrapper:first-child .artist .artist-name {
-    margin-top: 0;
+  @supports (display: flex) {
+    .artist {
+      height: 212px;
+
+      .artist-image {
+        width: 156px;
+        height: 156px;
+      }
+
+      .artist-name {
+        width: 156px;
+        max-height: 45px;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/player/ButtonsPanel.vue b/src/components/player/ButtonsPanel.vue
index d6309fe..c337719 100644
--- a/src/components/player/ButtonsPanel.vue
+++ b/src/components/player/ButtonsPanel.vue
@@ -21,7 +21,7 @@ export default {
     ...mapGetters(['hasPrevSong', 'hasNextSong'])
   },
   methods: {
-    playPause() {
+    playPause () {
       this.$emit(this.isPlaying ? 'pause' : 'play');
     },
     playPrevSong () {
@@ -45,17 +45,17 @@ export default {
   line-height: 24px;
   font-size: 28px;
 
-  .control-button  {
+  .control-button {
     cursor: pointer;
-    color: @color-light-letter;
+    color: @color-gray;
     transition: all 0.3s ease-in-out;
 
     &:hover {
-      color: @color-letter;
+      color: @color-dark-gray;
     }
 
     &.disabled {
-      color: @color-lighter-letter;
+      color: @color-lighter-gray;
       pointer-events: none;
     }
 
diff --git a/src/components/player/Player.vue b/src/components/player/Player.vue
index 813c857..2bb6ab8 100644
--- a/src/components/player/Player.vue
+++ b/src/components/player/Player.vue
@@ -5,8 +5,8 @@
     </div>
 
     <div class="player-title">
-      <router-link class="artist" :to="{ name: 'Artist', params: { name: playing.artist } }">{{ playing.artist }}</router-link>
-      <span class="track">{{ playing.track }}</span>
+      <router-link class="player-title-artist" :to="{ name: 'Artist', params: { name: playing.artist } }">{{ playing.artist }}</router-link>
+      <span class="player-title-track">{{ playing.track }}</span>
     </div>
 
     <div class="player-controls-panel">
@@ -180,25 +180,20 @@ export default {
     box-sizing: border-box;
     vertical-align: middle;
 
-    .artist, .track {
+    .player-title-artist, .player-title-track {
+      display: block;
       width: 100%;
       margin: 0;
       padding: 0;
-      display: block;
+      color: @color-gray;
 
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-
-      &:hover {
-        background: none;
-        cursor: default;
-      }
     }
 
-    .artist {
+    .player-title-artist {
       font-family: "Roboto", sans-serif;
-      color: @color-letter;
       font-size: 25px;
       font-weight: 800;
 
@@ -206,7 +201,7 @@ export default {
         cursor: pointer;
       }
     }
-    .track {
+    .player-title-track {
       font-family: "Open Sans", sans-serif;
       font-size: 21px;
       font-weight: 300;
diff --git a/src/components/player/Playlist.vue b/src/components/player/Playlist.vue
index a1a28ef..8a393ae 100644
--- a/src/components/player/Playlist.vue
+++ b/src/components/player/Playlist.vue
@@ -28,12 +28,12 @@ export default {
     display: block;
     font-size: 30px;
     cursor: pointer;
-    color: @color-light-letter;
+    color: @color-light-gray;
     transform: scale3d(1.25, 1.1, 1);
     transition: color 0.3s ease-in-out;
 
     &:hover {
-      color: @color-letter;
+      color: @color-gray;
     }
   }
   .playlist-info {
diff --git a/src/components/player/ProgressBar.vue b/src/components/player/ProgressBar.vue
index 424b511..3cc7fb7 100644
--- a/src/components/player/ProgressBar.vue
+++ b/src/components/player/ProgressBar.vue
@@ -137,7 +137,7 @@ export default {
   .duracion-background {
     .duration-bar();
     width: 100%;
-    background-color: @color-gray;
+    background-color: lighten(@color-gray, 50%);
     cursor: pointer;
   }
 
@@ -150,8 +150,8 @@ export default {
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       content: attr(data-tooltip);
-      background: #464646;
-      color: #fff;
+      background: @color-gray;
+      color: @color-white;
       width: 50px;
       padding: 4px 0;
       text-align: center;
@@ -161,19 +161,19 @@ export default {
       right: -25px;
       opacity: 0;
       transition: all 0.1s linear;
-      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.10);
+      box-shadow: 0 0 2px 2px @color-shadow-light;
       z-index: 5;
     }
   }
 
   .duration-progress {
     .duration-bar();
-    background-color: @color-dark-gray;
+    background-color: @color-light-gray;
     pointer-events: none;
 
     &::after {
       content: '';
-      background-color: @color-dark-gray;
+      background-color: @color-light-gray;
       width: 11px;
       height: 11px;
       position: absolute;
@@ -182,7 +182,7 @@ export default {
       border-radius: 50%;
       opacity: 0;
       transition: all 0.1s linear;
-      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.10);
+      box-shadow: 0 0 1px 1px @color-shadow-light;
     }
   }
 
diff --git a/src/components/player/SoundControl.vue b/src/components/player/SoundControl.vue
index 641e28f..2995d7f 100644
--- a/src/components/player/SoundControl.vue
+++ b/src/components/player/SoundControl.vue
@@ -67,31 +67,31 @@ export default {
       content: ' ';
       position: absolute;
       display: block;
-      background-color: @color-light-letter;
+      background-color: @color-gray;
       width: 3px;
       height: 35px;
       top: -8px;
       right: 10px;
       transform: rotate(45deg);
       border-radius: 5px;
-      border: 2px solid @color-light-letter;
+      border: 2px solid @color-gray;
       transition: all 0.3s ease-in-out;
     }
 
     .volume-icon {
       font-size: 28px;
       cursor: pointer;
-      color: @color-light-letter;
+      color: @color-gray;
       transition: all 0.3s ease-in-out;
     }
 
     &.muted:hover::after {
-      background-color: @color-letter;
-      border-color: @color-letter;
+      background-color: @color-dark-gray;
+      border-color: @color-dark-gray;
     }
 
     &:hover .volume-icon {
-      color: @color-letter;
+      color: @color-dark-gray;
     }
   }
 
diff --git a/src/components/player/VolumeBar.vue b/src/components/player/VolumeBar.vue
index 27b3b7f..755a899 100644
--- a/src/components/player/VolumeBar.vue
+++ b/src/components/player/VolumeBar.vue
@@ -117,7 +117,7 @@ export default {
   .volume-background {
     .volume-bar-aux();
     width: 100%;
-    background-color: @color-gray;
+    background-color: lighten(@color-gray, 50%);
 
     &:not(.muted) {
       cursor: pointer;
@@ -133,8 +133,8 @@ export default {
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       content: attr(data-tooltip);
-      background: #464646;
-      color: #fff;
+      background: @color-gray;
+      color: @color-white;
       width: 50px;
       padding: 4px 0;
       text-align: center;
@@ -144,19 +144,19 @@ export default {
       right: -25px;
       opacity: 0;
       transition: all 0.1s linear;
-      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.10);
+      box-shadow: 0 0 2px 2px @color-shadow-light;
       z-index: 5;
     }
   }
 
   .volume-progress {
     .volume-bar-aux();
-    background-color: @color-dark-gray;
+    background-color: @color-light-gray;
     pointer-events: none;
 
     &::after {
       content: '';
-      background-color: @color-dark-gray;
+      background-color: @color-light-gray;
       width: 11px;
       height: 11px;
       position: absolute;
@@ -165,7 +165,7 @@ export default {
       border-radius: 50%;
       opacity: 0;
       transition: all 0.1s linear;
-      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.10);
+      box-shadow: 0 0 1px 1px @color-shadow-light;
     }
   }
 
diff --git a/src/components/playlist/Song.vue b/src/components/playlist/Song.vue
index 4245aa7..8d83b22 100644
--- a/src/components/playlist/Song.vue
+++ b/src/components/playlist/Song.vue
@@ -84,7 +84,7 @@ export default {
   }
 
   &.track-selected {
-    background-color: @color-background-dark;
+    background-color: @color-background-transparent;
 
     .track-play {
       opacity: 1;
diff --git a/src/components/static/Header.vue b/src/components/static/Header.vue
index a623eb3..3bc5402 100644
--- a/src/components/static/Header.vue
+++ b/src/components/static/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="header float-box">
+  <header class="header float-box loading-translate">
     <router-link :to="{ name: 'Main', params: {} }"><i class="header-icon fas fa-music" /></router-link>
     <span class="header-title">Bruga Music</span>
     <div class="author"><span class="author-text">Made with </span><i class="heart fas fa-heart" /><span class="author-text"> by Andrés Brugarolas</span></div>
@@ -23,8 +23,8 @@ export default {
   left: 0;
   width: 100%;
   padding: 12px 50px;
-  background-color: #191a28; // color: dark-blue
-  box-shadow: 0 1/4rem 1/8rem 0 @color-shadow;
+  background-color: @color-header-background;
+  box-shadow: @background-shadow;
   z-index: 2;
 
   .header-title {
diff --git a/src/index.html b/src/index.html
index 60ee4f6..dcb48d4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,6 @@
   </head>
   <body>
     <div id="background" class="visible">${ require('./partials/loading.html') }</div>
-
     <div id="app"></div>
   </body>
 </html>
diff --git a/src/partials/spinners/bouncing-balls.html b/src/partials/spinners/bouncing-balls.html
index 485289a..f27e32a 100644
--- a/src/partials/spinners/bouncing-balls.html
+++ b/src/partials/spinners/bouncing-balls.html
@@ -7,9 +7,9 @@
     width: 100%;
     font-size: 50px;
     text-align: center;
-    color: #aaa;
+    color: #bbb;
     opacity: 1;
-    mix-blend-mode: soft-light;
+    mix-blend-mode: overlay;
     transition: top 0.7s ease-in-out, opacity 0.55s ease-in-out;
     font-family: Helvetica, Verdana, Arial, sans-serif;
     font-variant: small-caps;
@@ -43,6 +43,7 @@
     border-radius: 50%;
     background-color: #ffccbaba;
     box-shadow: 0 0 8px 2px #2224;
+    mix-blend-mode: soft-light;
   }
   .bouncing-balls .ball:last-child {
     margin-right: 0;
diff --git a/webpack.config.js b/webpack.config.js
index 9ed3d2e..3f9d124 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -54,7 +54,10 @@ module.exports = {
         exclude: /node_modules/,
         options: {
           presets: [
-            [ '@babel/env', { targets: { browsers: [ 'last 2 versions' ] }, useBuiltIns: 'usage', modules: false } ]
+            [ '@babel/env', { targets: { browsers: [ 'last 2 versions' ] }, useBuiltIns: 'usage', corejs: 3, modules: false } ]
+          ],
+          plugins: [
+            [ '@babel/transform-runtime', { corejs: 3 } ]
           ]
         }
       },