style(gui): Add ripple effect

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/notification.vue

@@ -8,11 +8,11 @@
       <div class="d-flex align-center ml-4 justify-center">
         <v-badge v-if="GetHasErrors && !GetPendingStatus" color="red" overlap bottom >
           <template v-slot:badge>
-            <v-icon v-on="on" size="10">mdi-exclamation</v-icon>
+            <v-icon  v-ripple="{class : 'nc-ripple'}" v-on="on" size="10">mdi-exclamation</v-icon>
           </template>
-          <v-icon v-on="on" size="20">mdi-bell-ring</v-icon>
+          <v-icon   v-ripple="{class : 'nc-ripple'}" v-on="on" size="20">mdi-bell-ring</v-icon>
         </v-badge>
-        <v-icon v-on="on" size="20" v-else >mdi-bell-ring</v-icon>
+        <v-icon   v-ripple="{class : 'nc-ripple'}" v-on="on" size="20" v-else >mdi-bell-ring</v-icon>
         <v-progress-circular
           v-if="GetPendingStatus"
           style="position: absolute"
@@ -37,6 +37,7 @@
               indeterminate
             ></v-progress-circular>
             <v-icon
+              v-ripple="{class : 'nc-ripple'}"
               v-else
               size="20"
               :class="notificationIcons[item.status].class"
@@ -50,16 +51,6 @@
             </v-list-item-title>
             <v-list-item-subtitle>{{ timeDifference(item.time) }}</v-list-item-subtitle>
           </v-list-item-content>
-
-
-          <!--        <v-list-item-content>-->
-          <!--          <v-list-item-title>-->
-          <!--            {{ item.message }}-->
-          <!--          </v-list-item-title>-->
-          <!--          <v-list-item-subtitle>-->
-          <!--            {{ new Date(item.time).toTimeString() }}-->
-          <!--          </v-list-item-subtitle>-->
-          <!--        </v-list-item-content>-->
         </v-list-item>
         <v-divider></v-divider>
 

packages/nc-gui/layouts/default.vue

@@ -106,7 +106,7 @@
 
           <v-tooltip bottom>
             <template v-slot:activator="{ on }">
-              <v-icon v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')">
+              <v-icon v-ripple="{class : 'nc-ripple'}"  v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')">
                 mdi-format-color-fill
               </v-icon>
             </template>
@@ -117,7 +117,7 @@
                 @shortkey="changeTheme"></span>
           <v-tooltip bottom>
             <template v-slot:activator="{ on }">
-              <v-icon @dblclick="showAppStore=true" @click="changeTheme" v-on="on" size="20"
+              <v-icon v-ripple="{class : 'nc-ripple'}" @click="changeTheme" v-on="on" size="20"
                       class="ml-3"> {{ $vuetify.theme.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
               </v-icon>
             </template>
@@ -153,22 +153,6 @@
           </x-btn>
 
 
-          <v-icon
-            v-if="!$store.state.windows.nc && isGrpc"
-            size="20" class="ml-3 " tooltip="GraphQL Client (^⇧G)"
-            @click="grpcTabAdd()">
-            mdi-alpha-g-circle-outline
-          </v-icon>
-
-
-          <v-icon class="ml-3 "
-                  v-if="!$store.state.windows.nc" size="20" @click="apiClientSwaggerTabAdd()"
-                  tooltip="API Client (^⇧A)">mdi-code-json
-          </v-icon>
-
-
-          <span v-shortkey="['ctrl','shift','a']" @shortkey="apiClientTabAdd()"></span>
-
 
           <span v-shortkey="[ 'ctrl','shift', 'c']"
                 @shortkey="settingsDialog = true"></span>
@@ -1014,8 +998,9 @@ export default {
 };
 </script>
 <style scoped>
-/deep/ .gh-button-container.black--text a {
-  color: black !important;
+/deep/ .gh-button-container > a{
+  background: transparent !important;
+  color: white !important;
 }
 
 a {
@@ -1060,6 +1045,9 @@ a {
   align-items: center;
 }
 
+/deep/ .nc-ripple{
+  border-radius: 50%;
+}
 
 
 </style>