From ade50bfc8553452d073a46741d75a276ac69cd6b Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sun, 28 Jul 2019 13:22:10 +0430
Subject: [PATCH] Added different sizes to iconbutton and adjusted the baseline
 of it

---
 src/renderer/components/Button.vue     |  1 +
 src/renderer/components/IconButton.vue | 54 +++++++++++++++++---------
 src/renderer/layouts/PlayerBar.vue     | 11 +++++-
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/Button.vue b/src/renderer/components/Button.vue
index b142f2a..ce0063f 100644
--- a/src/renderer/components/Button.vue
+++ b/src/renderer/components/Button.vue
@@ -7,6 +7,7 @@
 
 <script>
 export default {
+  name: 'Button',
   data () {
     return {
       className: `button--` + this.variant
diff --git a/src/renderer/components/IconButton.vue b/src/renderer/components/IconButton.vue
index ac7715a..6868742 100644
--- a/src/renderer/components/IconButton.vue
+++ b/src/renderer/components/IconButton.vue
@@ -1,5 +1,6 @@
 <template>
   <a href="#" role="button" class="icon-button" :class="className">
+    <slot name="icon"></slot>
     <slot></slot>
   </a>
 </template>
@@ -20,44 +21,59 @@ export default {
 
 <style lang="sass" scoped>
 .icon-button 
-  font-size: .9rem
+  display: flex
+  justify-content: center
+  align-items: center
+  width: 38px
+  height: 38px
   text-decoration: none
-  padding: .5rem 1rem
   text-transform: capitalize
-  border-radius: .375rem
+  border-radius: 100%
   transition: background-color 200ms
   box-sizing: border-box
   outline: unset
+  color: grey
+  transition: all .2s ease-in-out
+  &.large
+    width: 48px
+    height: 48px
+    svg
+        width: 32px
+        height: 32px    
+  &.small
+    width: 32px
+    height: 32px
+    svg
+        width: 14px
+        height: 14px    
+  svg
+    width: 24px
+    height: 24px
+    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)
 
-  svg
-    width: 14px
-    height: 14px
-    fill: white
-    transition: fill 200ms
-
-  &--flat 
-    color: grey
-    transition: all .2s ease-in-out
-    svg
-      fill: gray
-    &:hover
-      background-color: rgba(0,0,0,0.05)
-    &:focus,&:active
-      background-color: rgba(0,0,0,.15)
-
   &--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
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index b54b91e..7ab6668 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -14,7 +14,16 @@
             <p class="remainingTime">{{duration}}</p>
         </div>
         <div class="control-buttons">
-            <IconButton variant="outlined">
+            <IconButton >
+               <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>
+            <IconButton variant="contained">
+               <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>
+            <IconButton variant="raised large">
+               <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>
+            <IconButton variant="outlined small">
                <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">