misc: migrate styled typography to tailwind part II (#1949)

getlago · Dec 30, 2024 · 210ffe9 · 210ffe9
1 parent a19b7c9
commit 210ffe9
Show file tree

Hide file tree

Showing 21 changed files with 251 additions and 350 deletions.
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
@@ -104,9 +104,9 @@ const Analytics = () => {
                 </SearchCurrencyTextInputWrapper>
                 <CurrencyListWrapper>
                   {!currenciesToDisplay.length ? (
-                    <EmptyCurrencyTypography variant="body" color="disabled">
+                    <Typography className="p-[6px]" variant="body" color="disabled">
                       {translate('text_65562fd544bc8a0057706172')}
-                    </EmptyCurrencyTypography>
+                    </Typography>
                   ) : (
                     <>
                       {currenciesToDisplay.map((localCurrency) => (
@@ -287,7 +287,3 @@ const CurrencyListWrapper = styled.div`
     scroll-margin: ${theme.spacing(1)};
   }
 `
-
-const EmptyCurrencyTypography = styled(Typography)`
-  padding: 6px;
-`
diff --git a/src/pages/BillableMetricsList.tsx b/src/pages/BillableMetricsList.tsx
@@ -85,9 +85,9 @@ const BillableMetricsList = () => {
           <Typography color="disabled" variant="bodyHl">
             {translate('text_623b497ad05b960101be343e')}
           </Typography>
-          <CellSmall align="right" color="disabled" variant="bodyHl">
+          <Typography className="w-28" align="right" color="disabled" variant="bodyHl">
             {translate('text_623b497ad05b960101be3440')}
-          </CellSmall>
+          </Typography>
         </ListHead>
         {!!isLoading && variables?.searchTerm ? (
           <>
@@ -203,8 +203,4 @@ const ListHead = styled(ListHeader)`
   }
 `
 
-const CellSmall = styled(Typography)`
-  width: 112px;
-`
-
 export default BillableMetricsList
diff --git a/src/pages/CouponsList.tsx b/src/pages/CouponsList.tsx
@@ -92,17 +92,15 @@ const CouponsList = () => {
             </Typography>
           </CouponSection>
           <CouponInfosSection>
-            <SmallCell color="disabled" variant="bodyHl">
+            <Typography className="w-24 text-right" color="disabled" variant="bodyHl">
               {translate('text_62865498824cc10126ab2964')}
-            </SmallCell>
-            <MediumCell color="disabled" variant="bodyHl">
+            </Typography>
+            <Typography className="w-28" color="disabled" variant="bodyHl">
               {translate('text_62865498824cc10126ab296a')}
-            </MediumCell>
-            <StatusCell>
-              <Typography color="disabled" variant="bodyHl">
-                {translate('text_62865498824cc10126ab296f')}
-              </Typography>
-            </StatusCell>
+            </Typography>
+            <Typography className="w-26" color="disabled" variant="bodyHl">
+              {translate('text_62865498824cc10126ab296f')}
+            </Typography>
           </CouponInfosSection>
         </ListHead>
         {!!isLoading && variables?.searchTerm ? (
@@ -221,19 +219,6 @@ const CouponInfosSection = styled.div`
   }
 `
 
-const MediumCell = styled(Typography)`
-  width: 112px;
-`
-
-const SmallCell = styled(Typography)`
-  text-align: right;
-  width: 96px;
-`
-
-const StatusCell = styled.div`
-  width: 104px;
-`
-
 const Header = styled(PageHeader)`
   > * {
     white-space: pre;

diff --git a/src/pages/CreateAddOn.tsx b/src/pages/CreateAddOn.tsx
@@ -294,9 +294,9 @@ const CreateAddOn = () => {
 
                   {!!formikProps?.values?.taxes?.length && (
                     <div>
-                      <TaxLabel variant="captionHl" color="grey700">
+                      <Typography className="mb-1" variant="captionHl" color="grey700">
                         {translate('text_64be910fba8ef9208686a8e3')}
-                      </TaxLabel>
+                      </Typography>
                       <InlineTaxesWrapper data-test="tax-chip-wrapper">
                         {formikProps?.values?.taxes?.map(({ id, name, rate }) => (
                           <Chip
@@ -322,9 +322,9 @@ const CreateAddOn = () => {
                   {shouldDisplayTaxesInput ? (
                     <div>
                       {!formikProps?.values?.taxes?.length && (
-                        <TaxLabel variant="captionHl" color="grey700">
+                        <Typography className="mb-1" variant="captionHl" color="grey700">
                           {translate('text_64be910fba8ef9208686a8e3')}
-                        </TaxLabel>
+                        </Typography>
                       )}
                       <InlineTaxInputWrapper>
                         <ComboBox
@@ -417,10 +417,6 @@ const CreateAddOn = () => {
   )
 }
 
-const TaxLabel = styled(Typography)`
-  margin-bottom: ${theme.spacing(1)};
-`
-
 const InlineTaxInputWrapper = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/pages/CreateInvoice.tsx b/src/pages/CreateInvoice.tsx
@@ -757,7 +757,11 @@ const CreateInvoice = () => {
                                 !!hasTaxProvider && setTaxProviderTaxesResult(null)
                               }}
                             />
-                            <TaxCell variant="body" color="grey700">
+                            <Typography
+                              className="flex flex-col items-end py-1"
+                              variant="body"
+                              color="grey700"
+                            >
                               {hasTaxProvider
                                 ? !!taxProviderTaxesResult?.collection.length
                                   ? taxProviderTaxesResult?.collection
@@ -787,7 +791,7 @@ const CreateInvoice = () => {
                                       </Typography>
                                     ))
                                   : '0%'}
-                            </TaxCell>
+                            </Typography>
                             <Typography variant="body" color="grey700">
                               {!fee.units
                                 ? '-'
@@ -1395,10 +1399,3 @@ const SubmitButtonWrapper = styled.div`
   margin: 0 auto;
   gap: ${theme.spacing(3)};
 `
-
-const TaxCell = styled(Typography)`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding: ${theme.spacing(1)} 0;
-`
diff --git a/src/pages/CreateSubscription.tsx b/src/pages/CreateSubscription.tsx
@@ -789,9 +789,14 @@ const CreateSubscription = () => {
                     </Button>
                   </Card>
                 ) : formType !== FORM_TYPE_ENUM.edition || !subscription?.plan.parent?.id ? (
-                  <OverridePlanSeparatorTypography noWrap variant="captionHl" color="grey500">
+                  <Typography
+                    className="flex items-center gap-4 uppercase before:inline-block before:h-[2px] before:w-full before:bg-grey-300 before:content-[''] after:inline-block after:h-[2px] after:w-full after:bg-grey-300 after:content-['']"
+                    noWrap
+                    variant="captionHl"
+                    color="grey500"
+                  >
                     {translate('text_65118a52df984447c18694d0')}
-                  </OverridePlanSeparatorTypography>
+                  </Typography>
                 ) : null}
 
                 <PlanFormConditionalWrapper $isPremium={isPremium}>
@@ -1054,20 +1059,4 @@ const AccordionSkeleton = styled.div`
   border: 1px solid ${theme.palette.grey[400]};
 `
 
-const OverridePlanSeparatorTypography = styled(Typography)`
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  gap: ${theme.spacing(4)};
-
-  &::before,
-  &::after {
-    content: '';
-    display: inline-block;
-    height: 2px;
-    width: 100%;
-    background-color: ${theme.palette.grey[300]};
-  }
-`
-
 export default CreateSubscription
diff --git a/src/pages/CreditNoteDetails.tsx b/src/pages/CreditNoteDetails.tsx
@@ -483,7 +483,11 @@ const CreditNoteDetails = () => {
                   <CreditNoteBadge creditNote={creditNote as CreditNote} />
                 </MainInfoLine>
                 <MainInfoLine>
-                  <InlineTripleTypography variant="body" color="grey600">
+                  <Typography
+                    className="flex flex-wrap items-center gap-1"
+                    variant="body"
+                    color="grey600"
+                  >
                     <span>
                       {translate('text_637655cb50f04bf1c8379cf2', {
                         amount: intlFormatNumber(
@@ -500,7 +504,7 @@ const CreditNoteDetails = () => {
                     </span>
                     <span>•</span>
                     <span>{creditNote?.id}</span>
-                  </InlineTripleTypography>
+                  </Typography>
                 </MainInfoLine>
               </div>
             </MainInfos>
@@ -1101,12 +1105,6 @@ const MainInfoLine = styled.div`
   }
 `
 
-const InlineTripleTypography = styled(Typography)`
-  > span:nth-child(2) {
-    margin: 0 ${theme.spacing(2)};
-  }
-`
-
 const InfoSection = styled.section`
   display: flex;
   padding: ${theme.spacing(6)} 0;

diff --git a/src/pages/CustomerDetails.tsx b/src/pages/CustomerDetails.tsx
@@ -340,9 +340,9 @@ const CustomerDetails = () => {
                   initials={customerInitials}
                 />
                 <div>
-                  <Name color="textSecondary" variant="headline" forceBreak>
+                  <Typography className="mb-1" color="textSecondary" variant="headline" forceBreak>
                     {customerName || translate('text_62f272a7a60b4d7fadad911a')}
-                  </Name>
+                  </Typography>
                   <Typography>{externalId}</Typography>
                 </div>
               </MainInfos>
@@ -543,10 +543,6 @@ const CustomerMainInfosContainer = styled.div`
   }
 `
 
-const Name = styled(Typography)`
-  margin-bottom: ${theme.spacing(1)};
-`
-
 const SideBlock = styled.div`
   > *:not(:last-child) {
     margin-bottom: ${theme.spacing(8)};

diff --git a/src/pages/CustomerDraftInvoicesList.tsx b/src/pages/CustomerDraftInvoicesList.tsx
@@ -112,11 +112,11 @@ const CustomerDraftInvoicesList = () => {
               <Icon name="document" />
             </Avatar>
             <div>
-              <Name color="textSecondary" variant="headline">
+              <Typography className="mb-1" color="textSecondary" variant="headline">
                 {translate('text_638f74bb4d41e3f1d0201649', {
                   customerName,
                 })}
-              </Name>
+              </Typography>
               <Typography>
                 {translate('text_638f74bb4d41e3f1d020164b', {
                   count: customerData?.customerInvoices?.metadata?.totalCount,
@@ -179,8 +179,4 @@ const MainInfos = styled.div`
   }
 `
 
-const Name = styled(Typography)`
-  margin-bottom: ${theme.spacing(1)};
-`
-
 export default CustomerDraftInvoicesList
diff --git a/src/pages/InvoiceCreditNoteList.tsx b/src/pages/InvoiceCreditNoteList.tsx
@@ -127,9 +127,9 @@ const InvoiceCreditNoteList = () => {
             image={<ErrorImage width="136" height="104" />}
           />
         ) : !loading && !creditNotes?.length ? (
-          <EmptyStateTypography variant="body" color="grey500">
+          <Typography className="mt-6" variant="body" color="grey500">
             {translate('text_636bdef6565341dcb9cfb12b')}
-          </EmptyStateTypography>
+          </Typography>
         ) : (
           <CreditNotesTable
             creditNotes={creditNotes}
@@ -159,7 +159,3 @@ const Header = styled.div`
   justify-content: space-between;
   align-items: center;
 `
-
-const EmptyStateTypography = styled(Typography)`
-  margin-top: ${theme.spacing(6)};
-`
diff --git a/src/pages/PlansList.tsx b/src/pages/PlansList.tsx
@@ -89,15 +89,15 @@ const PlansList = () => {
             </Typography>
           </PlanNameSection>
           <PlanInfosSection>
-            <MediumCell color="disabled" variant="bodyHl">
+            <Typography className="w-30 text-right" color="disabled" variant="bodyHl">
               {translate('text_62d95e42c1e1dfe7376fdf35')}
-            </MediumCell>
-            <SmallCell color="disabled" variant="bodyHl">
+            </Typography>
+            <Typography className="w-20 text-right" color="disabled" variant="bodyHl">
               {translate('text_62442e40cea25600b0b6d856')}
-            </SmallCell>
-            <MediumCell color="disabled" variant="bodyHl">
+            </Typography>
+            <Typography className="w-30 text-right" color="disabled" variant="bodyHl">
               {translate('text_62442e40cea25600b0b6d858')}
-            </MediumCell>
+            </Typography>
           </PlanInfosSection>
         </ListHead>
         {!!isLoading && variables?.searchTerm ? (
@@ -217,16 +217,6 @@ const HeaderRigthBlock = styled.div`
   }
 `
 
-const MediumCell = styled(Typography)`
-  text-align: right;
-  width: 118px;
-`
-
-const SmallCell = styled(Typography)`
-  text-align: right;
-  width: 80px;
-`
-
 const PlanNameSection = styled.div`
   margin-right: auto;
   display: flex;

diff --git a/src/pages/WalletForm/WalletForm.tsx b/src/pages/WalletForm/WalletForm.tsx
@@ -311,13 +311,13 @@ const WalletForm = () => {
           ) : (
             <>
               <div>
-                <Title variant="headline" color="grey700">
+                <Typography className="mb-1" variant="headline" color="grey700">
                   {translate(
                     formType === FORM_TYPE_ENUM.edition
                       ? 'text_62d9430e8b9fe36851cddd09'
                       : 'text_6560809c38fb9de88d8a505e',
                   )}
-                </Title>
+                </Typography>
                 <Typography variant="body" color="grey600">
                   {translate(
                     formType === FORM_TYPE_ENUM.edition
@@ -412,7 +412,3 @@ const Main = styled.div`
     padding: ${theme.spacing(12)} ${theme.spacing(4)} 0;
   }
 `
-
-const Title = styled(Typography)`
-  margin-bottom: ${theme.spacing(1)};
-`