Add sidebar styles

BrunoQuaresma · BrunoQuaresma · commit 9d02bc5d5540 · 2023-02-17T17:35:12.000Z
diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx
@@ -8,6 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem"
 import { FC, useState } from "react"
 import { FileTree } from "util/filetree"
 import { DockerIcon } from "components/Icons/DockerIcon"
+import { colors } from "theme/colors"
 
 const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => {
   const contentA = fileTree[a]
@@ -98,7 +99,6 @@ export const FileTreeView: FC<{
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       aria-label="Files"
-      className={styles.fileTree}
     >
       {Object.keys(fileTree)
         .sort(sortFileTree(fileTree))
@@ -156,23 +156,22 @@ export const FileTreeView: FC<{
 }
 
 const useStyles = makeStyles((theme) => ({
-  fileTree: {},
   fileTreeItem: {
     overflow: "hidden",
     userSelect: "none",
 
-    "&:focus": {
-      "& > .MuiTreeItem-content": {
-        background: "rgba(255, 255, 255, 0.1)",
-      },
+    "&:focus:not(.active) > .MuiTreeItem-content": {
+      background: theme.palette.action.hover,
+      color: theme.palette.text.primary,
     },
-    "& > .MuiTreeItem-content:hover": {
-      background: theme.palette.background.paperLight,
+
+    "&:not(:focus):not(.active) > .MuiTreeItem-content:hover": {
+      background: theme.palette.action.hover,
       color: theme.palette.text.primary,
     },
 
     "& > .MuiTreeItem-content": {
-      padding: "1px 16px",
+      padding: theme.spacing(0.25, 2),
       color: theme.palette.text.secondary,
 
       "& svg": {
@@ -182,16 +181,25 @@ const useStyles = makeStyles((theme) => ({
 
       "& > .MuiTreeItem-label": {
         marginLeft: 4,
-        fontSize: 14,
+        fontSize: 13,
         color: "inherit",
       },
     },
 
     "&.active": {
-      background: theme.palette.background.paper,
-
       "& > .MuiTreeItem-content": {
         color: theme.palette.text.primary,
+        background: colors.gray[13],
+        pointerEvents: "none",
+      },
+    },
+
+    "& .MuiTreeItem-group": {
+      marginLeft: 0,
+
+      // We need to find a better way to recursive padding here
+      "& .MuiTreeItem-content": {
+        paddingLeft: theme.spacing(5),
       },
     },
   },
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
 import IconButton from "@material-ui/core/IconButton"
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
-import CreateIcon from "@material-ui/icons/AddBoxOutlined"
+import CreateIcon from "@material-ui/icons/AddOutlined"
 import BuildIcon from "@material-ui/icons/BuildOutlined"
 import PreviewIcon from "@material-ui/icons/VisibilityOutlined"
 import {
@@ -200,7 +200,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
       <div className={styles.sidebarAndEditor}>
         <div className={styles.sidebar}>
           <div className={styles.sidebarTitle}>
-            Template Editor
+            Template files
             <div className={styles.sidebarActions}>
               <Tooltip title="Create File" placement="top">
                 <IconButton
@@ -420,19 +420,23 @@ const useStyles = makeStyles<
   },
   sidebar: {
     minWidth: 256,
+    backgroundColor: theme.palette.background.paper,
+    borderRight: `1px solid ${theme.palette.divider}`,
   },
   sidebarTitle: {
-    fontSize: 12,
+    fontSize: 10,
     textTransform: "uppercase",
-    padding: "8px 16px",
-    color: theme.palette.text.hint,
+    padding: theme.spacing(1, 2),
+    color: theme.palette.text.primary,
+    fontWeight: 500,
+    letterSpacing: "0.5px",
     display: "flex",
     alignItems: "center",
   },
   sidebarActions: {
     marginLeft: "auto",
     "& svg": {
-      fill: theme.palette.text.hint,
+      fill: theme.palette.text.primary,
     },
   },
   editorPane: {
