refactor: migrate Combobox styled components

getlago · Dec 20, 2024 · 6a50a09 · 6a50a09
1 parent 5f91586
commit 6a50a09
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git 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/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/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: