From eb458865ff016d28bf22a394ae986b173ae42c1f Mon Sep 17 00:00:00 2001
From: kira-pilot <kira.pilot23@gmail.com>
Date: Fri, 15 Jul 2022 19:33:03 +0000
Subject: [PATCH 1/3] border fixes for workspace schedule button

---
 .../WorkspaceScheduleButton.tsx               | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index d03c0ad357136..a470513106672 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -28,6 +28,7 @@ dayjs.extend(relativeTime)
 dayjs.extend(timezone)
 
 export const Language = {
+  schedule: "Schedule",
   editDeadlineMinus: "Subtract one hour",
   editDeadlinePlus: "Add one hour",
 }
@@ -73,7 +74,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
   }
 
   return (
-    <div className={styles.wrapper}>
+    <span className={styles.wrapper}>
       <div className={styles.label}>
         <WorkspaceScheduleLabel workspace={workspace} />
         {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
@@ -101,15 +102,16 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
           </Stack>
         )}
       </div>
-      <div>
+      <>
         <Button
           ref={anchorRef}
           startIcon={<ScheduleIcon />}
           onClick={() => {
             setIsOpen(true)
           }}
+          className={styles.scheduleButton}
         >
-          Schedule
+          {Language.schedule}
         </Button>
         <Popover
           classes={{ paper: styles.popoverPaper }}
@@ -128,8 +130,8 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
         >
           <WorkspaceSchedule workspace={workspace} canUpdateWorkspace={canUpdateWorkspace} />
         </Popover>
-      </div>
-    </div>
+      </>
+    </span>
   )
 }
 
@@ -137,10 +139,10 @@ const useStyles = makeStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: `${theme.shape.borderRadius}px`,
   },
-
   label: {
-    border: `1px solid ${theme.palette.divider}`,
     borderRight: 0,
     height: "100%",
     display: "flex",
@@ -150,11 +152,14 @@ const useStyles = makeStyles((theme) => ({
     // It is from the button props
     minHeight: 42,
   },
-
+  scheduleButton: {
+    border: "none",
+    borderLeft: `1px solid ${theme.palette.divider}`,
+    borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+  },
   iconButton: {
     borderRadius: 2,
   },
-
   popoverPaper: {
     padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
   },

From baad10fa0c96670948bf3935ef6b8a4b3c46e2d8 Mon Sep 17 00:00:00 2001
From: kira-pilot <kira.pilot23@gmail.com>
Date: Fri, 15 Jul 2022 20:17:45 +0000
Subject: [PATCH 2/3] fixing chromatic snapshots

---
 .../WorkspaceScheduleButton/WorkspaceScheduleButton.tsx  | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index a470513106672..3234461a9a836 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -75,7 +75,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
 
   return (
     <span className={styles.wrapper}>
-      <div className={styles.label}>
+      <span className={styles.label}>
         <WorkspaceScheduleLabel workspace={workspace} />
         {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
           <Stack direction="row" spacing={0}>
@@ -101,7 +101,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
             </IconButton>
           </Stack>
         )}
-      </div>
+      </span>
       <>
         <Button
           ref={anchorRef}
@@ -137,16 +137,13 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
-    display: "flex",
-    alignItems: "center",
+    display: "inline-block",
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: `${theme.shape.borderRadius}px`,
   },
   label: {
     borderRight: 0,
     height: "100%",
-    display: "flex",
-    alignItems: "center",
     padding: "0 8px 0 16px",
     color: theme.palette.text.secondary,
     // It is from the button props

From 939c10e3ec46d13e2604e608e7d7a571e3594437 Mon Sep 17 00:00:00 2001
From: kira-pilot <kira.pilot23@gmail.com>
Date: Fri, 15 Jul 2022 21:22:25 +0000
Subject: [PATCH 3/3] chromatic fix

---
 .../WorkspaceScheduleButton/WorkspaceScheduleButton.tsx      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index 3234461a9a836..d99bdef3366ae 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -15,7 +15,6 @@ import utc from "dayjs/plugin/utc"
 import { useRef, useState } from "react"
 import { Workspace } from "../../api/typesGenerated"
 import { isWorkspaceOn } from "../../util/workspace"
-import { Stack } from "../Stack/Stack"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceScheduleLabel } from "./WorkspaceScheduleLabel"
 
@@ -78,7 +77,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
       <span className={styles.label}>
         <WorkspaceScheduleLabel workspace={workspace} />
         {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
-          <Stack direction="row" spacing={0}>
+          <span>
             <IconButton
               className={styles.iconButton}
               size="small"
@@ -99,7 +98,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
                 <AddIcon />
               </Tooltip>
             </IconButton>
-          </Stack>
+          </span>
         )}
       </span>
       <>