From 32739d2a0574371a6039ffe79ce44b9af1768d7b Mon Sep 17 00:00:00 2001
From: Nareshkumar Rao <_accounts@nareshkumarrao.com>
Date: Fri, 13 Aug 2021 00:16:09 +0200
Subject: [PATCH] subtle ui improvements

---
 src/screens/HomeScreen.js    | 4 +++-
 src/screens/LockoutScreen.js | 4 ++--
 src/screens/LoginScreen.js   | 2 +-
 src/screens/ScannerScreen.js | 4 ++--
 src/screens/SuccessScreen.js | 4 ++--
 src/screens/VerifyScreen.js  | 4 ++--
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 1626813..ba78603 100644
--- a/src/screens/HomeScreen.js
+++ b/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"
       >
diff --git a/src/screens/LockoutScreen.js b/src/screens/LockoutScreen.js
index 36fd5c5..85f01ea 100644
--- a/src/screens/LockoutScreen.js
+++ b/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.
diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js
index b72f5c0..f219f8d 100644
--- a/src/screens/LoginScreen.js
+++ b/src/screens/LoginScreen.js
@@ -80,7 +80,7 @@ function Login() {
 
   return (
     <Flex
-      height="100%"
+    minHeight="100vh"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js
index c18f16b..8b8ae62 100644
--- a/src/screens/ScannerScreen.js
+++ b/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}
diff --git a/src/screens/SuccessScreen.js b/src/screens/SuccessScreen.js
index 4ff6535..f4eea29 100644
--- a/src/screens/SuccessScreen.js
+++ b/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
diff --git a/src/screens/VerifyScreen.js b/src/screens/VerifyScreen.js
index 79c4689..68bab13 100644
--- a/src/screens/VerifyScreen.js
+++ b/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>