feat: wip styling invoice customize

This commit is contained in:
Ahmed Bouhuolia
2024-09-08 20:13:27 +02:00
parent f5e9485a12
commit c5c0342c7b
7 changed files with 117 additions and 57 deletions

View File

@@ -1,4 +1,5 @@
import { Box, FFormGroup, FSwitch, Stack } from '@/components';
// @ts-nocheck
import { FFormGroup, FSwitch, Stack } from '@/components';
import { FColorInput } from './FColorField';
import styles from './InvoiceCustomizeFields.module.scss';
import { Classes } from '@blueprintjs/core';
@@ -6,39 +7,48 @@ import { Classes } from '@blueprintjs/core';
export function InvoiceCustomizeGeneralField() {
return (
<Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack>
<h2>General Branding</h2>
<Stack spacing={0}>
<h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
<p className={Classes.TEXT_MUTED}>
Set your invoice details to be automatically applied every timeyou
create a new invoice.
</p>
</Stack>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput name={'primaryColor'} />
</FFormGroup>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
/>
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput name={'secondaryColor'} />
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
/>
</FFormGroup>
<FFormGroup name={'showLogo'} label={'Logo'}>
<FSwitch
name={'showLogo'}
label={'Display company logo in the paper'}
large
/>
</FFormGroup>
<FFormGroup name={'showLogo'} label={'Logo'}>
<FSwitch
name={'showLogo'}
label={'Display company logo in the paper'}
className={styles.showCompanyLogoField}
large
/>
</FFormGroup>
</Stack>
</Stack>
);
}