Merge pull request #67 from microsoft/anpethel/workingOnResultButtons

centering buttons on result page for mobile
microsoft · Sep 24, 2024 · f2a6634 · f2a6634
2 parents 1572a02 + ee5e30d
commit f2a6634
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/Client/src/components/Form/Button/button.scss b/Client/src/components/Form/Button/button.scss
@@ -29,4 +29,8 @@
   background-color: white;
   border: 2px solid $primary-color;
   color: $primary-color;
+  display: inline-block;
+  justify-content: space-between;
+  min-width: 200px;
+  text-align: center;
 }
diff --git a/Client/src/components/Layout/Layout.scss b/Client/src/components/Layout/Layout.scss
@@ -28,6 +28,16 @@
   height: 100%;
 }
 
+.result-button-center {
+  margin-left: 100px;
+  margin-right: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .game-screen-margin-top {
   margin-top: 50px;
 }

diff --git a/Client/src/screens/ResultScreen/ResultScreen.tsx b/Client/src/screens/ResultScreen/ResultScreen.tsx
@@ -59,28 +59,30 @@ export function ResultScreen(): React.ReactElement {
 
         </div>
 
+        <div className="result-button-center">
+          <ButtonBar>
+            <DefaultButton
+              onClick={() => {
+                const link = document.createElement('a');
+                link.href = '/career_craft_certificate_with_logo.png';
+                link.download = 'career_craft_certificate_with_logo.png';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              }}
+              title="Download Certificate"
+              label="Download Certificate"
+            />
+            <DefaultButton
+              onClick={() => {
+                window.location.href = "/";
+              }}
+              title="Start game"
+              label="Explore another career!"
+            />
+          </ButtonBar>
+        </div>
 
-        <ButtonBar>
-          <DefaultButton
-            onClick={() => {
-              const link = document.createElement('a');
-              link.href = '/career_craft_certificate_with_logo.png';
-              link.download = 'career_craft_certificate_with_logo.png';
-              document.body.appendChild(link);
-              link.click();
-              document.body.removeChild(link);
-            }}
-            title="Download Certificate"
-            label="Download Certificate"
-          />
-          <DefaultButton
-            onClick={() => {
-              window.location.href = "/";
-            }}
-            title="Start game"
-            label="Explore another career!"
-          />
-        </ButtonBar>
       </div>
 
       {showConfetti && (