coder · aslilac · Nov 21, 2023 · Nov 20, 2023 · Nov 21, 2023 · Nov 21, 2023
@@ -1,54 +1,52 @@
 import Badge from "@mui/material/Badge";
-import { withStyles } from "@mui/styles";
+import { css, cx } from "@emotion/css";
+import { useTheme } from "@emotion/react";
 import { type FC } from "react";
-import { WorkspaceBuild } from "api/typesGenerated";
+import type { WorkspaceBuild } from "api/typesGenerated";
 import { getDisplayWorkspaceBuildStatus } from "utils/workspace";
+import { useClassName } from "hooks/useClassName";
 import { Avatar, AvatarProps } from "components/Avatar/Avatar";
-import type { PaletteIndex } from "theme/mui";
-import { useTheme } from "@emotion/react";
 import { BuildIcon } from "components/BuildIcon/BuildIcon";
 
-interface StylesBadgeProps {
-  type: PaletteIndex;
-}
-
-const StyledBadge = withStyles((theme) => ({
-  badge: {
-    backgroundColor: ({ type }: StylesBadgeProps) => theme.palette[type].light,
-    borderRadius: "100%",
-    width: 8,
-    minWidth: 8,
-    height: 8,
-    display: "block",
-    padding: 0,
-  },
-}))(Badge);
-
 export interface BuildAvatarProps {
   build: WorkspaceBuild;
   size?: AvatarProps["size"];
 }
 
 export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
   const theme = useTheme();
-  const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build);
+  const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
+  const badgeType = useClassName(
+    (css, theme) => css`
+      background-color: ${theme.palette[type].light};
+    `,
+    [type],
+  );
 
   return (
-    <StyledBadge
+    <Badge
       role="status"
-      type={displayBuildStatus.type}
-      arial-label={displayBuildStatus.status}
-      title={displayBuildStatus.status}
+      aria-label={status}
+      title={status}
       overlap="circular"
-      anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "right",
-      }}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
       badgeContent={<div></div>}
+      classes={{ badge: cx(classNames.badge, badgeType) }}
     >
       <Avatar background size={size}>
         <BuildIcon transition={build.transition} />
       </Avatar>
-    </StyledBadge>
+    </Badge>
   );
 };
+
+const classNames = {
+  badge: css({
+    borderRadius: "100%",
+    width: 8,
+    minWidth: 8,
+    height: 8,
+    display: "block",
+    padding: 0,
+  }),
+};
@@ -1,45 +1,46 @@
-import { Avatar } from "components/Avatar/Avatar";
 import Badge from "@mui/material/Badge";
-import { withStyles } from "@mui/styles";
 import Group from "@mui/icons-material/Group";
-import { FC } from "react";
-
-const StyledBadge = withStyles((theme) => ({
-  badge: {
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: "100%",
-    width: 24,
-    height: 24,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-
-    "& svg": {
-      width: 14,
-      height: 14,
-    },
-  },
-}))(Badge);
+import { type FC } from "react";
+import { type ClassName, useClassName } from "hooks/useClassName";
+import { Avatar } from "components/Avatar/Avatar";
 
-export type GroupAvatarProps = {
+export interface GroupAvatarProps {
   name: string;
   avatarURL?: string;
-};
+}
 
 export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
+  const badge = useClassName(classNames.badge, []);
+
   return (
-    <StyledBadge
+    <Badge
       overlap="circular"
-      anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "right",
-      }}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
       badgeContent={<Group />}
+      classes={{ badge }}
     >
       <Avatar src={avatarURL} background>
         {name}
       </Avatar>
-    </StyledBadge>
+    </Badge>
   );
 };
+
+const classNames = {
+  badge: (css, theme) =>
+    css({
+      backgroundColor: theme.palette.background.paper,
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: "100%",
+      width: 24,
+      height: 24,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+
+      "& svg": {
+        width: 14,
+        height: 14,
+      },
+    }),
+} satisfies Record<string, ClassName>;
@@ -1,50 +1,59 @@
-import { styled } from "@mui/material/styles";
-import Box from "@mui/material/Box";
 import Skeleton from "@mui/material/Skeleton";
+import { type FC, type PropsWithChildren } from "react";
 
-export const TableToolbar = styled(Box)(({ theme }) => ({
-  fontSize: 13,
-  marginBottom: "8px",
-  marginTop: 0,
-  height: "36px", // The size of a small button
-  color: theme.palette.text.secondary,
-  display: "flex",
-  alignItems: "center",
-  "& strong": {
-    color: theme.palette.text.primary,
-  },
-}));
+export const TableToolbar: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <div
+      css={(theme) => ({
+        fontSize: 13,
+        marginBottom: "8px",
+        marginTop: 0,
+        height: "36px", // The size of a small button
+        color: theme.palette.text.secondary,
+        display: "flex",
+        alignItems: "center",
+        "& strong": {
+          color: theme.palette.text.primary,
+        },
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+type PaginationStatusProps =
+  | BasePaginationStatusProps
+  | LoadedPaginationStatusProps;
 
 type BasePaginationStatusProps = {
-  label: string;
-  isLoading: boolean;
-  showing?: number;
-  total?: number;
+  isLoading: true;
 };
 
-type LoadedPaginationStatusProps = BasePaginationStatusProps & {
+type LoadedPaginationStatusProps = {
   isLoading: false;
+  label: string;
   showing: number;
   total: number;
 };
 
-export const PaginationStatus = ({
-  isLoading,
-  showing,
-  total,
-  label,
-}: BasePaginationStatusProps | LoadedPaginationStatusProps) => {
+export const PaginationStatus: FC<PaginationStatusProps> = (props) => {
+  const { isLoading } = props;
+
   if (isLoading) {
     return (
-      <Box sx={{ height: 24, display: "flex", alignItems: "center" }}>
+      <div css={{ height: 24, display: "flex", alignItems: "center" }}>
         <Skeleton variant="text" width={160} height={16} />
-      </Box>
+      </div>
     );
   }
+
+  const { showing, total, label } = props;
+
   return (
-    <Box>
+    <div>
       Showing <strong>{showing}</strong> of{" "}
       <strong>{total?.toLocaleString()}</strong> {label}
-    </Box>
+    </div>
   );
 };
@@ -1,11 +1,10 @@
 import { StatsItem } from "components/Stats/Stats";
 import Link from "@mui/material/Link";
+import { type FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import styled from "@emotion/styled";
-import { Workspace } from "api/typesGenerated";
-import { displayDormantDeletion } from "./utils";
+import type { Workspace } from "api/typesGenerated";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
-import { type FC } from "react";
+import { displayDormantDeletion } from "./utils";
 
 interface DormantDeletionStatProps {
   workspace: Workspace;
@@ -32,7 +31,7 @@ export const DormantDeletionStat: FC<DormantDeletionStatProps> = ({
   }
 
   return (
-    <StyledStatsItem
+    <StatsItem
       label="Deletion on"
       className="containerClass"
       value={
@@ -45,19 +44,18 @@ export const DormantDeletionStat: FC<DormantDeletionStatProps> = ({
           {new Date(workspace.deleting_at!).toLocaleString()}
         </Link>
       }
+      css={{
+        "&.containerClass": {
+          flexDirection: "column",
+          gap: 0,
+          padding: 0,
+
+          "& > span:first-of-type": {
+            fontSize: 12,
+            fontWeight: 500,
+          },
+        },
+      }}
     />
   );
 };
-
-const StyledStatsItem = styled(StatsItem)(() => ({
-  "&.containerClass": {
-    flexDirection: "column",
-    gap: 0,
-    padding: 0,
-
-    "& > span:first-of-type": {
-      fontSize: 12,
-      fontWeight: 500,
-    },
-  },
-}));
@@ -1,14 +1,15 @@
-import { Workspace } from "api/typesGenerated";
+import { type FC } from "react";
+import type { Workspace } from "api/typesGenerated";
 import { displayDormantDeletion } from "./utils";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
-import styled from "@emotion/styled";
-import { Theme as MaterialUITheme } from "@mui/material/styles";
 
-export const DormantDeletionText = ({
-  workspace,
-}: {
+interface DormantDeletionTextProps {
   workspace: Workspace;
-}): JSX.Element | null => {
+}
+
+export const DormantDeletionText: FC<DormantDeletionTextProps> = ({
+  workspace,
+}) => {
   const { entitlements, experiments } = useDashboard();
   const allowAdvancedScheduling =
     entitlements.features["advanced_template_scheduling"].enabled;
@@ -25,10 +26,16 @@ export const DormantDeletionText = ({
   ) {
     return null;
   }
-  return <StyledSpan role="status">Impending deletion</StyledSpan>;
-};
 
-const StyledSpan = styled.span<{ theme?: MaterialUITheme }>`
-  color: ${(props) => props.theme.palette.warning.light};
-  font-weight: 600;
-`;
+  return (
+    <span
+      role="status"
+      css={(theme) => ({
+        color: theme.palette.warning.light,
+        fontWeight: 600,
+      })}
+    >
+      Impending deletion
+    </span>
+  );
+};