adjust color for site name

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -41,6 +41,8 @@
       transition: fill 0.8s ease-out;
     }
 
+    fill: var(--grw-app-title-color, var(--bs-tertiary-color));
+
     &:hover {
       svg {
         .group1 {
@@ -53,24 +55,9 @@
       }
     }
   }
-}
-@include bs.color-mode(light) {
-  .grw-app-title :global {
-    .grw-logo {
-      fill: var(--grw-logo-color, var(--bs-gray-500));
-    }
-    .grw-site-name {
-      color: var(--grw-app-title-color, var(--bs-gray-600));
-    }
-  }
-}
-@include bs.color-mode(dark) {
-  .grw-app-title :global {
-    .grw-logo {
-      fill: var(--grw-logo-color, var(--bs-gray-600));
-    }
-    .grw-site-name {
-      color: var(--grw-app-title-color, var(--bs-gray-500));
-    }
+
+  .grw-site-name {
+    --bs-link-color-rgb: var(--grw-app-title-color-rgb, var(--bs-tertiary-color-rgb));
+    --bs-link-opacity: 0.5;
   }
 }

apps/app/src/components/Sidebar/AppTitle/AppTitle.tsx

@@ -28,7 +28,9 @@ export const AppTitle: FC = memo(() => {
       </Link>
       <div className="flex-grow-1 d-flex align-items-center justify-content-between gap-3 overflow-hidden">
         <div className="grw-site-name text-truncate">
-          <span className="fs-4">GROWI</span>
+          <Link href="/" className="fs-4">
+            GROWI
+          </Link>
         </div>
       </div>
     </div>