Refactor deploy settings and workspace page

BrunoQuaresma · BrunoQuaresma · commit cdcc9032fc60 · 2023-11-24T12:30:29.000Z
diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -29,7 +29,6 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
       css={{
         borderRadius: 8,
         border: `1px solid ${theme.palette.divider}`,
-        background: theme.palette.background.paper,
         marginTop: 32,
       }}
       onSubmit={onSubmit}
@@ -63,7 +62,7 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
         css={[
           theme.typography.body2 as CSSObject,
           {
-            background: theme.palette.background.paperLight,
+            background: theme.palette.background.paper,
             padding: "16px 24px",
             display: "flex",
             alignItems: "center",
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -127,9 +127,7 @@ interface OptionConfigProps extends BoxProps {
 export const OptionConfig = (props: OptionConfigProps) => {
   const { source, sx, ...attrs } = props;
   const theme = useTheme();
-  const borderColor = source
-    ? theme.palette.primary.main
-    : theme.palette.divider;
+  const borderColor = source ? undefined : theme.palette.divider;
 
   return (
     <Box
@@ -139,9 +137,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontWeight: 600,
         backgroundColor: (theme) =>
-          source
-            ? theme.palette.primary.dark
-            : theme.palette.background.paperLight,
+          source ? theme.palette.primary.dark : theme.palette.background.paper,
         display: "inline-flex",
         alignItems: "center",
         borderRadius: 0.25,
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
@@ -160,7 +160,6 @@ const styles = {
   }),
 
   stack: (theme) => ({
-    backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
     marginTop: 64,
@@ -174,7 +173,7 @@ const styles = {
     fontWeight: 600,
     letterSpacing: 1,
     padding: "8px 8px 8px 16px",
-    backgroundColor: theme.palette.background.paperLight,
+    backgroundColor: theme.palette.background.paper,
     borderBottom: `1px solid ${theme.palette.divider}`,
     color: theme.palette.text.secondary,
     display: "flex",
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -125,7 +125,7 @@ const BaseSkeleton = (props: SkeletonProps) => {
       height={36}
       {...props}
       sx={{
-        bgcolor: (theme) => theme.palette.background.paperLight,
+        bgcolor: (theme) => theme.palette.background.paper,
         borderRadius: "6px",
         ...props.sx,
       }}
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -217,7 +217,7 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
   },
 
   "& .prismjs": {
-    background: theme.palette.background.paperLight,
+    background: theme.palette.background.paper,
     borderRadius: 8,
     padding: "16px 24px",
     overflowX: "auto",
diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -12,7 +12,7 @@ export const FullWidthPageHeader: FC<
         {
           ...(theme.typography.body2 as CSSObject),
           padding: 24,
-          background: theme.palette.background.paper,
+          background: theme.palette.background.default,
           borderBottom: `1px solid ${theme.palette.divider}`,
           display: "flex",
           alignItems: "center",
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -513,7 +513,7 @@ const useAgentLogs = (
 
 const styles = {
   agentRow: (theme) => ({
-    backgroundColor: theme.palette.background.paperLight,
+    backgroundColor: theme.palette.background.paper,
     fontSize: 16,
     borderLeft: `2px solid ${theme.palette.text.secondary}`,
 
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -13,7 +13,6 @@ import { SensitiveValue } from "./SensitiveValue";
 
 const styles = {
   resourceCard: (theme) => ({
-    background: theme.palette.background.paper,
     borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
 

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export const FullWidthPageHeader: FC<`
`12`	`12`	`{`
`13`	`13`	`...(theme.typography.body2 as CSSObject),`
`14`	`14`	`padding: 24,`
`15`		`- background: theme.palette.background.paper,`
	`15`	`+ background: theme.palette.background.default,`
`16`	`16`	borderBottom: `1px solid ${theme.palette.divider}`,
`17`	`17`	`display: "flex",`
`18`	`18`	`alignItems: "center",`