From e766272f308b18eae9e96991157850c03db6a47f Mon Sep 17 00:00:00 2001
From: Samir Omarov <samir.omarov@gmail.com>
Date: Wed, 27 Sep 2023 16:37:13 +0200
Subject: [PATCH] add primary colors, zaplogo, footer

---
 packages/app/src/App.tsx                     |  4 ++-
 packages/app/src/IntakeThemeProvider.tsx     |  4 ++-
 packages/app/src/components/Footer.tsx       | 17 +++++----
 packages/app/src/components/Logo.tsx         | 38 ++++++++++++++++++++
 packages/app/src/lib/i18n-en.json            |  2 +-
 packages/app/src/pages/ProviderDashboard.tsx | 13 +++++++
 6 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 packages/app/src/components/Logo.tsx
 create mode 100644 packages/app/src/pages/ProviderDashboard.tsx

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 6ea81b05..4ae27568 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -3,6 +3,7 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { ScrollToTop } from './components';
 import { IntakeThemeProvider } from './IntakeThemeProvider';
 import Version from './pages/Version';
+import ProviderDashboard from './pages/ProviderDashboard';
 
 function App(): JSX.Element {
   const { isAuthenticated } = useAuth0();
@@ -13,7 +14,8 @@ function App(): JSX.Element {
         <ScrollToTop />
         {!isAuthenticated ? (
           <Routes>
-            <Route path={'/'} element={<Version />} />;
+            {/* <Route path={'/'} element={<Version />} />; */}
+            <Route path={'/'} element={<ProviderDashboard />} />;
           </Routes>
         ) : (
           <Routes>
diff --git a/packages/app/src/IntakeThemeProvider.tsx b/packages/app/src/IntakeThemeProvider.tsx
index 12d3534e..bd522fb4 100644
--- a/packages/app/src/IntakeThemeProvider.tsx
+++ b/packages/app/src/IntakeThemeProvider.tsx
@@ -44,6 +44,7 @@ export const otherColors = {
   patientSubtitle: '#545454',
   wrongPatient: '#8F9AA7',
   cardBackground: '#F7F8F9',
+  footerBackground: '#263954',
 };
 
 export const typography: TypographyOptions = {
@@ -141,8 +142,9 @@ export const palette = {
     disabled: '#C3C9D2',
   },
   primary: {
-    main: '#4D15B7',
+    main: '#2896C6',
     contrast: '#FFFFFF',
+    light: '#4AC0F2',
   },
   secondary: {
     main: '#301367',
diff --git a/packages/app/src/components/Footer.tsx b/packages/app/src/components/Footer.tsx
index 390e86b2..e5ebec62 100644
--- a/packages/app/src/components/Footer.tsx
+++ b/packages/app/src/components/Footer.tsx
@@ -1,7 +1,8 @@
 import { FC } from 'react';
 import { Typography, Box } from '@mui/material';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { useTranslation } from 'react-i18next';
+import { otherColors } from '../IntakeThemeProvider';
+import { Logo } from './Logo';
 
 const Footer: FC = () => {
   const { t } = useTranslation();
@@ -10,17 +11,19 @@ const Footer: FC = () => {
     <Box
       sx={{
         width: '100%',
-        backgroundColor: 'secondary.main',
+        background: otherColors.footerBackground,
         bottom: 0,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
       }}
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
     >
-      <ErrorOutlineIcon color="warning" sx={{ pl: 1.25 }} />
-      <Typography variant="body2" color="primary.contrast" sx={{ m: 1.25, maxWidth: 850 }}>
+      <Typography variant="body2" color="primary.light" sx={{ m: 1.25, maxWidth: 400 }}>
         {t('general.footer')}
       </Typography>
+      <Box mt={0.7} mr={2}>
+        <Logo width={100} />
+      </Box>
     </Box>
   );
 };
diff --git a/packages/app/src/components/Logo.tsx b/packages/app/src/components/Logo.tsx
new file mode 100644
index 00000000..bc0465da
--- /dev/null
+++ b/packages/app/src/components/Logo.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export interface LogoProps {
+  width: number;
+}
+
+export function Logo(props: LogoProps): JSX.Element {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 21" style={{ width: props.width }}>
+      <title>zapEHR Logo</title>
+      <path
+        d="M18.0176 15.3176V13.2752L23.1698 7.33386L24.4927 6.01098L22.5664 6.0574H18.064V3.71335H28.0204V5.75569L22.8913 11.6738L21.5685 13.0199L23.6804 12.9735H28.2061V15.3176H18.0176Z"
+        fill="white"
+      />
+      <path
+        d="M37.4532 7.91407C37.4532 7.24877 37.2598 6.73044 36.873 6.35911C36.5016 5.98777 36.0065 5.80211 35.3876 5.80211C34.8152 5.80211 34.3123 5.94909 33.8791 6.24307C33.4459 6.53704 33.1287 7.02442 32.9275 7.7052L30.2122 6.86969C30.4752 5.84852 31.0477 5.02849 31.9296 4.4096C32.827 3.79071 34.0261 3.48126 35.5269 3.48126C36.5481 3.48126 37.4377 3.64372 38.1959 3.96864C38.954 4.27809 39.5419 4.74999 39.9597 5.38435C40.3929 6.01872 40.6095 6.81554 40.6095 7.77482V12.4861C40.6095 13.0741 40.888 13.3681 41.445 13.3681C41.7081 13.3681 41.9556 13.3294 42.1877 13.252L42.002 15.2247C41.5998 15.4259 41.0969 15.5264 40.4935 15.5264C39.952 15.5264 39.4646 15.4336 39.0314 15.2479C38.5981 15.0623 38.2577 14.7838 38.0102 14.4124C37.7626 14.0256 37.6389 13.546 37.6389 12.9735V12.8807L38.1959 12.7878C38.103 13.3758 37.8477 13.8786 37.43 14.2964C37.0122 14.6987 36.5016 15.0081 35.8982 15.2247C35.3103 15.4413 34.6991 15.5496 34.0648 15.5496C33.2757 15.5496 32.5949 15.4336 32.0224 15.2015C31.4499 14.954 31.009 14.5981 30.6995 14.1339C30.3901 13.6698 30.2354 13.0973 30.2354 12.4165C30.2354 11.5501 30.5139 10.8461 31.0709 10.3045C31.6279 9.74754 32.4247 9.36847 33.4613 9.16733L37.8245 8.28541L37.8013 10.2581L35.0163 10.8151C34.4902 10.9234 34.088 11.0704 33.8095 11.2561C33.5464 11.4263 33.4149 11.7125 33.4149 12.1148C33.4149 12.5016 33.5542 12.7956 33.8327 12.9967C34.1266 13.1979 34.4748 13.2984 34.877 13.2984C35.202 13.2984 35.5191 13.2597 35.8286 13.1824C36.138 13.105 36.4165 12.9812 36.6641 12.8111C36.9117 12.6409 37.1051 12.4088 37.2443 12.1148C37.3836 11.8208 37.4532 11.465 37.4532 11.0472V7.91407Z"
+        fill="white"
+      />
+      <path
+        d="M44.1655 20.1913V3.71335H47.0201L47.229 7.40349L46.8345 6.98574C46.9737 6.30496 47.229 5.70154 47.6003 5.17548C47.9872 4.64942 48.4745 4.23941 49.0625 3.94543C49.6504 3.63599 50.308 3.48126 51.0352 3.48126C51.979 3.48126 52.8222 3.72108 53.5649 4.20073C54.3076 4.68037 54.8878 5.36888 55.3055 6.26627C55.7388 7.1482 55.9554 8.22352 55.9554 9.49225C55.9554 10.761 55.7388 11.8518 55.3055 12.7646C54.8723 13.662 54.2766 14.3505 53.5185 14.8302C52.7758 15.3098 51.9248 15.5496 50.9656 15.5496C49.9444 15.5496 49.0934 15.2634 48.4126 14.6909C47.7473 14.1185 47.2909 13.399 47.0433 12.5325L47.345 12.0452V20.1913H44.1655ZM50.0372 13.1128C50.8882 13.1128 51.5535 12.8111 52.0332 12.2076C52.5283 11.5887 52.7758 10.6913 52.7758 9.51546C52.7758 8.33956 52.536 7.4499 52.0564 6.84649C51.5922 6.22759 50.9346 5.91815 50.0836 5.91815C49.5421 5.91815 49.0625 6.06514 48.6447 6.35911C48.2424 6.63761 47.9253 7.04763 47.6932 7.58916C47.4611 8.11521 47.345 8.75731 47.345 9.51546C47.345 10.2581 47.4534 10.9002 47.67 11.4418C47.8866 11.9833 48.196 12.401 48.5983 12.695C49.0161 12.9735 49.4957 13.1128 50.0372 13.1128Z"
+        fill="white"
+      />
+      <path
+        d="M58.9277 15.3176V0H70.4159V2.57614H62.1304V6.38232H68.652V8.84241H62.1304V12.7414H70.7408V15.3176H58.9277Z"
+        fill="white"
+      />
+      <path
+        d="M86.7734 0V15.3176H83.5707V0H86.7734ZM76.817 0V15.3176H73.6143V0H76.817ZM85.2417 6.28948V8.86562H75.2156V6.28948H85.2417Z"
+        fill="white"
+      />
+      <path
+        d="M97.5249 0C99.2578 0 100.619 0.417752 101.61 1.25326C102.6 2.08876 103.095 3.2105 103.095 4.61848C103.095 6.11929 102.6 7.27197 101.61 8.07653C100.619 8.86562 99.2656 9.26016 97.5481 9.26016L97.2232 9.44583H93.9276V15.3176H90.7713V0H97.5249ZM97.1536 7.00895C98.051 7.00895 98.7163 6.83101 99.1495 6.47515C99.5982 6.10382 99.8226 5.53908 99.8226 4.78094C99.8226 4.02279 99.5982 3.46579 99.1495 3.10993C98.7163 2.73859 98.051 2.55293 97.1536 2.55293H93.9276V7.00895H97.1536ZM99.0335 7.68199L104 15.3176H100.403L96.2949 8.61033L99.0335 7.68199Z"
+        fill="white"
+      />
+      <path d="M12.5093 15.5574V18.18H0V15.5574H12.5093Z" fill="#1BCDFF" />
+    </svg>
+  );
+}
diff --git a/packages/app/src/lib/i18n-en.json b/packages/app/src/lib/i18n-en.json
index 9c4c0f5f..cef71474 100644
--- a/packages/app/src/lib/i18n-en.json
+++ b/packages/app/src/lib/i18n-en.json
@@ -31,7 +31,7 @@
       }
     },
     "firstName": "First name",
-    "footer": "This service is not for emergencies. If you believe that you or your child is having an emergency, and is at risk of harming themself or someone else, please call 988 or go to the nearest emergency room immediately.",
+    "footer": "Powered by",
     "lastName": "Last name",
     "required": "required field",
     "stateFullNames": {
diff --git a/packages/app/src/pages/ProviderDashboard.tsx b/packages/app/src/pages/ProviderDashboard.tsx
new file mode 100644
index 00000000..e45c160a
--- /dev/null
+++ b/packages/app/src/pages/ProviderDashboard.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Footer } from '../components';
+
+const ProviderDashboard = (): JSX.Element => {
+  return (
+    <div>
+      <h1>Provider Dashboard</h1>
+      <Footer />
+    </div>
+  );
+};
+
+export default ProviderDashboard;