diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css index dbff73546..7c6b646da 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css +++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css @@ -1,3 +1,13 @@ +.container { + display: grid; + grid-template-columns: 1fr; + gap: var(--Space-x4); + + @media (min-width: 768px) { + grid-template-columns: 1fr 1fr; + } +} + .password, .user { align-self: flex-start; @@ -7,7 +17,7 @@ container-type: inline-size; } -.container { +.sharedRow { display: grid; gap: var(--Space-x2); grid-template-columns: minmax(100px, 164px) 1fr; @@ -20,7 +30,7 @@ } @container addressContainer (max-width: 350px) { - .container { + .sharedRow { grid-template-columns: 1fr; } } diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx index 1e06c4c0b..e66cc52f0 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx +++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx @@ -31,7 +31,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) { const languageOptions = getLocalizedLanguageOptions(lang) return ( - <> +
@@ -82,7 +82,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) { })} name="address.city" /> -
+
- +
) } diff --git a/apps/scandic-web/components/Forms/Edit/Profile/form.module.css b/apps/scandic-web/components/Forms/Edit/Profile/form.module.css index ccab00a3e..c40c7907f 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/form.module.css +++ b/apps/scandic-web/components/Forms/Edit/Profile/form.module.css @@ -1,14 +1,7 @@ .container { - display: grid; + display: flex; + flex-direction: column; gap: var(--Space-x3); - grid-template-areas: - "title" - "form" - "buttons"; -} - -.title { - grid-area: title; } .welcome { @@ -19,34 +12,16 @@ color: var(--Text-Interactive-Default); } -.form { - display: grid; - gap: var(--Space-x5); - grid-area: form; -} - .btnContainer { display: flex; - flex-direction: column-reverse; + flex-direction: column; gap: var(--Space-x1); - grid-area: buttons; } @media screen and (min-width: 768px) { - .container { - grid-template-areas: - "title buttons" - "form form"; - } - - .form { - grid-template-columns: 1fr 1fr; - } - .btnContainer { align-self: center; flex-direction: row; gap: var(--Space-x2); - justify-self: flex-end; } } diff --git a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx index ab6d60492..a775163bc 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx +++ b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx @@ -122,79 +122,73 @@ export default function Form({ user }: EditFormProps) { }, [trigger]) return ( - <> -
-
- - -

- {intl.formatMessage({ - id: "common.welcome", - defaultMessage: "Welcome", - })} -

-

- {user.name} -

-
-
-
-
- - {intl.formatMessage({ - id: "editProfile.discardChanges", - defaultMessage: "Discard changes", - })} - - } - /> - -
-
- - - -
-
- + +

+ {user.name} +

+ + +
+ + + +
- +
+ + {intl.formatMessage({ + id: "editProfile.discardChanges", + defaultMessage: "Discard changes", + })} + + } + /> + +
+ ) }