From 7c856cff3973c63920aa11f629a3067cd9d78ec1 Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Fri, 26 Jul 2019 15:26:28 +0430
Subject: [PATCH 01/12] finished the list layout & list item

---
 src/renderer/components/Button.vue        |  1 +
 src/renderer/components/FavouriteItem.vue | 39 ++++++++++++++
 src/renderer/layouts/HomePage.vue         | 45 ++++++++++++++--
 src/renderer/layouts/List.vue             | 62 +++++++++++++++++++++++
 src/renderer/layouts/MusicRow.vue         |  2 +-
 5 files changed, 145 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/FavouriteItem.vue
 create mode 100644 src/renderer/layouts/List.vue

diff --git a/src/renderer/components/Button.vue b/src/renderer/components/Button.vue
index 1ff917c..6e51c65 100644
--- a/src/renderer/components/Button.vue
+++ b/src/renderer/components/Button.vue
@@ -36,6 +36,7 @@ export default {
       background-color: lighten(#336cfb,5)
     &:focus,&:active
       background-color: darken(#336cfb,5)
+
   svg
     width: 14px
     height: 14px
diff --git a/src/renderer/components/FavouriteItem.vue b/src/renderer/components/FavouriteItem.vue
new file mode 100644
index 0000000..bf5264c
--- /dev/null
+++ b/src/renderer/components/FavouriteItem.vue
@@ -0,0 +1,39 @@
+<template>
+  <tr>
+      <td class="song">
+        <img :src="item.artwork" alt="Artwork">  
+        {{item.title}}
+      </td>
+
+      <td>
+        {{item.artist}}
+      </td>
+
+      <td>
+        {{item.duration}}
+      </td>
+  </tr>
+</template>
+
+<script>
+export default {
+  name: 'ListItem',
+  props: ['item']
+}
+</script>
+
+<style lang="sass" scoped>
+tr
+  width: 100%
+  height: 100%
+  padding: .3rem .5rem
+
+  td
+    vertical-align: middle
+
+  img
+    width: 3rem
+    height: 3rem
+    margin-right: .3rem
+</style>
+
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 83a90cc..9905d14 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,18 +1,28 @@
 <template>
     <section>
       <ActionBar />
-      <div>
+      <div class="upper-row">
         <MusicRow :items='items' />
       </div>
+
+      <div class="middle-row">
+        <List class="grow-half">
+          <ListItem v-for="favourite in favourties" :key="favourite.id"></ListItem>
+        </List>
+        <div class="grow-half"></div>
+      </div>
+
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
 import MusicRow from './MusicRow'
+import List from './FavouriteList'
+
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicRow },
+  components: { ActionBar, MusicRow, List },
   data: () => {
     return {
       items: [
@@ -70,6 +80,29 @@ export default {
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
         }
+      ],
+      favourites: [
+        {
+          id: 1,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          duration: '3:30',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 2,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          duration: '4:30',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 3,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          duration: '5:30',
+          artwork: '/static/demo/clever.jpg'
+        }
       ]
     }
   }
@@ -81,5 +114,11 @@ section.page
     padding: 1rem 2.5rem
     overflow-x: hidden
     .VueCarousel-wrapper
-        overflow: unset
+      overflow: unset
+
+    .middle-row
+      display: flex
+
+    .grow-half
+      flex: 1 0 50% // deviding the space equally between two element
 </style>
diff --git a/src/renderer/layouts/List.vue b/src/renderer/layouts/List.vue
new file mode 100644
index 0000000..5aeb8f7
--- /dev/null
+++ b/src/renderer/layouts/List.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="favourite__title-container">
+      <legend>favourite songs</legend>
+      <Button variant="outlined" class="view-all">View All</Button>
+    </div>
+
+    <ul>
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+
+<script>
+import FavouriteItem from '../components/FavouriteItem'
+import Button from '../components/Button'
+export default {
+  name: 'List',
+  props: ['favourites'],
+  components: { FavouriteItem, Button }
+}
+</script>
+
+<style lang="sass" scoped>
+// TITLE
+.favourite__title-container
+  display: flex
+  justify-content: space-between
+  align-items: center
+legend
+  font-size: 2rem
+  font-family: 'Roboto Slab', serif        
+  margin: 20px 0px
+  text-transform: capitalize
+.view-all
+  border-radius: 1rem
+  line-height: .1rem
+  padding: .9rem 1.3rem
+  font-weight: 300
+  text-transform: capitalize
+  display: flex
+  align-items: center
+  justify-content: center
+
+// TABLE
+table
+  width: 100%
+  border-collapse: collapse
+th
+  color: lighten(grey, 20)
+  font-weight: 300
+  text-transform: capitalize
+  text-align: left
+  // define width based on amount of content 
+  &#song
+    width: 50%
+  &#artist
+    width: 34%
+  &#duration
+    width: 16%
+
+</style>
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index 1cf4dce..c5b7aa3 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <legend>Top music of the month</legend>
+        <legend>Top Rated</legend>
         <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
           <Slide v-for="item in items" :key="item.id">
             <MusicBox  :item="item" />

From 1b08833e3e6e7aaa7236922188fce31d94d17274 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 16:30:47 +0430
Subject: [PATCH 02/12] pdated playerbar and implemented hover effect enter and
 removed cursor

---
 src/renderer/layouts/PlayerBar.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index b5ab1a0..6cc2340 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -33,6 +33,7 @@ export default {
       container: '#visualizer',
       waveColor: '#c3c3c3',
       progressColor: '#336cfb',
+      cursorColor: 'rgba(0,0,0,0)',
       barWidth: 2,
       barHeight: 1,
       barGap: null,
@@ -47,6 +48,12 @@ export default {
     this.wavesurfer.on('audioprocess', (amount) => {
       progress.innerHTML = formatSeconds(amount)
     })
+    let waves = this.wavesurfer.container.getElementsByTagName('wave')
+    let progressWave = waves[1]
+    let mainWave = waves[0]
+    mainWave.addEventListener('mousemove', (e) => {
+      progressWave.style.width = e.offsetX + 'px'
+    })
   },
   data () {
     return {
@@ -59,7 +66,6 @@ export default {
       let img = this.$el.getElementsByTagName('img')[0]
       color(img.src, (_, color) => {
         this.wavesurfer.setProgressColor(`#${color}`)
-        this.wavesurfer.setCursorColor(`#${color}`)
       })
     },
     play () {
@@ -119,5 +125,5 @@ section.player
         height: 64px
         wave
             overflow-x: hidden !important
-            cursor: e-resize
+            cursor: pointer
 </style>

From 16fd7f0765f4507b3724b149f92c8f5baad4bcf9 Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Fri, 26 Jul 2019 17:16:37 +0430
Subject: [PATCH 03/12] finished based settings of favourite songs part of the
 middle row

---
 src/renderer/components/FavouriteItem.vue | 39 ----------
 src/renderer/components/ListItem.vue      | 55 ++++++++++++++
 src/renderer/layouts/HomePage.vue         | 90 +++++++++++++++++++----
 src/renderer/layouts/List.vue             | 50 ++-----------
 4 files changed, 137 insertions(+), 97 deletions(-)
 delete mode 100644 src/renderer/components/FavouriteItem.vue
 create mode 100644 src/renderer/components/ListItem.vue

diff --git a/src/renderer/components/FavouriteItem.vue b/src/renderer/components/FavouriteItem.vue
deleted file mode 100644
index bf5264c..0000000
--- a/src/renderer/components/FavouriteItem.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <tr>
-      <td class="song">
-        <img :src="item.artwork" alt="Artwork">  
-        {{item.title}}
-      </td>
-
-      <td>
-        {{item.artist}}
-      </td>
-
-      <td>
-        {{item.duration}}
-      </td>
-  </tr>
-</template>
-
-<script>
-export default {
-  name: 'ListItem',
-  props: ['item']
-}
-</script>
-
-<style lang="sass" scoped>
-tr
-  width: 100%
-  height: 100%
-  padding: .3rem .5rem
-
-  td
-    vertical-align: middle
-
-  img
-    width: 3rem
-    height: 3rem
-    margin-right: .3rem
-</style>
-
diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
new file mode 100644
index 0000000..9e02ae6
--- /dev/null
+++ b/src/renderer/components/ListItem.vue
@@ -0,0 +1,55 @@
+<template>
+  <li>
+      <div class="song">
+        <img :src="item.artwork" alt="Artwork">  
+        {{item.title}}
+      </div>
+
+      <div class="artist">
+        {{item.artist}}
+      </div>
+
+      <div class="duration">
+        {{item.duration}}
+      </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'ListItem',
+  props: ['item']
+}
+</script>
+
+<style lang="sass" scoped>
+li
+  width: 100%
+  list-style: none
+  display: flex
+  justify-content: space-between
+  margin-bottom: .6rem
+
+  div.song
+    display: flex
+    align-items: center
+    flex: 1 0 50%
+
+  div.artist
+    display: flex
+    align-items: center
+    flex: 1 0 40%
+
+  div.duration
+    display: flex
+    align-items: center
+    justify-content: center
+    flex: 1 0 15%
+
+  img
+    width: 4rem
+    height: 4rem
+    margin-right: .6rem
+    border-radius: 6px
+</style>
+
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 9905d14..e31d356 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -6,9 +6,30 @@
       </div>
 
       <div class="middle-row">
-        <List class="grow-half">
-          <ListItem v-for="favourite in favourties" :key="favourite.id"></ListItem>
-        </List>
+        <div class="grow-half">
+          <div class="favourite__title-container">
+            <legend>favourite songs</legend>
+            <Button variant="outlined" class="view-all">View All</Button>
+          </div>
+          
+          <div class="favourite__list-header">
+            <span class="song">
+              <p>songs</p>
+            </span>
+
+            <span class="artist">
+              <p>artist</p>
+            </span>
+
+            <span class="duration">
+              <p>duration</p>
+            </span>
+          </div>
+          <List >
+            <ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
+          </List>
+        </div>
+
         <div class="grow-half"></div>
       </div>
 
@@ -18,11 +39,13 @@
 <script>
 import ActionBar from './ActionBar'
 import MusicRow from './MusicRow'
-import List from './FavouriteList'
+import List from './List'
+import ListItem from '../components/ListItem'
+import Button from '../components/Button'
 
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicRow, List },
+  components: { ActionBar, MusicRow, List, ListItem, Button },
   data: () => {
     return {
       items: [
@@ -109,16 +132,55 @@ export default {
 }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 section.page
-    padding: 1rem 2.5rem
-    overflow-x: hidden
-    .VueCarousel-wrapper
-      overflow: unset
+  padding: 1rem 2.5rem
+  overflow-x: hidden
+  .VueCarousel-wrapper
+    overflow: unset
 
-    .middle-row
+  .middle-row
+    display: flex
+
+  .grow-half
+    flex: 1 0 50% // deviding the space equally between two element
+
+.favourite
+  &__list-header
+    width: 100%
+    padding: 0.3rem .6rem
+    display: flex
+    justify-content: space-between
+
+    span.song
+        flex: 1 0 50%
+    span.artist
+      flex: 1 0 40%
+    span.duration
+      flex: 1 0 10%
+
+    p
+      color: lighten(grey , 20)
+      text-transform: capitalize
+      
+  &__title-container
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    legend
+      font-size: 2rem
+      font-family: 'Roboto Slab', serif        
+      margin: 20px 0px
+      text-transform: capitalize
+
+    .view-all
+      border-radius: 1rem
+      line-height: .1rem
+      padding: .9rem 1.3rem
+      font-weight: 300
+      text-transform: capitalize
       display: flex
-
-    .grow-half
-      flex: 1 0 50% // deviding the space equally between two element
+      align-items: center
+      justify-content: center
 </style>
diff --git a/src/renderer/layouts/List.vue b/src/renderer/layouts/List.vue
index 5aeb8f7..201b815 100644
--- a/src/renderer/layouts/List.vue
+++ b/src/renderer/layouts/List.vue
@@ -1,9 +1,5 @@
 <template>
   <div>
-    <div class="favourite__title-container">
-      <legend>favourite songs</legend>
-      <Button variant="outlined" class="view-all">View All</Button>
-    </div>
 
     <ul>
       <slot></slot>
@@ -12,51 +8,17 @@
 </template>
 
 <script>
-import FavouriteItem from '../components/FavouriteItem'
-import Button from '../components/Button'
+import FavouriteItem from '../components/ListItem'
+
 export default {
   name: 'List',
   props: ['favourites'],
-  components: { FavouriteItem, Button }
+  components: { FavouriteItem }
 }
 </script>
 
 <style lang="sass" scoped>
-// TITLE
-.favourite__title-container
-  display: flex
-  justify-content: space-between
-  align-items: center
-legend
-  font-size: 2rem
-  font-family: 'Roboto Slab', serif        
-  margin: 20px 0px
-  text-transform: capitalize
-.view-all
-  border-radius: 1rem
-  line-height: .1rem
-  padding: .9rem 1.3rem
-  font-weight: 300
-  text-transform: capitalize
-  display: flex
-  align-items: center
-  justify-content: center
-
-// TABLE
-table
-  width: 100%
-  border-collapse: collapse
-th
-  color: lighten(grey, 20)
-  font-weight: 300
-  text-transform: capitalize
-  text-align: left
-  // define width based on amount of content 
-  &#song
-    width: 50%
-  &#artist
-    width: 34%
-  &#duration
-    width: 16%
-
+ul
+  margin: 0
+  padding: .3rem 0rem
 </style>

From db7a30166f6ef24de84f6a4a6c456ee8a879c049 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 17:21:36 +0430
Subject: [PATCH 04/12] Fixed top rated carousel

---
 src/renderer/layouts/HomePage.vue  |  4 ++--
 src/renderer/layouts/PlayerBar.vue | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index e31d356..352bb74 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -132,12 +132,12 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="sass">
 section.page
   padding: 1rem 2.5rem
   overflow-x: hidden
   .VueCarousel-wrapper
-    overflow: unset
+     overflow: unset
 
   .middle-row
     display: flex
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 6cc2340..e56b64c 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -45,14 +45,34 @@ export default {
     this.wavesurfer.on('ready', () => {
       this.duration = formatSeconds(this.getDuration())
     })
+    let currentWidth = 0
+    let hoverStatus = false
+    let hoverWidth = '0px'
+    let isSeek = false
     this.wavesurfer.on('audioprocess', (amount) => {
+      currentWidth = progressWave.style.width
+      if (hoverStatus && !isSeek) {
+        progressWave.style.width = hoverWidth
+      }
+      isSeek = false
       progress.innerHTML = formatSeconds(amount)
     })
     let waves = this.wavesurfer.container.getElementsByTagName('wave')
     let progressWave = waves[1]
     let mainWave = waves[0]
+    mainWave.addEventListener('mouseenter', (e) => {
+      hoverStatus = true
+    })
     mainWave.addEventListener('mousemove', (e) => {
-      progressWave.style.width = e.offsetX + 'px'
+      hoverWidth = e.offsetX + 'px'
+      progressWave.style.width = hoverWidth
+    })
+    mainWave.addEventListener('mouseout', (e) => {
+      hoverStatus = false
+      progressWave.style.width = currentWidth
+    })
+    this.wavesurfer.on('seek', (amount) => {
+      isSeek = true
     })
   },
   data () {
@@ -126,4 +146,5 @@ section.player
         wave
             overflow-x: hidden !important
             cursor: pointer
+            transition: width 200ms ease
 </style>

From 815b1eb65a7f225041d6b39b5cc4cb2a5b344270 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 17:33:09 +0430
Subject: [PATCH 05/12] Updated ListItem to rounded

---
 src/renderer/components/ListItem.vue | 2 +-
 src/renderer/layouts/PlayerBar.vue   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
index 9e02ae6..0f8c9c8 100644
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@@ -50,6 +50,6 @@ li
     width: 4rem
     height: 4rem
     margin-right: .6rem
-    border-radius: 6px
+    border-radius: 10rem
 </style>
 
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index e56b64c..0d83745 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -72,6 +72,10 @@ export default {
       progressWave.style.width = currentWidth
     })
     this.wavesurfer.on('seek', (amount) => {
+      if (!this.playingStatus) {
+        this.wavesurfer.updateProgress()
+        console.log('wtf')
+      }
       isSeek = true
     })
   },

From b9a328c244faba46874c3b936961ff82e49d69e6 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 17:52:48 +0430
Subject: [PATCH 06/12] Fixed playerbar visualizer update on stopped / not
 played track

---
 src/renderer/layouts/PlayerBar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 0d83745..66c0314 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -61,6 +61,7 @@ export default {
     let progressWave = waves[1]
     let mainWave = waves[0]
     mainWave.addEventListener('mouseenter', (e) => {
+      isSeek = false
       hoverStatus = true
     })
     mainWave.addEventListener('mousemove', (e) => {
@@ -73,10 +74,10 @@ export default {
     })
     this.wavesurfer.on('seek', (amount) => {
       if (!this.playingStatus) {
-        this.wavesurfer.updateProgress()
-        console.log('wtf')
+        this.wavesurfer.drawer.progress(amount)
       }
       isSeek = true
+      currentWidth = progressWave.style.width
     })
   },
   data () {

From d3653dad92fed22cbbd3451f52b81a2ea1cea44e Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 18:12:22 +0430
Subject: [PATCH 07/12] Moved to owl-carousel due to features that were not
 implemented in vue-carousel

---
 package-lock.json                    | 220 ++++++++++++++++-----------
 package.json                         |   1 +
 src/renderer/components/MusicBox.vue |   3 +-
 src/renderer/layouts/MusicRow.vue    |  21 +--
 4 files changed, 143 insertions(+), 102 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 928d31c..978f341 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -534,7 +534,6 @@
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
       "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -545,14 +544,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
-      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
-      "dev": true
+      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
     },
     "align-text": {
       "version": "0.1.4",
@@ -685,14 +682,12 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
     "ansi-styles": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
     "anymatch": {
       "version": "2.0.0",
@@ -1358,7 +1353,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
       "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
-      "dev": true,
       "requires": {
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
@@ -1369,7 +1363,6 @@
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -2613,8 +2606,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
     "binary-extensions": {
       "version": "1.13.1",
@@ -3387,7 +3379,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3398,7 +3389,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -3407,7 +3397,6 @@
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -3914,7 +3903,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -3922,8 +3910,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "0.3.0",
@@ -4509,7 +4496,6 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
       "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
-      "dev": true,
       "requires": {
         "cssesc": "^0.1.0",
         "fastparse": "^1.1.1",
@@ -4520,7 +4506,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
           "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
-          "dev": true,
           "requires": {
             "regenerate": "^1.2.1",
             "regjsgen": "^0.2.0",
@@ -4544,8 +4529,7 @@
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
-      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
-      "dev": true
+      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
     },
     "cssnano": {
       "version": "3.10.0",
@@ -5513,8 +5497,7 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-      "dev": true
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -5732,8 +5715,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.11.1",
@@ -6169,8 +6151,7 @@
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-      "dev": true
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
     },
     "etag": {
       "version": "1.8.1",
@@ -6460,14 +6441,12 @@
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -6478,8 +6457,7 @@
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
     },
     "faye-websocket": {
       "version": "0.10.0",
@@ -8055,7 +8033,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -8086,8 +8063,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.0",
@@ -8819,14 +8795,12 @@
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
     },
     "icss-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
       "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
-      "dev": true,
       "requires": {
         "postcss": "^6.0.1"
       },
@@ -8835,7 +8809,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -8845,14 +8818,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -9646,6 +9617,11 @@
         "semver": "^5.3.0"
       }
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-base64": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -9661,8 +9637,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -9707,8 +9682,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -10157,7 +10131,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
       "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^2.0.0",
@@ -10168,7 +10141,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -10176,8 +10148,7 @@
         "minimist": {
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
     },
@@ -10193,8 +10164,7 @@
     "lodash": {
       "version": "4.17.14",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
-      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==",
-      "dev": true
+      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
     },
     "lodash._arraycopy": {
       "version": "3.0.0",
@@ -12057,6 +12027,14 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "owl.carousel": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/owl.carousel/-/owl.carousel-2.3.4.tgz",
+      "integrity": "sha512-JaDss9+feAvEW8KZppPSpllfposEzQiW+Ytt/Xm5t/3CTJ7YVmkh6RkWixoA2yXk2boIwedYxOvrrppIGzru9A==",
+      "requires": {
+        "jquery": ">=1.8.3"
+      }
+    },
     "p-cancelable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
@@ -12747,7 +12725,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
       "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
-      "dev": true,
       "requires": {
         "postcss": "^6.0.1"
       },
@@ -12756,7 +12733,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -12766,14 +12742,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -12784,7 +12758,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
       "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
-      "dev": true,
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -12794,7 +12767,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -12804,14 +12776,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -12822,7 +12792,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
       "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
-      "dev": true,
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -12832,7 +12801,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -12842,14 +12810,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -12860,7 +12826,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
       "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
-      "dev": true,
       "requires": {
         "icss-replace-symbols": "^1.1.0",
         "postcss": "^6.0.1"
@@ -12870,7 +12835,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -12880,14 +12844,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -12992,8 +12954,7 @@
     "postcss-value-parser": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
     },
     "postcss-zindex": {
       "version": "2.2.0",
@@ -13234,8 +13195,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "q": {
       "version": "1.5.1",
@@ -13886,8 +13846,7 @@
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
-      "dev": true
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
     },
     "regenerator-runtime": {
       "version": "0.11.1",
@@ -13964,14 +13923,12 @@
     "regjsgen": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
-      "dev": true
+      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
     },
     "regjsparser": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
       "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
-      "dev": true,
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -13979,8 +13936,7 @@
         "jsesc": {
           "version": "0.5.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-          "dev": true
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
         }
       }
     },
@@ -15099,8 +15055,7 @@
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
-      "dev": true
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
     },
     "source-map": {
       "version": "0.5.7",
@@ -15502,7 +15457,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -15571,8 +15525,7 @@
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
     "svgo": {
       "version": "0.7.2",
@@ -16487,7 +16440,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -16935,6 +16887,90 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-owl-carousel": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/vue-owl-carousel/-/vue-owl-carousel-2.0.3.tgz",
+      "integrity": "sha512-TRl6pnbL0HqlebOpEzbGbXL4KxJwlDGxAWeCREjNumvsjB5MXg875y+fkko/M3ML1nxJXIRHw1XWmXgxaQbang==",
+      "requires": {
+        "css-loader": "^1.0.0",
+        "file-loader": "^2.0.0",
+        "jquery": "^3.3.1",
+        "owl.carousel": "^2.3.4",
+        "style-loader": "^0.23.0"
+      },
+      "dependencies": {
+        "css-loader": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
+          "integrity": "sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==",
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "css-selector-tokenizer": "^0.7.0",
+            "icss-utils": "^2.1.0",
+            "loader-utils": "^1.0.2",
+            "lodash": "^4.17.11",
+            "postcss": "^6.0.23",
+            "postcss-modules-extract-imports": "^1.2.0",
+            "postcss-modules-local-by-default": "^1.2.0",
+            "postcss-modules-scope": "^1.1.0",
+            "postcss-modules-values": "^1.3.0",
+            "postcss-value-parser": "^3.3.0",
+            "source-list-map": "^2.0.0"
+          }
+        },
+        "file-loader": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
+          "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
+          "requires": {
+            "loader-utils": "^1.0.2",
+            "schema-utils": "^1.0.0"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "style-loader": {
+          "version": "0.23.1",
+          "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
+          "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+          "requires": {
+            "loader-utils": "^1.1.0",
+            "schema-utils": "^1.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
diff --git a/package.json b/package.json
index 971c5f8..a386a43 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "vue-carousel": "^0.18.0",
     "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
+    "vue-owl-carousel": "^2.0.3",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
     "vuex-electron": "^1.0.0",
diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue
index 6657e14..dc64162 100644
--- a/src/renderer/components/MusicBox.vue
+++ b/src/renderer/components/MusicBox.vue
@@ -24,7 +24,8 @@ export default {
 
 <style scoped lang="sass">
 div.music-box
-    width: 140px
+    width: 8.4rem
+    margin: 0 1rem
     img
         border-radius: 100%
         width: 100%
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index c5b7aa3..08a426e 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -1,29 +1,32 @@
 <template>
-    <section>
+    <section class="music-row">
         <legend>Top Rated</legend>
-        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
-          <Slide v-for="item in items" :key="item.id">
-            <MusicBox  :item="item" />
-          </Slide>
-        </Carousel>
+        <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
+           <MusicBox v-for="item in items" :key="item.id" :item="item" />
+        </carousel>
     </section>
 </template>
 
 <script>
 import { Carousel, Slide } from 'vue-carousel'
 import MusicBox from '../components/MusicBox'
+import carousel from 'vue-owl-carousel'
+
 export default {
   name: 'MusicRow',
   props: ['items'],
-  components: { MusicBox, Carousel, Slide }
+  components: { MusicBox, Carousel, Slide, carousel }
 }
 </script>
 
-<style scoped lang="sass">
+<style lang="sass">
 
-section
+section.music-row
     legend
         font-size: 2rem
         font-family: 'Roboto Slab', serif        
         margin: 20px 0px
+    .carousel-custom
+      .owl-stage-outer
+        overflow: unset
 </style>

From f63f0b41ace946c0eea6d62b37866a3367c565f8 Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Fri, 26 Jul 2019 18:14:07 +0430
Subject: [PATCH 08/12] added dominant color to ListItem component

---
 src/renderer/components/ListItem.vue | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
index 0f8c9c8..68ed894 100644
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li>
       <div class="song">
-        <img :src="item.artwork" alt="Artwork">  
+        <img @load="onLoad" :src="item.artwork" alt="Artwork">  
         {{item.title}}
       </div>
 
@@ -16,9 +16,21 @@
 </template>
 
 <script>
+import color from 'dominant-color'
 export default {
   name: 'ListItem',
-  props: ['item']
+  props: ['item'],
+
+  methods: {
+    onLoad () {
+      let img = this.$el.getElementsByTagName('img')[0]
+      let list = this.$el.getElementsByTagName('li')[0]
+
+      color(img.src, {format: 'hex'}, (_, color) => {
+        list.style.backgroundColor = `#${color}`
+      })
+    }
+  }
 }
 </script>
 
@@ -34,6 +46,12 @@ li
     display: flex
     align-items: center
     flex: 1 0 50%
+    
+    img
+      width: 4rem
+      height: 4rem
+      margin-right: .6rem
+      border-radius: 50%
 
   div.artist
     display: flex
@@ -46,10 +64,5 @@ li
     justify-content: center
     flex: 1 0 15%
 
-  img
-    width: 4rem
-    height: 4rem
-    margin-right: .6rem
-    border-radius: 10rem
 </style>
 

From 95db53f7fadba3609572c730dcfa24f55a3522ae Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 18:18:04 +0430
Subject: [PATCH 09/12] Removed vue-carousel

---
 package-lock.json                 | 42 ++-----------------------------
 package.json                      |  1 -
 src/renderer/layouts/MusicRow.vue |  1 -
 3 files changed, 2 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 978f341..adb0c0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5076,11 +5076,6 @@
         "entities": "^1.1.1"
       }
     },
-    "dom-walk": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
-    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -7825,15 +7820,6 @@
         "is-glob": "^2.0.0"
       }
     },
-    "global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "requires": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "global-dirs": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
@@ -10972,14 +10958,6 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
       "dev": true
     },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "requires": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
@@ -13020,7 +12998,8 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -16669,23 +16648,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
-    "vue-carousel": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
-      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
-      "requires": {
-        "global": "^4.3.2",
-        "regenerator-runtime": "^0.12.1",
-        "vue": "^2.5.17"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.12.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-        }
-      }
-    },
     "vue-custom-scrollbar": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.1.0.tgz",
diff --git a/package.json b/package.json
index a386a43..a71304d 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,6 @@
     "normalize-scss": "^7.0.1",
     "roboto-slab-fontface-kit": "^1.0.2",
     "vue": "^2.5.16",
-    "vue-carousel": "^0.18.0",
     "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
     "vue-owl-carousel": "^2.0.3",
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index 08a426e..b0f66f2 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import { Carousel, Slide } from 'vue-carousel'
 import MusicBox from '../components/MusicBox'
 import carousel from 'vue-owl-carousel'
 

From 1868c88b7e050096e9374d008d07e1a6f4a11229 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 18:18:56 +0430
Subject: [PATCH 10/12] Removed vue-carousel imports from components

---
 src/renderer/layouts/MusicRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index b0f66f2..0300fe0 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -14,7 +14,7 @@ import carousel from 'vue-owl-carousel'
 export default {
   name: 'MusicRow',
   props: ['items'],
-  components: { MusicBox, Carousel, Slide, carousel }
+  components: { MusicBox, carousel }
 }
 </script>
 

From 450c5f4f07da5a0cf4ef537849dc349f28a29831 Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Fri, 26 Jul 2019 18:43:23 +0430
Subject: [PATCH 11/12] finished the favourite section click behaviour

---
 src/renderer/components/Badge.vue    |  2 +-
 src/renderer/components/Button.vue   | 22 ++++++++++----------
 src/renderer/components/ListItem.vue | 30 ++++++++++++++++++----------
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/renderer/components/Badge.vue b/src/renderer/components/Badge.vue
index 19e7669..2d6af7c 100644
--- a/src/renderer/components/Badge.vue
+++ b/src/renderer/components/Badge.vue
@@ -18,7 +18,7 @@ export default {
     // base styles
     width: 1rem
     height: 1rem
-    background-color: #336cfb
+    background-color: #0076F9
     display: flex
     justify-content: center
     align-items: center
diff --git a/src/renderer/components/Button.vue b/src/renderer/components/Button.vue
index 6e51c65..1bb4dec 100644
--- a/src/renderer/components/Button.vue
+++ b/src/renderer/components/Button.vue
@@ -29,13 +29,13 @@ export default {
   box-sizing: border-box
   outline: unset
   &--contained 
-    background-color: #336cfb
+    background-color: #0076F9
     color: white
     font-weight: 600
     &:hover
-      background-color: lighten(#336cfb,5)
+      background-color: lighten(#0076F9,5)
     &:focus,&:active
-      background-color: darken(#336cfb,5)
+      background-color: darken(#0076F9,5)
 
   svg
     width: 14px
@@ -54,26 +54,26 @@ export default {
       background-color: rgba(0,0,0,.15)
 
   &--raised 
-    background-color: #336cfb
+    background-color: #0076F9
     color: white
     font-weight: 600
-    box-shadow: 0 .3rem .7rem rgba(#336cfb , .5)
+    box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
     &:hover
-      background-color: lighten(#336cfb,5)
+      background-color: lighten(#0076F9,5)
     &:focus,&:active
-      background-color: darken(#336cfb,5)
+      background-color: darken(#0076F9,5)
   &--outlined 
      background-color: white
-     border: 1px solid #336cfb
+     border: 1px solid #0076F9
      svg
-      fill: #336cfb
+      fill: #0076F9
      &:focus,&:active
-      background-color: darken(#336cfb,5)
+      background-color: darken(#0076F9,5)
       color: white
       svg
         fill: white
      &:hover
-      background-color: #336cfb
+      background-color: #0076F9
       color: white
       svg
         fill: white
diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
index 68ed894..2787c76 100644
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <li>
+  <li :class="{ 'active': active === true }" @click="toggleActive">
       <div class="song">
-        <img @load="onLoad" :src="item.artwork" alt="Artwork">  
+        <img :src="item.artwork" alt="Artwork">  
         {{item.title}}
       </div>
 
@@ -16,19 +16,20 @@
 </template>
 
 <script>
-import color from 'dominant-color'
+
 export default {
   name: 'ListItem',
   props: ['item'],
 
-  methods: {
-    onLoad () {
-      let img = this.$el.getElementsByTagName('img')[0]
-      let list = this.$el.getElementsByTagName('li')[0]
+  data () {
+    return {
+      active: false
+    }
+  },
 
-      color(img.src, {format: 'hex'}, (_, color) => {
-        list.style.backgroundColor = `#${color}`
-      })
+  methods: {
+    toggleActive () {
+      this.active = !this.active
     }
   }
 }
@@ -41,7 +42,14 @@ li
   display: flex
   justify-content: space-between
   margin-bottom: .6rem
-
+  padding: .4rem .8rem
+  border-radius: .5rem
+  
+  &.active
+    background-color: #0076F9
+    color: white
+    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
+    
   div.song
     display: flex
     align-items: center

From ff20b7b66895e9b606b289a07e56977c8b3ea90c Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 19:48:39 +0430
Subject: [PATCH 12/12] Added height animation to visualizer

---
 src/renderer/layouts/PlayerBar.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 66c0314..7fa0677 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -38,12 +38,14 @@ export default {
       barHeight: 1,
       barGap: null,
       autoCenter: true,
-      height: 64,
-      responsive: true
+      responsive: true,
+      height: 64
     })
     this.wavesurfer.load('/static/demo/music.mp3')
     this.wavesurfer.on('ready', () => {
       this.duration = formatSeconds(this.getDuration())
+      this.wavesurfer.container.style['height'] = '100%'
+      console.log(this.wavesurfer.container)
     })
     let currentWidth = 0
     let hoverStatus = false
@@ -148,8 +150,22 @@ section.player
     .visualizer
         flex-grow: 1
         height: 64px
+        position: relative
+        div
+          position: absolute
+          left: 0
+          top: 0
+          bottom: 0
+          margin: auto
+          transition: height 500ms ease
+          height: 0px
+          width: 100%
+          &.shade
+              pointer-events: none
+              opacity: 0.2
         wave
             overflow-x: hidden !important
             cursor: pointer
             transition: width 200ms ease
+            height: 100% !important
 </style>