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,79 +122,73 @@ 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}>
-                {intl.formatMessage({
-                  id: "common.welcome",
-                  defaultMessage: "Welcome",
-                })}
-              </h1>
-              <h2 data-hj-suppress className={styles.name}>
-                {user.name}
-              </h2>
-            </span>
-          </Typography>
-        </div>
-        <div className={styles.btnContainer}>
-          <Dialog
-            bodyText={intl.formatMessage({
-              id: "editProfile.discardChangesDescription",
-              defaultMessage: "Any changes you've made will be lost.",
-            })}
-            cancelButtonText={intl.formatMessage({
-              id: "editProfile.goBackToEdit",
-              defaultMessage: "Go back to edit",
-            })}
-            proceedHref={profile[lang]}
-            proceedText={intl.formatMessage({
-              id: "editProfile.yesDiscardChanges",
-              defaultMessage: "Yes, discard changes",
-            })}
-            titleText={intl.formatMessage({
-              id: "editProfile.discardChangesTitle",
-              defaultMessage: "Discard unsaved changes?",
-            })}
-            trigger={
-              <Button variant="Secondary" size="sm" color="Primary">
-                {intl.formatMessage({
-                  id: "editProfile.discardChanges",
-                  defaultMessage: "Discard changes",
-                })}
-              </Button>
-            }
-          />
-          <Button
-            isDisabled={!isValid || methods.formState.isSubmitting}
-            form={formId}
-            variant="Primary"
-            size="sm"
-            color="Primary"
-            type="submit"
-          >
+    <section className={styles.container}>
+      <Typography variant="Title/sm">
+        <span>
+          <h1 className={styles.welcome}>
             {intl.formatMessage({
-              id: "common.save",
-              defaultMessage: "Save",
+              id: "common.welcome",
+              defaultMessage: "Welcome",
             })}
-          </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>
-
+          </h1>
+          <h2 data-hj-suppress className={styles.name}>
+            {user.name}
+          </h2>
+        </span>
+      </Typography>
+      <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({
+            id: "editProfile.discardChangesDescription",
+            defaultMessage: "Any changes you've made will be lost.",
+          })}
+          cancelButtonText={intl.formatMessage({
+            id: "editProfile.goBackToEdit",
+            defaultMessage: "Go back to edit",
+          })}
+          proceedHref={profile[lang]}
+          proceedText={intl.formatMessage({
+            id: "editProfile.yesDiscardChanges",
+            defaultMessage: "Yes, discard changes",
+          })}
+          titleText={intl.formatMessage({
+            id: "editProfile.discardChangesTitle",
+            defaultMessage: "Discard unsaved changes?",
+          })}
+          trigger={
+            <Button variant="Secondary" size="sm" color="Primary">
+              {intl.formatMessage({
+                id: "editProfile.discardChanges",
+                defaultMessage: "Discard changes",
+              })}
+            </Button>
+          }
+        />
+        <Button
+          isDisabled={!isValid || methods.formState.isSubmitting}
+          form={formId}
+          variant="Primary"
+          size="sm"
+          color="Primary"
+          type="submit"
+        >
+          {intl.formatMessage({
+            id: "common.save",
+            defaultMessage: "Save",
+          })}
+        </Button>
+      </div>
+    </section>
   )
 }