feat: Support bigger font size in dashboard (#10974)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -23,17 +23,16 @@ export default {
 
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-n-strong"
     :class="{
-      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
+      'bg-woot-25 dark:bg-n-solid-2 border border-solid border-n-blue-border':
         active,
     }"
   >
     <div
-      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
+      class="flex justify-between items-center rounded-t-md px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 border-b border-solid border-n-strong"
       :class="{
-        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
-          active,
+        'bg-woot-50 border-b border-solid border-n-blue-border': active,
       }"
     >
       <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>

app/javascript/dashboard/components/ui/Switch.vue

@@ -38,20 +38,20 @@ export default {
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
-  height: 19px;
+  height: 1.188rem;
   position: relative;
   transition-duration: 200ms;
   transition-property: background-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 34px;
+  width: 2.125rem;
 
   &.active {
     background-color: var(--w-500);
   }
 
   &.small {
-    width: 22px;
-    height: 14px;
+    width: 1.375rem;
+    height: 0.875rem;
 
     span {
       height: var(--space-one);

app/javascript/dashboard/components/ui/Tabs/Tabs.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, provide, onMounted, computed } from 'vue';
-import { useEventListener } from '@vueuse/core';
+import { ref, useTemplateRef, provide, computed, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
 
 const props = defineProps({
   index: {
@@ -19,6 +19,12 @@ const props = defineProps({
 
 const emit = defineEmits(['change']);
 
+const tabsContainer = useTemplateRef('tabsContainer');
+const tabsList = useTemplateRef('tabsList');
+
+const { width: containerWidth } = useElementSize(tabsContainer);
+const { width: listWidth } = useElementSize(tabsList);
+
 const hasScroll = ref(false);
 
 const activeIndex = computed({
@@ -34,20 +40,16 @@ provide('updateActiveIndex', index => {
 });
 
 const computeScrollWidth = () => {
-  // TODO: use useElementSize from vueuse
-  const tabElement = document.querySelector('.tabs');
-  if (tabElement) {
-    hasScroll.value = tabElement.scrollWidth > tabElement.clientWidth;
+  if (tabsContainer.value && tabsList.value) {
+    hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
   }
 };
 
 const onScrollClick = direction => {
-  // TODO: use useElementSize from vueuse
-  const tabElement = document.querySelector('.tabs');
-  if (tabElement) {
-    let scrollPosition = tabElement.scrollLeft;
+  if (tabsContainer.value && tabsList.value) {
+    let scrollPosition = tabsList.value.scrollLeft;
     scrollPosition += direction === 'left' ? -100 : 100;
-    tabElement.scrollTo({
+    tabsList.value.scrollTo({
       top: 0,
       left: scrollPosition,
       behavior: 'smooth',
@@ -55,14 +57,19 @@ const onScrollClick = direction => {
   }
 };
 
-useEventListener(window, 'resize', computeScrollWidth);
-onMounted(() => {
-  computeScrollWidth();
-});
+// Watch for changes in element sizes with immediate execution
+watch(
+  [containerWidth, listWidth],
+  () => {
+    computeScrollWidth();
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <div
+    ref="tabsContainer"
     :class="{
       'tabs--container--with-border': border,
       'tabs--container--compact': isCompact,
@@ -76,7 +83,7 @@ onMounted(() => {
     >
       <fluent-icon icon="chevron-left" :size="16" />
     </button>
-    <ul :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
+    <ul ref="tabsList" :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
       <slot />
     </ul>
     <button

app/javascript/dashboard/components/ui/Wizard.vue

@@ -72,26 +72,26 @@ export default {
 
     &.active {
       h3 {
-        @apply text-woot-500 dark:text-woot-500;
+        @apply text-n-blue-text dark:text-n-blue-text;
       }
 
       .step {
-        @apply bg-woot-500 dark:bg-woot-500;
+        @apply bg-n-brand dark:bg-n-brand;
       }
     }
 
     &.over {
       &::after {
-        @apply bg-woot-500 dark:bg-woot-500;
+        @apply bg-n-brand dark:bg-n-brand;
       }
 
       .step {
-        @apply bg-woot-500 dark:bg-woot-500;
+        @apply bg-n-brand dark:bg-n-brand;
       }
 
       & + .item {
         &::before {
-          @apply bg-woot-500 dark:bg-woot-500;
+          @apply bg-n-brand dark:bg-n-brand;
         }
       }
     }