frontend: Refactor workflows to use new spacing units

frontend/packages/core/src/Theme/theme.tsx

@@ -11,23 +11,28 @@ import { clutchColors, THEME_VARIANTS } from "./colors";
 import palette from "./palette";
 import type { ThemeVariant } from "./types";
 
+type SpacingUnit = "none" | "xs" | "sm" | "base" | "md" | "lg" | "xl";
+
+// NOTE: `string & {}` allows `SpacingUnit` to be autocompleted
+type SpacingArg = SpacingUnit | number | (string & {});
+
 declare module "@emotion/react" {
   export interface Theme extends MuiTheme {}
 }
 
 declare module "@mui/material/styles" {
+  interface Spacing {
+    (value: SpacingArg): string;
+    (topBottom: SpacingArg, rightLeft: SpacingArg): string;
+    (top: SpacingArg, rightLeft: SpacingArg, bottom: SpacingArg): string;
+    (top: SpacingArg, right: SpacingArg, bottom: SpacingArg, left: SpacingArg): string;
+  }
+
   interface Theme {
+    spacing: Spacing;
     clutch: {
       useWorkflowLayout: boolean;
-      spacing: {
-        none: number;
-        xs: number;
-        sm: number;
-        base: number;
-        md: number;
-        lg: number;
-        xl: number;
-      };
+      spacing: Record<SpacingUnit, string>;
       layout: {
         gutter: string;
       };
@@ -36,41 +41,52 @@ declare module "@mui/material/styles" {
   interface ThemeOptions {
     clutch: {
       useWorkflowLayout: boolean;
-      spacing: {
-        none: number;
-        xs: number;
-        sm: number;
-        base: number;
-        md: number;
-        lg: number;
-        xl: number;
-      };
+      spacing: Record<SpacingUnit, string>;
       layout: {
         gutter: string;
       };
     };
   }
 }
 
+// `8` is the default scaling factor in MUI, so we define and use it
+// to allow predictability using a `number` value
+// https://v5.mui.com/material-ui/customization/spacing/
+const DEFAULT_SCALING_FACTOR = 8;
+
+const CLUTCH_CUSTOM_SPACING: Record<SpacingUnit, string> = {
+  none: "0px",
+  xs: "4px",
+  sm: "8px",
+  base: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "40px",
+};
+
 // Create a Material UI theme is propagated to all children.
 const createTheme = (variant: ThemeVariant, useWorkflowLayout: boolean): MuiTheme => {
   return createMuiTheme({
     colors: clutchColors(variant),
     palette: palette(variant),
-    // `8` is the default scaling factor in MUI, we are setting it again to make it explicit
-    // https://v5.mui.com/material-ui/customization/spacing/
-    spacing: 8,
+    spacing: (...args) => {
+      const spacingValues = args.map(value => {
+        if (typeof value === "number") {
+          return `${value * DEFAULT_SCALING_FACTOR}px`;
+        }
+
+        if (typeof value === "string" && CLUTCH_CUSTOM_SPACING[value] !== undefined) {
+          return CLUTCH_CUSTOM_SPACING[value];
+        }
+
+        return value;
+      });
+
+      return spacingValues.join(" ");
+    },
     clutch: {
       useWorkflowLayout,
-      spacing: {
-        none: 0,
-        xs: 0.5,
-        sm: 1,
-        base: 2,
-        md: 3,
-        lg: 4,
-        xl: 5,
-      },
+      spacing: { ...CLUTCH_CUSTOM_SPACING },
       layout: {
         gutter: useWorkflowLayout ? "0px" : "24px",
       },

frontend/packages/core/src/WorkflowLayout/index.tsx

@@ -38,13 +38,13 @@ const getContainerVariantStyles = (variant: LayoutVariant, theme: Theme) => {
   const layoutVariantStylesMap: { [key in LayoutVariant]: CSSObject } = {
     standard: {
       ...BASE_CONTAINER_STYLES,
-      padding: theme.spacing(theme.clutch.spacing.md),
+      padding: theme.spacing("md"),
     },
     wizard: {
       ...BASE_CONTAINER_STYLES,
       width: "800px", // Taken from the Wizard Component default width
-      padding: theme.spacing(theme.clutch.spacing.lg, theme.clutch.spacing.none),
-      margin: theme.spacing(theme.clutch.spacing.none, "auto"),
+      padding: theme.spacing("lg", "none"),
+      margin: theme.spacing("none", "auto"),
     },
   };
   return layoutVariantStylesMap[variant];
@@ -56,23 +56,20 @@ const LayoutContainer = styled("div")(
 );
 
 const PageHeader = styled("div")(({ $variant, theme }: StyledVariantComponentProps) => ({
-  padding: theme.spacing(
-    theme.clutch.spacing.none,
-    $variant === "wizard" ? theme.clutch.spacing.md : theme.clutch.spacing.none
-  ),
-  paddingBottom: theme.spacing(theme.clutch.spacing.base),
+  padding: theme.spacing("none", $variant === "wizard" ? "md" : "none"),
+  paddingBottom: theme.spacing("base"),
   width: "100%",
 }));
 
 const PageHeaderBreadcrumbsWrapper = styled("div")(({ theme }: { theme: Theme }) => ({
-  marginBottom: theme.spacing(theme.clutch.spacing.xs),
+  marginBottom: theme.spacing("xs"),
 }));
 
 const PageHeaderMainContainer = styled("div")(({ theme }: { theme: Theme }) => ({
   display: "flex",
   alignItems: "center",
   height: "70px",
-  marginBottom: theme.spacing(theme.clutch.spacing.sm),
+  marginBottom: theme.spacing("sm"),
 }));
 
 const PageHeaderInformation = styled("div")({

frontend/workflows/audit/src/logs/event-row.tsx

@@ -18,7 +18,7 @@ const ENDPOINT = "/v1/audit/getEvents";
 const COLUMN_COUNT = 6;
 const MonospaceText = styled("div")(({ theme }: { theme: Theme }) => ({
   fontFamily: "monospace",
-  padding: "8px",
+  padding: theme.spacing("sm"),
   border: "1px solid lightgray",
   borderRadius: "8px",
   background: theme.palette.secondary[200],
@@ -28,6 +28,10 @@ const MonospaceText = styled("div")(({ theme }: { theme: Theme }) => ({
   maxWidth: "400px",
 }));
 
+const ReactJsonWrapper = styled("div")(({ theme }: { theme: Theme }) => ({
+  padding: theme.spacing("sm"),
+}));
+
 interface EventRowAction {
   icon: React.ReactElement;
   name: string;
@@ -125,14 +129,15 @@ const EventRow = ({ event, detailsPathPrefix, downloadPrefix }: EventRowProps) =
       </TableRow>
       {open && (
         <TableRow colSpan={COLUMN_COUNT}>
-          <ReactJson
-            src={event}
-            name={null}
-            groupArraysAfterLength={5}
-            displayDataTypes={false}
-            collapsed={2}
-            style={{ padding: "8px" }}
-          />
+          <ReactJsonWrapper>
+            <ReactJson
+              src={event}
+              name={null}
+              groupArraysAfterLength={5}
+              displayDataTypes={false}
+              collapsed={2}
+            />
+          </ReactJsonWrapper>
         </TableRow>
       )}
       <Popper open={showActions} anchorRef={anchorRef} onClickAway={() => setShowActions(false)}>

frontend/workflows/envoy/src/remote-triage/dashboard.tsx

@@ -93,9 +93,9 @@ const SummariesContainer = styled(Grid)({
   flexBasis: "40%",
 });
 
-const InformationContainer = styled("div")({
-  padding: "16px 0",
-});
+const InformationContainer = styled("div")(({ theme }: { theme: Theme }) => ({
+  padding: theme.spacing("base", "none"),
+}));
 
 interface DashboardProps {
   serverInfo: IClutch.envoytriage.v1.IServerInfo;

frontend/workflows/envoy/src/remote-triage/server-info.tsx

@@ -3,11 +3,11 @@ import type { clutch as IClutch } from "@clutch-sh/api";
 import { MetadataTable, styled } from "@clutch-sh/core";
 import type { Theme } from "@mui/material";
 
-const Container = styled("div")({
+const Container = styled("div")(({ theme }: { theme: Theme }) => ({
   "> *": {
-    padding: "8px 0",
+    padding: theme.spacing("sm", "none"),
   },
-});
+}));
 
 const Title = styled("div")(({ theme }: { theme: Theme }) => ({
   fontWeight: "bold",

frontend/workflows/k8s/src/k8s-dash-header.tsx

@@ -8,7 +8,7 @@ const Category = styled("div")(({ theme }: { theme: Theme }) => ({
   lineHeight: "16px",
   color: alpha(theme.palette.secondary[900], 0.38),
   textTransform: "uppercase",
-  paddingBottom: "8px",
+  paddingBottom: theme.spacing("sm"),
 }));
 
 const HeaderText = styled("div")(({ theme }: { theme: Theme }) => ({

frontend/workflows/k8s/src/k8s-dash-search.tsx

@@ -14,20 +14,21 @@ import { useDataLayout } from "@clutch-sh/data-layout";
 import styled from "@emotion/styled";
 import { yupResolver } from "@hookform/resolvers/yup";
 import SearchIcon from "@mui/icons-material/Search";
+import type { Theme } from "@mui/material";
 import * as yup from "yup";
 
-const Container = styled.div({
-  margin: "32px 0",
-});
+const Container = styled.div(({ theme }: { theme: Theme }) => ({
+  margin: theme.spacing("lg", "none"),
+}));
 
 const schema = yup.object().shape({
   namespace: yup.string().required("Namespace is required"),
   clientset: yup.string().required("Clientset is required"),
 });
 
-const Content = styled.div({
-  margin: "32px 0",
-});
+const Content = styled.div(({ theme }: { theme: Theme }) => ({
+  margin: theme.spacing("lg", "none"),
+}));
 
 const K8sDashSearch = ({ onSubmit }) => {
   const {

frontend/workflows/k8s/src/k8s-dashboard.tsx

@@ -22,16 +22,16 @@ const Container = styled("div")(({ theme }: { theme: Theme }) => ({
   display: "flex",
   flexDirection: "column",
   "> *:first-child": {
-    margin: "0",
+    margin: theme.spacing("none"),
   },
 }));
 
-const Content = styled("div")({
-  margin: "32px 0",
-});
+const Content = styled("div")(({ theme }: { theme: Theme }) => ({
+  margin: theme.spacing("lg", "none"),
+}));
 
 const PlaceholderTitle = styled("div")(({ theme }: { theme: Theme }) => ({
-  paddingBottom: "16px",
+  paddingBottom: theme.spacing("base"),
   fontWeight: 700,
   fontSize: "22px",
   lineHeight: "28px",
@@ -45,12 +45,17 @@ const PlaceholderText = styled("div")(({ theme }: { theme: Theme }) => ({
   color: alpha(theme.palette.secondary[900], 0.6),
 }));
 
+const PlaceholderWrapper = styled("div")(({ theme }: { theme: Theme }) => ({
+  margin: theme.spacing("lg"),
+  textAlign: "center",
+}));
+
 const Placeholder = () => (
   <Paper>
-    <div style={{ margin: "32px", textAlign: "center" }}>
+    <PlaceholderWrapper>
       <PlaceholderTitle>There is nothing to display here</PlaceholderTitle>
       <PlaceholderText>Please enter a namespace and clientset to proceed.</PlaceholderText>
-    </div>
+    </PlaceholderWrapper>
   </Paper>
 );
 

frontend/workflows/kinesis/src/update-shard-count.tsx

@@ -17,20 +17,20 @@ import { useDataLayout } from "@clutch-sh/data-layout";
 import type { WizardChild } from "@clutch-sh/wizard";
 import { Wizard, WizardStep } from "@clutch-sh/wizard";
 import styled from "@emotion/styled";
-import { Grid } from "@mui/material";
+import { Grid, Theme } from "@mui/material";
 import _ from "lodash";
 
 import type { ResolverChild, WorkflowProps } from "./index";
 
-const Form = styled.form({
+const Form = styled.form(({ theme }: { theme: Theme }) => ({
   alignItems: "center",
   display: "flex",
   flexDirection: "column",
   justifyItems: "space-evenly",
   "> *": {
-    padding: "8px 0",
+    padding: theme.spacing("sm", "none"),
   },
-});
+}));
 
 const StreamIdentifier: React.FC<ResolverChild> = ({ resolverType }) => {
   const { onSubmit } = useWizardContext();
@@ -74,7 +74,7 @@ const StreamDetails: React.FC<WizardChild> = () => {
         <TextField readOnly label="Stream Name" name="streamName" value={stream.streamName} />
         <TextField readOnly label="Region" name="region" value={stream.region} />
         <Grid container alignItems="stretch" wrap="nowrap">
-          <Grid item style={{ flexBasis: "50%", paddingRight: "8px" }}>
+          <Grid item flexBasis="50%" paddingRight={1}>
             <TextField
               readOnly
               label="Current Shard Count"
@@ -83,7 +83,7 @@ const StreamDetails: React.FC<WizardChild> = () => {
               disabled
             />
           </Grid>
-          <Grid item style={{ flexBasis: "50%", paddingLeft: "8px" }}>
+          <Grid item flexBasis="50%" paddingLeft={1}>
             <Select
               label="Target Shard Count"
               name="targetShardCount"