From 2934a5517de650c8bcf08884701c5cdb9375a93c Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 1 Nov 2019 17:13:55 +0530
Subject: [PATCH] :zap: Added tooltips to sidebar nav

---
 assets/css/styles.scss | 13 +++++++------
 layouts/default.vue    | 24 ++++++++++++------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index ed9aa1af8..0c4c0d8a9 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -74,10 +74,11 @@ h3 {
   z-index: 10000;
 
   .tooltip-inner {
-    background: #353535;
+    background: black;
     color: white;
-    border-radius: 16px;
-    padding: 5px 10px 4px;
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-size: 14px;
   }
 
   .tooltip-arrow {
@@ -86,7 +87,7 @@ h3 {
     border-style: solid;
     position: absolute;
     margin: 5px;
-    border-color: #353535;
+    border-color: black;
     z-index: 1;
   }
 
@@ -155,10 +156,10 @@ h3 {
 
     .popover-inner {
       background: $color;
-      color: #353535;
+      color: black;
       padding: 24px;
       border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(#353535, .1);
+      box-shadow: 0 5px 30px rgba(black, .1);
     }
 
     .popover-arrow {
diff --git a/layouts/default.vue b/layouts/default.vue
index 5751acdac..da819d920 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -19,16 +19,16 @@
               We're using manual checks for linkActive because the query string
               seems to mess up the nuxt-link active class.
             -->
-            <nuxt-link to="/" :class="linkActive('/')">
+            <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'">
               <logo alt style="height: 24px;"></logo>
             </nuxt-link>
-            <nuxt-link to="/websocket" :class="linkActive('/websocket')">
+            <nuxt-link to="/websocket" :class="linkActive('/websocket')" v-tooltip.right="'WebSocket'">
               <i class="material-icons">cloud</i>
             </nuxt-link>
             <nuxt-link
               to="/settings"
               :class="linkActive('/settings')"
-              v-tooltip="'Settings'"
+              v-tooltip.right="'Settings'"
               aria-label="Settings"
             >
               <i class="material-icons">settings</i>
@@ -38,27 +38,27 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#request">
+                  <a href="#request" v-tooltip.right="'Request'">
                     <i class="material-icons">cloud_upload</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#options">
+                  <a href="#options" v-tooltip.right="'Options'">
                     <i class="material-icons">toc</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#response">
+                  <a href="#response" v-tooltip.right="'Response'">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#collections">
+                  <a href="#collections" v-tooltip.right="'Collections'">
                     <i class="material-icons">folder_special</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#history">
+                  <a href="#history" v-tooltip.right="'History'">
                     <i class="material-icons">watch_later</i>
                   </a>
                 </li>
@@ -69,12 +69,12 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#request">
+                  <a href="#request" v-tooltip.right="'Request'">
                     <i class="material-icons">cloud_upload</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#response">
+                  <a href="#response" v-tooltip.right="'Response'">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
@@ -85,12 +85,12 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#theme">
+                  <a href="#theme" v-tooltip.right="'Theme'">
                     <i class="material-icons">brush</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#proxy">
+                  <a href="#proxy" v-tooltip.right="'Proxy'">
                     <i class="material-icons">public</i>
                   </a>
                 </li>