some styling ideas (#2010)

Kira-Pilot · web-flow · commit 912b65c4609c · 2022-06-02T20:48:08.000-05:00
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,10 +1,13 @@
 import Button from "@material-ui/core/Button"
+import Fade from "@material-ui/core/Fade"
+import InputAdornment from "@material-ui/core/InputAdornment"
 import Link from "@material-ui/core/Link"
 import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
+import SearchIcon from "@material-ui/icons/Search"
 import { useMachine } from "@xstate/react"
 import { FormikErrors, useFormik } from "formik"
 import { FC, useState } from "react"
@@ -70,45 +73,96 @@ const WorkspacesPage: FC = () => {
   }
 
   return (
-    <>
-      <Margins>
-        <div className={styles.actions}>
-          <Stack direction="row">
-            <Button aria-controls="filter-menu" aria-haspopup="true" onClick={handleClick}>
+    <Margins>
+      <Stack direction="row" className={styles.workspacesHeaderContainer}>
+        <Stack direction="column" className={styles.filterColumn}>
+          <Stack direction="row" spacing={0} className={styles.filterContainer}>
+            <Button
+              aria-controls="filter-menu"
+              aria-haspopup="true"
+              onClick={handleClick}
+              className={styles.buttonRoot}
+            >
               {Language.filterName} {anchorEl ? <CloseDropdown /> : <OpenDropdown />}
             </Button>
 
-            <Menu id="filter-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+            <form onSubmit={form.handleSubmit} className={styles.filterForm}>
+              <TextField
+                {...getFieldHelpers("query")}
+                className={styles.textFieldRoot}
+                onChange={onChangeTrimmed(form)}
+                fullWidth
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon fontSize="small" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </form>
+
+            <Menu
+              id="filter-menu"
+              anchorEl={anchorEl}
+              keepMounted
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+              TransitionComponent={Fade}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+            >
               <MenuItem onClick={setYourWorkspaces}>{Language.yourWorkspacesButton}</MenuItem>
               <MenuItem onClick={setAllWorkspaces}>{Language.allWorkspacesButton}</MenuItem>
             </Menu>
-
-            <form onSubmit={form.handleSubmit}>
-              <TextField {...getFieldHelpers("query")} onChange={onChangeTrimmed(form)} fullWidth variant="outlined" />
-            </form>
           </Stack>
-
-          <Link underline="none" component={RouterLink} to="/workspaces/new">
-            <Button startIcon={<AddCircleOutline />}>{Language.createWorkspaceButton}</Button>
-          </Link>
-        </div>
-
-        <WorkspacesPageView
-          loading={workspacesState.hasTag("loading")}
-          workspaces={workspacesState.context.workspaces}
-        />
-      </Margins>
-    </>
+        </Stack>
+
+        <Link underline="none" component={RouterLink} to="/workspaces/new">
+          <Button startIcon={<AddCircleOutline />} style={{ height: "44px" }}>
+            {Language.createWorkspaceButton}
+          </Button>
+        </Link>
+      </Stack>
+      <WorkspacesPageView loading={workspacesState.hasTag("loading")} workspaces={workspacesState.context.workspaces} />
+    </Margins>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  actions: {
+  workspacesHeaderContainer: {
     marginTop: theme.spacing(3),
     marginBottom: theme.spacing(3),
-    display: "flex",
     justifyContent: "space-between",
-    height: theme.spacing(6),
+  },
+  filterColumn: {
+    width: "60%",
+    cursor: "text",
+  },
+  filterContainer: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: "6px",
+  },
+  filterForm: {
+    width: "100%",
+  },
+  buttonRoot: {
+    border: "none",
+    borderRight: `1px solid ${theme.palette.divider}`,
+    borderRadius: "6px 0px 0px 6px",
+  },
+  textFieldRoot: {
+    margin: "0px",
+    "& fieldset": {
+      border: "none",
+    },
   },
 }))
 
