subtle ui improvements

src/screens/HomeScreen.js

@@ -161,7 +161,7 @@ function Home() {
 
   return (
     <Flex
-      height="100vh"
+      minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
@@ -170,6 +170,8 @@ function Home() {
         direction="column"
         background="white"
         p={12}
+        mt={5}
+        mb={5}
         rounded={6}
         id="QRFlex"
       >

src/screens/LockoutScreen.js

@@ -52,12 +52,12 @@ function Lockout() {
 
   return (
     <Flex
-      height="100vh"
+    minHeight="100vh"
       background="red.500"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6} id="contentFlex">
+      <Flex direction="column" background="white" mt={5} mb={5} p={12} rounded={6} id="contentFlex">
         <Heading>Lockout</Heading>
         <Text>
           You have reported that you have been tested <b>POSITIVE</b> with COVID19.

src/screens/LoginScreen.js

@@ -80,7 +80,7 @@ function Login() {
 
   return (
     <Flex
-      height="100%"
+    minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"

src/screens/ScannerScreen.js

@@ -103,12 +103,12 @@ function Scanner() {
 
   return (
     <Flex
-      height="100vh"
+    minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex direction="column" background="white" p={12} mb={6} mt={6} rounded={6}>
         <QrReader
           mb={6}
           delay={300}

src/screens/SuccessScreen.js

@@ -6,12 +6,12 @@ function Success() {
 
   return (
     <Flex
-      height="100vh"
+    minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex direction="column" background="white" mb={6} mt={6} p={12} rounded={6}>
         <Heading>Success!</Heading>
         <Text fontSize="lg">
           We have succesfully saved your contact! Stay safe out there, and let

src/screens/VerifyScreen.js

@@ -43,12 +43,12 @@ function Verify(props) {
 
   return (
     <Flex
-      height="100vh"
+    minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex direction="column" background="white" p={12} mt={6} mb={6} rounded={6}>
         {verifyError ? errorMessage : loadingMessage}
       </Flex>
     </Flex>