🧹

coder · aslilac · Nov 6, 2023 · Nov 3, 2023 · Nov 3, 2023 · Nov 3, 2023
commit 9ebcbd04b5dd4dedcd97c7898b7bfc580bc8289e
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -17,18 +17,18 @@ const sizeStyles = {
     fontSize: 8,
     fontWeight: 700,
   },
-  sm: (theme) => ({
+  sm: {
     width: 24,
     height: 24,
     fontSize: 12,
     fontWeight: 600,
-  }),
+  },
   md: {},
-  xl: (theme) => ({
+  xl: {
     width: 48,
     height: 48,
     fontSize: 24,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 const colorStyles = {

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
           ) : (
             <FileCopyIcon css={fileCopyIconStyles} />
           )}
-          {ctaCopy && (
-            <div
-              css={(theme) => ({
-                marginLeft: 8,
-              })}
-            >
-              {ctaCopy}
-            </div>
-          )}
+          {ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
         </IconButton>
       </div>
     </Tooltip>

diff --git a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -21,10 +21,10 @@ export const Language = {
 };
 
 const styles = {
-  leftContent: (theme) => ({
+  leftContent: {
     marginRight: 8,
     marginLeft: 8,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface LicenseBannerViewProps {

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -70,11 +70,11 @@ const styles = {
       justify-content: flex-start;
     }
   `,
-  drawerHeader: (theme) => ({
+  drawerHeader: {
     padding: 16,
     paddingTop: 32,
     paddingBottom: 32,
-  }),
+  },
   logo: (theme) => css`
     align-items: center;
     display: flex;
@@ -89,10 +89,10 @@ const styles = {
       object-fit: contain;
     }
   `,
-  drawerLogo: (theme) => ({
+  drawerLogo: {
     padding: 0,
     maxHeight: 40,
-  }),
+  },
   item: {
     padding: 0,
   },

diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -1,7 +1,7 @@
 import Badge from "@mui/material/Badge";
-import { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import { colors } from "theme/colors";
-import * as TypesGen from "api/typesGenerated";
+import type * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
@@ -35,7 +35,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
         <>
           <PopoverTrigger>
             <button
-              css={(theme) => css`
+              css={css`
                 background: none;
                 border: 0;
                 cursor: pointer;

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -5,7 +5,7 @@ import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
 
 const styles = {
-  badge: (theme) => ({
+  badge: {
     fontSize: 10,
     height: 24,
     fontWeight: 600,
@@ -17,7 +17,7 @@ const styles = {
     alignItems: "center",
     width: "fit-content",
     whiteSpace: "nowrap",
-  }),
+  },
 
   enabledBadge: (theme) => ({
     border: `1px solid ${theme.palette.success.light}`,

diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
@@ -49,9 +49,9 @@ const styles = {
     cursor: "pointer",
     color: theme.palette.text.secondary,
   }),
-  collapseLink: (theme) => ({
+  collapseLink: {
     marginTop: 16,
-  }),
+  },
   text: (theme) => ({
     display: "flex",
     alignItems: "center",

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -57,7 +57,7 @@ export const FormFooter: FC<FormFooterProps> = ({
 };
 
 const defaultStyles = {
-  footer: (theme) => ({
+  footer: {
     display: "flex",
     flex: "0",
     // The first button is the submit so it is the first element to be focused
@@ -66,7 +66,7 @@ const defaultStyles = {
     gap: 12,
     alignItems: "center",
     marginTop: 24,
-  }),
+  },
   button: {
     width: "100%",
   },

diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -5,7 +5,6 @@ import {
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader";
-import { useTheme } from "@emotion/react";
 
 export interface FullPageFormProps {
   title: string;
@@ -17,8 +16,6 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
   detail,
   children,
 }) => {
-  const theme = useTheme();
-
   return (
     <Margins size="small">
       <PageHeader css={{ paddingBottom: 24 }}>

diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -125,9 +125,9 @@ const styles = {
     fontSize: 14,
     fontWeight: 600,
   },
-  messageSubtitle: (theme) => ({
+  messageSubtitle: {
     marginTop: 12,
-  }),
+  },
   errorIcon: (theme) => ({
     color: theme.palette.error.contrastText,
     marginRight: 16,

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
@@ -53,14 +53,14 @@ export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
 }) => {
   return (
     <h1
-      css={(theme) => ({
+      css={{
         fontSize: 24,
         fontWeight: 400,
         margin: 0,
         display: "flex",
         alignItems: "center",
         lineHeight: "140%",
-      })}
+      }}
     >
       {children}
     </h1>

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
@@ -57,19 +57,19 @@ const styles = {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 8,
   }),
-  header: (theme) => ({
+  header: {
     marginBottom: 24,
-  }),
+  },
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
   },
-  description: (theme) => ({
+  description: {
     marginTop: 8,
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  }),
+  },
   enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
@@ -1,5 +1,5 @@
 import { type FC, type ReactNode, useMemo, forwardRef } from "react";
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { css, type Interpolation, type Theme } from "@emotion/react";
 import { colors } from "theme/colors";
 
 export type PillType =
@@ -53,7 +53,6 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
       type = "neutral",
       ...attrs
     } = props;
-    const theme = useTheme();
 
     const typeStyles = useMemo(() => {
       if (type in themeOverrides) {

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -640,11 +640,11 @@ const styles = {
     },
   }),
 
-  agentDataGroup: (theme) => ({
+  agentDataGroup: {
     display: "flex",
     alignItems: "baseline",
     gap: 48,
-  }),
+  },
 
   agentData: (theme) => ({
     display: "flex",

diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
@@ -353,12 +353,12 @@ export const AgentStatus: React.FC<{
 };
 
 const styles = {
-  status: (theme) => ({
+  status: {
     width: 8,
     height: 8,
     borderRadius: "100%",
     flexShrink: 0,
-  }),
+  },
 
   connected: (theme) => ({
     backgroundColor: theme.palette.success.light,

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -113,13 +113,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
         </Stack>
 
         <div
-          css={(theme) => ({
+          css={{
             flexGrow: 2,
             display: "grid",
             gridTemplateColumns: `repeat(${gridWidth}, minmax(0, 1fr))`,
             gap: 40,
             rowGap: 24,
-          })}
+          }}
         >
           {resource.daily_cost > 0 && (
             <div css={styles.metadata}>

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -55,12 +55,12 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
 };
 
 const styles = {
-  buttonWrapper: (theme) => ({
+  buttonWrapper: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     marginTop: 16,
-  }),
+  },
 
   showMoreButton: {
     borderRadius: 9999,

diff --git a/site/src/components/Resources/SensitiveValue.tsx b/site/src/components/Resources/SensitiveValue.tsx
@@ -2,7 +2,7 @@ import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
-import { useState } from "react";
+import { type FC, useState } from "react";
 import { css } from "@emotion/react";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 
@@ -11,7 +11,7 @@ const Language = {
   hideLabel: "Hide value",
 };
 
-export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
+export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
   const [shouldDisplay, setShouldDisplay] = useState(false);
   const displayValue = shouldDisplay ? value : "••••••••";
   const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
@@ -23,11 +23,11 @@ export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
 
   return (
     <div
-      css={(theme) => ({
+      css={{
         display: "flex",
         alignItems: "center",
         gap: 4,
-      })}
+      }}
     >
       <CopyableValue
         value={value}

diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -4,7 +4,7 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
@@ -175,7 +175,6 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   size,
   ...props
 }) => {
-  const theme = useTheme();
   const small = size === "small";
 
   if (isBoolean(parameter)) {
@@ -232,9 +231,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
                     spacing={small ? 1 : 0}
                     alignItems={small ? "center" : undefined}
                     direction={small ? "row" : "column"}
-                    css={{
-                      padding: small ? undefined : "4px 0",
-                    }}
+                    css={{ padding: small ? undefined : "4px 0" }}
                   >
                     {small ? (
                       <Tooltip

diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode, type PropsWithChildren } from "react";
 import { SectionAction } from "./SectionAction";
@@ -32,8 +31,6 @@ export const Section: SectionFC = ({
   children,
   layout = "fixed",
 }) => {
-  const theme = useTheme();
-
   return (
     <section className={className} id={id} data-testid={id}>
       <div css={{ maxWidth: layout === "fluid" ? "100%" : 500 }}>
@@ -66,12 +63,12 @@ export const Section: SectionFC = ({
 Section.Action = SectionAction;
 
 const styles = {
-  header: (theme) => ({
+  header: {
     marginBottom: 24,
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-  }),
+  },
   description: (theme) => ({
     color: theme.palette.text.secondary,
     fontSize: 16,

diff --git a/site/src/components/SettingsLayout/SectionAction.tsx b/site/src/components/SettingsLayout/SectionAction.tsx
@@ -7,13 +7,5 @@ import { type FC } from "react";
 export const SectionAction: FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  return (
-    <div
-      css={(theme) => ({
-        marginTop: 24,
-      })}
-    >
-      {children}
-    </div>
-  );
+  return <div css={{ marginTop: 24 }}>{children}</div>;
 };