diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css index 22f01c255..32b75c7b8 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css @@ -27,6 +27,6 @@ @media screen and (min-width: 768px) { .container { - gap: var(--Spacing-x2); + gap: var(--Spacing-x3); } } diff --git a/components/Forms/Edit/Profile/form.module.css b/components/Forms/Edit/Profile/form.module.css index 2ccbaa268..4925d8537 100644 --- a/components/Forms/Edit/Profile/form.module.css +++ b/components/Forms/Edit/Profile/form.module.css @@ -1,10 +1,48 @@ +.container { + display: grid; + gap: var(--Spacing-x3); + grid-template-areas: + "title" + "form" + "buttons"; +} + +.title { + grid-area: title; +} + .form { display: grid; gap: var(--Spacing-x5); - grid-template-columns: 1fr 1fr; + grid-area: form; } -.btns { +.btnContainer { display: flex; - gap: var(--Spacing-x2); + flex-direction: column-reverse; + gap: var(--Spacing-x1); + grid-area: buttons; +} + +.btn { + justify-content: center; +} + +@media screen and (min-width: 768px) { + .container { + grid-template-areas: + "title buttons" + "form form"; + } + + .form { + grid-template-columns: 1fr 1fr; + } + + .btnContainer { + flex-direction: row; + gap: var(--Spacing-x2); + justify-self: flex-end; + align-self: center; + } } diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx index 768c5b412..80ca6d710 100644 --- a/components/Forms/Edit/Profile/index.tsx +++ b/components/Forms/Edit/Profile/index.tsx @@ -61,41 +61,47 @@ export default function Form({ user }: EditFormProps) { }) return ( - <> -
-
- - {formatMessage({ id: "Welcome" })} - - - {user.name} - -
-
- - -
-
+
+
+ + {formatMessage({ id: "Welcome" })} + + + {user.name} + +
+
+ + +
+
- +
) } diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx index 6596f88e3..a04ec82bf 100644 --- a/components/TempDesignSystem/Form/Date/index.tsx +++ b/components/TempDesignSystem/Form/Date/index.tsx @@ -61,7 +61,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) { isRequired={!!registerOptions.required} name={name} ref={field.ref} - value={parseDate(d)} + value={isNaN(d) ? undefined : parseDate(d)} > diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx index b3e734547..561d1bba0 100644 --- a/components/TempDesignSystem/Form/Phone/index.tsx +++ b/components/TempDesignSystem/Form/Phone/index.tsx @@ -1,7 +1,7 @@ "use client" import "react-international-phone/style.css" -import { parsePhoneNumber } from "libphonenumber-js" +import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js" import { Input as AriaInput, Label as AriaLabel, @@ -50,10 +50,11 @@ export default function Phone({ const { country, handlePhoneValueChange, inputValue, setCountry } = usePhoneInput({ - defaultCountry: - parsePhoneNumber( - formState.defaultValues?.phoneNumber - ).country?.toLowerCase() ?? "sv", + defaultCountry: isValidPhoneNumber(formState.defaultValues?.phoneNumber) + ? parsePhoneNumber( + formState.defaultValues?.phoneNumber + ).country?.toLowerCase() + : "sv", disableCountryGuess: true, forceDialCode: true, value: phone, diff --git a/utils/phoneValidator.ts b/utils/phoneValidator.ts index 94639ca9b..2f2d72d3b 100644 --- a/utils/phoneValidator.ts +++ b/utils/phoneValidator.ts @@ -1,6 +1,6 @@ import { - ParseError, isPossiblePhoneNumber, + ParseError, parsePhoneNumber, validatePhoneNumberLength, } from "libphonenumber-js"