Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

misc: migrate styled typography to tailwind part II #1949

Merged
merged 1 commit into from
Dec 30, 2024
Merged

misc: migrate styled typography to tailwind part II #1949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions src/pages/Analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down Expand Up @@ -287,7 +287,3 @@ const CurrencyListWrapper = styled.div`
scroll-margin: ${theme.spacing(1)};
}
`

const EmptyCurrencyTypography = styled(Typography)`
padding: 6px;
`
8 changes: 2 additions & 6 deletions src/pages/BillableMetricsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
<>
Expand Down Expand Up @@ -203,8 +203,4 @@ const ListHead = styled(ListHeader)`
}
`

const CellSmall = styled(Typography)`
width: 112px;
`

export default BillableMetricsList
29 changes: 7 additions & 22 deletions src/pages/CouponsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 4 additions & 8 deletions src/pages/CreateAddOn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -417,10 +417,6 @@ const CreateAddOn = () => {
)
}

const TaxLabel = styled(Typography)`
margin-bottom: ${theme.spacing(1)};
`

const InlineTaxInputWrapper = styled.div`
display: flex;
align-items: center;
Expand Down
15 changes: 6 additions & 9 deletions src/pages/CreateInvoice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -787,7 +791,7 @@ const CreateInvoice = () => {
</Typography>
))
: '0%'}
</TaxCell>
</Typography>
<Typography variant="body" color="grey700">
{!fee.units
? '-'
Expand Down Expand Up @@ -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;
`
25 changes: 7 additions & 18 deletions src/pages/CreateSubscription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -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
14 changes: 6 additions & 8 deletions src/pages/CreditNoteDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -500,7 +504,7 @@ const CreditNoteDetails = () => {
</span>
<span>•</span>
<span>{creditNote?.id}</span>
</InlineTripleTypography>
</Typography>
</MainInfoLine>
</div>
</MainInfos>
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 2 additions & 6 deletions src/pages/CustomerDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)};
Expand Down
8 changes: 2 additions & 6 deletions src/pages/CustomerDraftInvoicesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -179,8 +179,4 @@ const MainInfos = styled.div`
}
`

const Name = styled(Typography)`
margin-bottom: ${theme.spacing(1)};
`

export default CustomerDraftInvoicesList
8 changes: 2 additions & 6 deletions src/pages/InvoiceCreditNoteList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -159,7 +159,3 @@ const Header = styled.div`
justify-content: space-between;
align-items: center;
`

const EmptyStateTypography = styled(Typography)`
margin-top: ${theme.spacing(6)};
`
22 changes: 6 additions & 16 deletions src/pages/PlansList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 2 additions & 6 deletions src/pages/WalletForm/WalletForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)};
`
Loading
Loading