Refactor editor header

coder · BrunoQuaresma · Feb 22, 2023 · Feb 17, 2023 · Feb 17, 2023 · Feb 17, 2023
commit 48a4ea6f00256c9a83caf7c23ec98bb03c43a616
@@ -9,15 +9,17 @@ export interface PillProps {
   text: string
   type?: PaletteIndex
   lightBorder?: boolean
+  title?: string
 }
 
 export const Pill: FC<PillProps> = (props) => {
-  const { className, icon, text = false } = props
+  const { className, icon, text = false, title } = props
   const styles = useStyles(props)
   return (
     <div
       className={combineClasses([styles.wrapper, styles.pillColor, className])}
       role="status"
+      title={title}
     >
       {icon && <div className={styles.iconWrapper}>{icon}</div>}
       {text}

@@ -2,9 +2,9 @@ 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/AddBox"
+import CreateIcon from "@material-ui/icons/AddBoxOutlined"
 import BuildIcon from "@material-ui/icons/BuildOutlined"
-import PreviewIcon from "@material-ui/icons/Visibility"
+import PreviewIcon from "@material-ui/icons/VisibilityOutlined"
 import {
   ProvisionerJobLog,
   Template,
@@ -50,7 +50,7 @@ export interface TemplateVersionEditorProps {
   onUpdate: () => void
 }
 
-const topbarHeight = navHeight
+const topbarHeight = 80
 
 const findInitialFile = (fileTree: FileTree): string | undefined => {
   let initialFile: string | undefined
@@ -161,50 +161,39 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               )
             }
           />
-          <div>Used By: {template.active_user_count} developers</div>
         </div>
 
         <div className={styles.topbarSides}>
           <div className={styles.buildStatus}>
-            Build Status:
             <TemplateVersionStatusBadge version={templateVersion} />
           </div>
 
           <Button
+            title="Build template (Ctrl + Enter)"
             size="small"
             variant="outlined"
-            color="primary"
             disabled={disablePreview}
             onClick={() => {
               triggerPreview()
             }}
           >
-            Build (Ctrl + Enter)
+            Build template
           </Button>
 
-          <Tooltip
+          <Button
             title={
               dirty
                 ? "You have edited files! Run another build before updating."
                 : templateVersion.job.status !== "succeeded"
                 ? "Something"
                 : ""
             }
+            size="small"
+            disabled={dirty || disableUpdate}
+            onClick={onUpdate}
           >
-            <span>
-              <Button
-                size="small"
-                variant="contained"
-                color="primary"
-                disabled={dirty || disableUpdate}
-                onClick={() => {
-                  onUpdate()
-                }}
-              >
-                Publish New Version
-              </Button>
-            </span>
-          </Tooltip>
+            Publish version
+          </Button>
         </div>
       </div>
 
@@ -413,11 +402,12 @@ const useStyles = makeStyles<
     alignItems: "center",
     justifyContent: "space-between",
     height: topbarHeight,
+    background: theme.palette.background.paper,
   },
   topbarSides: {
     display: "flex",
     alignItems: "center",
-    gap: 16,
+    gap: theme.spacing(2),
   },
   buildStatus: {
     display: "flex",

@@ -1,7 +1,6 @@
 import { TemplateVersion } from "api/typesGenerated"
 import { FC, ReactNode } from "react"
 import { PaletteIndex } from "theme/palettes"
-
 import CircularProgress from "@material-ui/core/CircularProgress"
 import ErrorIcon from "@material-ui/icons/ErrorOutline"
 import CheckIcon from "@material-ui/icons/CheckOutlined"
@@ -11,7 +10,14 @@ export const TemplateVersionStatusBadge: FC<{
   version: TemplateVersion
 }> = ({ version }) => {
   const { text, icon, type } = getStatus(version)
-  return <Pill icon={icon} text={text} type={type} />
+  return (
+    <Pill
+      icon={icon}
+      text={text}
+      type={type}
+      title={`Build status is ${text}`}
+    />
+  )
 }
 
 const LoadingIcon: FC = () => {

@@ -1,4 +1,4 @@
-import { lighten, Theme, StyleRules } from "@material-ui/core/styles"
+import { Theme, StyleRules } from "@material-ui/core/styles"
 import { Overrides } from "@material-ui/core/styles/overrides"
 import { SkeletonClassKey } from "@material-ui/lab"
 import { colors } from "./colors"
@@ -57,17 +57,20 @@ export const getOverrides = ({
       contained: {
         boxShadow: "none",
         color: palette.text.primary,
-        backgroundColor: colors.gray[17],
+        backgroundColor: colors.gray[11],
+        borderColor: colors.gray[10],
 
-        "&:hover": {
+        "&:hover:not(:disabled)": {
           boxShadow: "none",
-          backgroundColor: colors.gray[17],
-          borderColor: lighten(palette.divider, 0.2),
+          backgroundColor: colors.gray[12],
+          borderColor: colors.gray[12],
         },
 
         "&.Mui-disabled": {
-          backgroundColor: palette.background.paper,
-          color: palette.secondary.main,
+          color: colors.gray[9],
+          backgroundColor: colors.gray[14],
+          pointerEvents: "auto",
+          cursor: "not-allowed",
         },
       },
       sizeSmall: {
@@ -89,10 +92,17 @@ export const getOverrides = ({
         },
       },
       outlined: {
-        border: `1px solid ${palette.divider}`,
+        border: `1px solid ${colors.gray[11]}`,
+
+        "&:hover:not(:disabled)": {
+          backgroundColor: colors.gray[14],
+        },
 
-        "&:hover": {
-          backgroundColor: palette.action.hover,
+        "&.Mui-disabled": {
+          color: colors.gray[9],
+          border: `1px solid ${colors.gray[12]}`,
+          pointerEvents: "auto",
+          cursor: "not-allowed",
         },
       },
     },