Vertically center

pwa/src/components/LandingPage.tsx

@@ -15,20 +15,20 @@ export default function LandingPage(): ReactElement {
     console.log("Clicked New Patient");
   };
   return (
-    <>
-      <div id="buttonFlex">
+    <div id="landing-wrapper">
+      <div className="button-flex">
         <Button onClick={patientLookup} icon="search">
           Patient Lookup
         </Button>
         <WhiteSpace />
       </div>
       <br />
-      <div id="buttonFlex">
+      <div className="button-flex">
         <Button icon={<UserAddOutlined />} onClick={newPatient}>
           New Patient
         </Button>
         <WhiteSpace />
       </div>
-    </>
+    </div>
   );
 }

pwa/src/scss/LandingPage.scss

@@ -1,8 +1,9 @@
-#buttonFlex {
+.button-flex {
   animation-name: fade-in;
   animation-duration: 2s;
   display: flex;
   justify-content: center;
+  margin: 2em 0;
   .am-button {
     background-color: #9bd7ff;
     width: 40%;
@@ -11,4 +12,10 @@
     }
   }
 }
-// TODO: vertically center the component
+
+#landing-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}