misc: migrate styled typography to tailwind part I (#1948)

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

Hide file tree

Showing 22 changed files with 156 additions and 274 deletions.
diff --git a/src/components/customers/CustomerMainInfos.tsx b/src/components/customers/CustomerMainInfos.tsx
@@ -681,7 +681,9 @@ export const CustomerMainInfos = ({ loading, customer, onEdit }: CustomerMainInf
               <Typography variant="caption" noWrap>
                 {meta.key}
               </Typography>
-              <MetadataValue color="textSecondary">{meta.value}</MetadataValue>
+              <Typography className="line-break-anywhere" color="textSecondary">
+                {meta.value}
+              </Typography>
             </div>
           ))}
       </InfosBlock>
@@ -735,10 +737,6 @@ const InfosBlock = styled.div<{ $showMore: boolean }>`
   }
 `
 
-const MetadataValue = styled(Typography)`
-  line-break: anywhere;
-`
-
 const InlineLink = styled(Link)`
   width: fit-content;
   line-break: anywhere;

diff --git a/src/components/customers/subscriptions/SubscriptionLine.tsx b/src/components/customers/subscriptions/SubscriptionLine.tsx
@@ -82,8 +82,8 @@ export const SubscriptionLine = ({
         $hasBottomSection={hasBottomSection}
         data-test={subscriptionName || plan.name}
       >
-        <CellBig>
-          <Avatar size="big" variant="connector">
+        <Typography className="flex items-center">
+          <Avatar className="mr-3 hidden md:flex" size="big" variant="connector">
             <Icon name="clock" color="dark" />
           </Avatar>
           <NameBlock>
@@ -94,7 +94,7 @@ export const SubscriptionLine = ({
               {plan.code}
             </Typography>
           </NameBlock>
-        </CellBig>
+        </Typography>
         <Status
           {...(status === StatusTypeEnum.Pending
             ? {
@@ -228,19 +228,6 @@ const Item = styled(ListItemLink)<{ $hasBottomSection?: boolean; $hasAboveSectio
   }
 `
 
-const CellBig = styled(Typography)`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-
-    ${theme.breakpoints.down('md')} {
-      display: none;
-    }
-  }
-`
-
 const NameBlock = styled.div`
   min-width: 0;
 `

diff --git a/src/components/designSystem/Alert.tsx b/src/components/designSystem/Alert.tsx
@@ -1,6 +1,5 @@
 import { cva } from 'class-variance-authority'
 import { ReactNode } from 'react'
-import styled from 'styled-components'
 
 import { tw } from '~/styles/utils'
 
@@ -68,7 +67,9 @@ export const Alert = ({
       <div className="flex flex-row items-center justify-between gap-4 py-4">
         <div className="flex flex-row items-center gap-4">
           <Icon name={iconConfig.name} color={iconConfig.color} />
-          <Content color="textSecondary">{children}</Content>
+          <Typography className="word-break-word" color="textSecondary">
+            {children}
+          </Typography>
         </div>
         {!!ButtonProps.onClick && !!label && (
           <Button variant="quaternary-dark" size="medium" {...ButtonProps}>
@@ -79,9 +80,3 @@ export const Alert = ({
     </div>
   )
 }
-
-const Content = styled(Typography)`
-  && {
-    word-break: break-word;
-  }
-`
diff --git a/src/components/developers/CreateWebhookDialog.tsx b/src/components/developers/CreateWebhookDialog.tsx
@@ -184,9 +184,9 @@ export const CreateWebhookDialog = forwardRef<CreateWebhookDialogRef>((_, ref) =
         />
 
         <div>
-          <WebhookSignatureLabel variant="captionHl" color="grey700">
+          <Typography className="mb-1" variant="captionHl" color="grey700">
             {translate('text_64d23a81a7d807f8aa570513')}
-          </WebhookSignatureLabel>
+          </Typography>
           <RadioField
             name="signatureAlgo"
             formikProps={formikProps}
@@ -215,8 +215,4 @@ const Content = styled.div`
   }
 `
 
-const WebhookSignatureLabel = styled(Typography)`
-  margin-bottom: ${theme.spacing(1)};
-`
-
 CreateWebhookDialog.displayName = 'forwardRef'
diff --git a/src/components/developers/WebhookLogDetails.tsx b/src/components/developers/WebhookLogDetails.tsx
@@ -11,7 +11,7 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
-import { NAV_HEIGHT, theme } from '~/styles'
+import { theme } from '~/styles'
 
 gql`
   fragment WebhookLogDetails on Webhook {
@@ -56,7 +56,11 @@ export const WebhookLogDetails = ({ log }: WebhookLogDetailsProps) => {
 
   return (
     <>
-      <LogHeader variant="bodyHl" color="textSecondary">
+      <Typography
+        className="hidden h-18 min-h-18 items-center justify-between px-8 shadow-b md:flex"
+        variant="bodyHl"
+        color="textSecondary"
+      >
         {webhookType}
         {hasError && (
           <Button
@@ -72,7 +76,7 @@ export const WebhookLogDetails = ({ log }: WebhookLogDetailsProps) => {
             {translate('text_63e27c56dfe64b846474efa3')}
           </Button>
         )}
-      </LogHeader>
+      </Typography>
       <PropertiesContainer>
         <WideLine>
           <Typography variant="captionHl" color="grey700">
@@ -90,41 +94,49 @@ export const WebhookLogDetails = ({ log }: WebhookLogDetailsProps) => {
           </WideLine>
         )}
 
-        <PropertyLabel variant="caption">
+        <Typography className="pt-1" variant="caption">
           {translate('text_63e27c56dfe64b846474ef6c')}
-        </PropertyLabel>
-        <PropertyValue color="grey700">
+        </Typography>
+        <Typography className="overflow-wrap-anywhere flex min-w-0 max-w-full" color="grey700">
           {formatTimeOrgaTZ(updatedAt, 'LLL. dd, yyyy HH:mm:ss')}
-        </PropertyValue>
+        </Typography>
 
-        <PropertyLabel variant="caption">
+        <Typography className="pt-1" variant="caption">
           {translate('text_63e27c56dfe64b846474ef6e')}
-        </PropertyLabel>
-        <PropertyValue color="grey700">{endpoint}</PropertyValue>
+        </Typography>
+        <Typography className="overflow-wrap-anywhere flex min-w-0 max-w-full" color="grey700">
+          {endpoint}
+        </Typography>
 
-        <PropertyLabel variant="caption">
+        <Typography className="pt-1" variant="caption">
           {translate('text_63e27c56dfe64b846474ef70')}
-        </PropertyLabel>
-        <PropertyValue color="grey700">{id}</PropertyValue>
+        </Typography>
+        <Typography className="overflow-wrap-anywhere flex min-w-0 max-w-full" color="grey700">
+          {id}
+        </Typography>
 
-        <PropertyLabel variant="caption">
+        <Typography className="pt-1" variant="caption">
           {translate('text_63e27c56dfe64b846474ef72')}
-        </PropertyLabel>
-        <PropertyValue color="grey700">{webhookType}</PropertyValue>
+        </Typography>
+        <Typography className="max-w-ful overflow-wrap-anywherel flex min-w-0" color="grey700">
+          {webhookType}
+        </Typography>
 
-        <PropertyLabel variant="caption">
+        <Typography className="pt-1" variant="caption">
           {translate('text_63e27c56dfe64b846474ef74')}
-        </PropertyLabel>
-        <PropertyValue color="grey700">
+        </Typography>
+        <Typography className="max-w-ful overflow-wrap-anywherel flex min-w-0" color="grey700">
           {!hasError ? translate('text_63e27c56dfe64b846474ef73') : httpStatus}
-        </PropertyValue>
+        </Typography>
 
         {retries > 0 && (
           <>
-            <PropertyLabel variant="caption">
+            <Typography className="pt-1" variant="caption">
               {translate('text_63e27c56dfe64b846474efb2')}
-            </PropertyLabel>
-            <PropertyValue color="grey700">{retries}</PropertyValue>
+            </Typography>
+            <Typography className="max-w-ful overflow-wrap-anywherel flex min-w-0" color="grey700">
+              {retries}
+            </Typography>
           </>
         )}
       </PropertiesContainer>
@@ -151,36 +163,10 @@ export const WebhookLogDetails = ({ log }: WebhookLogDetailsProps) => {
   )
 }
 
-const LogHeader = styled(Typography)`
-  height: ${NAV_HEIGHT}px;
-  min-height: ${NAV_HEIGHT}px;
-  box-shadow: ${theme.shadows[7]};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 ${theme.spacing(8)};
-  box-sizing: border-box;
-
-  ${theme.breakpoints.down('md')} {
-    display: none;
-  }
-`
-
 const WideLine = styled.div`
   grid-column: span 2;
 `
 
-const PropertyLabel = styled(Typography)`
-  padding-top: 4px;
-`
-
-const PropertyValue = styled(Typography)`
-  max-width: 100%;
-  min-width: 0;
-  display: flex;
-  overflow-wrap: anywhere;
-`
-
 const PropertiesContainer = styled.div`
   padding: ${theme.spacing(8)};
   box-shadow: ${theme.shadows[7]};

diff --git a/src/components/form/ButtonSelector/TabButton.tsx b/src/components/form/ButtonSelector/TabButton.tsx
@@ -72,9 +72,9 @@ export const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(
           !!icon && icon
         )}
         {title && (
-          <Label noWrap color="inherit">
+          <Typography className="flex-1" noWrap color="inherit">
             {title}
-          </Label>
+          </Typography>
         )}
       </Container>
     )
@@ -123,7 +123,3 @@ const Container = styled.button<{ $active: boolean }>`
     margin-right: ${theme.spacing(2)};
   }
 `
-
-const Label = styled(Typography)`
-  flex: 1;
-`
diff --git a/src/components/invoices/EditInvoiceItemTaxDialog.tsx b/src/components/invoices/EditInvoiceItemTaxDialog.tsx
@@ -123,9 +123,9 @@ export const EditInvoiceItemTaxDialog = forwardRef<EditInvoiceItemTaxDialogRef>(
       data-test="edit-invoice-item-tax-dialog"
     >
       {!formikProps.values?.taxes?.length ? (
-        <EmptyText variant="caption" color="grey600">
+        <Typography className="mb-4" variant="caption" color="grey600">
           {translate('text_64d40b7e80e64e40710a4935')}
-        </EmptyText>
+        </Typography>
       ) : (
         <>
           <TaxesWrapperTitle>
@@ -220,10 +220,6 @@ export const EditInvoiceItemTaxDialog = forwardRef<EditInvoiceItemTaxDialogRef>(
 
 EditInvoiceItemTaxDialog.displayName = 'forwardRef'
 
-const EmptyText = styled(Typography)`
-  margin-bottom: ${theme.spacing(4)};
-`
-
 const TaxesWrapper = styled.div`
   margin-bottom: ${theme.spacing(4)};
   display: flex;

diff --git a/src/components/plans/ChargePercentage.tsx b/src/components/plans/ChargePercentage.tsx
@@ -201,7 +201,9 @@ export const ChargePercentage = memo(
           <LineAmount>
             {valuePointer?.freeUnitsPerEvents !== undefined &&
               valuePointer?.freeUnitsPerTotalAggregation !== undefined && (
-                <OrText variant="body">{translate('text_62ff5d01a306e274d4ffcc59')}</OrText>
+                <Typography className="mt-10 flex-initial" variant="body">
+                  {translate('text_62ff5d01a306e274d4ffcc59')}
+                </Typography>
               )}
             <AmountInput
               className="flex-1"
@@ -590,11 +592,6 @@ const LineAmount = styled.div`
   }
 `
 
-const OrText = styled(Typography)`
-  flex: initial;
-  margin-top: 34px;
-`
-
 const LineButton = styled.div`
   display: flex;
   flex-wrap: wrap;

diff --git a/src/components/plans/CommitmentsSection.tsx b/src/components/plans/CommitmentsSection.tsx
@@ -208,9 +208,9 @@ export const CommitmentsSection = ({
             />
 
             <div>
-              <TaxLabel variant="captionHl" color="grey700">
+              <Typography className="mb-2" variant="captionHl" color="grey700">
                 {translate('text_64be910fba8ef9208686a8e3')}
-              </TaxLabel>
+              </Typography>
               <Group>
                 {!!formikProps?.values?.minimumCommitment?.taxes?.length && (
                   <InlineTaxesWrapper>
@@ -377,10 +377,6 @@ const InlineTaxesWrapper = styled.div`
   flex-wrap: wrap;
 `
 
-const TaxLabel = styled(Typography)`
-  margin-bottom: ${theme.spacing(2)};
-`
-
 const InlineTaxInputWrapper = styled.div`
   display: flex;
   align-items: center;