finished the favourite section click behaviour

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

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

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