From a40315c5f15825665ba6f3a064fdf580e0fd0dd6 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 14 Jul 2022 14:30:43 +0000
Subject: [PATCH 1/2] refactor: Make the workspace panels more light

---
 site/src/components/Resources/Resources.tsx   | 13 ++++-------
 site/src/components/Workspace/Workspace.tsx   |  2 +-
 .../WorkspaceSection/WorkspaceSection.tsx     | 23 ++++++++++---------
 .../WorkspaceStats/WorkspaceStats.tsx         | 10 ++++----
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index bd9834b6a1e07..55d9e4ba07429 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -15,7 +15,6 @@ import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
 import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
 import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
-import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
 const Language = {
   resources: "Resources",
@@ -41,10 +40,7 @@ export const Resources: FC<ResourcesProps> = ({
   const theme: Theme = useTheme()
 
   return (
-    <WorkspaceSection
-      title={Language.resources}
-      contentsProps={{ className: styles.sectionContents }}
-    >
+    <div aria-label={Language.resources} className={styles.wrapper}>
       {getResourcesError ? (
         { getResourcesError }
       ) : (
@@ -137,13 +133,14 @@ export const Resources: FC<ResourcesProps> = ({
           </TableBody>
         </Table>
       )}
-    </WorkspaceSection>
+    </div>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  sectionContents: {
-    margin: 0,
+  wrapper: {
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
   },
 
   table: {
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 8c0ab305481fc..a3e00c984a472 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -105,7 +105,7 @@ export const Workspace: FC<WorkspaceProps> = ({
             />
           )}
 
-          <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
+          <WorkspaceSection title="Logs" contentsProps={{ className: styles.timelineContents }}>
             <BuildsTable builds={builds} className={styles.timelineTable} />
           </WorkspaceSection>
         </Stack>
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
index 00b8f7f8dd940..aa1ecad16df6c 100644
--- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx
+++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -25,11 +25,11 @@ export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({
   return (
     <Paper className={styles.root} elevation={0}>
       {title && (
-        <div className={styles.headerContainer}>
-          <div className={styles.header}>
-            <Typography variant="h6">{title}</Typography>
-            {action && <div>{action}</div>}
-          </div>
+        <div className={styles.header}>
+          <Typography variant="h6" className={styles.title}>
+            {title}
+          </Typography>
+          {action && <div>{action}</div>}
         </div>
       )}
 
@@ -48,9 +48,6 @@ const useStyles = makeStyles((theme) => ({
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: CardRadius,
   },
-  headerContainer: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
   contents: {
     margin: theme.spacing(2),
   },
@@ -58,9 +55,13 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: theme.spacing(1),
-    marginTop: theme.spacing(1),
-    paddingLeft: CardPadding + theme.spacing(1),
+    paddingBottom: theme.spacing(1.5),
+    paddingTop: theme.spacing(2),
+    paddingLeft: CardPadding + theme.spacing(1.5),
     paddingRight: CardPadding / 2,
   },
+  title: {
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+  },
 }))
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
index 8a75ab5edf5eb..bde20f8226637 100644
--- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx
+++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -4,10 +4,9 @@ import dayjs from "dayjs"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { Workspace } from "../../api/typesGenerated"
-import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "../../util/workspace"
-import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
 const Language = {
   workspaceDetails: "Workspace Details",
@@ -31,7 +30,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
   const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(workspace.latest_build)
 
   return (
-    <WorkspaceSection title={Language.workspaceDetails} contentsProps={{ className: styles.stats }}>
+    <div className={styles.stats} aria-label={Language.workspaceDetails}>
       <div className={styles.statItem}>
         <span className={styles.statsLabel}>{Language.templateLabel}</span>
         <Link
@@ -74,7 +73,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
           </span>
         </span>
       </div>
-    </WorkspaceSection>
+    </div>
   )
 }
 
@@ -83,7 +82,8 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     backgroundColor: theme.palette.background.paper,
-    borderRadius: CardRadius,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
     display: "flex",
     alignItems: "center",
     color: theme.palette.text.secondary,

From 07e3e6fdc3e51cba6b9985715e32651bcc93533d Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 14 Jul 2022 16:07:34 +0000
Subject: [PATCH 2/2] Make title more visible

---
 site/src/components/WorkspaceSection/WorkspaceSection.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
index aa1ecad16df6c..73947c6fc32ac 100644
--- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx
+++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -26,9 +26,7 @@ export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({
     <Paper className={styles.root} elevation={0}>
       {title && (
         <div className={styles.header}>
-          <Typography variant="h6" className={styles.title}>
-            {title}
-          </Typography>
+          <Typography variant="h6">{title}</Typography>
           {action && <div>{action}</div>}
         </div>
       )}
@@ -60,8 +58,4 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: CardPadding + theme.spacing(1.5),
     paddingRight: CardPadding / 2,
   },
-  title: {
-    color: theme.palette.text.secondary,
-    fontSize: 14,
-  },
 }))