Fix uncentered buttons on error page (#84)

GovTechSG · Dec 21, 2023 · ffd3f26 · ffd3f26
1 parent 25cade5
commit ffd3f26
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/src/MainWindow/ErrorPage/ErrorPage.scss b/src/MainWindow/ErrorPage/ErrorPage.scss
@@ -28,4 +28,9 @@
     line-height: 1.5rem;
     background-color: transparent;
   }
+
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
 }
diff --git a/src/MainWindow/ErrorPage/index.jsx b/src/MainWindow/ErrorPage/index.jsx
@@ -50,21 +50,23 @@ const ErrorPage = () => {
           </>
         : <h1>Something went wrong! Please try again.</h1>
       }
-      {isCustomScan
-      ? (
-        <>
-        <button role="link" id='back-to-home-btn' onClick={handleBackToHome}>
-          <img src={returnIcon}></img>
-          &nbsp;Back To Home
-        </button>
-        <Button id="replay-btn" type="btn-primary" onClick={replayCustomFlow}>
-          Replay
-        </Button>
-        </>
-      )
-      : <Button role="link" type="btn-primary" onClick={handleBackToHome}>
-          Try Again
-        </Button>}
+      <div class="actions">
+        {isCustomScan
+        ? (
+          <>
+          <button role="link" id='back-to-home-btn' onClick={handleBackToHome}>
+            <img src={returnIcon}></img>
+            &nbsp;Back To Home
+          </button>
+          <Button id="replay-btn" type="btn-primary" onClick={replayCustomFlow}>
+            Replay
+          </Button>
+          </>
+        )
+        : <Button role="link" type="btn-primary" onClick={handleBackToHome}>
+            Try Again
+          </Button>}
+      </div>
     </div>
   );
 };