From e8173c65d9a0e08491939d2d2f350a16bd84f430 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 25 Jan 2024 16:15:55 +0000 Subject: [PATCH] refactor(site): workspace page improvements --- site/src/@types/mui.d.ts | 2 + .../components/Resources/AgentMetadata.tsx | 2 +- site/src/components/Resources/AgentRow.tsx | 14 +- .../pages/WorkspacePage/ResourceMetadata.tsx | 2 +- site/src/pages/WorkspacePage/Workspace.tsx | 180 +++++++++--------- site/src/theme/dark/mui.ts | 1 + site/src/theme/darkBlue/mui.ts | 1 + site/src/theme/light/mui.ts | 1 + 8 files changed, 101 insertions(+), 102 deletions(-) diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts index 255981fdf60fc..e2cd8d3d1493c 100644 --- a/site/src/@types/mui.d.ts +++ b/site/src/@types/mui.d.ts @@ -3,10 +3,12 @@ import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles"; declare module "@mui/material/styles" { interface Palette { neutral: PaletteColor; + dots: string; } interface PaletteOptions { neutral?: PaletteColorOptions; + dots?: string; } } diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 886862d96d119..e3d16bb1b6c01 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -248,7 +248,7 @@ const styles = { }, metadataValueSuccess: (theme) => ({ - color: theme.experimental.roles.success.outline, + color: theme.experimental.roles.success.fill, }), metadataValueError: (theme) => ({ diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 81abc9fbb45b6..c0663116435ff 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -509,6 +509,7 @@ const styles = { border: `1px solid ${theme.palette.text.secondary}`, backgroundColor: theme.palette.background.default, borderRadius: 8, + boxShadow: theme.shadows[3], }), "agentRow-connected": (theme) => ({ @@ -562,14 +563,13 @@ const styles = { }), header: (theme) => ({ - padding: "12px 24px", + padding: "16px 16px 0 32px", display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", lineHeight: "1.5", - borderBottom: `1px solid ${theme.palette.divider}`, [theme.breakpoints.down("md")]: { gap: 16, @@ -581,7 +581,7 @@ const styles = { alignItems: "center", gap: 24, color: theme.palette.text.secondary, - fontSize: 13, + fontSize: 14, }), agentNameAndInfo: (theme) => ({ @@ -596,7 +596,7 @@ const styles = { }), content: { - padding: "32px 24px", + padding: 32, display: "flex", flexDirection: "column", gap: 32, @@ -637,7 +637,7 @@ const styles = { agentNameAndStatus: (theme) => ({ display: "flex", alignItems: "center", - gap: 12, + gap: 16, [theme.breakpoints.down("md")]: { width: "100%", @@ -652,7 +652,7 @@ const styles = { fontWeight: 600, flexShrink: 0, width: "fit-content", - fontSize: 14, + fontSize: 16, color: theme.palette.text.primary, [theme.breakpoints.down("md")]: { @@ -682,7 +682,7 @@ const styles = { background: "transparent", border: 0, fontFamily: "inherit", - padding: "12px 24px", + padding: "16px 32px", color: theme.palette.text.secondary, cursor: "pointer", display: "flex", diff --git a/site/src/pages/WorkspacePage/ResourceMetadata.tsx b/site/src/pages/WorkspacePage/ResourceMetadata.tsx index c2385e8bc4a00..bc7aeda23ed89 100644 --- a/site/src/pages/WorkspacePage/ResourceMetadata.tsx +++ b/site/src/pages/WorkspacePage/ResourceMetadata.tsx @@ -68,7 +68,7 @@ const styles = { rowGap: 24, marginBottom: 24, fontSize: 14, - background: `linear-gradient(180deg, ${theme.palette.background.default} 0%, rgba(0, 0, 0, 0) 100%)`, + background: `linear-gradient(180deg, ${theme.palette.background.default} 25%, rgba(0, 0, 0, 0) 100%)`, }), item: () => ({ diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx index c6f1b93fc717a..4ecf95bc2527f 100644 --- a/site/src/pages/WorkspacePage/Workspace.tsx +++ b/site/src/pages/WorkspacePage/Workspace.tsx @@ -182,101 +182,97 @@ export const Workspace: FC = ({ )} -
-
- {selectedResource && ( - + {selectedResource && ( + + )} +
+ {workspace.latest_build.status === "deleted" && ( + navigate(`/templates`)} /> )} -
- {workspace.latest_build.status === "deleted" && ( - navigate(`/templates`)} - /> - )} - {workspace.latest_build.job.error && ( - - Retry{canRetryDebugMode && " in debug mode"} - - } - > - Workspace build failed - {workspace.latest_build.job.error} - - )} + {workspace.latest_build.job.error && ( + + Retry{canRetryDebugMode && " in debug mode"} + + } + > + Workspace build failed + {workspace.latest_build.job.error} + + )} - {transitionStats !== undefined && ( - - )} + {transitionStats !== undefined && ( + + )} - {buildLogs} + {buildLogs} - {selectedResource && ( -
- {selectedResource.agents?.map((agent) => ( - - ))} + {selectedResource && ( +
+ {selectedResource.agents?.map((agent) => ( + + ))} - {(!selectedResource.agents || - selectedResource.agents?.length === 0) && ( -
-
-

- No agents are currently assigned to this resource. -

-
+ {(!selectedResource.agents || + selectedResource.agents?.length === 0) && ( +
+
+

+ No agents are currently assigned to this resource. +

- )} -
- )} -
+
+ )} + + )}
@@ -289,15 +285,13 @@ const countAgents = (resource: TypesGen.WorkspaceResource) => { const styles = { content: { - padding: 24, + padding: 32, gridArea: "content", overflowY: "auto", position: "relative", }, - dotBackground: (theme) => ({ - minHeight: "100%", - padding: 23, + dotsBackground: (theme) => ({ "--d": "1px", background: ` radial-gradient( @@ -305,10 +299,10 @@ const styles = { var(--d) var(--d), - ${theme.palette.text.secondary} calc(var(--d) - 1px), + ${theme.palette.dots} calc(var(--d) - 1px), ${theme.palette.background.default} var(--d) ) - 0 0 / 24px 24px + -2px -2px / 16px 16px `, }), diff --git a/site/src/theme/dark/mui.ts b/site/src/theme/dark/mui.ts index 52927eda2e0c9..310c116579328 100644 --- a/site/src/theme/dark/mui.ts +++ b/site/src/theme/dark/mui.ts @@ -54,6 +54,7 @@ const muiTheme = createTheme({ neutral: { main: tw.zinc[50], }, + dots: tw.zinc[500], }, typography: { fontFamily: BODY_FONT_FAMILY, diff --git a/site/src/theme/darkBlue/mui.ts b/site/src/theme/darkBlue/mui.ts index ecf5022323005..65da18b772739 100644 --- a/site/src/theme/darkBlue/mui.ts +++ b/site/src/theme/darkBlue/mui.ts @@ -54,6 +54,7 @@ const muiTheme = createTheme({ neutral: { main: tw.gray[50], }, + dots: tw.gray[500], }, typography: { fontFamily: BODY_FONT_FAMILY, diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts index e508dabc3c789..a5af28ee39368 100644 --- a/site/src/theme/light/mui.ts +++ b/site/src/theme/light/mui.ts @@ -56,6 +56,7 @@ const muiTheme = createTheme({ neutral: { main: tw.zinc[950], }, + dots: tw.zinc[400], }, typography: { fontFamily: BODY_FONT_FAMILY,