fix: Style of paper template address

This commit is contained in:
Ahmed Bouhuolia
2024-09-21 20:04:23 +02:00
parent 6271d6c268
commit ad74007d58
7 changed files with 17 additions and 21 deletions

View File

@@ -140,7 +140,7 @@ export function CreditNotePaperTemplate({
)} )}
</PaperTemplate.TermsList> </PaperTemplate.TermsList>
<Group spacing={10}> <PaperTemplate.AddressesGroup>
{showBilledFromAddress && ( {showBilledFromAddress && (
<PaperTemplate.Address <PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]} items={[<strong>{companyName}</strong>, ...billedFromAddress]}
@@ -151,7 +151,7 @@ export function CreditNotePaperTemplate({
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]} items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/> />
)} )}
</Group> </PaperTemplate.AddressesGroup>
<Stack spacing={0}> <Stack spacing={0}>
<PaperTemplate.Table <PaperTemplate.Table

View File

@@ -146,7 +146,7 @@ export function EstimatePaperTemplate({
)} )}
</PaperTemplate.TermsList> </PaperTemplate.TermsList>
<Group spacing={10}> <PaperTemplate.AddressesGroup>
{showBilledFromAddress && ( {showBilledFromAddress && (
<PaperTemplate.Address <PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]} items={[<strong>{companyName}</strong>, ...billedFromAddress]}
@@ -157,7 +157,7 @@ export function EstimatePaperTemplate({
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]} items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/> />
)} )}
</Group> </PaperTemplate.AddressesGroup>
<Stack spacing={0}> <Stack spacing={0}>
<PaperTemplate.Table <PaperTemplate.Table

View File

@@ -37,16 +37,9 @@
} }
.addressRoot{ .addressRoot{
display: flex; > div{
flex-direction: row;
}
.addressBillTo{
flex: 1; flex: 1;
} }
.addressFrom{
flex: 1;
} }
.table { .table {

View File

@@ -207,7 +207,7 @@ export function InvoicePaperTemplate({
)} )}
</PaperTemplate.TermsList> </PaperTemplate.TermsList>
<Group spacing={10}> <PaperTemplate.AddressesGroup>
{showBilledFromAddress && ( {showBilledFromAddress && (
<PaperTemplate.Address <PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddres]} items={[<strong>{companyName}</strong>, ...billedFromAddres]}
@@ -218,7 +218,7 @@ export function InvoicePaperTemplate({
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]} items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/> />
)} )}
</Group> </PaperTemplate.AddressesGroup>
<Stack spacing={0}> <Stack spacing={0}>
<PaperTemplate.Table <PaperTemplate.Table

View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames'; import clsx from 'classnames';
import { get } from 'lodash'; import { get } from 'lodash';
import { Stack } from '@/components'; import { Group, GroupProps, Stack } from '@/components';
import styles from './InvoicePaperTemplate.module.scss'; import styles from './InvoicePaperTemplate.module.scss';
export interface PaperTemplateProps { export interface PaperTemplateProps {
@@ -119,6 +119,9 @@ PaperTemplate.MutedText = () => {};
PaperTemplate.Text = () => {}; PaperTemplate.Text = () => {};
PaperTemplate.AddressesGroup = (props: GroupProps) => {
return <Group spacing={10} {...props} className={styles.addressRoot} />
}
PaperTemplate.Address = ({ PaperTemplate.Address = ({
items, items,
}: { }: {

View File

@@ -112,7 +112,7 @@ export function PaymentReceivedPaperTemplate({
)} )}
</PaperTemplate.TermsList> </PaperTemplate.TermsList>
<Group spacing={10}> <PaperTemplate.AddressesGroup>
{showBilledFromAddress && ( {showBilledFromAddress && (
<PaperTemplate.Address <PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]} items={[<strong>{companyName}</strong>, ...billedFromAddress]}
@@ -123,7 +123,7 @@ export function PaymentReceivedPaperTemplate({
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]} items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/> />
)} )}
</Group> </PaperTemplate.AddressesGroup>
<Stack spacing={0}> <Stack spacing={0}>
<PaperTemplate.Table <PaperTemplate.Table

View File

@@ -134,7 +134,7 @@ export function ReceiptPaperTemplate({
)} )}
</PaperTemplate.TermsList> </PaperTemplate.TermsList>
<Group spacing={10}> <PaperTemplate.AddressesGroup>
{showBilledFromAddress && ( {showBilledFromAddress && (
<PaperTemplate.Address <PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]} items={[<strong>{companyName}</strong>, ...billedFromAddress]}
@@ -145,7 +145,7 @@ export function ReceiptPaperTemplate({
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]} items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/> />
)} )}
</Group> </PaperTemplate.AddressesGroup>
<Stack spacing={0}> <Stack spacing={0}>
<PaperTemplate.Table <PaperTemplate.Table