Icon colour improvements

Author: samejr

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -524,8 +524,8 @@ export function SideMenu({
                           ? TreeConnectorEnd
                           : TreeConnectorBranch
                       }
-                      activeIconColor="text-customDashboards"
-                      inactiveIconColor="text-customDashboards"
+                      activeIconColor={isCollapsed ? "text-text-dimmed" : "text-customDashboards"}
+                      inactiveIconColor={isCollapsed ? "text-text-dimmed" : "text-customDashboards"}
                       to={v3CustomDashboardPath(organization, project, environment, dashboard)}
                       isCollapsed={isCollapsed}
                     />
@@ -1049,7 +1049,7 @@ function CreateDashboardButton({
             <DialogTrigger asChild>
               <button
                 type="button"
-                className="flex h-full w-full items-center justify-center rounded text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
+                className="flex h-full w-full items-center justify-center rounded text-text-dimmed transition focus-custom hover:bg-charcoal-600 hover:text-text-bright"
               >
                 <PlusIcon className="size-4" />
               </button>

apps/webapp/tailwind.config.js

@@ -161,7 +161,7 @@ const schedules = colors.yellow[500];
 const queues = colors.purple[500];
 const query = colors.blue[500];
 const metrics = colors.green[500];
-const customDashboards = charcoal[400];
+const customDashboards = charcoal[500];
 const deployments = colors.green[500];
 const concurrency = colors.amber[500];
 const limits = colors.purple[500];