From 844182981158eeee93f461a1fb2f49429d0e64f8 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 17 Nov 2023 11:10:12 +0000
Subject: [PATCH] refactor(site): a few colors adjustments

---
 .../DeploySettingsLayout/Sidebar.tsx          |  2 +-
 .../src/components/SettingsLayout/Sidebar.tsx |  2 +-
 site/src/components/Tabs/Tabs.tsx             |  2 +-
 .../components/UsersLayout/UsersLayout.tsx    |  7 +++++--
 .../pages/WorkspacesPage/filter/filter.tsx    | 11 ++++++++---
 site/src/theme/mui.ts                         | 19 ++++++++++++++++++-
 6 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
index 8d6c834d1d40f..4ada46382ef0a 100644
--- a/site/src/components/DeploySettingsLayout/Sidebar.tsx
+++ b/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;
     }
diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
index 93693afceeef9..faa09db980b5e 100644
--- a/site/src/components/SettingsLayout/Sidebar.tsx
+++ b/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;
     }
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
index fef98120dd093..99e2e6419af9d 100644
--- a/site/src/components/Tabs/Tabs.tsx
+++ b/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;
     }
   `;
diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx
index 397cadc25bb60..454e48aec4f98 100644
--- a/site/src/components/UsersLayout/UsersLayout.tsx
+++ b/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>
     </>
   );
diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx
index 53d83008cc308..2d7a6d6b0467d 100644
--- a/site/src/pages/WorkspacesPage/filter/filter.tsx
+++ b/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,
+        };
       }}
     />
   );
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
index a4ae8831e7178..f54c4e6691bec 100644
--- a/site/src/theme/mui.ts
+++ b/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: {