chore: wip

Author: glennmichael123

.stacks/core/types/src/ui.ts

@@ -1,7 +1,7 @@
 import type { UserShortcuts } from 'unocss'
 
 export type Font = 'inter' | 'mona' | 'hubot'
-export type Icon = 'heroicon-outline' | 'heroicon-solid'
+export type Icon = 'heroicons'
 export type WebFontsProviders = 'google' | 'bunny' | 'fontshare'
 
 export interface FontInfo {

.stacks/core/ui/package.json

@@ -51,8 +51,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@iconify-json/heroicons-outline": "^1.1.6",
-    "@iconify-json/heroicons-solid": "^1.1.7",
+    "@iconify-json/heroicons": "^1.1.11",
     "@julr/unocss-preset-forms": "^0.0.5",
     "@stacksjs/build": "workspace:*",
     "@stacksjs/config": "workspace:*",
@@ -63,6 +62,8 @@
     "vue-tsc": "^1.8.8"
   },
   "devDependencies": {
-    "@stacksjs/development": "workspace:*"
+    "@iconify-json/heroicons": "^1.1.11",
+    "@stacksjs/development": "workspace:*",
+    "@unocss/preset-icons": "^0.54.1"
   }
 }

.stacks/stacks/dashboard/src/components/MobileSidebar.vue

@@ -81,13 +81,13 @@
                   class="-mx-2 space-y-1"
                 >
                   <li>
-                    <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+                    <!-- Current: "bg-gray-50 text-blue-600", Default: "text-gray-700 hover:text-blue-600 hover:bg-gray-50" -->
                     <a
                       href="#"
-                      class="bg-gray-50 text-indigo-600 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="bg-gray-50 text-blue-600 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
                       <svg
-                        class="h-6 w-6 shrink-0 text-indigo-600"
+                        class="h-6 w-6 shrink-0 text-blue-600"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
@@ -106,10 +106,10 @@
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
                       <svg
-                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-blue-600"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
@@ -128,10 +128,10 @@
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
                       <svg
-                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-blue-600"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
@@ -150,10 +150,10 @@
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
                       <svg
-                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-blue-600"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
@@ -172,10 +172,10 @@
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
                       <svg
-                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-blue-600"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
@@ -194,10 +194,10 @@
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
                       <svg
-                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                        class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-blue-600"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
@@ -229,30 +229,30 @@
                   class="-mx-2 mt-2 space-y-1"
                 >
                   <li>
-                    <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
+                    <!-- Current: "bg-gray-50 text-blue-600", Default: "text-gray-700 hover:text-blue-600 hover:bg-gray-50" -->
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
-                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">H</span>
+                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-blue-600 group-hover:text-blue-600">H</span>
                       <span class="truncate">Heroicons</span>
                     </a>
                   </li>
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
-                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">T</span>
+                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-blue-600 group-hover:text-blue-600">T</span>
                       <span class="truncate">Tailwind Labs</span>
                     </a>
                   </li>
                   <li>
                     <a
                       href="#"
-                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                      class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                     >
-                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">W</span>
+                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-blue-600 group-hover:text-blue-600">W</span>
                       <span class="truncate">Workcation</span>
                     </a>
                   </li>
@@ -261,10 +261,10 @@
               <li class="mt-auto">
                 <a
                   href="#"
-                  class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
+                  class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-blue-600"
                 >
                   <svg
-                    class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
+                    class="h-6 w-6 shrink-0 text-gray-400 group-hover:text-blue-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"

.stacks/stacks/dashboard/src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky top-0 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
+  <div class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
     <button
       type="button"
       class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
@@ -63,20 +63,7 @@
           class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
         >
           <span class="sr-only">View notifications</span>
-          <svg
-            class="h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
-            />
-          </svg>
+          <div class="i-heroicons-bell w-6 h-6" />
         </button>
 
         <!-- Separator -->
@@ -101,18 +88,7 @@
               alt=""
             >
             <span class="hidden lg:flex lg:items-center">
-              <svg
-                class="ml-2 h-5 w-5 text-gray-400"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                  clip-rule="evenodd"
-                />
-              </svg>
+              <div class="i-heroicons-chevron-down w-5 h-5 ml-2 text-gray-400" />
             </span>
           </button>
 

.stacks/stacks/dashboard/src/components/SettingsHeader.vue

@@ -37,10 +37,10 @@
 
 <style scoped>
 .sidebar-links {
-  @apply text-gray-700 hover:text-indigo-600 hover:bg-gray-50 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold
+  @apply text-gray-700 hover:text-blue-600 hover:bg-gray-50 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold
 }
 
 .router-link-active, .router-link-exact-active {
-  @apply text-indigo-600 text-sm rounded-md !important
+  @apply text-blue-600 text-sm rounded-md !important
 }
 </style>