Merge branch 'dev' into issue-97

sfbrigade · Sep 8, 2024 · a1865de · a1865de
2 parents 1c5e73b + 13c3884
commit a1865de
Show file tree

Hide file tree

Showing 23 changed files with 147 additions and 186 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SF Life line</title>
   </head>

diff --git a/client/public/icon.svg b/client/public/icon.svg
diff --git a/client/public/logo.svg b/client/public/logo.svg
diff --git a/client/src/App.css b/client/src/App.css
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 
 import { Layout } from './stories/Layout/Layout';
-import Index from './pages';
+import Home from './pages/home';
 import Login from './pages/auth/login/login';
 import Register from './pages/auth/register/register';
 import Dashboard from './pages/dashboard/dashboard';
@@ -112,7 +112,7 @@ function App() {
         <Route
           element={<Redirect isLoading={isLoading} isLoggedIn={isLoggedIn} />}
         >
-          <Route path="/" element={<Index />} />
+          <Route path="/" element={<Home />} />
           <Route element={<AuthLayout />}>
             <Route path="/register" element={<Register />} />
             <Route path="/register/:inviteId" element={<Register />} />

diff --git a/client/src/index.css b/client/src/index.css
diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -2,15 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import App from './App.jsx';
-import './index.css';
-import '@mantine/core/styles.css';
-import { theme } from './theme';
-
 import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
+
+import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dates/styles.css';
+
+import App from './App.jsx';
+import { theme } from './theme';
+
 import { ContextProvider } from './Context.jsx';
 
 const queryClient = new QueryClient({});

diff --git a/client/src/pages/auth/form.module.css b/client/src/pages/auth/form.module.css
@@ -3,7 +3,8 @@
 }
 
 .header > p {
-  padding: 0 2rem;
+  max-width: 25rem;
+  margin: 0 auto 2.5rem;
 }
 
 .form {

diff --git a/client/src/pages/auth/register/RegisterForm.jsx b/client/src/pages/auth/register/RegisterForm.jsx
@@ -187,7 +187,7 @@ export function RegisterForm({
               {isLoading ? (
                 <Loader size={20} />
               ) : formState === 2 ? (
-                'Send Interest Form'
+                'Submit'
               ) : (
                 'Next'
               )}
@@ -198,11 +198,11 @@ export function RegisterForm({
             <Container size="25rem" styles={{ root: { padding: 0 } }}>
               <div className={formClasses.formCompletion}>
                 <p>
-                  Form Complete! You will receive a confirmation email shortly.
-                  Acceptance into SF life line will also be sent via the email
-                  address you submitted.
+                  Registration complete! You will receive a confirmation email
+                  shortly, please click on the link in the email to verify your
+                  address. Acceptance into SF Life Line will also be sent to the
+                  email address you submitted.
                 </p>
-                <p>Save this site to your browser window for convenience.</p>
               </div>
             </Container>
           )}

diff --git a/client/src/pages/auth/register/register.jsx b/client/src/pages/auth/register/register.jsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Flex, Text, Title } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+
 import classes from '../form.module.css';
 import { RegisterForm } from './RegisterForm';
-import { Flex } from '@mantine/core';
-import { useParams } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom';
-import { notifications } from '@mantine/notifications';
 
 /**
  * Register page component
@@ -160,11 +160,15 @@ function Register() {
   return (
     <div>
       <div className={classes.header}>
-        <h2>Interest Form</h2>
-        <p>
-          description of filling out interest form to start account registration
-          process
-        </p>
+        <Title order={3} mb="1.5rem">
+          First Responder Sign Up
+        </Title>
+        <Text>
+          Thank you for your interest in joining SF Life Line! Please provide
+          the following information to register.
+          <br />
+          An administrator will review your application for acceptance.
+        </Text>
       </div>
       <Flex direction="column" gap="md">
         <RegisterForm

diff --git a/client/src/pages/home.jsx b/client/src/pages/home.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Container,
+  Image,
+  Paper,
+  Text,
+  Title,
+} from '@mantine/core';
+
+/**
+ * Home page component.
+ */
+function Home() {
+  return (
+    <>
+      <header>
+        <Image
+          src="/logo.svg"
+          w={{ base: 60, sm: 100 }}
+          h={{ base: 60, sm: 100 }}
+          m="2rem"
+        />
+      </header>
+      <main>
+        <Container>
+          <Title order={1} ta="center">
+            SF Life Line
+          </Title>
+          <Box maw={300} m="1.25rem auto 4rem">
+            Provide more efficient and equitable care with timely access to
+            patient information.
+          </Box>
+        </Container>
+        <Container size="sm">
+          <Paper bg="blue.1" p={{ base: '2.5rem 1.5rem', sm: '2.5rem 4rem' }}>
+            <Title order={3} mb="1rem">
+              For First Responders
+            </Title>
+            <Title order={4}>Benefits of Signing Up</Title>
+            <Text mb="2rem">
+              You will obtain timely access to patient healthcare information.
+              This can be helpful in situations where there are barriers to
+              care, including language barriers or mental incapacity.
+            </Text>
+            <Button component={Link} to="/register">
+              Sign Up
+            </Button>
+            &nbsp;
+            <Button component={Link} to="/login" variant="default">
+              Log In
+            </Button>
+          </Paper>
+        </Container>
+      </main>
+    </>
+  );
+}
+
+export default Home;
diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
diff --git a/client/src/stories/AuthLayout/AuthLayout.jsx b/client/src/stories/AuthLayout/AuthLayout.jsx
@@ -1,15 +1,25 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import { Image, Text, Title } from '@mantine/core';
 
-import classes from './authlayout.module.css';
+import classes from './AuthLayout.module.css';
 
 /**
  * Auth Layout for login, register, password reset
  */
 export default function AuthLayout() {
   return (
-    <div className={classes['auth-layout']}>
-      <div className={classes.banner}>testing</div>
+    <div className={classes.authLayout}>
+      <div className={classes.banner}>
+        <Image w={60} h={60} src="/logo.svg" m="4rem auto 1.5rem" />
+        <Title order={1} ta="center" mb="0.5rem">
+          SF Life Line
+        </Title>
+        <Text maw={300} ta="center" m="0 auto">
+          SF Life Line is a tool to help first responders provide more efficient
+          and equitable care to patients.
+        </Text>
+      </div>
       <div className={classes.form}>
         <Outlet />
       </div>