From 99534a07681e782dd29c0a02351f47a85c477174 Mon Sep 17 00:00:00 2001
From: Kelly Phan <keelly.p@gmail.com>
Date: Tue, 24 Dec 2024 10:07:22 +0100
Subject: [PATCH] refactor: migrate styled-components usage of form components
 (#1928)

* feat: add reset style in text input props for charge table

* refactor: migrate TextInput styled components

* refactor: migrate AmountInput styled components

* refactor: migrate Checkbox styled components

* refactor: migrate Combobox styled components

* refactor: rename resetStyle with variant outlined

* fix: remove sx text input

* fix: prettier
---
 src/components/SearchInput.tsx                | 16 +----
 .../creditNote/CreditNoteFormCalculation.tsx  | 14 ++--
 .../form/ComboBox/ComboBoxInput.tsx           | 21 +++---
 .../MultipleComboBox/MultipleComboBox.tsx     |  8 ++-
 src/components/form/TextInput/TextInput.tsx   | 28 ++++++++
 .../form/TextInput/TextInputField.tsx         | 14 +---
 .../invoices/EditInvoiceDisplayName.tsx       |  9 +--
 .../EditInvoiceItemDescriptionDialog.tsx      | 12 +---
 .../EditInvoicePaymentStatusDialog.tsx        |  9 +--
 src/components/plans/ChargeAccordion.tsx      |  7 +-
 src/components/plans/ChargePercentage.tsx     | 26 ++++---
 src/components/plans/FixedFeeSection.tsx      |  7 +-
 src/components/plans/GraduatedChargeTable.tsx | 59 ++--------------
 .../plans/GraduatedPercentageChargeTable.tsx  | 59 ++--------------
 src/components/plans/PlanSettingsSection.tsx  |  8 +--
 .../plans/ProgressiveBillingSection.tsx       | 68 +++----------------
 src/components/plans/StandardCharge.tsx       | 10 +--
 src/components/plans/VolumeChargeTable.tsx    | 59 ++--------------
 .../EditOrganizationInvoiceTemplateDialog.tsx |  9 +--
 src/pages/Analytics.tsx                       | 17 +----
 src/pages/CreateAddOn.tsx                     |  8 +--
 src/pages/CreateCoupon.tsx                    | 15 ++--
 src/pages/CreateInvoice.tsx                   |  8 +--
 src/pages/auth/ForgotPassword.tsx             |  9 +--
 src/pages/auth/ResetPassword.tsx              |  9 +--
 tailwind.config.ts                            |  1 +
 26 files changed, 121 insertions(+), 389 deletions(-)

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index f9564c9a6..8b1d9708f 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react'
-import styled from 'styled-components'
 
 import { UseDebouncedSearch } from '~/hooks/useDebouncedSearch'
-import { theme } from '~/styles'
+import { tw } from '~/styles/utils'
 
 import { Icon } from './designSystem'
 import { TextInput } from './form'
@@ -17,8 +16,8 @@ export const SearchInput = ({ className, onChange, placeholder }: SearchInputPro
   const [localValue, setLocalValue] = useState<string>('')
 
   return (
-    <TextInputForSearch
-      className={className}
+    <TextInput
+      className={tw('max-w-60 [&_input]:h-10 [&_input]:!pl-3', className)}
       placeholder={placeholder}
       value={localValue}
       onChange={(value) => {
@@ -32,12 +31,3 @@ export const SearchInput = ({ className, onChange, placeholder }: SearchInputPro
     />
   )
 }
-
-const TextInputForSearch = styled(TextInput)`
-  max-width: 240px;
-
-  .MuiInputBase-inputAdornedStart {
-    height: 40px;
-    padding-left: ${theme.spacing(3)};
-  }
-`
diff --git a/src/components/creditNote/CreditNoteFormCalculation.tsx b/src/components/creditNote/CreditNoteFormCalculation.tsx
index 4146e142f..b133f158d 100644
--- a/src/components/creditNote/CreditNoteFormCalculation.tsx
+++ b/src/components/creditNote/CreditNoteFormCalculation.tsx
@@ -410,7 +410,8 @@ export const CreditNoteFormCalculation = ({
                     _get(formikProps.errors, 'payBack.0.value') !== PayBackErrorEnum.maxRefund
                   }
                 >
-                  <StyledTextInput
+                  <AmountInputField
+                    className="max-w-38 [&_input]:text-right"
                     name="payBack.0.value"
                     currency={currency}
                     formikProps={formikProps}
@@ -518,7 +519,8 @@ export const CreditNoteFormCalculation = ({
                   _get(formikProps.errors, 'payBack.1.value') !== PayBackErrorEnum.maxRefund
                 }
               >
-                <StyledTextInput
+                <AmountInputField
+                  className="max-w-38 [&_input]:text-right"
                   name="payBack.1.value"
                   currency={currency}
                   formikProps={formikProps}
@@ -608,14 +610,6 @@ const PayBackBlock = styled.div`
   }
 `
 
-const StyledTextInput = styled(AmountInputField)`
-  max-width: 152px;
-
-  input {
-    text-align: right;
-  }
-`
-
 const InlineLabel = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/components/form/ComboBox/ComboBoxInput.tsx b/src/components/form/ComboBox/ComboBoxInput.tsx
index 40ea99deb..3a216889c 100644
--- a/src/components/form/ComboBox/ComboBoxInput.tsx
+++ b/src/components/form/ComboBox/ComboBoxInput.tsx
@@ -28,13 +28,13 @@ export const ComboBoxInput = ({
   const { inputProps, InputProps, ...restParams } = params
 
   return (
-    <StyledTextInput
+    <TextInput
       onChange={(newVal) => {
         // needed because useAutocomplete expect a DOM onChange listener...
         inputProps.onChange({ target: { value: newVal } })
         searchQuery && searchQuery(newVal)
       }}
-      className={className}
+      className={tw('group/combobox-input', className)}
       name={name}
       placeholder={placeholder}
       label={label}
@@ -56,9 +56,12 @@ export const ComboBoxInput = ({
             {!disableClearable && (
               <Button
                 // To make sure the "clear button" is displayed only on hover or focus
-                className={tw('MuiAutocomplete-clearIndicator', 'hidden', {
-                  'MuiAutocomplete-clearIndicatorDirty': inputProps?.value,
-                })}
+                className={tw(
+                  'MuiAutocomplete-clearIndicator',
+                  'hidden',
+                  inputProps?.value &&
+                    'MuiAutocomplete-clearIndicatorDirty group-hover/combobox-input:flex',
+                )}
                 disabled={restParams.disabled}
                 size="small"
                 icon="close-circle-filled"
@@ -94,14 +97,6 @@ export const ComboBoxInput = ({
   )
 }
 
-const StyledTextInput = styled(TextInput)`
-  &:hover {
-    .MuiAutocomplete-clearIndicatorDirty {
-      display: flex;
-    }
-  }
-`
-
 const StartAdornmentTypography = styled(Typography)`
   > span:first-child {
     margin-right: ${theme.spacing(2)};
diff --git a/src/components/form/MultipleComboBox/MultipleComboBox.tsx b/src/components/form/MultipleComboBox/MultipleComboBox.tsx
index 2d1ac2eb1..6264614f6 100644
--- a/src/components/form/MultipleComboBox/MultipleComboBox.tsx
+++ b/src/components/form/MultipleComboBox/MultipleComboBox.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { Chip, Icon } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { tw } from '~/styles/utils'
 
 import { MultipleComboBoxItem } from './MultipleComboBoxItem'
 import { MultipleComboBoxList } from './MultipleComboBoxList'
@@ -142,6 +143,11 @@ export const MultipleComboBox = ({
             )
           })
         }}
+        componentsProps={{
+          clearIndicator: {
+            className: tw('size-6 rounded-lg'),
+          },
+        }}
         clearIcon={<Icon name="close-circle-filled" />}
         popupIcon={<Icon name="chevron-up-down" />}
         noOptionsText={emptyText ?? translate('text_623b3acb8ee4e000ba87d082')}
@@ -229,7 +235,7 @@ const Container = styled.div`
 
   /* Fix the placement of the adornment elements */
   .MuiAutocomplete-endAdornment {
-    top: calc(50% - 19px);
+    top: calc(50% - 12px);
   }
 
   /* Make sure scursor is visible when overing svg */
diff --git a/src/components/form/TextInput/TextInput.tsx b/src/components/form/TextInput/TextInput.tsx
index d20048d9f..830754fdb 100644
--- a/src/components/form/TextInput/TextInput.tsx
+++ b/src/components/form/TextInput/TextInput.tsx
@@ -7,6 +7,7 @@ import { ChangeEvent, forwardRef, ReactNode, useCallback, useEffect, useState }
 
 import { Button, Icon, Tooltip, Typography } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { theme } from '~/styles'
 import { tw } from '~/styles/utils'
 
 export enum ValueFormatter {
@@ -34,6 +35,7 @@ export interface TextInputProps
   description?: string
   cleanable?: boolean
   password?: boolean
+  variant?: 'outlined' | 'default'
   value?: string | number
   beforeChangeFormatter?: ValueFormatterType[] | ValueFormatterType
   infoText?: string
@@ -131,6 +133,7 @@ export const TextInput = forwardRef<HTMLDivElement, TextInputProps>(
       rows,
       error,
       cleanable = false,
+      variant = 'default',
       InputProps,
       type = 'text',
       password,
@@ -248,6 +251,31 @@ export const TextInput = forwardRef<HTMLDivElement, TextInputProps>(
                 : {}),
             ...InputProps,
           }}
+          sx={
+            variant === 'outlined'
+              ? {
+                  marginBottom: 0,
+                  '& .MuiInputBase-formControl': {
+                    borderRadius: 0,
+                  },
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    border: 'none',
+                  },
+                  '& .Mui-focused': {
+                    zIndex: 1,
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      border: `2px solid ${theme.palette.primary.main}`,
+                    },
+                  },
+                  '& .Mui-error': {
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      border: `2px solid ${theme.palette.error.main}`,
+                    },
+                  },
+                  ...props.sx,
+                }
+              : props.sx
+          }
           {...props}
         />
         {(helperText || error) && (
diff --git a/src/components/form/TextInput/TextInputField.tsx b/src/components/form/TextInput/TextInputField.tsx
index 7efe32c0e..7a4df1193 100644
--- a/src/components/form/TextInput/TextInputField.tsx
+++ b/src/components/form/TextInput/TextInputField.tsx
@@ -2,7 +2,6 @@ import { FormikProps } from 'formik'
 import _get from 'lodash/get'
 import _isEqual from 'lodash/isEqual'
 import { forwardRef, memo } from 'react'
-import styled, { css } from 'styled-components'
 
 import { TextInput, TextInputProps } from './TextInput'
 
@@ -30,8 +29,7 @@ export const TextInputField = memo(
       const { values, errors, touched, handleBlur, setFieldValue } = formikProps
 
       return (
-        <StyledTextInput
-          $displayErrorText={displayErrorText}
+        <TextInput
           name={name}
           value={_get(values, name)}
           ref={ref}
@@ -67,13 +65,3 @@ export const TextInputField = memo(
 )
 
 TextInputField.displayName = 'TextInputField'
-
-const StyledTextInput = styled(TextInput)<{ $displayErrorText?: boolean }>`
-  ${({ $displayErrorText }) =>
-    !$displayErrorText &&
-    css`
-      .MuiTextField-root {
-        margin-bottom: 0 !important;
-      }
-    `}
-`
diff --git a/src/components/invoices/EditInvoiceDisplayName.tsx b/src/components/invoices/EditInvoiceDisplayName.tsx
index c7222e16a..d64a473ec 100644
--- a/src/components/invoices/EditInvoiceDisplayName.tsx
+++ b/src/components/invoices/EditInvoiceDisplayName.tsx
@@ -1,13 +1,11 @@
 import { useFormik } from 'formik'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { TextInputField } from '~/components/form'
 import { InputMaybe } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 type EditInvoiceDisplayNameProps = {
   invoiceDisplayName: InputMaybe<string> | undefined
@@ -76,10 +74,11 @@ export const EditInvoiceDisplayName = forwardRef<EditInvoiceDisplayNameRef>((_,
         </>
       )}
     >
-      <Input
+      <TextInputField
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         cleanable
+        className="mb-8"
         name="invoiceDisplayName"
         label={translate('text_65018c8e5c6b626f030bcf26')}
         placeholder={translate('text_65018c8e5c6b626f030bcf2a')}
@@ -91,7 +90,3 @@ export const EditInvoiceDisplayName = forwardRef<EditInvoiceDisplayNameRef>((_,
 })
 
 EditInvoiceDisplayName.displayName = 'forwardRef'
-
-const Input = styled(TextInputField)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/components/invoices/EditInvoiceItemDescriptionDialog.tsx b/src/components/invoices/EditInvoiceItemDescriptionDialog.tsx
index 81a0ab0d5..da3f2adc7 100644
--- a/src/components/invoices/EditInvoiceItemDescriptionDialog.tsx
+++ b/src/components/invoices/EditInvoiceItemDescriptionDialog.tsx
@@ -6,7 +6,6 @@ import { object, string } from 'yup'
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { TextInputField } from '~/components/form'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 const MAX_CHAR_LIMIT = 255
 
@@ -78,11 +77,12 @@ export const EditInvoiceItemDescriptionDialog = forwardRef<EditInvoiceItemDescri
           </>
         )}
       >
-        <TextArea
+        <TextInputField
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           multiline
           name="description"
+          className="mb-8 whitespace-pre-line"
           rows="3"
           label={translate('text_6453819268763979024ad011')}
           error={formikProps.errors.description}
@@ -107,14 +107,6 @@ export const EditInvoiceItemDescriptionDialog = forwardRef<EditInvoiceItemDescri
 
 EditInvoiceItemDescriptionDialog.displayName = 'forwardRef'
 
-const TextArea = styled(TextInputField)`
-  margin-bottom: ${theme.spacing(8)};
-
-  textarea:first-child {
-    white-space: pre-line;
-  }
-`
-
 const TextInputHelper = styled.div`
   display: flex;
   justify-content: space-between;
diff --git a/src/components/invoices/EditInvoicePaymentStatusDialog.tsx b/src/components/invoices/EditInvoicePaymentStatusDialog.tsx
index cc41a887c..1af389520 100644
--- a/src/components/invoices/EditInvoicePaymentStatusDialog.tsx
+++ b/src/components/invoices/EditInvoicePaymentStatusDialog.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
@@ -16,7 +15,6 @@ import {
   useUpdateInvoicePaymentStatusMutation,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 gql`
   fragment InvoiceForUpdateInvoicePaymentStatus on Invoice {
@@ -120,7 +118,8 @@ export const UpdateInvoicePaymentStatusDialog = forwardRef<UpdateInvoicePaymentS
           </>
         )}
       >
-        <StyledComboBoxField
+        <ComboBoxField
+          className="mb-8"
           name="paymentStatus"
           label={translate('text_63eba8c65a6c8043feee2a0f')}
           data={Object.values(InvoicePaymentStatusTypeEnum).map((status) => ({
@@ -138,7 +137,3 @@ export const UpdateInvoicePaymentStatusDialog = forwardRef<UpdateInvoicePaymentS
 )
 
 UpdateInvoicePaymentStatusDialog.displayName = 'forwardRef'
-
-const StyledComboBoxField = styled(ComboBoxField)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
index a85916171..bab2e19b2 100644
--- a/src/components/plans/ChargeAccordion.tsx
+++ b/src/components/plans/ChargeAccordion.tsx
@@ -853,7 +853,8 @@ export const ChargeAccordion = memo(
                   </Button>
                 ) : (
                   <SpendingMinimumWrapper>
-                    <SpendingMinimumInput
+                    <AmountInput
+                      className="flex-1"
                       id={`spending-minimum-input-${index}`}
                       beforeChangeFormatter={['positiveNumber', 'chargeDecimal']}
                       currency={currency}
@@ -1018,10 +1019,6 @@ const SpendingMinimumWrapper = styled.div`
   align-items: center;
 `
 
-const SpendingMinimumInput = styled(AmountInput)`
-  flex: 1;
-`
-
 const InlineTaxInputWrapper = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/components/plans/ChargePercentage.tsx b/src/components/plans/ChargePercentage.tsx
index c111e38ee..f72c00998 100644
--- a/src/components/plans/ChargePercentage.tsx
+++ b/src/components/plans/ChargePercentage.tsx
@@ -98,7 +98,8 @@ export const ChargePercentage = memo(
 
     return (
       <Container>
-        <Input
+        <TextInput
+          className="flex-1"
           name={`${propertyCursor}.rate`}
           label={translate('text_62a0b7107afa2700a65ef6f6')}
           beforeChangeFormatter={['positiveNumber', 'chargeDecimal']}
@@ -118,7 +119,8 @@ export const ChargePercentage = memo(
 
         {valuePointer?.fixedAmount !== undefined && (
           <LineAmount>
-            <Amount
+            <AmountInput
+              className="flex-1"
               name={`${propertyCursor}.fixedAmount`}
               currency={currency}
               beforeChangeFormatter={['positiveNumber', 'chargeDecimal']}
@@ -156,7 +158,8 @@ export const ChargePercentage = memo(
 
         {valuePointer?.freeUnitsPerEvents !== undefined && (
           <LineAmount>
-            <Input
+            <TextInput
+              className="flex-1"
               name={`${propertyCursor}.freeUnitsPerEvents`}
               beforeChangeFormatter={['positiveNumber', 'int']}
               disabled={disabled}
@@ -200,7 +203,8 @@ export const ChargePercentage = memo(
               valuePointer?.freeUnitsPerTotalAggregation !== undefined && (
                 <OrText variant="body">{translate('text_62ff5d01a306e274d4ffcc59')}</OrText>
               )}
-            <Amount
+            <AmountInput
+              className="flex-1"
               name={`${propertyCursor}.freeUnitsPerTotalAggregation`}
               currency={currency}
               beforeChangeFormatter={['positiveNumber', 'chargeDecimal']}
@@ -240,7 +244,8 @@ export const ChargePercentage = memo(
 
         {valuePointer?.perTransactionMinAmount !== undefined && (
           <LineAmount>
-            <Amount
+            <AmountInput
+              className="flex-1"
               name={`${propertyCursor}.perTransactionMinAmount`}
               beforeChangeFormatter={['positiveNumber']}
               currency={currency}
@@ -293,7 +298,8 @@ export const ChargePercentage = memo(
 
         {valuePointer?.perTransactionMaxAmount !== undefined && (
           <LineAmount>
-            <Amount
+            <AmountInput
+              className="flex-1"
               name={`${propertyCursor}.perTransactionMaxAmount`}
               beforeChangeFormatter={['positiveNumber']}
               currency={currency}
@@ -572,14 +578,6 @@ const Container = styled.div`
   }
 `
 
-const Input = styled(TextInput)`
-  flex: 1;
-`
-
-const Amount = styled(AmountInput)`
-  flex: 1;
-`
-
 const LineAmount = styled.div`
   display: flex;
 
diff --git a/src/components/plans/FixedFeeSection.tsx b/src/components/plans/FixedFeeSection.tsx
index 5b9b259d1..16fc073a2 100644
--- a/src/components/plans/FixedFeeSection.tsx
+++ b/src/components/plans/FixedFeeSection.tsx
@@ -171,7 +171,8 @@ export const FixedFeeSection = memo(
 
               {shouldDisplayTrialPeriod ? (
                 <InlineTrialPeriod>
-                  <InputTrialPeriod
+                  <TextInputField
+                    className="flex-1"
                     name="trialPeriod"
                     disabled={
                       subscriptionFormType === FORM_TYPE_ENUM.edition || (isEdition && !canBeEdited)
@@ -243,10 +244,6 @@ const InlineTrialPeriod = styled.div`
   gap: ${theme.spacing(3)};
 `
 
-const InputTrialPeriod = styled(TextInputField)`
-  flex: 1;
-`
-
 const BoxHeader = styled.div`
   /* Used to prevent long invoice display name to overflow */
   overflow: hidden;
diff --git a/src/components/plans/GraduatedChargeTable.tsx b/src/components/plans/GraduatedChargeTable.tsx
index ba37c2996..4e883cd50 100644
--- a/src/components/plans/GraduatedChargeTable.tsx
+++ b/src/components/plans/GraduatedChargeTable.tsx
@@ -116,7 +116,8 @@ export const GraduatedChargeTable = memo(
                       })}
                       disableHoverListener={errorIndex !== i}
                     >
-                      <CellInput
+                      <TextInput
+                        variant="outlined"
                         error={errorIndex === i}
                         value={row.toValue as number | undefined}
                         beforeChangeFormatter={['int', 'positiveNumber']}
@@ -152,7 +153,8 @@ export const GraduatedChargeTable = memo(
                       </Typography>
                     </DisabledAmountCell>
                   ) : (
-                    <CellAmount
+                    <AmountInput
+                      variant="outlined"
                       beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                       currency={currency}
                       value={row.perUnitAmount}
@@ -184,7 +186,8 @@ export const GraduatedChargeTable = memo(
                       </Typography>
                     </DisabledAmountCell>
                   ) : (
-                    <CellAmount
+                    <AmountInput
+                      variant="outlined"
                       beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                       currency={currency}
                       value={row.flatAmount}
@@ -325,53 +328,3 @@ const DisabledAmountCell = styled.div`
     margin-right: ${theme.spacing(2)};
   }
 `
-
-const CellInput = styled(TextInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-
-    .Mui-error {
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.error.main};
-      }
-    }
-  }
-`
-
-const CellAmount = styled(AmountInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-  }
-`
diff --git a/src/components/plans/GraduatedPercentageChargeTable.tsx b/src/components/plans/GraduatedPercentageChargeTable.tsx
index 7b564d9f3..df31fb28b 100644
--- a/src/components/plans/GraduatedPercentageChargeTable.tsx
+++ b/src/components/plans/GraduatedPercentageChargeTable.tsx
@@ -115,7 +115,8 @@ export const GraduatedPercentageChargeTable = memo(
                       })}
                       disableHoverListener={errorIndex !== i}
                     >
-                      <CellInput
+                      <TextInput
+                        variant="outlined"
                         error={errorIndex === i}
                         value={row.toValue as number | undefined}
                         beforeChangeFormatter={['int', 'positiveNumber']}
@@ -151,7 +152,8 @@ export const GraduatedPercentageChargeTable = memo(
                       <Typography color="textSecondary">{getCurrencySymbol(currency)}</Typography>
                     </DisabledAmountCell>
                   ) : (
-                    <CellAmount
+                    <AmountInput
+                      variant="outlined"
                       beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                       currency={currency}
                       value={row.rate}
@@ -192,7 +194,8 @@ export const GraduatedPercentageChargeTable = memo(
                       </Typography>
                     </DisabledAmountCell>
                   ) : (
-                    <CellAmount
+                    <AmountInput
+                      variant="outlined"
                       beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                       currency={currency}
                       value={row.flatAmount}
@@ -301,53 +304,3 @@ const DisabledAmountCell = styled.div`
     margin-right: ${theme.spacing(2)};
   }
 `
-
-const CellInput = styled(TextInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-
-    .Mui-error {
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.error.main};
-      }
-    }
-  }
-`
-
-const CellAmount = styled(AmountInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-  }
-`
diff --git a/src/components/plans/PlanSettingsSection.tsx b/src/components/plans/PlanSettingsSection.tsx
index d53b7bd69..ab56cdef3 100644
--- a/src/components/plans/PlanSettingsSection.tsx
+++ b/src/components/plans/PlanSettingsSection.tsx
@@ -140,8 +140,9 @@ export const PlanSettingsSection = memo(
 
           {shouldDisplayDescription ? (
             <InlineDescription>
-              <TextArea
+              <TextInputField
                 multiline
+                className="mr-3 flex-1"
                 name="description"
                 label={translate('text_629728388c4d2300e2d380f1')}
                 placeholder={translate('text_6661fc17337de3591e29e3c9')}
@@ -346,8 +347,3 @@ const InlineTaxesWrapper = styled.div`
   gap: ${theme.spacing(3)};
   flex-wrap: wrap;
 `
-
-const TextArea = styled(TextInputField)`
-  flex: 1;
-  margin-right: ${theme.spacing(3)};
-`
diff --git a/src/components/plans/ProgressiveBillingSection.tsx b/src/components/plans/ProgressiveBillingSection.tsx
index f645ce727..d16d011cd 100644
--- a/src/components/plans/ProgressiveBillingSection.tsx
+++ b/src/components/plans/ProgressiveBillingSection.tsx
@@ -167,7 +167,8 @@ export const ProgressiveBillingSection: FC<ProgressiveBillingSectionProps> = ({
                           })}
                           disableHoverListener={errorIndex !== i}
                         >
-                          <CellAmount
+                          <AmountInput
+                            variant="outlined"
                             error={errorIndex === i}
                             beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                             currency={currency}
@@ -199,7 +200,8 @@ export const ProgressiveBillingSection: FC<ProgressiveBillingSectionProps> = ({
                         </TypographyCell>
                       ),
                       content: (row, i) => (
-                        <CellInput
+                        <TextInput
+                          variant="outlined"
                           placeholder={translate('text_645bb193927b375079d28ace')}
                           value={row.thresholdDisplayName ?? ''}
                           onChange={(value) => {
@@ -247,7 +249,8 @@ export const ProgressiveBillingSection: FC<ProgressiveBillingSectionProps> = ({
                     {
                       size: 197,
                       content: (row, i) => (
-                        <CellAmount
+                        <AmountInput
+                          variant="outlined"
                           beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                           currency={currency}
                           value={row.amountCents}
@@ -272,7 +275,8 @@ export const ProgressiveBillingSection: FC<ProgressiveBillingSectionProps> = ({
                     {
                       size: 197,
                       content: (row, i) => (
-                        <CellInput
+                        <TextInput
+                          variant="outlined"
                           placeholder={translate('text_645bb193927b375079d28ace')}
                           value={row.thresholdDisplayName ?? ''}
                           onChange={(value) => {
@@ -406,62 +410,6 @@ const TypographyCell = styled(Typography)`
   padding: 0px ${theme.spacing(4)};
 `
 
-const CellAmount = styled(AmountInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-
-    .Mui-error {
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.error.main};
-      }
-    }
-  }
-`
-
-const CellInput = styled(TextInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-
-    .Mui-error {
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.error.main};
-      }
-    }
-  }
-`
-
 const PremiumWarning = styled.div`
   background-color: ${theme.palette.grey[100]};
   display: flex;
diff --git a/src/components/plans/StandardCharge.tsx b/src/components/plans/StandardCharge.tsx
index 618d85366..f71cc4b9e 100644
--- a/src/components/plans/StandardCharge.tsx
+++ b/src/components/plans/StandardCharge.tsx
@@ -84,10 +84,8 @@ export const StandardCharge = memo(
           </GroupTitle>
           {shouldDisplayGroupedBy || !!valuePointer?.groupedBy ? (
             <InlineFields>
-              {/* NOTE: should be a single line textarea */}
-              <StyledTextInput
-                // multiline
-                // maxRows={3}
+              <TextInput
+                className="flex-1"
                 name={`${propertyCursor}.groupedBy`}
                 placeholder={translate('text_65ba6d45e780c1ff8acb206f')}
                 helperText={translate('text_65ba6d45e780c1ff8acb2073')}
@@ -140,10 +138,6 @@ const InlineFields = styled.div`
   }
 `
 
-const StyledTextInput = styled(TextInput)`
-  flex: 1;
-`
-
 const GroupTitle = styled.div`
   > div:not(:last-child) {
     margin-bottom: ${theme.spacing(1)};
diff --git a/src/components/plans/VolumeChargeTable.tsx b/src/components/plans/VolumeChargeTable.tsx
index f0e0fd7ec..e6c916567 100644
--- a/src/components/plans/VolumeChargeTable.tsx
+++ b/src/components/plans/VolumeChargeTable.tsx
@@ -113,7 +113,8 @@ export const VolumeChargeTable = memo(
                       })}
                       disableHoverListener={errorIndex !== i}
                     >
-                      <CellInput
+                      <TextInput
+                        variant="outlined"
                         error={errorIndex === i}
                         value={row.toValue as number | undefined}
                         beforeChangeFormatter={['int', 'positiveNumber']}
@@ -149,7 +150,8 @@ export const VolumeChargeTable = memo(
                       </Typography>
                     </DisabledAmountCell>
                   ) : (
-                    <CellAmount
+                    <AmountInput
+                      variant="outlined"
                       beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                       currency={currency}
                       value={row.perUnitAmount}
@@ -181,7 +183,8 @@ export const VolumeChargeTable = memo(
                       </Typography>
                     </DisabledAmountCell>
                   ) : (
-                    <CellAmount
+                    <AmountInput
+                      variant="outlined"
                       beforeChangeFormatter={['chargeDecimal', 'positiveNumber']}
                       currency={currency}
                       value={row.flatAmount}
@@ -266,53 +269,3 @@ const DisabledAmountCell = styled.div`
     margin-right: ${theme.spacing(2)};
   }
 `
-
-const CellInput = styled(TextInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-
-    .Mui-error {
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.error.main};
-      }
-    }
-  }
-`
-
-const CellAmount = styled(AmountInput)`
-  .MuiInputBase-formControl {
-    border-radius: 0;
-  }
-
-  && {
-    > * {
-      margin-bottom: 0;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-
-    .Mui-focused {
-      z-index: 1;
-      .MuiOutlinedInput-notchedOutline {
-        border: 2px solid ${theme.palette.primary.main};
-      }
-    }
-  }
-`
diff --git a/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx b/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx
index cb39f41bc..b0d0854f8 100644
--- a/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx
+++ b/src/components/settings/invoices/EditOrganizationInvoiceTemplateDialog.tsx
@@ -98,7 +98,8 @@ export const EditOrganizationInvoiceTemplateDialog = forwardRef<
       )}
     >
       <Content>
-        <TextArea
+        <TextInputField
+          className="whitespace-pre-line"
           name="billingConfiguration.invoiceFooter"
           rows="4"
           multiline
@@ -130,12 +131,6 @@ const Content = styled.div`
   margin-bottom: ${theme.spacing(8)};
 `
 
-const TextArea = styled(TextInputField)`
-  textarea:first-child {
-    white-space: pre-line;
-  }
-`
-
 const TextInputHelper = styled.div`
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 10257ce63..ce68c48fe 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -90,14 +90,15 @@ const Analytics = () => {
             {({ closePopper }) => (
               <CurrencyMenuPopper>
                 <SearchCurrencyTextInputWrapper>
-                  <SearchCurrencyTextInput
+                  <TextInput
+                    className="max-w-50 [&_input]:h-12 [&_input]:!pl-3"
                     id="search-currency-input"
                     placeholder="Search a currency"
                     onChange={(value) => {
                       setCurrencySearch(value)
                     }}
                     InputProps={{
-                      startAdornment: <SearchIcon name="magnifying-glass" />,
+                      startAdornment: <Icon className="ml-4" name="magnifying-glass" />,
                     }}
                   />
                 </SearchCurrencyTextInputWrapper>
@@ -271,18 +272,6 @@ const SearchCurrencyTextInputWrapper = styled.div`
   margin-bottom: 16px;
 `
 
-const SearchCurrencyTextInput = styled(TextInput)`
-  max-width: 200px;
-  height: 48px;
-  .MuiInputBase-inputAdornedStart {
-    padding-left: ${theme.spacing(3)};
-  }
-`
-
-const SearchIcon = styled(Icon)`
-  padding-left: ${theme.spacing(4)};
-`
-
 const CurrencyListWrapper = styled.div`
   max-height: 356px;
   padding: 4px;
diff --git a/src/pages/CreateAddOn.tsx b/src/pages/CreateAddOn.tsx
index 7005697ef..f42e473d6 100644
--- a/src/pages/CreateAddOn.tsx
+++ b/src/pages/CreateAddOn.tsx
@@ -225,7 +225,8 @@ const CreateAddOn = () => {
 
                   {shouldDisplayDescription ? (
                     <div className="flex items-center">
-                      <TextArea
+                      <TextInputField
+                        className="mr-3 flex-1"
                         multiline
                         name="description"
                         label={translate('text_629728388c4d2300e2d380f1')}
@@ -411,11 +412,6 @@ const CreateAddOn = () => {
   )
 }
 
-const TextArea = styled(TextInputField)`
-  flex: 1;
-  margin-right: ${theme.spacing(3)};
-`
-
 const TaxLabel = styled(Typography)`
   margin-bottom: ${theme.spacing(1)};
 `
diff --git a/src/pages/CreateCoupon.tsx b/src/pages/CreateCoupon.tsx
index c8ada0407..d2702093b 100644
--- a/src/pages/CreateCoupon.tsx
+++ b/src/pages/CreateCoupon.tsx
@@ -291,7 +291,8 @@ const CreateCoupon = () => {
 
                   {shouldDisplayDescription ? (
                     <InlineDescription>
-                      <TextArea
+                      <TextInputField
+                        className="mr-3 flex-1"
                         multiline
                         name="description"
                         label={translate('text_649e848fa4c023006e94ca32')}
@@ -481,7 +482,8 @@ const CreateCoupon = () => {
                     )}
                   </Settings>
 
-                  <StyledPlanLimitCheckbox
+                  <Checkbox
+                    className="mb-3"
                     name="hasPlanOrBillableMetricLimit"
                     value={hasPlanLimit || hasBillableMetricLimit}
                     disabled={isEdition && !!coupon?.appliedCouponsCount}
@@ -694,15 +696,6 @@ const InlineDescription = styled.div`
   align-items: center;
 `
 
-const TextArea = styled(TextInputField)`
-  flex: 1;
-  margin-right: ${theme.spacing(3)};
-`
-
-const StyledPlanLimitCheckbox = styled(Checkbox)`
-  margin-bottom: ${theme.spacing(3)};
-`
-
 const PlanLine = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/CreateInvoice.tsx b/src/pages/CreateInvoice.tsx
index 3ac2e81b0..f31bce7fa 100644
--- a/src/pages/CreateInvoice.tsx
+++ b/src/pages/CreateInvoice.tsx
@@ -650,7 +650,8 @@ const CreateInvoice = () => {
                 </FromToInfoWrapper>
 
                 <InvoiceTableWrapper>
-                  <CurrencyComboBoxField
+                  <ComboBoxField
+                    className="w-fit max-w-40"
                     disableClearable
                     data={Object.values(CurrencyEnum).map((currencyType) => ({
                       value: currencyType,
@@ -1294,11 +1295,6 @@ const InvoiceTableWrapper = styled.div`
   }
 `
 
-const CurrencyComboBoxField = styled(ComboBoxField)`
-  max-width: 160px;
-  width: fit-content;
-`
-
 const Grid = () => css`
   display: grid;
   grid-template-columns:
diff --git a/src/pages/auth/ForgotPassword.tsx b/src/pages/auth/ForgotPassword.tsx
index 217a95a27..c36db32ce 100644
--- a/src/pages/auth/ForgotPassword.tsx
+++ b/src/pages/auth/ForgotPassword.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import { useState } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, ButtonLink } from '~/components/designSystem'
@@ -11,7 +10,6 @@ import { LOGIN_ROUTE } from '~/core/router'
 import { LagoApiError, useCreatePasswordResetMutation } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useShortcuts } from '~/hooks/ui/useShortcuts'
-import { theme } from '~/styles'
 import { Card, Page, StyledLogo, Subtitle, Title } from '~/styles/auth'
 
 gql`
@@ -88,7 +86,8 @@ const ForgotPassword = () => {
             <Title variant="headline">{translate('text_642707b0da1753a9bb66728c')}</Title>
             <Subtitle>{translate('text_642707b0da1753a9bb667296')}</Subtitle>
             <form onSubmit={(e) => e.preventDefault()}>
-              <EmailInput
+              <TextInputField
+                className="mb-8"
                 name="email"
                 beforeChangeFormatter={['lowercase']}
                 formikProps={formikProps}
@@ -115,7 +114,3 @@ const ForgotPassword = () => {
 }
 
 export default ForgotPassword
-
-const EmailInput = styled(TextInputField)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/pages/auth/ResetPassword.tsx b/src/pages/auth/ResetPassword.tsx
index 9866e72a3..e8a77be7c 100644
--- a/src/pages/auth/ResetPassword.tsx
+++ b/src/pages/auth/ResetPassword.tsx
@@ -158,8 +158,9 @@ const ResetPassword = () => {
             <Subtitle>{translate('text_642707b0da1753a9bb66729a')}</Subtitle>
 
             <form>
-              <Input
+              <TextInput
                 disabled
+                className="mb-4"
                 name="email"
                 beforeChangeFormatter={['lowercase']}
                 label={translate('text_63246f875e2228ab7b63dcdc')}
@@ -232,12 +233,6 @@ const ResetPassword = () => {
   )
 }
 
-const Input = styled(TextInput)`
-  && {
-    margin-bottom: ${theme.spacing(4)};
-  }
-`
-
 const PasswordBlock = styled.div`
   margin-bottom: ${theme.spacing(8)};
 `
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c5dd65c19..c610669d4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -151,6 +151,7 @@ const config = {
         34: '8.5rem',
         35: '8.75rem',
         37: '9.25rem',
+        38: '9.5rem',
         42: '10.5rem',
         45: '11.25rem',
         50: '12.5rem',