Merge branch 'development' of github.com:nikandlv/jukebox into development

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,5 +1,5 @@
 <template>
-  <li>
+  <li :class="{ 'active': active === true }" @click="toggleActive">
       <div class="song">
         <img :src="item.artwork" alt="Artwork">  
         {{item.title}}
@@ -16,9 +16,22 @@
 </template>
 
 <script>
+
 export default {
   name: 'ListItem',
-  props: ['item']
+  props: ['item'],
+
+  data () {
+    return {
+      active: false
+    }
+  },
+
+  methods: {
+    toggleActive () {
+      this.active = !this.active
+    }
+  }
 }
 </script>
 
@@ -29,12 +42,25 @@ 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
     flex: 1 0 50%
     
+    img
+      width: 4rem
+      height: 4rem
+      margin-right: .6rem
+      border-radius: 50%
+
   div.artist
     display: flex
     align-items: center
@@ -46,10 +72,5 @@ li
     justify-content: center
     flex: 1 0 15%
 
-  img
-    width: 4rem
-    height: 4rem
-    margin-right: .6rem
-    border-radius: 10rem
 </style>