From 25ab264b73b44cdd07837da957909df0fc6e5a48 Mon Sep 17 00:00:00 2001
From: baedyl <emmanuelabona@gmail.com>
Date: Wed, 8 Dec 2021 23:58:00 +0100
Subject: [PATCH] Update toggle side bar button style

---
 src/components/Hamburger/index.vue            | 25 +++++++++----------
 src/layout/components/Navbar.vue              | 10 ++------
 src/layout/components/Sidebar/Logo.vue        | 11 +++++---
 src/layout/components/Sidebar/index.vue       | 16 ++++++++++--
 .../admin/components/BillingCard.vue          | 18 +++++++++++--
 .../admin/components/BookingCard.vue          |  3 +++
 .../admin/components/ExerciseCard.vue         |  3 +++
 7 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 368b0021..c780af1c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,15 +1,6 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
-    <svg
-      :class="{'is-active':isActive}"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
-    </svg>
+  <div style="padding: 0 15px" @click="toggleClick">
+    <i class="el-icon-arrow-left hamburger" />
   </div>
 </template>
 
@@ -34,8 +25,16 @@ export default {
 .hamburger {
   display: inline-block;
   vertical-align: middle;
-  width: 20px;
-  height: 20px;
+  background: #1f71bc;
+  color: white;
+  font: normal normal normal 12px/14px FontAwesome;
+  border-radius: 4px 0px 0px 4px;
+  width: 18px;
+  height: 45px;
+  padding: 13px 3px;
+  position: absolute;
+  bottom: 90px;
+  right: 0;
 }
 
 .hamburger.is-active {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 0c47e9ab..ebb268c0 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,7 +1,5 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
@@ -33,7 +31,6 @@
 <script>
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
 // import ErrorLog from '@/components/ErrorLog'
 // import Screenfull from '@/components/Screenfull'
 // import SizeSelect from '@/components/SizeSelect'
@@ -41,8 +38,7 @@ import Hamburger from '@/components/Hamburger'
 
 export default {
   components: {
-    Breadcrumb,
-    Hamburger
+    Breadcrumb
     // ErrorLog,
     // Screenfull,
     // SizeSelect,
@@ -56,9 +52,6 @@ export default {
     ])
   },
   methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
@@ -96,6 +89,7 @@ export default {
 
   .breadcrumb-container {
     float: left;
+    margin-left: 53px;
   }
 
   .errLog-container {
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index e9ac9fd0..f22e0437 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -2,7 +2,7 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logoSmall" class="sidebar-logo">
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
@@ -23,7 +23,8 @@ export default {
   data() {
     return {
       title: 'MSK Physio',
-      logo: require('@/assets/img/logo_long.png')
+      logo: require('@/assets/img/logo_long.png'),
+      logoSmall: require('@/assets/img/logo.png')
     }
   }
 }
@@ -44,7 +45,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: transparent linear-gradient(180deg, var(--unnamed-color-122f48) 0%, #1A233F 100%) 0% 0% no-repeat padding-box;;
   text-align: center;
   overflow: hidden;
 
@@ -55,7 +56,9 @@ export default {
     & .sidebar-logo {
       height: 80%;
       vertical-align: middle;
-      margin-right: 12px;
+      left: 13px;
+      top: 10px;
+      position: absolute;
     }
 
     & .sidebar-title {
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index fb014a23..6ed068cd 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbar">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
@@ -14,6 +14,7 @@
       >
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
+      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     </el-scrollbar>
   </div>
 </template>
@@ -23,9 +24,10 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import Hamburger from '@/components/Hamburger'
 
 export default {
-  components: { SidebarItem, Logo },
+  components: { SidebarItem, Logo, Hamburger },
   computed: {
     ...mapGetters([
       'permission_routes',
@@ -49,6 +51,16 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    }
   }
 }
 </script>
+<style lang="scss" scoped>
+.scrollbar {
+  margin-top: 50px;
+}
+</style>
diff --git a/src/views/dashboard/admin/components/BillingCard.vue b/src/views/dashboard/admin/components/BillingCard.vue
index 20ba289e..b5bdb45b 100644
--- a/src/views/dashboard/admin/components/BillingCard.vue
+++ b/src/views/dashboard/admin/components/BillingCard.vue
@@ -20,7 +20,10 @@
     <el-row :gutter="20" class="card-content">
       <el-tabs type="border-card">
         <el-tab-pane label="Statements">
-          <el-table :data="tableData" style="width: 100%">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+          >
             <el-table-column prop="date" label="DATE" width="180" />
             <el-table-column prop="orderId" label="ORDER ID" width="180" />
             <el-table-column prop="amount" label="AMOUNT" />
@@ -157,8 +160,12 @@ export default {
   padding-bottom: 30px;
 }
 
+thead {
+  background: red!important;
+}
+
 .el-table__header-wrapper {
-  background: #778298!important;
+  background: #778298 !important;
 }
 
 .el-row {
@@ -189,3 +196,10 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+// Override Element-UI inline style
+.el-tabs__content {
+  height: 371px;
+  border-radius: 0px 0px 6px 6px;
+}
+</style>
diff --git a/src/views/dashboard/admin/components/BookingCard.vue b/src/views/dashboard/admin/components/BookingCard.vue
index cee8b453..b99295db 100644
--- a/src/views/dashboard/admin/components/BookingCard.vue
+++ b/src/views/dashboard/admin/components/BookingCard.vue
@@ -186,6 +186,9 @@ export default {
   border-color: #6e1c80;
   background: #6e1c80;
   font: normal normal 14px/16px SF Pro Display Bold;
+  &:hover {
+    background: #b72687;
+  }
 }
 
 .arrow {
diff --git a/src/views/dashboard/admin/components/ExerciseCard.vue b/src/views/dashboard/admin/components/ExerciseCard.vue
index d5e0ab5e..3d04f2fb 100644
--- a/src/views/dashboard/admin/components/ExerciseCard.vue
+++ b/src/views/dashboard/admin/components/ExerciseCard.vue
@@ -180,6 +180,9 @@ export default {
   border-color: #6e1c80;
   background: #6e1c80;
   font: normal normal 14px/16px SF Pro Display Bold;
+  &:hover {
+    background: #bc504a;
+  }
 }
 
 .arrow {