diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx index d03c0ad357136..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" @@ -28,6 +27,7 @@ dayjs.extend(relativeTime) dayjs.extend(timezone) export const Language = { + schedule: "Schedule", editDeadlineMinus: "Subtract one hour", editDeadlinePlus: "Add one hour", } @@ -73,11 +73,11 @@ export const WorkspaceScheduleButton: React.FC = ( } return ( -
-
+ + {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && ( - + = ( - + )} -
-
+ + <> = ( > -
-
+ + ) } const useStyles = makeStyles((theme) => ({ wrapper: { - display: "flex", - alignItems: "center", + display: "inline-block", + border: `1px solid ${theme.palette.divider}`, + borderRadius: `${theme.shape.borderRadius}px`, }, - label: { - border: `1px solid ${theme.palette.divider}`, borderRight: 0, height: "100%", - display: "flex", - alignItems: "center", padding: "0 8px 0 16px", color: theme.palette.text.secondary, // 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`, },