Alignment on desktop

presleyp · presleyp · commit 8f872c32a103 · 2022-10-12T00:32:59.000Z
diff --git a/site/src/components/WorkspaceScheduleButton/EditHours.tsx b/site/src/components/WorkspaceScheduleButton/EditHours.tsx
@@ -1,6 +1,7 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
+import { Stack } from "components/Stack/Stack"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -15,6 +16,7 @@ export const EditHours = ({ handleSubmit }: EditHoursProps): JSX.Element => {
 
   return (
     <form onSubmit={() => handleSubmit(hours)}>
+      <Stack direction="row" alignItems="baseline" spacing={1}>
       <TextField
         className={styles.inputField}
         inputProps={{ min: 0, step: 1 }}
@@ -23,15 +25,25 @@ export const EditHours = ({ handleSubmit }: EditHoursProps): JSX.Element => {
         onChange={(e) => setHours(parseInt(e.target.value))}
         type="number"
       />
-      <Button type="submit">
+      <Button className={styles.button} type="submit">
         {t("workspaceScheduleButton.submitDeadline")}
       </Button>
+</Stack>
     </form>
   )
 }
 
 const useStyles = makeStyles(() => ({
   inputField: {
-    width: '70px'
+    width: '70px',
+    "& .MuiOutlinedInput-root": {
+      height: '30px'
+    }
+  },
+  button: {
+    "&.MuiButton-root": {
+      minHeight: '30px',
+      height: '30px'
+    }
   }
 }))
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -7,6 +7,7 @@ import AddIcon from "@material-ui/icons/Add"
 import RemoveIcon from "@material-ui/icons/Remove"
 import ScheduleIcon from "@material-ui/icons/Schedule"
 import { Maybe } from "components/Conditionals/Maybe"
+import { Stack } from "components/Stack/Stack"
 import dayjs from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import duration from "dayjs/plugin/duration"
@@ -76,19 +77,21 @@ export const WorkspaceScheduleButton: React.FC<
   }
 
   const handleSubmitHours = (hours: number) => {
-    if (editMode === "add") {
-      onDeadlinePlus(hours)
-    }
-    if (editMode === "subtract") {
-      onDeadlineMinus(hours)
+    if (hours !== 0) {
+      if (editMode === "add") {
+        onDeadlinePlus(hours)
+      }
+      if (editMode === "subtract") {
+        onDeadlineMinus(hours)
+      }
     }
     setEditMode("off")
   }
 
   return (
     <span className={styles.wrapper}>
       <Maybe condition={shouldDisplayScheduleLabel(workspace)}>
-        <span className={styles.label}>
+        <Stack className={styles.label} spacing={1} direction="row" alignItems="center" >
           <WorkspaceScheduleLabel workspace={workspace} />
           <Maybe condition={canUpdateWorkspace && canEditDeadline(workspace)}>
             <span className={styles.actions}>
@@ -121,7 +124,7 @@ export const WorkspaceScheduleButton: React.FC<
               <EditHours handleSubmit={handleSubmitHours} />
             </Maybe>
           </Maybe>
-        </span>
+        </Stack>
       </Maybe>
       <>
         <Button
@@ -218,13 +221,13 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   addButton: {
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: ({ editMode }) =>
-      editMode === "add" ? theme.palette.primary.main : "inherit",
+    border: ({ editMode }) =>
+      editMode === "add" ? `2px solid ${theme.palette.primary.main}` : "2px solid transparent",
   },
   subtractButton: {
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: ({ editMode }) =>
-      editMode === "subtract" ? theme.palette.primary.main : "inherit",
+    border: ({ editMode }) =>
+      editMode === "subtract" ? `2px solid ${theme.palette.primary.main}` : "2px solid transparent"
   },
   popoverPaper: {
     padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
@@ -45,7 +45,8 @@ export const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({
 
 const useStyles = makeStyles((theme) => ({
   labelText: {
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
     lineHeight: "160%",
 
     [theme.breakpoints.down("sm")]: {
