Merged in feat/loy-513-update-edit-profile-button-positions (pull request #3447)

feat(LOY-513): Update button positions and simplify css

* Update button positions and simplify css


Approved-by: Matilda Landström

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;
   }
 }

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 (
-    <>
+    <div className={styles.container}>
       <section className={styles.user}>
         <header>
           <Typography variant="Body/Paragraph/mdBold">
@@ -82,7 +82,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           })}
           name="address.city"
         />
-        <div className={styles.container}>
+        <div className={styles.sharedRow}>
           <FormInput
             data-hj-suppress
             label={intl.formatMessage({
@@ -183,6 +183,6 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           errorFormatter={formatFormErrorMessage}
         />
       </section>
-    </>
+    </div>
   )
 }

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;
   }
 }

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -122,9 +122,7 @@ export default function Form({ user }: EditFormProps) {
   }, [trigger])
 
   return (
-    <>
     <section className={styles.container}>
-        <div className={styles.title}>
       <Typography variant="Title/sm">
         <span>
           <h1 className={styles.welcome}>
@@ -138,7 +136,17 @@ export default function Form({ user }: EditFormProps) {
           </h2>
         </span>
       </Typography>
-        </div>
+      <form
+        /* @ts-expect-error Ignoring since ts doesn't recognize that tRPC parses FormData before reaching the route */
+        action={editProfile}
+        id={formId}
+        onSubmit={methods.handleSubmit(handleSubmit)}
+      >
+        <FormProvider {...methods}>
+          <FormContent errors={methods.formState.errors} />
+        </FormProvider>
+      </form>
+      <ChangeNameDisclaimer />
       <div className={styles.btnContainer}>
         <Dialog
           bodyText={intl.formatMessage({
@@ -181,20 +189,6 @@ export default function Form({ user }: EditFormProps) {
           })}
         </Button>
       </div>
-        <form
-          /* @ts-expect-error Ignoring since ts doesn't recognize that tRPC parses FormData before reaching the route */
-          action={editProfile}
-          className={styles.form}
-          id={formId}
-          onSubmit={methods.handleSubmit(handleSubmit)}
-        >
-          <FormProvider {...methods}>
-            <FormContent errors={methods.formState.errors} />
-          </FormProvider>
-        </form>
     </section>
-
-      <ChangeNameDisclaimer />
-    </>
   )
 }