fix: Apply input styles to all input fields (#2231)

* fix: Apply input styles to all input fields * chore: Add TODO
safe-global · Jul 5, 2023 · 55cdf74 · 55cdf74
1 parent 6b19bac
commit 55cdf74
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 84 deletions.
diff --git a/src/components/common/AddressBookInput/index.tsx b/src/components/common/AddressBookInput/index.tsx
@@ -8,6 +8,7 @@ import EthHashInfo from '../EthHashInfo'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import EntryDialog from '@/components/address-book/EntryDialog'
 import css from './styles.module.css'
+import inputCss from '@/styles/inputs.module.css'
 
 const abFilterOptions = createFilterOptions({
   stringify: (option: { label: string; name: string }) => option.name + ' ' + option.label,
@@ -49,7 +50,7 @@ const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps & { canA
         open={open}
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}
-        className={css.input}
+        className={inputCss.input}
         disableClearable
         value={addressValue || ''}
         disabled={props.disabled}

diff --git a/src/components/common/AddressBookInput/styles.module.css b/src/components/common/AddressBookInput/styles.module.css
@@ -18,11 +18,3 @@
   text-decoration: underline;
   cursor: pointer;
 }
-
-.input :global .MuiInputBase-root fieldset {
-  border-width: 1px !important;
-}
-
-.input :global .MuiInputBase-root:not(.Mui-error) fieldset {
-  border-color: var(--color-border-light) !important;
-}
diff --git a/src/components/common/AddressInput/index.tsx b/src/components/common/AddressInput/index.tsx
@@ -21,6 +21,7 @@ import CaretDownIcon from '@/public/images/common/caret-down.svg'
 import SaveAddressIcon from '@/public/images/common/save-address.svg'
 import classnames from 'classnames'
 import css from './styles.module.css'
+import inputCss from '@/styles/inputs.module.css'
 
 export type AddressInputProps = TextFieldProps & {
   name: string
@@ -115,7 +116,7 @@ const AddressInput = ({
     <>
       <TextField
         {...props}
-        className={css.wrapper}
+        className={inputCss.input}
         autoComplete="off"
         autoFocus={props.focused}
         label={<>{error?.message || props.label}</>}

diff --git a/src/components/common/AddressInput/styles.module.css b/src/components/common/AddressInput/styles.module.css
@@ -1,10 +1,3 @@
-.wrapper :global .MuiInputBase-root {
-  background-color: var(--color-background-paper);
-  border-radius: 6px;
-  height: 66px;
-  padding: 12px var(--space-2);
-}
-
 .wrapper :global .MuiInputLabel-root.Mui-error[data-shrink='false'] {
   padding: 5px 4px;
 }

diff --git a/src/components/common/DatePickerInput/index.tsx b/src/components/common/DatePickerInput/index.tsx
@@ -5,6 +5,8 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import TextField from '@mui/material/TextField'
 import { isFuture, isValid, startOfDay } from 'date-fns'
 
+import inputCss from '@/styles/inputs.module.css'
+
 const DatePickerInput = ({
   name,
   label,
@@ -46,6 +48,7 @@ const DatePickerInput = ({
       render={({ field, fieldState }) => (
         <LocalizationProvider dateAdapter={AdapterDateFns}>
           <DatePicker
+            className={inputCss.input}
             label={label}
             inputFormat="dd/MM/yyyy"
             {...field}

diff --git a/src/components/common/NameInput/index.tsx b/src/components/common/NameInput/index.tsx
@@ -2,7 +2,7 @@ import type { TextFieldProps } from '@mui/material'
 import { TextField } from '@mui/material'
 import get from 'lodash/get'
 import { type FieldError, type Validate, useFormContext } from 'react-hook-form'
-import css from './styles.module.css'
+import inputCss from '@/styles/inputs.module.css'
 
 const NameInput = ({
   name,
@@ -26,7 +26,7 @@ const NameInput = ({
       error={Boolean(fieldError)}
       fullWidth
       required={required}
-      className={css.textField}
+      className={inputCss.input}
       {...register(name, { maxLength: 50, required })}
     />
   )

diff --git a/src/components/common/NameInput/styles.module.css b/src/components/common/NameInput/styles.module.css
diff --git a/src/components/new-safe/OwnerRow/index.tsx b/src/components/new-safe/OwnerRow/index.tsx
@@ -78,7 +78,6 @@ export const OwnerRow = ({
       <Grid item xs={12} md={readOnly ? 5 : 4}>
         <FormControl fullWidth>
           <NameInput
-            className={css.name}
             name={`${fieldName}.name`}
             label="Owner name"
             InputLabelProps={{ shrink: true }}
@@ -106,16 +105,7 @@ export const OwnerRow = ({
         )}
       </Grid>
       {!readOnly && (
-        <Grid
-          item
-          ml={-3}
-          xs={1}
-          alignSelf="stretch"
-          maxHeight="80px"
-          display="flex"
-          alignItems="center"
-          flexShrink={0}
-        >
+        <Grid item ml={-2} xs={1} alignSelf="stretch" display="flex" alignItems="center" flexShrink={0}>
           {removable && (
             <>
               <IconButton onClick={() => remove?.(index)} aria-label="Remove owner">

diff --git a/src/components/new-safe/OwnerRow/styles.module.css b/src/components/new-safe/OwnerRow/styles.module.css
@@ -1,15 +1,3 @@
-.name :global .MuiFormHelperText-root {
-  position: absolute;
-  bottom: -20px;
-}
-
-@media (max-width: 899.95px) {
-  .name :global .MuiFormHelperText-root {
-    position: relative;
-    bottom: 0;
-  }
-}
-
 @media (min-width: 900px) {
   .helper {
     margin-bottom: var(--space-5);

diff --git a/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx b/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
@@ -1,4 +1,4 @@
-import { Button, SvgIcon, MenuItem, Select, Tooltip, Typography, Divider, Box } from '@mui/material'
+import { Button, SvgIcon, MenuItem, Tooltip, Typography, Divider, Box, Grid, TextField } from '@mui/material'
 import { Controller, FormProvider, useFieldArray, useForm } from 'react-hook-form'
 import type { ReactElement } from 'react'
 
@@ -11,7 +11,6 @@ import type { CreateSafeInfoItem } from '@/components/new-safe/create/CreateSafe
 import { useSafeSetupHints } from '@/components/new-safe/create/steps/OwnerPolicyStep/useSafeSetupHints'
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import css from '@/components/new-safe/create/steps/OwnerPolicyStep/styles.module.css'
 import layoutCss from '@/components/new-safe/create/styles.module.css'
 import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
@@ -145,22 +144,26 @@ const OwnerPolicyStep = ({
           <Typography variant="body2" mb={2}>
             Any transaction requires the confirmation of:
           </Typography>
-          <Box display="flex" alignItems="center">
-            <Controller
-              name={OwnerPolicyStepFields.threshold}
-              control={control}
-              render={({ field }) => (
-                <Select {...field} className={css.select}>
-                  {ownerFields.map(({ id }, i) => (
-                    <MenuItem key={id} value={i + 1}>
-                      {i + 1}
-                    </MenuItem>
-                  ))}
-                </Select>
-              )}
-            />{' '}
-            out of {ownerFields.length} owner(s).
-          </Box>
+          <Grid container direction="row" alignItems="center" gap={2} pt={1}>
+            <Grid item>
+              <Controller
+                control={control}
+                name="threshold"
+                render={({ field }) => (
+                  <TextField select {...field}>
+                    {ownerFields.map((_, idx) => (
+                      <MenuItem key={idx + 1} value={idx + 1}>
+                        {idx + 1}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                )}
+              />
+            </Grid>
+            <Grid item>
+              <Typography>out of {ownerFields.length} owner(s)</Typography>
+            </Grid>
+          </Grid>
 
           {isWrongChain && <NetworkWarning />}
         </Box>

diff --git a/src/components/new-safe/create/steps/OwnerPolicyStep/styles.module.css b/src/components/new-safe/create/steps/OwnerPolicyStep/styles.module.css
diff --git a/src/components/new-safe/create/steps/SetNameStep/styles.module.css b/src/components/new-safe/create/steps/SetNameStep/styles.module.css
@@ -7,7 +7,7 @@
   align-items: center;
   border-radius: 8px;
   border: 1px solid var(--color-border-light);
-  height: 56px;
+  height: 66px;
 }
 
 .select:hover,

diff --git a/src/components/transactions/TxFilterForm/index.tsx b/src/components/transactions/TxFilterForm/index.tsx
@@ -21,6 +21,7 @@ import { useCurrentChain } from '@/hooks/useChains'
 import NumberField from '@/components/common/NumberField'
 
 import css from './styles.module.css'
+import inputCss from '@/styles/inputs.module.css'
 
 enum TxFilterFormFieldNames {
   FILTER_TYPE = 'type',
@@ -184,6 +185,7 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
                           }}
                           render={({ field, fieldState }) => (
                             <NumberField
+                              className={inputCss.input}
                               label={
                                 fieldState.error?.message ||
                                 `Amount${isMultisigFilter && chain ? ` (only ${chain.nativeCurrency.symbol})` : ''}`
@@ -232,6 +234,7 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
                           }}
                           render={({ field, fieldState }) => (
                             <NumberField
+                              className={inputCss.input}
                               label={fieldState.error?.message || 'Nonce'}
                               error={!!fieldState.error}
                               {...field}

diff --git a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
@@ -12,6 +12,7 @@ import {
   TextField,
   MenuItem,
   SvgIcon,
+  Tooltip,
 } from '@mui/material'
 import { useForm, FormProvider, Controller } from 'react-hook-form'
 
@@ -78,7 +79,7 @@ export const ChooseOwner = ({
                 {params.removedOwner &&
                   'Review the owner you want to replace in the active Safe Account, then specify the new owner you want to replace it with:'}
               </Typography>
-              <Box my={2}>
+              <Box my={3}>
                 <Typography variant="body2" color="text.secondary" mb={1}>
                   Current owner
                 </Typography>
@@ -119,15 +120,23 @@ export const ChooseOwner = ({
               <Typography variant="h6" fontWeight="bold">
                 Threshold
               </Typography>
-              <SvgIcon component={InfoIcon} color="disabled" inheritViewBox fontSize="small" />
+              <Tooltip
+                title="The threshold of a Safe Account specifies how many owners need to confirm a Safe Account transaction before it can be executed."
+                arrow
+                placement="top"
+              >
+                <span style={{ display: 'flex' }}>
+                  <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
+                </span>
+              </Tooltip>
             </Box>
 
             <Typography variant="body2" mb={1}>
               Any transaction requires the confirmation of:
             </Typography>
 
-            <Grid container direction="row" alignItems="center" gap={1} pt={1}>
-              <Grid item xs={1.5}>
+            <Grid container direction="row" alignItems="center" gap={2} pt={1}>
+              <Grid item>
                 <Controller
                   control={control}
                   name="threshold"

diff --git a/src/styles/inputs.module.css b/src/styles/inputs.module.css
@@ -0,0 +1,35 @@
+/* TODO: Apply these styles in the MUI theme once its part of this repository */
+.input :global .MuiFormHelperText-root {
+  position: absolute;
+  bottom: -20px;
+}
+
+.input :global .MuiFormLabel-root:not(.MuiInputLabel-shrink) {
+  transform: translate(16px, 22px) scale(1);
+}
+
+.input :global .MuiInputBase-root {
+  background-color: var(--color-background-paper);
+  border-radius: 6px;
+  height: 66px;
+  padding: 12px var(--space-2);
+}
+
+.input input {
+  padding: 0;
+}
+
+.input :global .MuiInputBase-root fieldset {
+  border-width: 1px !important;
+}
+
+.input :global .MuiInputBase-root:not(.Mui-error) fieldset {
+  border-color: var(--color-border-light) !important;
+}
+
+@media (max-width: 899.95px) {
+  .input :global .MuiFormHelperText-root {
+    position: relative;
+    bottom: 0;
+  }
+}