feat(apps): make registration back button always available

ErikssonJoakim · Feb 13, 2024 · 39ae50d · 39ae50d
1 parent 39b4eec
commit 39ae50d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/apps/react-app/pages/registration/registration.scss b/src/apps/react-app/pages/registration/registration.scss
@@ -4,17 +4,30 @@
   @include grid-item($colStart: 1, $colEnd: -1, $rowStart: auto, $rowEnd: auto);
   @include twelve-column-layout;
 
-  .react-app-registration-page-form {
-    @include columns-with-gap($gap: 10px);
+  .react-app-registration-page-form-container {
     @include grid-item($colStart: 6, $colEnd: -6, $rowStart: auto, $rowEnd: auto);
+    @include grid-container($colsNb: 2, $colGutter: 16px);
     align-self: center;
 
-    @include use-breakpoints(('mobile')) {
-      @include grid-item($colStart: 3, $colEnd: -3, $rowStart: auto, $rowEnd: auto);
+    @include use-breakpoints(('mobile', 'tablet')) {
+      @include columns-with-gap($gap: 20px);
     }
 
-    @include use-breakpoints(('tablet')) {
-      @include grid-item($colStart: 4, $colEnd: -4, $rowStart: auto, $rowEnd: auto);
+    .react-app-registration-page-form {
+      @include columns-with-gap($gap: 10px);
+
+      @include use-breakpoints(('mobile')) {
+        @include grid-item($colStart: 3, $colEnd: -3, $rowStart: auto, $rowEnd: auto);
+      }
+
+      @include use-breakpoints(('tablet')) {
+        @include grid-item($colStart: 4, $colEnd: -4, $rowStart: auto, $rowEnd: auto);
+      }
+    }
+
+    .react-app-registration-page-button-back-wrapper {
+      align-self: center;
+      justify-self: center;
     }
   }
 }
diff --git a/src/apps/react-app/pages/registration/registration.tsx b/src/apps/react-app/pages/registration/registration.tsx
@@ -87,7 +87,7 @@ export const Registration: FC = () => {
 
   return (
     <div className="react-app-registration-page-main">
-      <div className="react-app-registration-page-form">
+      <div className="react-app-registration-page-form-container">
         <Formik
           initialValues={initialValues}
           onSubmit={handleSubmit}
@@ -118,11 +118,13 @@ export const Registration: FC = () => {
                 <button className="react-app-registration-page-form-submit-button" type="submit">
                   Submit
                 </button>
-                <Button label="Back" onClick={handleBack} />
               </Form>
             )
           }
         </Formik>
+        <div className="react-app-registration-page-button-back-wrapper">
+          <Button label="Back" onClick={handleBack} />
+        </div>
       </div>
     </div>
   )