diff --git a/components/Forms/Edit/Profile/FormContent/formContent.module.css b/components/Forms/Edit/Profile/FormContent/formContent.module.css index 64eb85410..aec012aa6 100644 --- a/components/Forms/Edit/Profile/FormContent/formContent.module.css +++ b/components/Forms/Edit/Profile/FormContent/formContent.module.css @@ -3,12 +3,14 @@ align-self: flex-start; display: grid; gap: var(--Spacing-x2); + container-name: addressContainer; + container-type: inline-size; } .container { display: grid; gap: var(--Spacing-x2); - grid-template-columns: max(164px) 1fr; + grid-template-columns: minmax(100px, 164px) 1fr; } @media (min-width: 768px) { @@ -16,3 +18,9 @@ display: none; } } + +@container addressContainer (max-width: 350px) { + .container { + grid-template-columns: 1fr; + } +} diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx index ad66f6282..d6d5fc7da 100644 --- a/components/Forms/Signup/index.tsx +++ b/components/Forms/Signup/index.tsx @@ -48,7 +48,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) { zipCode: "", }, password: "", - termsAccepted: false, }, mode: "all", criteriaMode: "all", diff --git a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx index 1846a7cd1..85559aa4c 100644 --- a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx +++ b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx @@ -4,14 +4,8 @@ import { useEffect, useState } from "react" import { useWatch } from "react-hook-form" import { useIntl } from "react-intl" -import { privacyPolicy } from "@/constants/currentWebHrefs" - -import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import DateSelect from "@/components/TempDesignSystem/Form/Date" import Input from "@/components/TempDesignSystem/Form/Input" -import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard" -import Link from "@/components/TempDesignSystem/Link" -import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" @@ -31,49 +25,27 @@ export default function Signup({ name }: { name: string }) { setIsJoinChecked(joinValue) }, [joinValue]) - return ( -
- + - {isJoinChecked ? ( -
-
-
- - {intl.formatMessage({ id: "Birth date" })} * - -
- - -
-
- - - {intl.formatMessage({ - id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with", - })}{" "} - - {intl.formatMessage({ id: "Scandic's Privacy Policy." })} - - - -
-
- ) : null} +
+
+ + {intl.formatMessage({ id: "Birth date" })} * + +
+ +
+ ) : ( + ) } diff --git a/components/HotelReservation/EnterDetails/Details/details.module.css b/components/HotelReservation/EnterDetails/Details/details.module.css index 2dc4266ed..c6571ea9e 100644 --- a/components/HotelReservation/EnterDetails/Details/details.module.css +++ b/components/HotelReservation/EnterDetails/Details/details.module.css @@ -1,34 +1,30 @@ .form { display: grid; - gap: var(--Spacing-x1); - padding: var(--Spacing-x3) 0px; + gap: var(--Spacing-x3); + margin-bottom: var(--Spacing-x3); } .container { display: grid; - gap: var(--Spacing-x1); - grid-template-columns: 1fr 1fr; + gap: var(--Spacing-x2); width: min(100%, 600px); } +.header, .country, .email, -.membershipNo, +.signup, .phone { grid-column: 1/-1; } .footer { - display: grid; - gap: var(--Spacing-x3); - justify-items: flex-start; margin-top: var(--Spacing-x1); } -@media screen and (min-width: 1367px) { +@media screen and (min-width: 768px) { .form { - gap: var(--Spacing-x2); - padding: var(--Spacing-x3) 0px; + gap: var(--Spacing-x3); } .container { @@ -36,18 +32,4 @@ grid-template-columns: 1fr 1fr; width: min(100%, 600px); } - - .country, - .email, - .membershipNo, - .phone { - grid-column: 1/-1; - } - - .footer { - display: grid; - gap: var(--Spacing-x3); - justify-items: flex-start; - margin-top: var(--Spacing-x1); - } } diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx index dd5959c31..3c0c55b9b 100644 --- a/components/HotelReservation/EnterDetails/Details/index.tsx +++ b/components/HotelReservation/EnterDetails/Details/index.tsx @@ -10,6 +10,7 @@ import { useStepsStore } from "@/stores/steps" import Button from "@/components/TempDesignSystem/Button" import CountrySelect from "@/components/TempDesignSystem/Form/Country" import Input from "@/components/TempDesignSystem/Form/Input" +import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard" import Phone from "@/components/TempDesignSystem/Form/Phone" import Footnote from "@/components/TempDesignSystem/Text/Footnote" @@ -35,7 +36,6 @@ export default function Details({ user }: DetailsProps) { join: state.data.join, dateOfBirth: state.data.dateOfBirth, zipCode: state.data.zipCode, - termsAccepted: state.data.termsAccepted, membershipNo: state.data.membershipNo, })) @@ -52,7 +52,6 @@ export default function Details({ user }: DetailsProps) { join: initialData.join, dateOfBirth: initialData.dateOfBirth, zipCode: initialData.zipCode, - termsAccepted: initialData.termsAccepted, membershipNo: initialData.membershipNo, }, criteriaMode: "all", @@ -69,6 +68,7 @@ export default function Details({ user }: DetailsProps) { [completeStep, updateDetails] ) + const joinValue = methods.watch("join") return (
- {user ? null : } - - {intl.formatMessage({ id: "Guest information" })} - + {user ? null : ( + + )}
+ + {intl.formatMessage({ id: "Guest information" })} + - {user || methods.watch("join") ? null : ( - + {user ? null : ( +
+ +
)}