getlago · keellyp · Dec 5, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
diff --git a/src/components/TimezoneDate.tsx b/src/components/TimezoneDate.tsx
@@ -1,11 +1,8 @@
-import styled from 'styled-components'
-
 import { Icon, Tooltip, Typography, TypographyProps } from '~/components/designSystem'
 import { formatDateToTZ, getTimezoneConfig } from '~/core/timezone'
 import { TimezoneEnum } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
-import { theme } from '~/styles'
 
 enum MainTimezoneEnum {
   utc0 = 'utc0',
@@ -35,16 +32,16 @@ export const TimezoneDate = ({
   const formattedCustomerTZ = getTimezoneConfig(customerTimezone || timezone)
 
   return (
-    <StyledTooltip
+    <Tooltip
       className={className}
       maxWidth="unset"
       title={
         <div>
-          <Header variant="captionHl" color="white">
+          <Typography className="mb-3" variant="captionHl" color="white">
             {translate('text_6390bbcc05db04e825d347a7')}
-          </Header>
+          </Typography>
 
-          <Grid>
+          <div className="grid w-full grid-cols-[16px_40px_85px_max-content] gap-2">
             <Icon name="user" color="disabled" />
             <Typography variant="caption" color="grey400">
               {translate('text_6390bbe826d6143fdecb81e1')}
@@ -66,12 +63,17 @@ export const TimezoneDate = ({
             <Typography variant="caption" color="white">
               {formatTimeOrgaTZ(date, 'EEE dd LLL, yyyy HH:mm:ss')}
             </Typography>
-          </Grid>
+          </div>
         </div>
       }
       placement="top-end"
     >
-      <Date color="grey700" {...mainTypographyProps} noWrap>
+      <Typography
+        className="w-max border-b-2 border-dotted border-grey-400"
+        color="grey700"
+        {...mainTypographyProps}
+        noWrap
+      >
         {formatDateToTZ(
           date,
           mainTimezone === MainTimezoneEnum.organization
@@ -81,30 +83,7 @@ export const TimezoneDate = ({
               : TimezoneEnum.TzUtc,
           mainDateFormat,
         )}
-      </Date>
-    </StyledTooltip>
+      </Typography>
+    </Tooltip>
   )
 }
-
-const Date = styled(Typography)`
-  border-bottom: 2px dotted ${theme.palette.grey[400]};
-  width: max-content;
-`
-
-const Header = styled(Typography)`
-  margin-bottom: ${theme.spacing(3)};
-`
-
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: 16px 40px 85px max-content;
-  gap: ${theme.spacing(2)};
-  width: 100%;
-`
-
-const StyledTooltip = styled(Tooltip)`
-  max-width: unset !important;
-  .MuiTooltip-tooltip {
-    max-width: unset !important;
-  }
-`
diff --git a/src/components/creditNote/CreditNoteFormItem.tsx b/src/components/creditNote/CreditNoteFormItem.tsx
@@ -1,7 +1,6 @@
 import { InputAdornment } from '@mui/material'
 import { FormikProps } from 'formik'
 import _get from 'lodash/get'
-import styled from 'styled-components'
 
 import { CreditNoteFeeErrorEnum } from '~/components/creditNote/types'
 import { Tooltip, Typography } from '~/components/designSystem'
@@ -10,12 +9,11 @@ import { getCurrencySymbol, intlFormatNumber } from '~/core/formats/intlFormatNu
 import { deserializeAmount } from '~/core/serializers/serializeAmount'
 import { CurrencyEnum } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 import { CreditNoteForm } from './types'
 
 interface CreditNoteFormItemProps {
-  formikProps: FormikProps<Partial<CreditNoteForm>> // TOSO
+  formikProps: FormikProps<Partial<CreditNoteForm>>
   currency: CurrencyEnum
   feeName: string
   formikKey: string
@@ -35,7 +33,7 @@ export const CreditNoteFormItem = ({
   const error = _get(formikProps.errors, `${formikKey}.value`)
 
   return (
-    <FeeLine>
+    <div className="flex min-h-17 items-center justify-between gap-8 py-2 shadow-b">
       <CheckboxField
         name={`${formikKey}.checked`}
         formikProps={formikProps}
@@ -54,7 +52,8 @@ export const CreditNoteFormItem = ({
           </Typography>
         }
       />
-      <StyledTooltip
+      <Tooltip
+        className="shrink-0"
         placement="top-end"
         title={
           error === CreditNoteFeeErrorEnum?.minZero
@@ -73,7 +72,13 @@ export const CreditNoteFormItem = ({
         }
         disableHoverListener={!error}
       >
-        <StyledAmountField
+        <AmountInputField
+          className="max-w-42"
+          inputProps={{
+            style: {
+              textAlign: 'right',
+            },
+          }}
           name={`${formikKey}.value`}
           currency={currency}
           displayErrorText={false}
@@ -90,28 +95,7 @@ export const CreditNoteFormItem = ({
           }
           formikProps={formikProps}
         />
-      </StyledTooltip>
-    </FeeLine>
+      </Tooltip>
+    </div>
   )
 }
-
-const StyledAmountField = styled(AmountInputField)`
-  max-width: 168px;
-  .MuiOutlinedInput-input {
-    text-align: right;
-  }
-`
-
-const FeeLine = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 10px 0;
-  box-sizing: border-box;
-  box-shadow: ${theme.shadows[7]};
-  min-height: 68px;
-  justify-content: space-between;
-  gap: ${theme.spacing(8)};
-`
-const StyledTooltip = styled(Tooltip)`
-  flex-shrink: 0;
-`
diff --git a/src/components/customers/overview/CustomerCoupons.tsx b/src/components/customers/overview/CustomerCoupons.tsx
@@ -117,7 +117,8 @@ export const CustomerCoupons = memo(() => {
                 />
               </NameBlock>
               {hasPermissions(['couponsDetach']) && (
-                <DeleteTooltip
+                <Tooltip
+                  className="ml-auto"
                   placement="top-end"
                   title={translate('text_628b8c693e464200e00e4a10')}
                 >
@@ -129,7 +130,7 @@ export const CustomerCoupons = memo(() => {
                       removeDialogRef?.current?.openDialog()
                     }}
                   />
-                </DeleteTooltip>
+                </Tooltip>
               )}
             </CouponNameSection>
           ))}
@@ -183,8 +184,4 @@ const NameBlock = styled.div`
   min-width: 0;
 `
 
-const DeleteTooltip = styled(Tooltip)`
-  margin-left: auto;
-`
-
 CustomerCoupons.displayName = 'CustomerCoupons'
diff --git a/src/components/form/AmountInput/AmountInputField.tsx b/src/components/form/AmountInput/AmountInputField.tsx
@@ -25,6 +25,7 @@ export const AmountInputField = memo(
         silentError = false,
         formikProps,
         displayErrorText = true,
+        inputProps,
         ...props
       }: AmountInputFieldProps,
       ref,
@@ -39,6 +40,7 @@ export const AmountInputField = memo(
           onBlur={handleBlur}
           cleanable={cleanable}
           displayErrorText={displayErrorText}
+          inputProps={inputProps}
           error={
             !silentError
               ? displayErrorText

diff --git a/src/components/invoices/AddMetadataDrawer.tsx b/src/components/invoices/AddMetadataDrawer.tsx
@@ -2,7 +2,6 @@ import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import _get from 'lodash/get'
 import React, { forwardRef, RefObject } from 'react'
-import styled, { css } from 'styled-components'
 import { object } from 'yup'
 
 import { Button, Card, Drawer, DrawerRef, Tooltip, Typography } from '~/components/designSystem'
@@ -15,7 +14,8 @@ import {
   useUpdateInvoiceMetadataMutation,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { DrawerContent, DrawerSubmitButton, DrawerTitle, theme } from '~/styles'
+import { DrawerContent, DrawerSubmitButton, DrawerTitle } from '~/styles'
+import { tw } from '~/styles/utils'
 
 const MAX_METADATA_COUNT = 5
 const METADATA_VALUE_MAX_LENGTH = 255
@@ -82,6 +82,8 @@ export const AddMetadataDrawer = forwardRef<DrawerRef, AddMetadataDrawerProps>(
       },
     })
 
+    const metadataGridClassname = 'grid grid-cols-[200px_1fr_24px] gap-x-6 gap-y-3'
+
     return (
       <Drawer
         ref={ref}
@@ -108,15 +110,15 @@ export const AddMetadataDrawer = forwardRef<DrawerRef, AddMetadataDrawerProps>(
 
             {!!formikProps?.values?.metadata?.length && (
               <div>
-                <MetadataGrid $isHeader>
+                <div className={tw(metadataGridClassname, 'mb-1 [&>*:nth-child(2)]:col-span-2')}>
                   <Typography variant="captionHl" color="grey700">
                     {translate('text_6405cac5c833dcf18cacff66')}
                   </Typography>
                   <Typography variant="captionHl" color="grey700">
                     {translate('text_6405cac5c833dcf18cacff7c')}
                   </Typography>
-                </MetadataGrid>
-                <MetadataGrid>
+                </div>
+                <div className={metadataGridClassname}>
                   {formikProps?.values?.metadata?.map((m, i) => {
                     const metadataItemKeyError: string =
                       _get(formikProps.errors, `metadata.${i}.key`) || ''
@@ -167,7 +169,8 @@ export const AddMetadataDrawer = forwardRef<DrawerRef, AddMetadataDrawerProps>(
                             displayErrorText={false}
                           />
                         </Tooltip>
-                        <StyledTooltip
+                        <Tooltip
+                          className="flex items-center"
                           placement="top-end"
                           title={translate('text_63fcc3218d35b9377840f5e1')}
                         >
@@ -183,11 +186,11 @@ export const AddMetadataDrawer = forwardRef<DrawerRef, AddMetadataDrawerProps>(
                               ])
                             }}
                           />
-                        </StyledTooltip>
+                        </Tooltip>
                       </React.Fragment>
                     )
                   })}
-                </MetadataGrid>
+                </div>
               </div>
             )}
             <Button
@@ -233,25 +236,4 @@ export const AddMetadataDrawer = forwardRef<DrawerRef, AddMetadataDrawerProps>(
   },
 )
 
-const MetadataGrid = styled.div<{ $isHeader?: boolean }>`
-  display: grid;
-  grid-template-columns: 200px 1fr 24px;
-  gap: ${theme.spacing(6)} ${theme.spacing(3)};
-
-  ${({ $isHeader }) =>
-    $isHeader &&
-    css`
-      margin-bottom: ${theme.spacing(1)};
-
-      > div:nth-child(2) {
-        grid-column: span 2;
-      }
-    `};
-`
-
-const StyledTooltip = styled(Tooltip)`
-  display: flex;
-  align-items: center;
-`
-
 AddMetadataDrawer.displayName = 'AddMetadataDrawer'
diff --git a/src/components/plans/FixedFeeSection.tsx b/src/components/plans/FixedFeeSection.tsx
@@ -187,7 +187,7 @@ export const FixedFeeSection = memo(
                       ),
                     }}
                   />
-                  <CloseTrialPeriodTooltip
+                  <Tooltip
                     placement="top-end"
                     title={translate('text_63aa085d28b8510cd46443ff')}
                     disableHoverListener={
@@ -206,7 +206,7 @@ export const FixedFeeSection = memo(
                         setShouldDisplayTrialPeriod(false)
                       }}
                     />
-                  </CloseTrialPeriodTooltip>
+                  </Tooltip>
                 </InlineTrialPeriod>
               ) : (
                 <Button
@@ -245,11 +245,6 @@ const InlineTrialPeriod = styled.div`
 
 const InputTrialPeriod = styled(TextInputField)`
   flex: 1;
-  /* margin-right: ${theme.spacing(3)}; */
-`
-
-const CloseTrialPeriodTooltip = styled(Tooltip)`
-  /* margin-top: ${theme.spacing(6)}; */
 `
 
 const BoxHeader = styled.div`

diff --git a/src/components/plans/PlanSettingsSection.tsx b/src/components/plans/PlanSettingsSection.tsx
@@ -148,7 +148,8 @@ export const PlanSettingsSection = memo(
                 rows="3"
                 formikProps={formikProps}
               />
-              <CloseDescriptionTooltip
+              <Tooltip
+                className="mt-6"
                 placement="top-end"
                 title={translate('text_63aa085d28b8510cd46443ff')}
               >
@@ -160,7 +161,7 @@ export const PlanSettingsSection = memo(
                     setShouldDisplayDescription(false)
                   }}
                 />
-              </CloseDescriptionTooltip>
+              </Tooltip>
             </InlineDescription>
           ) : (
             <Button
@@ -350,7 +351,3 @@ const TextArea = styled(TextInputField)`
   flex: 1;
   margin-right: ${theme.spacing(3)};
 `
-
-const CloseDescriptionTooltip = styled(Tooltip)`
-  margin-top: ${theme.spacing(6)};
-`
diff --git a/src/pages/CreateAddOn.tsx b/src/pages/CreateAddOn.tsx
@@ -233,7 +233,8 @@ const CreateAddOn = () => {
                         rows="3"
                         formikProps={formikProps}
                       />
-                      <CloseDescriptionTooltip
+                      <Tooltip
+                        className="mt-6"
                         placement="top-end"
                         title={translate('text_63aa085d28b8510cd46443ff')}
                       >
@@ -245,7 +246,7 @@ const CreateAddOn = () => {
                             setShouldDisplayDescription(false)
                           }}
                         />
-                      </CloseDescriptionTooltip>
+                      </Tooltip>
                     </div>
                   ) : (
                     <Button
@@ -415,10 +416,6 @@ const TextArea = styled(TextInputField)`
   margin-right: ${theme.spacing(3)};
 `
 
-const CloseDescriptionTooltip = styled(Tooltip)`
-  margin-top: ${theme.spacing(6)};
-`
-
 const TaxLabel = styled(Typography)`
   margin-bottom: ${theme.spacing(1)};
 `