diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx index b832a1d6e..9d89456fb 100644 --- a/components/Forms/Signup/index.tsx +++ b/components/Forms/Signup/index.tsx @@ -68,10 +68,11 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) { password: "", termsAccepted: false, }, - mode: "onBlur", + mode: "all", criteriaMode: "all", resolver: zodResolver(signUpSchema), reValidateMode: "onChange", + shouldFocusError: true, }) async function onSubmit(data: SignUpSchema) { diff --git a/components/TempDesignSystem/Form/Date/date.module.css b/components/TempDesignSystem/Form/Date/date.module.css index 7f492a293..ecbdd3ee2 100644 --- a/components/TempDesignSystem/Form/Date/date.module.css +++ b/components/TempDesignSystem/Form/Date/date.module.css @@ -1,8 +1,3 @@ -/* Leaving, will most likely get deleted */ -.datePicker { - container-name: datePickerContainer; - container-type: inline-size; -} .container { display: grid; gap: var(--Spacing-x2); @@ -11,6 +6,13 @@ width: var(--width); } +@media (max-width: 350px) { + .container { + display: flex; + flex-direction: column; + } +} + .day { grid-area: day; } @@ -31,10 +33,3 @@ .year.invalid > div > div { border-color: var(--Scandic-Red-60); } - -@container datePickerContainer (max-width: 350px) { - .container { - display: flex; - flex-direction: column; - } -} diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx index 5ff8f3482..9c413fc0a 100644 --- a/components/TempDesignSystem/Form/Phone/index.tsx +++ b/components/TempDesignSystem/Form/Phone/index.tsx @@ -78,69 +78,67 @@ export default function Phone({ } return ( -
-
- ( - - )} - /> - + + + + )} + /> + + - - - -
+ value={inputValue} + /> + +
) } diff --git a/components/TempDesignSystem/Form/Phone/phone.module.css b/components/TempDesignSystem/Form/Phone/phone.module.css index 31de5be30..2869cb3c0 100644 --- a/components/TempDesignSystem/Form/Phone/phone.module.css +++ b/components/TempDesignSystem/Form/Phone/phone.module.css @@ -1,11 +1,7 @@ -.wrapper { - container-name: phoneContainer; - container-type: inline-size; -} .phone { display: grid; + grid-template-columns: 1fr; gap: var(--Spacing-x2); - grid-template-columns: minmax(124px, 164px) 1fr; --react-international-phone-background-color: var(--Main-Grey-White); --react-international-phone-border-color: var(--Scandic-Beige-40); @@ -28,6 +24,12 @@ ); } +@media (min-width: 385px) { + .phone { + grid-template-columns: minmax(124px, 164px) 1fr; + } +} + .phone:has(.input:active, .input:focus) { --react-international-phone-border-color: var(--Scandic-Blue-90); } @@ -104,10 +106,3 @@ justify-self: flex-start; padding: 0; } - -@container phoneContainer (max-width: 350px) { - .phone { - display: flex; - flex-direction: column; - } -}