From f634c512e4f1c7f8e88151d66bcbf154ab4f08f3 Mon Sep 17 00:00:00 2001 From: Alexandre Monjol Date: Fri, 27 Dec 2024 23:49:44 +0100 Subject: [PATCH] misc: migrate styled typography to tailwind part II --- src/pages/Analytics.tsx | 8 +- src/pages/BillableMetricsList.tsx | 8 +- src/pages/CouponsList.tsx | 29 +-- src/pages/CreateAddOn.tsx | 12 +- src/pages/CreateInvoice.tsx | 15 +- src/pages/CreateSubscription.tsx | 25 +- src/pages/CreditNoteDetails.tsx | 14 +- src/pages/CustomerDetails.tsx | 8 +- src/pages/CustomerDraftInvoicesList.tsx | 8 +- src/pages/InvoiceCreditNoteList.tsx | 8 +- src/pages/PlansList.tsx | 22 +- src/pages/WalletForm/WalletForm.tsx | 8 +- src/pages/__devOnly/DesignSystem.tsx | 220 ++++++++++++------ src/pages/auth/Login.tsx | 18 +- src/pages/auth/LoginOkta.tsx | 10 +- src/pages/developers/Debugger.tsx | 35 +-- src/pages/developers/WebhookLogs.tsx | 39 +--- src/pages/settings/EmailScenarioConfig.tsx | 51 +--- .../settings/GocardlessIntegrationDetails.tsx | 21 +- .../settings/LagoTaxManagementIntegration.tsx | 23 +- .../settings/StripeIntegrationDetails.tsx | 19 +- 21 files changed, 251 insertions(+), 350 deletions(-) diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx index ce68c48fe..37c690609 100644 --- a/src/pages/Analytics.tsx +++ b/src/pages/Analytics.tsx @@ -104,9 +104,9 @@ const Analytics = () => { {!currenciesToDisplay.length ? ( - + {translate('text_65562fd544bc8a0057706172')} - + ) : ( <> {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 index ec20bf361..f0d1d34d8 100644 --- a/src/pages/BillableMetricsList.tsx +++ b/src/pages/BillableMetricsList.tsx @@ -85,9 +85,9 @@ const BillableMetricsList = () => { {translate('text_623b497ad05b960101be343e')} - + {translate('text_623b497ad05b960101be3440')} - + {!!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 index 389e7ebcf..e6a0f675a 100644 --- a/src/pages/CouponsList.tsx +++ b/src/pages/CouponsList.tsx @@ -92,17 +92,15 @@ const CouponsList = () => { - + {translate('text_62865498824cc10126ab2964')} - - + + {translate('text_62865498824cc10126ab296a')} - - - - {translate('text_62865498824cc10126ab296f')} - - + + + {translate('text_62865498824cc10126ab296f')} + {!!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 index 423b252b5..872425938 100644 --- a/src/pages/CreateAddOn.tsx +++ b/src/pages/CreateAddOn.tsx @@ -294,9 +294,9 @@ const CreateAddOn = () => { {!!formikProps?.values?.taxes?.length && (
- + {translate('text_64be910fba8ef9208686a8e3')} - + {formikProps?.values?.taxes?.map(({ id, name, rate }) => ( { {shouldDisplayTaxesInput ? (
{!formikProps?.values?.taxes?.length && ( - + {translate('text_64be910fba8ef9208686a8e3')} - + )} { ) } -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 index d955e7bc2..305476124 100644 --- a/src/pages/CreateInvoice.tsx +++ b/src/pages/CreateInvoice.tsx @@ -757,7 +757,11 @@ const CreateInvoice = () => { !!hasTaxProvider && setTaxProviderTaxesResult(null) }} /> - + {hasTaxProvider ? !!taxProviderTaxesResult?.collection.length ? taxProviderTaxesResult?.collection @@ -787,7 +791,7 @@ const CreateInvoice = () => { )) : '0%'} - + {!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 index 8de9feef2..8d0bb6517 100644 --- a/src/pages/CreateSubscription.tsx +++ b/src/pages/CreateSubscription.tsx @@ -789,9 +789,14 @@ const CreateSubscription = () => { ) : formType !== FORM_TYPE_ENUM.edition || !subscription?.plan.parent?.id ? ( - + {translate('text_65118a52df984447c18694d0')} - + ) : null} @@ -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 index 46e8a05e5..c624bc101 100644 --- a/src/pages/CreditNoteDetails.tsx +++ b/src/pages/CreditNoteDetails.tsx @@ -483,7 +483,11 @@ const CreditNoteDetails = () => { - + {translate('text_637655cb50f04bf1c8379cf2', { amount: intlFormatNumber( @@ -500,7 +504,7 @@ const CreditNoteDetails = () => { • {creditNote?.id} - +
@@ -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 index 61801a61e..1cc28bead 100644 --- a/src/pages/CustomerDetails.tsx +++ b/src/pages/CustomerDetails.tsx @@ -340,9 +340,9 @@ const CustomerDetails = () => { initials={customerInitials} />
- + {customerName || translate('text_62f272a7a60b4d7fadad911a')} - + {externalId}
@@ -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 index 95ec37f65..3a096cf1b 100644 --- a/src/pages/CustomerDraftInvoicesList.tsx +++ b/src/pages/CustomerDraftInvoicesList.tsx @@ -112,11 +112,11 @@ const CustomerDraftInvoicesList = () => {
- + {translate('text_638f74bb4d41e3f1d0201649', { customerName, })} - + {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 index 09a6b7c8a..09bfeacce 100644 --- a/src/pages/InvoiceCreditNoteList.tsx +++ b/src/pages/InvoiceCreditNoteList.tsx @@ -127,9 +127,9 @@ const InvoiceCreditNoteList = () => { image={} /> ) : !loading && !creditNotes?.length ? ( - + {translate('text_636bdef6565341dcb9cfb12b')} - + ) : ( { - + {translate('text_62d95e42c1e1dfe7376fdf35')} - - + + {translate('text_62442e40cea25600b0b6d856')} - - + + {translate('text_62442e40cea25600b0b6d858')} - + {!!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 index 75aca2595..ebb233252 100644 --- a/src/pages/WalletForm/WalletForm.tsx +++ b/src/pages/WalletForm/WalletForm.tsx @@ -311,13 +311,13 @@ const WalletForm = () => { ) : ( <>
- + <Typography className="mb-1" variant="headline" color="grey700"> {translate( formType === FORM_TYPE_ENUM.edition ? 'text_62d9430e8b9fe36851cddd09' : 'text_6560809c38fb9de88d8a505e', )} - + {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)}; -` diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx index d36673bed..332cf17de 100644 --- a/src/pages/__devOnly/DesignSystem.tsx +++ b/src/pages/__devOnly/DesignSystem.tsx @@ -155,7 +155,9 @@ const DesignSystem = () => { match: [DISPLAY_TAB_URL, ONLY_DEV_DESIGN_SYSTEM_ROUTE], component: ( - Accordion + + Accordion + Content of the accordion @@ -178,7 +180,9 @@ const DesignSystem = () => { - Alert + + Alert + { I'm a danger alert - Chips + + Chips + @@ -271,7 +277,9 @@ const DesignSystem = () => { /> - Poppers + + Poppers + Drawer}> - + @@ -349,7 +357,9 @@ const DesignSystem = () => { - Selector + + Selector + { /> - Status + + Status + - + Success - + { /> - + Warning - + - + Outline - + - + Default - + - + Danger - + { - + Disabled - + - ShowMoreText + + ShowMoreText + { link: SKELETON_TAB_URL, component: ( - Skeleton + + Skeleton + @@ -524,7 +540,9 @@ const DesignSystem = () => { link: TABLE_TAB_URL, component: ( - Table + + Table + { columns={[ { title: ( - + Name - + ), size: 300, content: (row) => ( @@ -547,18 +565,18 @@ const DesignSystem = () => { }, { title: ( - + Job - + ), size: 124, mapKey: 'job', }, { title: ( - + Icon - + ), size: 124, content: (row) => ( @@ -570,7 +588,9 @@ const DesignSystem = () => { ]} /> - Display Table + + Display Table + { link: AVATAR_TAB_URL, component: ( - Avatar - Variants + + Avatar + + + Variants + @@ -722,7 +746,9 @@ const DesignSystem = () => { - Size + + Size + @@ -746,10 +772,12 @@ const DesignSystem = () => { - Colors - + + Colors + + Color is defined automatically based on initials or identifier - + @@ -768,13 +796,17 @@ const DesignSystem = () => { link: ICONS_TAB_URL, component: ( - Icons + + Icons + {Object.keys(ALL_ICONS).map((iconName, i) => ( ))} - Colors + + Colors + @@ -787,13 +819,17 @@ const DesignSystem = () => { - Animation + + Animation + - Size + + Size + @@ -807,10 +843,14 @@ const DesignSystem = () => { link: TYPOGRAPHY_TAB_URL, component: ( - Typography + + Typography + - Variant + + Variant + Headline Subhead BodyHl @@ -828,7 +868,9 @@ const DesignSystem = () => { /> - Color + + Color + color textSecondary color textPrimary color primary600 @@ -848,9 +890,13 @@ const DesignSystem = () => { link: BUTTON_TAB_URL, component: ( - Button + + Button + - General use + + General use + - Primary + + Primary + - Secondary + + Secondary + - Tertiary + + Tertiary + - Quaternary + + Quaternary + - Google connect + + Google connect + {!disableSignUp && !isRunningInSalesForceIframe && ( - { {translate('text_620bc4d4269a55014d493f6d')} - { } export default LoginOkta - -const UsefulLink = styled(Typography)` - margin-left: auto; - margin-right: auto; - text-align: center; -` diff --git a/src/pages/developers/Debugger.tsx b/src/pages/developers/Debugger.tsx index 528055600..d95268802 100644 --- a/src/pages/developers/Debugger.tsx +++ b/src/pages/developers/Debugger.tsx @@ -105,7 +105,11 @@ const Debugger = () => { ) : ( -
+ {translate('text_6298bd525e359200d5ea0020')} {!!data?.events?.collection && ( @@ -121,7 +125,7 @@ const Debugger = () => { /> )} -
+ {!loading && (!data?.events?.collection || !data?.events?.collection.length) ? ( { {loading && ( <> - + - + {[0, 1, 2, 3, 4, 5, 6].map((i) => (
@@ -280,29 +284,6 @@ const EventList = styled.div` height: calc(100vh - ${NAV_HEIGHT * 3}px); ` -const Header = 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(12)}; - box-sizing: border-box; -` - -const HeaderBillableMetric = styled(Typography)` - 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; - background-color: ${theme.palette.common.white}; - margin-left: 1px; -` - const EventInfosSkeleton = styled.div` padding: ${theme.spacing(10)} ${theme.spacing(8)}; box-shadow: ${theme.shadows[7]}; diff --git a/src/pages/developers/WebhookLogs.tsx b/src/pages/developers/WebhookLogs.tsx index f66551002..fcc57d667 100644 --- a/src/pages/developers/WebhookLogs.tsx +++ b/src/pages/developers/WebhookLogs.tsx @@ -1,7 +1,7 @@ import { gql } from '@apollo/client' import { useEffect, useMemo, useState } from 'react' import { generatePath, useNavigate, useParams } from 'react-router-dom' -import styled, { css } from 'styled-components' +import styled from 'styled-components' import { Button, InfiniteScroll, Skeleton, Tooltip, Typography } from '~/components/designSystem' import { WebhookLogDetails } from '~/components/developers/WebhookLogDetails' @@ -145,11 +145,11 @@ const WebhookLogs = () => { ) : ( <> - + <Typography className="mr-1" color="textSecondary" variant="bodyHl" noWrap> {translate('text_63e3a496be166d8f3279b594', { url: webhookUrlData?.webhookEndpoint?.webhookUrl, })} - + )} @@ -170,7 +170,11 @@ const WebhookLogs = () => { ) : ( - + {translate('text_63e27c56dfe64b846474ef4b')} {!!data?.webhooks?.collection && ( @@ -183,7 +187,7 @@ const WebhookLogs = () => { /> )} - +