Navbar Icons Improvements (#1246)

Some improvements to the navbar icons.

Changes Implemented:
- Increase touch target size for navbar icons.
- Make icon colors and hover effect consistent with navbar links 
- Added title for all navbar icons
- New key (user.settings) in locales
- Updated Dark and Light Mode values in locales
- Minor tweaks in active builds indicator
- New component NavbarIcon (because trying to match IconButton size and
colors felt hacky at best)

Co-authored-by: Divya Jain <dvjn.dev+git@gmail.com>

web/src/components/layout/header/ActivePipelines.vue

@@ -1,18 +1,17 @@
 <template>
-  <button
-    class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white select-none"
-    :class="{
-      spinner: activePipelines.length !== 0,
-    }"
-    type="button"
-    @click="toggle"
-  >
-    <div class="spinner-ring ring1" />
-    <div class="spinner-ring ring2" />
-    <div class="spinner-ring ring3" />
-    <div class="spinner-ring ring4" />
-    {{ activePipelines.length || 0 }}
-  </button>
+  <NavbarIcon :title="$t('repo.pipeline.tasks')" class="!p-1.5 relative" @click="toggle">
+    <div v-if="activePipelines.length > 0" class="spinner">
+      <div class="spinner-ring ring1" />
+      <div class="spinner-ring ring2" />
+      <div class="spinner-ring ring3" />
+      <div class="spinner-ring ring4" />
+    </div>
+    <div
+      class="flex items-center justify-center h-full w-full font-bold bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-10 rounded-full"
+    >
+      {{ activePipelines.length || 0 }}
+    </div>
+  </NavbarIcon>
 </template>
 
 <script lang="ts">
@@ -20,9 +19,13 @@ import { defineComponent, onMounted } from 'vue';
 
 import usePipelineFeed from '~/compositions/usePipelineFeed';
 
+import NavbarIcon from './NavbarIcon.vue';
+
 export default defineComponent({
   name: 'ActivePipelines',
 
+  components: { NavbarIcon },
+
   setup() {
     const pipelineFeed = usePipelineFeed();
 
@@ -36,10 +39,13 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.spinner {
+  @apply absolute top-0 bottom-0 left-0 right-0;
+}
 .spinner .spinner-ring {
   animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: #fff transparent transparent transparent;
-  @apply w-8 h-8 border-2 rounded-full m-4 absolute;
+  @apply border-3 rounded-full absolute top-1.5 bottom-1.5 left-1.5 right-1.5;
 }
 .spinner .ring1 {
   animation-delay: -0.45s;