Button now defaults into flat mode

src/renderer/components/Button.vue

@@ -28,36 +28,36 @@ export default {
   transition: background-color 200ms
   box-sizing: border-box
   outline: unset
-  &--contained 
-    background-color: #0076F9
-    color: white
-    font-weight: 600
-    &:hover
-      background-color: lighten(#0076F9,5)
-    &:focus,&:active
-      background-color: darken(#0076F9,5)
-
-  svg
-    width: 14px
-    height: 14px
-    fill: white
-    transition: fill 200ms
-
-  &--flat 
   color: grey
   transition: all .2s ease-in-out
   svg
+    width: 14px
+    height: 14px
+    transition: fill 200ms
     fill: gray
   &:hover
     background-color: rgba(0,0,0,0.05)
   &:focus,&:active
     background-color: rgba(0,0,0,.15)
 
+  &--contained 
+    background-color: #0076F9
+    color: white
+    font-weight: 600
+    svg
+        fill: white
+    &:hover
+      background-color: lighten(#0076F9,5)
+    &:focus,&:active
+      background-color: darken(#0076F9,5)
+
   &--raised 
     background-color: #0076F9
     color: white
     font-weight: 600
     box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
+    svg
+        fill: white
     &:hover
       background-color: lighten(#0076F9,5)
     &:focus,&:active

src/renderer/layouts/DockableSidebar.vue

@@ -81,7 +81,7 @@
                     </MenuItem>
                 </MenuGroup>
 
-                <Button variant="contained" class="playlist-button">
+                <Button class="playlist-button">
                     <template v-slot:icon>
                         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
                             <g id="Add">

src/renderer/layouts/PlayerBar.vue

@@ -14,7 +14,9 @@
             <p class="remainingTime">{{duration}}</p>
         </div>
         <div class="control-buttons">
+            <IconButton variant="outlined">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
             <div class="play-pause-button" @click="togglePlay">
                 <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
                 <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
@@ -29,8 +31,10 @@ import WaveSurfer from 'wavesurfer.js'
 import minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap'
 import color from 'dominant-color'
 import { formatSeconds } from '../utility/DateTime'
+import IconButton from '../components/IconButton'
 export default {
   name: 'PlayerBar',
+  components: { IconButton },
   mounted () {
     let progress = this.$el.getElementsByClassName('progress')[0]
     this.wavesurfer = WaveSurfer.create({