From 5938e39d995348d21834fa83e61a9c0ec93e4fca Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 17 Feb 2018 02:15:43 +0000
Subject: [PATCH] Update tab bar styles

---
 client/src/styles/partials/generic/tabs.scss | 55 ++++++++++++++------
 client/src/ui/components/bd/PluginsView.vue  | 14 ++---
 client/src/ui/components/bd/ThemesView.vue   | 14 ++---
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/client/src/styles/partials/generic/tabs.scss b/client/src/styles/partials/generic/tabs.scss
index f57f1780..36f4433a 100644
--- a/client/src/styles/partials/generic/tabs.scss
+++ b/client/src/styles/partials/generic/tabs.scss
@@ -1,39 +1,51 @@
-.bd-tabheader {
+.bd-tabbar {
+    flex: 0 0 auto;
+    margin-right: -15px;
+    display: flex;
+
     .bd-button {
         background: transparent;
         border-bottom: 2px solid rgba(114, 118, 126, 0.3);
+        cursor: pointer;
+        margin-right: 15px;
+        padding: 15px 0;
+        color: #87909c;
+        font-size: 14px;
+        font-weight: 500;
+        transition: color 0.2s ease;
+        flex: 0 0;
+        display: flex;
 
         h3 {
-            -webkit-user-select: none;
-            user-select: none;
-            display: block;
-            font-size: 1.17em;
-            margin-top: 1em;
-            margin-bottom: 1em;
-            margin-left: 0;
-            margin-right: 0;
-            font-weight: bold;
-            flex-grow: 1;
+            flex: 0 0;
         }
 
         .bd-material-button {
-            width: 30px;
-            height: 30px;
+            width: 16px;
+            height: 16px;
+            flex: 0 0;
+            margin-left: 4px;
+            cursor: pointer;
 
             .material-design-icon,
             .bd-material-design-icon {
                 display: flex;
                 align-items: center;
-                fill: #fff;
+                fill: #87909c;
+                transition: fill 0.2s ease;
 
                 svg {
-                    width: 24px;
-                    height: 24px;
+                    width: 16px;
+                    height: 16px;
                 }
             }
 
             &:hover {
-                background: #2d2f34;
+                background-color: transparent;
+
+                .bd-material-design-icon {
+                    fill: #fff;
+                }
             }
         }
 
@@ -41,6 +53,15 @@
         &.bd-active {
             background: transparent;
             border-bottom: 2px solid $colbdblue;
+            color: #fff;
+
+            .bd-material-design-icon {
+                fill: #fff;
+            }
+        }
+
+        &.bd-active {
+            cursor: default;
         }
     }
 }
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index d7a664ed..5ddfce96 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -11,18 +11,14 @@
 <template>
     <SettingsWrapper headertext="Plugins">
         <div class="bd-flex bd-flex-col bd-pluginsView">
-            <div class="bd-flex bd-tabheader">
-                <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
+            <div class="bd-tabbar">
+                <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                     <h3>Local</h3>
-                    <div class="bd-material-button" @click="refreshLocal">
-                        <MiRefresh />
-                    </div>
+                    <div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
                 </div>
-                <div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
+                <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                     <h3>Online</h3>
-                    <div class="bd-material-button">
-                        <MiRefresh />
-                    </div>
+                    <div class="bd-material-button"><MiRefresh /></div>
                 </div>
             </div>
             <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 101a06e7..ff082acc 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -11,18 +11,14 @@
 <template>
     <SettingsWrapper headertext="Themes">
         <div class="bd-flex bd-flex-col bd-themesView">
-            <div class="bd-flex bd-tabheader">
-                <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
+            <div class="bd-tabbar">
+                <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                     <h3>Local</h3>
-                    <div class="bd-material-button" @click="refreshLocal">
-                        <MiRefresh />
-                    </div>
+                    <div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
                 </div>
-                <div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
+                <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                     <h3>Online</h3>
-                    <div class="bd-material-button">
-                        <MiRefresh />
-                    </div>
+                    <div class="bd-material-button"><MiRefresh /></div>
                 </div>
             </div>
             <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-themes-container bd-local-themes">