From 3b22ccd0c277a3e82d72f488ee38e4bee070b015 Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Mon, 6 Apr 2020 17:38:28 -0500
Subject: [PATCH] Vertically center

---
 pwa/src/components/LandingPage.tsx |  8 ++++----
 pwa/src/scss/LandingPage.scss      | 11 +++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/pwa/src/components/LandingPage.tsx b/pwa/src/components/LandingPage.tsx
index ab6260f..3a787c4 100644
--- a/pwa/src/components/LandingPage.tsx
+++ b/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>
   );
 }
diff --git a/pwa/src/scss/LandingPage.scss b/pwa/src/scss/LandingPage.scss
index ed8de0b..905257e 100644
--- a/pwa/src/scss/LandingPage.scss
+++ b/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
\ No newline at end of file
+
+#landing-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}