scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-360): register form headings and styling fixes

Browse Source
This commit is contained in:
Chuma McPhoy
2024-10-02 15:25:49 +02:00
committed by Pontus Dreij
parent f895cd2cb5
commit fe198b5fc5
8 changed files with 73 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/Forms/Register/index.tsx
View File

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
import { registerUser } from "@/actions/registerUser"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
@@ -15,6 +14,8 @@ import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts"
@@ -65,7 +66,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
}
return (
<section className={styles.container}>
<section className={styles.formWrapper}>
<Title as="h3">{title}</Title>
<FormProvider {...methods}>
<form
@@ -78,23 +79,37 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
action={registerUser}
onSubmit={methods.handleSubmit(handleSubmit)}
>
<section className={styles.user}>
<section className={styles.userInfo}>
<div className={styles.container}>
<Input
label={"firstName"}
name="firstName"
registerOptions={{ required: true }}
/>
<Input
label={"lastName"}
name="lastName"
<header>
<Subtitle type="two">
{intl.formatMessage({ id: "Contact information" })}
</Subtitle>
</header>
<div className={styles.nameInputs}>
<Input
label={"firstName"}
name="firstName"
registerOptions={{ required: true }}
/>
<Input
label={"lastName"}
name="lastName"
registerOptions={{ required: true }}
/>
</div>
</div>
<div className={styles.dateField}>
<header>
<Caption textTransform="bold">
{intl.formatMessage({ id: "Birth date" })}
</Caption>
</header>
<DateSelect
name="dateOfBirth"
registerOptions={{ required: true }}
/>
</div>
<DateSelect
name="dateOfBirth"
registerOptions={{ required: true }}
/>
<div className={styles.container}>
<Input
label={zipCode}
@@ -115,12 +130,11 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
/>
<Phone label={phoneNumber} name="phoneNumber" />
</section>
<Divider className={styles.divider} color="subtle" />
<section className={styles.password}>
<header>
<Body textTransform="bold">
<Subtitle type="two">
{intl.formatMessage({ id: "Password" })}
</Body>
</Subtitle>
</header>
<NewPassword
name="password"
@@ -130,9 +144,9 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
</section>
<section className={styles.terms}>
<header>
<Body textTransform="bold">
<Subtitle type="two">
{intl.formatMessage({ id: "Terms and conditions" })}
</Body>
</Subtitle>
</header>
<Checkbox name="termsAccepted" registerOptions={{ required: true }}>
<Body>