-added privacy notice

-added donate option
-css tweaks

.env.template

@@ -1,2 +1,4 @@
 REACT_APP_API_URL=
 REACT_APP_TELEGRAM_BOT_NAME=
+
+# REACT_APP_DONATE_LINK=

src/App.css

@@ -1,9 +1,20 @@
+:root {
+  background: var(--chakra-colors-teal-100);
+}
+
 #QRFlex {
   width: 30%;
 }
 
-@media only screen and (max-width: 600px) {
+#contentFlex {
+  width: 30%;
+}
+
+@media only screen and (max-width: 800px) {
   #QRFlex {
     width: 90%;
   }
+  #contentFlex {
+    width: 90%;
+  }
 }

src/screens/HomeScreen.js

@@ -1,6 +1,6 @@
-import { Button, Divider, Flex, Image, Spinner, Text } from '@chakra-ui/react';
+import { Button, Divider, Flex, Image, Link, Spinner, Text } from '@chakra-ui/react';
 import axios from 'axios';
-import { React, useEffect, useState } from 'react';
+import { Fragment, React, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect, useHistory } from 'react-router-dom';
 import { authLogout } from '../features/auth/authSlice';
@@ -66,8 +66,20 @@ function Home() {
         </Text>
         <Divider mb={6} />
         <Button mb={6} onClick={()=>{history.push("/scanner");}}>Scan a QR Code</Button>
-        <Divider mb={10} />
-        <Button mb={6} onClick={handleLogout}>Log Out!</Button>
+        {
+          process.env.REACT_APP_DONATE_LINK && 
+          <Fragment>
+          <Divider mb={6} />
+          <Link href={process.env.REACT_APP_DONATE_LINK} ><Button style={{width: "100%  "}} mb={6} colorScheme="blue">Donate!</Button></Link>
+          <Text mb={6}>
+            Servers require money to run, and apps require labor to develop and maintain.
+            You can show your support by donating what you can. Every cent counts, buy me
+            my next coffee, or help pay for a month of server usage!
+          </Text>
+        </Fragment>
+        }
+        <Divider mb={6} />
+        <Button colorScheme="red" mb={6} onClick={handleLogout}>Log Out!</Button>
       </Flex>
     </Flex>
   );

src/screens/LoginScreen.js

@@ -1,6 +1,4 @@
-import {
-  Flex, Heading, useToast
-} from '@chakra-ui/react';
+import { Divider, Flex, Heading, Link, Text, useToast } from '@chakra-ui/react';
 import axios from 'axios';
 import { React } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -83,12 +81,12 @@ function Login() {
 
   return (
     <Flex
-      height="100vh"
+      height="100%"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex direction="column" mt={5} mb={5} background="white" p={12} rounded={6} id="contentFlex">
         <Heading size="xl" mb={6}>
           SSR Covid Tracing
         </Heading>
@@ -96,6 +94,19 @@ function Login() {
           Login
         </Heading>
         <TelegramLoginButton dataOnauth={handleTelegramResponse} botName={process.env.REACT_APP_TELEGRAM_BOT_NAME} />
+        <Divider mb={6} mt={6}/>
+        <Text fontSize="sm">
+          <b>Privacy notes:</b> <br/>
+          Telegram Login allows us to verify your identity, without
+          collecting any of your data. Telegram does NOT give us your
+          phone number. The only piece of information stored on our server
+          is your Telegram ID, this is an internal ID Number Telegram uses
+          that is SEPARATE from your Telegram Username.
+          <br/><br/>
+          All the code for this project is <Link color="teal.500" href="https://github.com/naresh97/ssr-tracing" isExternal>Open Source</Link>, that means anyone,
+          including you can audit and verify that your information is being
+          handled securely.
+        </Text>
       </Flex>
     </Flex>
   );