refactor(site): adjust a few colors (#10750)

site/src/components/DeploySettingsLayout/Sidebar.tsx

@@ -31,7 +31,7 @@ const SidebarNavItem: FC<
       position: absolute;
       left: 0;
       top: 0;
-      background-color: ${theme.palette.secondary.dark};
+      background-color: ${theme.palette.primary.main};
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
     }

site/src/components/SettingsLayout/Sidebar.tsx

@@ -55,7 +55,7 @@ const SidebarNavItem: FC<
       position: absolute;
       left: 0;
       top: 0;
-      background-color: ${theme.palette.secondary.dark};
+      background-color: ${theme.palette.primary.main};
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
     }

site/src/components/Tabs/Tabs.tsx

@@ -51,7 +51,7 @@ export const TabLink = (props: NavLinkProps) => {
       bottom: 0;
       height: 2px;
       width: 100%;
-      background: ${theme.palette.secondary.dark};
+      background: ${theme.palette.primary.main};
       position: absolute;
     }
   `;

site/src/components/UsersLayout/UsersLayout.tsx

@@ -6,10 +6,11 @@ import { USERS_LINK } from "components/Dashboard/Navbar/NavbarView";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
 import { usePermissions } from "hooks/usePermissions";
-import { FC } from "react";
+import { FC, Suspense } from "react";
 import { Link as RouterLink, Outlet, useNavigate } from "react-router-dom";
 import { Margins } from "components/Margins/Margins";
 import { TabLink, Tabs } from "components/Tabs/Tabs";
+import { Loader } from "components/Loader/Loader";
 
 export const UsersLayout: FC = () => {
   const { createUser: canCreateUser, createGroup: canCreateGroup } =
@@ -51,7 +52,9 @@ export const UsersLayout: FC = () => {
       </Tabs>
 
       <Margins>
-        <Outlet />
+        <Suspense fallback={<Loader />}>
+          <Outlet />
+        </Suspense>
       </Margins>
     </>
   );

site/src/pages/WorkspacesPage/filter/filter.tsx

@@ -189,14 +189,19 @@ const StatusOptionItem = ({
 };
 
 const StatusIndicator: FC<{ option: StatusOption }> = ({ option }) => {
+  const color = option.color === "notice" ? "warning" : option.color;
+
   return (
     <Box
       height={8}
       width={8}
       borderRadius={9999}
-      sx={{
-        backgroundColor: (theme) =>
-          (theme.palette[option.color as keyof Palette] as PaletteColor).light,
+      css={(theme) => {
+        return {
+          backgroundColor: (
+            theme.palette[color as keyof Palette] as PaletteColor
+          ).light,
+        };
       }}
     />
   );

site/src/theme/mui.ts

@@ -7,6 +7,8 @@ import {
   BUTTON_MD_HEIGHT,
   BUTTON_SM_HEIGHT,
 } from "./constants";
+// eslint-disable-next-line no-restricted-imports -- We need MUI here
+import { alertClasses } from "@mui/material/Alert";
 
 export type PaletteIndex =
   | "primary"
@@ -41,7 +43,7 @@ export let dark = createTheme({
     },
     text: {
       primary: colors.gray[1],
-      secondary: colors.gray[4],
+      secondary: colors.gray[6],
       disabled: colors.gray[9],
     },
     divider: colors.gray[13],
@@ -514,6 +516,21 @@ dark = createTheme(dark, {
         message: ({ theme }) => ({
           color: theme.palette.text.primary,
         }),
+        outlinedWarning: {
+          [`& .${alertClasses.icon}`]: {
+            color: dark.palette.warning.light,
+          },
+        },
+        outlinedInfo: {
+          [`& .${alertClasses.icon}`]: {
+            color: dark.palette.primary.light,
+          },
+        },
+        outlinedError: {
+          [`& .${alertClasses.icon}`]: {
+            color: dark.palette.error.light,
+          },
+        },
       },
     },
     MuiAlertTitle: {