Skip to content

Commit

Permalink
template help modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@matt-fidd
matt-fidd committed Dec 26, 2024
1 parent 7216504 commit 110ed31
Showing 1 changed file with 51 additions and 38 deletions.
89 changes: 51 additions & 38 deletions packages/desktop-client/src/components/modals/GoalTemplateModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { TableHeader, Row, Field } from '../table';

export function GoalTemplateModal() {
const { t } = useTranslation();

return (
<Modal name="goal-templates" containerProps={{ style: { width: 850 } }}>
{({ state: { close } }) => (
Expand All @@ -28,18 +29,18 @@ export function GoalTemplateModal() {
</TableHeader>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">
{t('#template $10 repeat every week starting 2025-01-03')}
#template $10 repeat every week starting 2025-01-03
</Field>
<Field width="flex">
<Trans>$10 a week</Trans>
</Field>
<Field width="flex">{t('$10 a week')}</Field>
</Row>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">
{t(
'#template $10 repeat every week starting 2025-01-03 up to $80',
)}
#template $10 repeat every week starting 2025-01-03 up to $80
</Field>
<Field width="flex">
{t('$10 a week, up to a maximum of $80')}
<Trans>$10 a week, up to a maximum of $80</Trans>
</Field>
</Row>
<span>
Expand All @@ -54,19 +55,25 @@ export function GoalTemplateModal() {
</Field>
</TableHeader>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">{t('#template $50')}</Field>
<Field width="flex">{t('$50 each month')}</Field>
<Field width="flex">#template $50</Field>
<Field width="flex">
<Trans>$50 each month</Trans>
</Field>
</Row>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">{t('#template up to $150')}</Field>
<Field width="flex">#template up to $150</Field>
<Field width="flex">
{t('Up to $150 each month, and remove extra funds over $150')}
<Trans>
Up to $150 each month, and remove extra funds over $150
</Trans>
</Field>
</Row>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">{t('#template up to $150 hold')}</Field>
<Field width="flex">#template up to $150 hold</Field>
<Field width="flex">
{t('Up to $150 each month, but retain any funds over $150')}
<Trans>
Up to $150 each month, but retain any funds over $150
</Trans>
</Field>
</Row>
<span>
Expand All @@ -82,26 +89,32 @@ export function GoalTemplateModal() {
</TableHeader>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">
{t('#template $500 by 2025-03 repeat every 6 months')}
#template $500 by 2025-03 repeat every 6 months
</Field>
<Field width="flex">
{t('Break down less-frequent expenses into monthly expenses')}
<Trans>
Break down less-frequent expenses into monthly expenses
</Trans>
</Field>
</Row>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">
{t('#template $500 by 2025-03 repeat every year')}
#template $500 by 2025-03 repeat every year
</Field>
<Field width="flex">
{t('Break down less-frequent expenses into monthly expenses')}
<Trans>
Break down less-frequent expenses into monthly expenses
</Trans>
</Field>
</Row>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">
{t('#template $500 by 2025-03 repeat every 2 years')}
#template $500 by 2025-03 repeat every 2 years
</Field>
<Field width="flex">
{t('Break down less-frequent expenses into monthly expenses')}
<Trans>
Break down less-frequent expenses into monthly expenses
</Trans>
</Field>
</Row>
<span>
Expand All @@ -116,36 +129,34 @@ export function GoalTemplateModal() {
</Field>
</TableHeader>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">#template schedule SCHEDULE_NAME</Field>
<Field width="flex">
{t('#template schedule SCHEDULE_NAME')}
</Field>
<Field width="flex">
{t('Fund upcoming scheduled transactions over time')}
<Trans>Fund upcoming scheduled transactions over time</Trans>
</Field>
</Row>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">#template schedule full SCHEDULE_NAME</Field>
<Field width="flex">
{t('#template schedule full SCHEDULE_NAME')}
</Field>
<Field width="flex">
{t('Fund upcoming scheduled transaction only on needed month')}
<Trans>
Fund upcoming scheduled transaction only on needed month
</Trans>
</Field>
</Row>
<span>
<br />
</span>
<TableHeader>
<Field width="flex">
<Trans>Goal Tempaltes</Trans>
<Trans>Goal Templates</Trans>
</Field>
<Field width="flex">
<Trans>Description</Trans>
</Field>
</TableHeader>
<Row style={{ backgroundColor: theme.tableBackground }}>
<Field width="flex">{t('#goal 1000')}</Field>
<Field width="flex">#goal 1000</Field>
<Field width="flex">
{t('Set a long-term goal instead of a monthly goal')}
<Trans>Set a long-term goal instead of a monthly goal</Trans>
</Field>
</Row>
<div
Expand All @@ -160,15 +171,17 @@ export function GoalTemplateModal() {
<br />
</span>
<Text>
{t('See')}{' '}
<Link
variant="external"
linkColor="muted"
to="https://actualbudget.org/docs/experimental/goal-templates"
>
{t('Goal Templates')}
</Link>{' '}
{t('for more information.')}
<Trans>
See{' '}
<Link
variant="external"
linkColor="muted"
to="https://actualbudget.org/docs/experimental/goal-templates"
>
Goal Templates
</Link>{' '}
for more information.
</Trans>
</Text>
</div>
</View>
Expand Down

0 comments on commit 110ed31

Please sign in to comment.