refactor: Make the workspace panels more light (#2984)

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: {

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>

site/src/components/WorkspaceSection/WorkspaceSection.tsx

@@ -25,11 +25,9 @@ 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">{title}</Typography>
+          {action && <div>{action}</div>}
         </div>
       )}
 
@@ -48,9 +46,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 +53,9 @@ 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,
   },
 }))

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,