fix: 🐛 Vertical alignment of icons and color switch in nav bar

Author: slugb0t

ui/components/switch/ColorSwitch.vue

@@ -26,7 +26,7 @@ const switchStyle = computed(() => ({
       bordered
       aria-label="Toggle dark/light mode"
       :style="switchStyle"
-      class="mt-[.3rem] transition-colors duration-300 ease-in-out"
+      class="transition-colors duration-300 ease-in-out"
     >
       <template #checked-icon>
         <Icon icon="material-symbols:moon-stars-outline" class="icon" />

ui/layouts/default.vue

@@ -74,11 +74,11 @@ const toggleMobileMenu = () => {
 
           <ProfileStatus />
 
-          <n-flex justify="center" gap="4" class="-ml-4">
+          <n-flex justify="center" align="center" gap="4" class="-ml-4">
             <NuxtLink
               to="https://docs.codefair.io/"
               target="_blank"
-              class="text-lg font-bold text-[var(--gray-600-300)] transition duration-100 hover:text-indigo-500 active:text-indigo-700"
+              class="leading-[0] text-[var(--gray-600-300)] transition duration-100 hover:text-indigo-500 active:text-indigo-700"
             >
               <n-popover trigger="hover" placement="top" :show-arrow="false">
                 <template #trigger>
@@ -109,7 +109,7 @@ const toggleMobileMenu = () => {
             <NuxtLink
               to="https://github.com/fairdataihub/codefair-app"
               target="_blank"
-              class="text-lg font-bold text-[var(--gray-600-300)] transition duration-100 hover:text-indigo-500 active:text-indigo-700"
+              class="leading-[0] text-[var(--gray-600-300)] transition duration-100 hover:text-indigo-500 active:text-indigo-700"
             >
               <n-popover trigger="hover" placement="top" :show-arrow="false">
                 <template #trigger>