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

BrunoQuaresma · web-flow · commit 24aa2233998c · 2023-11-17T09:27:07.000-03:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: {

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ const SidebarNavItem: FC<`
`31`	`31`	`position: absolute;`
`32`	`32`	`left: 0;`
`33`	`33`	`top: 0;`
`34`		`- background-color: ${theme.palette.secondary.dark};`
	`34`	`+ background-color: ${theme.palette.primary.main};`
`35`	`35`	`border-top-left-radius: 8px;`
`36`	`36`	`border-bottom-left-radius: 8px;`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ const SidebarNavItem: FC<`
`55`	`55`	`position: absolute;`
`56`	`56`	`left: 0;`
`57`	`57`	`top: 0;`
`58`		`- background-color: ${theme.palette.secondary.dark};`
	`58`	`+ background-color: ${theme.palette.primary.main};`
`59`	`59`	`border-top-left-radius: 8px;`
`60`	`60`	`border-bottom-left-radius: 8px;`
`61`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ export const TabLink = (props: NavLinkProps) => {`
`51`	`51`	`bottom: 0;`
`52`	`52`	`height: 2px;`
`53`	`53`	`width: 100%;`
`54`		`- background: ${theme.palette.secondary.dark};`
	`54`	`+ background: ${theme.palette.primary.main};`
`55`	`55`	`position: absolute;`
`56`	`56`	`}`
`57`	`57`	`;