From 6a7db17d36a54f891dd4974b059d714c86995c28 Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Mon, 22 Jul 2019 00:17:12 +0430
Subject: [PATCH 1/2] finished making the buttons compoent

---
 src/renderer/App.vue                     |  1 +
 src/renderer/components/Button.vue       | 57 ++++++++++++++++++++++++
 src/renderer/components/Logo.vue         |  2 +-
 src/renderer/components/MenuGroup.vue    |  1 -
 src/renderer/layouts/DockableSidebar.vue | 21 +++++++--
 5 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/components/Button.vue

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 3e352e7..ed67390 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -27,6 +27,7 @@ $lato-font-path: '/node_modules/lato-font/fonts'
  
 @include lato-include-font('normal')
 
+
 .root,.page-wrapper
   display: flex
   @include lato-font('normal')
diff --git a/src/renderer/components/Button.vue b/src/renderer/components/Button.vue
new file mode 100644
index 0000000..287458e
--- /dev/null
+++ b/src/renderer/components/Button.vue
@@ -0,0 +1,57 @@
+<template>
+  <a href="#" role="button" class="btn" :class="className"><slot></slot></a>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      className: `btn--` + this.type
+    }
+  },
+
+  props: ['type']
+
+}
+</script>
+
+<style lang="sass" scoped>
+.btn 
+  font-size: .9rem
+  text-decoration: none
+  padding: .5rem 1rem
+  text-transform: capitalize
+  border-radius: .375rem
+
+  &--contained 
+    background-color: #336cfb
+    color: white
+    font-weight: 600
+    align-self: flex-starts
+
+  #btn__icon
+    width: 14px
+    height: 14px
+    fill: white
+
+  &--flat 
+    color: grey
+    transition: all .2s ease-in-out
+    &:hover 
+      background-color: rgba(0,0,0,.15)
+
+  &--raised 
+    background-color: #336cfb
+    color: white
+    font-weight: 600
+    box-shadow: 0 .6rem .6rem rgba(#336cfb , .5)
+
+  &--outlined 
+     background-color: white
+     border: 1px solid #336cfb
+     transition: all 0.2s ease-in-out
+     &:hover
+      background-color: #336cfb
+      color: white
+</style>
+
diff --git a/src/renderer/components/Logo.vue b/src/renderer/components/Logo.vue
index e05a7ca..c44b92a 100644
--- a/src/renderer/components/Logo.vue
+++ b/src/renderer/components/Logo.vue
@@ -1,7 +1,7 @@
 <template>
     <span :class="{'nopadding' : nopadding === true}">
         <img src="/static/logo-2.svg" alt="Jukebox">
-        Jukebox.
+        Jukebox
     </span>
 </template>
 
diff --git a/src/renderer/components/MenuGroup.vue b/src/renderer/components/MenuGroup.vue
index c42416a..a4fb812 100644
--- a/src/renderer/components/MenuGroup.vue
+++ b/src/renderer/components/MenuGroup.vue
@@ -23,5 +23,4 @@ div
         text-transform: uppercase
     ul
         padding: unset
-    
 </style>
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 948c132..d3bd280 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -61,7 +61,7 @@
                     My Favorites
                 </MenuItem>
             </MenuGroup>
-            <MenuGroup class="grow">
+            <MenuGroup>
                 <template v-slot:title>Your playlists</template>
                 <MenuItem to="/">
                     Hits of this summer
@@ -75,7 +75,21 @@
                 <MenuItem to="/">
                     Workout
                 </MenuItem>
-            </MenuGroup >
+            </MenuGroup>
+
+            <Button type="outlined">
+                <svg version="1.1" id="btn__icon" 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">
+                        <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898
+                            s-17.898,8.013-17.898,17.898v107.39H17.9c-9.885,0-17.9,8.013-17.9,17.898c0,9.885,8.015,17.898,17.9,17.898h107.39v107.39
+                            c0,9.885,8.013,17.898,17.898,17.898s17.898-8.013,17.898-17.898v-107.39h107.391c9.885,0,17.898-8.014,17.898-17.898
+                            C286.376,133.303,278.362,125.29,268.477,125.29z"/>
+                    </g>
+                </svg>
+                Add new list
+            </Button>
+            <div class="grow"></div>
+
             <MenuGroup>
                 <MenuItem to="/" :faded="true">
                     <template v-slot:icon>
@@ -106,10 +120,11 @@ import MenuItem from '../components/MenuItem'
 import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
 import { mapActions, mapGetters } from 'vuex'
+import Button from '../components/Button'
 
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo },
+  components: { MenuGroup, MenuItem, Logo, Button },
   data: () => {
     return { version: projectPackage.version }
   },

From a258b863cc08fe6e5526ac7dda8863405bd1545e Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Mon, 22 Jul 2019 10:56:06 +0430
Subject: [PATCH 2/2] updated button in sidebar to contained

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

diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index d3bd280..8f8c208 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -77,7 +77,7 @@
                 </MenuItem>
             </MenuGroup>
 
-            <Button type="outlined">
+            <Button type="contained">
                 <svg version="1.1" id="btn__icon" 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">
                         <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898