Fix filter size

coder · BrunoQuaresma · May 10, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
commit a0bbf8f3b768ce906cded136d41894e1f0e1dda9
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -42,11 +42,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
       <p>{t("deleteDialog.confirm", { entity })}</p>
 
       <TextField
-        variant="standard"
         fullWidth
-        InputLabelProps={{
-          shrink: true,
-        }}
         autoFocus
         className={styles.textField}
         name="confirmation"

diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -99,7 +99,11 @@ export const FormSection: FC<
 export const FormFields: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
   return (
-    <Stack direction="column" className={styles.formSectionFields}>
+    <Stack
+      direction="column"
+      spacing={2.5}
+      className={styles.formSectionFields}
+    >
       {children}
     </Stack>
   )

diff --git a/site/src/components/GitAuth/GitAuth.tsx b/site/src/components/GitAuth/GitAuth.tsx
@@ -1,16 +1,15 @@
 import Button from "@mui/material/Button"
 import FormHelperText from "@mui/material/FormHelperText"
-import { makeStyles } from "@mui/styles"
 import { SvgIconProps } from "@mui/material/SvgIcon"
 import Tooltip from "@mui/material/Tooltip"
 import GitHub from "@mui/icons-material/GitHub"
 import * as TypesGen from "api/typesGenerated"
 import { AzureDevOpsIcon } from "components/Icons/AzureDevOpsIcon"
 import { BitbucketIcon } from "components/Icons/BitbucketIcon"
 import { GitlabIcon } from "components/Icons/GitlabIcon"
-import { Typography } from "components/Typography/Typography"
 import { FC } from "react"
-import { Theme } from "@mui/material/styles"
+import Link from "@mui/material/Link"
+import { makeStyles } from "@mui/styles"
 
 export interface GitAuthProps {
   type: TypesGen.GitProvider
@@ -59,9 +58,8 @@ export const GitAuth: FC<GitAuthProps> = ({
       }
     >
       <div>
-        <a
+        <Link
           href={authenticateURL}
-          className={styles.link}
           onClick={(event) => {
             event.preventDefault()
             // If the user is already authenticated, we don't want to redirect them
@@ -71,46 +69,27 @@ export const GitAuth: FC<GitAuthProps> = ({
             window.open(authenticateURL, "_blank", "width=900,height=600")
           }}
         >
-          <Button className={styles.button} disabled={authenticated} fullWidth>
-            <div className={styles.root}>
-              <Icon className={styles.icon} />
-              <Typography variant="body2">
-                {authenticated
-                  ? `You're authenticated with ${prettyName}!`
-                  : `Click to login with ${prettyName}!`}
-              </Typography>
-            </div>
+          <Button
+            size="large"
+            startIcon={<Icon />}
+            disabled={authenticated}
+            className={styles.button}
+            color={error ? "error" : undefined}
+            fullWidth
+          >
+            {authenticated
+              ? `You're authenticated with ${prettyName}!`
+              : `Click to login with ${prettyName}!`}
           </Button>
-        </a>
+        </Link>
         {error && <FormHelperText error>{error}</FormHelperText>}
       </div>
     </Tooltip>
   )
 }
 
-const useStyles = makeStyles<
-  Theme,
-  {
-    error: boolean
-  }
->((theme) => ({
-  link: {
-    textDecoration: "none",
-  },
-  root: {
-    padding: 4,
-    display: "flex",
-    gap: 12,
-    alignItems: "center",
-    textAlign: "left",
-  },
+const useStyles = makeStyles(() => ({
   button: {
-    height: "unset",
-    border: ({ error }) =>
-      error ? `1px solid ${theme.palette.error.main}` : "unset",
-  },
-  icon: {
-    width: 32,
-    height: 32,
+    height: 52,
   },
 }))
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -10,6 +10,7 @@ import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import data from "@emoji-mart/data/sets/14/twitter.json"
 import { IconFieldProps } from "./types"
+import { Stack } from "components/Stack/Stack"
 
 const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   if (
@@ -26,7 +27,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   const hasIcon = textFieldProps.value && textFieldProps.value !== ""
 
   return (
-    <div className={styles.iconField}>
+    <Stack spacing={1}>
       <TextField
         {...textFieldProps}
         fullWidth
@@ -50,7 +51,6 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
       <Button
         fullWidth
         ref={emojiButtonRef}
-        size="small"
         endIcon={<OpenDropdown />}
         onClick={() => {
           setIsEmojiPickerOpen((v) => !v)
@@ -81,7 +81,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
           }}
         />
       </Popover>
-    </div>
+    </Stack>
   )
 }
 
@@ -104,9 +104,6 @@ const useStyles = makeStyles((theme) => ({
       maxWidth: "100%",
     },
   },
-  iconField: {
-    paddingBottom: theme.spacing(0.5),
-  },
 }))
 
 export default IconField
diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -47,7 +47,7 @@ export const ParameterInput: FC<ParameterInputProps> = ({
   const styles = useStyles()
 
   return (
-    <Stack direction="column" spacing={0.75}>
+    <Stack direction="column" spacing={2}>
       <ParameterLabel schema={schema} />
       <div className={styles.input}>
         <ParameterField
@@ -70,7 +70,6 @@ const ParameterField: React.FC<ParameterInputProps> = ({
   if (schema.validation_contains && schema.validation_contains.length > 0) {
     return (
       <TextField
-        variant="standard"
         id={schema.name}
         size="small"
         defaultValue={defaultValue ?? schema.default_source_value}
@@ -121,7 +120,6 @@ const ParameterField: React.FC<ParameterInputProps> = ({
   // we should break this out into more finely scoped input fields.
   return (
     <TextField
-      variant="standard"
       id={schema.name}
       size="small"
       disabled={disabled}
@@ -146,6 +144,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.primary,
     display: "block",
     fontWeight: 600,
+    lineHeight: "24px", // Keep the same as ParameterInput
   },
   input: {
     display: "flex",

diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -81,7 +81,6 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
         className={styles.form}
       >
         <TextField
-          variant="standard"
           label="Port"
           type="number"
           value={port}

diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -73,7 +73,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
   const styles = useStyles()
 
   return (
-    <Stack direction="column" spacing={0.75}>
+    <Stack direction="column" spacing={2}>
       <ParameterLabel id={fieldProps.id} parameter={parameter} />
       <div className={styles.input}>
         <RichParameterField
@@ -191,7 +191,6 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   // we should break this out into more finely scoped input fields.
   return (
     <TextField
-      variant="standard"
       {...props}
       type={parameter.type}
       size="small"
@@ -224,7 +223,7 @@ const useStyles = makeStyles((theme) => ({
 
     "& p": {
       margin: 0,
-      lineHeight: "20px", // Keep the same as ParameterInput
+      lineHeight: "24px", // Keep the same as ParameterInput
     },
   },
   labelImmutable: {

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -82,6 +82,7 @@ export const SearchBarWithFilter: React.FC<
           <Button
             aria-controls="filter-menu"
             aria-haspopup="true"
+            size="large"
             onClick={handleClick}
             className={styles.buttonRoot}
           >

diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -77,29 +77,20 @@ export const SecurityForm: FC<SecurityFormProps> = ({
           )}
           <TextField
             {...getFieldHelpers("old_password")}
-            InputLabelProps={{
-              shrink: true,
-            }}
             autoComplete="old_password"
             fullWidth
             label={Language.oldPasswordLabel}
             type="password"
           />
           <TextField
             {...getFieldHelpers("password")}
-            InputLabelProps={{
-              shrink: true,
-            }}
             autoComplete="password"
             fullWidth
             label={Language.newPasswordLabel}
             type="password"
           />
           <TextField
             {...getFieldHelpers("confirm_password")}
-            InputLabelProps={{
-              shrink: true,
-            }}
             autoComplete="confirm_password"
             fullWidth
             label={Language.confirmPasswordLabel}

diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx
@@ -65,7 +65,6 @@ export const CreateFileDialog: FC<{
             slashes too.
           </Typography>
           <TextField
-            variant="standard"
             autoFocus
             onKeyDown={(event) => {
               if (event.key === "Enter") {
@@ -81,9 +80,6 @@ export const CreateFileDialog: FC<{
             value={pathValue}
             onChange={handleChange}
             label="File Path"
-            InputLabelProps={{
-              shrink: true,
-            }}
           />
         </Stack>
       }
@@ -180,7 +176,6 @@ export const RenameFileDialog: FC<{
             contain slashes too!
           </p>
           <TextField
-            variant="standard"
             autoFocus
             onKeyDown={(event) => {
               if (event.key === "Enter") {

diff --git a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx
@@ -64,14 +64,10 @@ export const PublishTemplateVersionDialog: FC<
           <p>You are about to publish a new version of this template.</p>
           <FormFields>
             <TextField
-              variant="standard"
               {...getFieldHelpers("name")}
               label="Version name"
               autoFocus
               disabled={isPublishing}
-              InputLabelProps={{
-                shrink: true,
-              }}
             />
 
             <FormControlLabel

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -7,7 +7,7 @@ import { User } from "api/typesGenerated"
 import { Avatar } from "components/Avatar/Avatar"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import debounce from "just-debounce-it"
-import { ChangeEvent, FC, useEffect, useState } from "react"
+import { ChangeEvent, ComponentProps, FC, useEffect, useState } from "react"
 import { searchUserMachine } from "xServices/users/searchUserXService"
 import { useTranslation } from "react-i18next"
 import Box from "@mui/material/Box"
@@ -17,13 +17,15 @@ export type UserAutocompleteProps = {
   onChange: (user: User | null) => void
   label?: string
   className?: string
+  size?: ComponentProps<typeof TextField>["size"]
 }
 
 export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   value,
   onChange,
   label,
   className,
+  size = "small",
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("common")
@@ -89,7 +91,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
           <TextField
             {...params}
             fullWidth
-            size="small"
+            size={size}
             label={label}
             placeholder="User email or username"
             className={styles.textField}

diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -299,23 +299,15 @@ export const WorkspaceScheduleForm: FC<
           />
           <Stack direction="row">
             <TextField
-              variant="standard"
               {...formHelpers("startTime")}
               disabled={isLoading || !form.values.autostartEnabled}
-              InputLabelProps={{
-                shrink: true,
-              }}
               label={Language.startTimeLabel}
               type="time"
               fullWidth
             />
             <TextField
-              variant="standard"
               {...formHelpers("timezone")}
               disabled={isLoading || !form.values.autostartEnabled}
-              InputLabelProps={{
-                shrink: true,
-              }}
               label={Language.timezoneLabel}
               select
               fullWidth
@@ -328,11 +320,7 @@ export const WorkspaceScheduleForm: FC<
             </TextField>
           </Stack>
 
-          <FormControl
-            variant="standard"
-            component="fieldset"
-            error={Boolean(form.errors.monday)}
-          >
+          <FormControl component="fieldset" error={Boolean(form.errors.monday)}>
             <FormLabel className={styles.daysOfWeekLabel} component="legend">
               {Language.daysOfWeekLabel}
             </FormLabel>
@@ -381,7 +369,6 @@ export const WorkspaceScheduleForm: FC<
             label={Language.stopSwitch}
           />
           <TextField
-            variant="standard"
             {...formHelpers("ttl", ttlShutdownAt(form.values.ttl), "ttl_ms")}
             disabled={isLoading || !form.values.autostopEnabled}
             inputProps={{ min: 0, step: 1 }}