Merge pull request #1554 from freaky4wrld/update-front-page-to-MUI-co…

…mponents-1547 Update front page to MUI components 1547
hackforla · Dec 16, 2023 · e8f0f9c · e8f0f9c
2 parents a738494 + c85a7d3
commit e8f0f9c
Showing 1 changed file with 80 additions and 61 deletions.
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
@@ -2,10 +2,29 @@ import React, { useState, useEffect } from 'react';
 import CheckInButtons from '../components/presentational/CheckInButtons';
 import CreateNewProfileButton from '../components/presentational/CreateNewProfileButton';
 import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
-import { CircularProgress, Box } from '@mui/material';
+import { CircularProgress, Box, Typography } from '@mui/material';
 
 import '../sass/Home.scss';
 
+const h1sx = {
+  fontFamily: 'aliseoregular',
+  fontWeight: 'bold',
+  fontSize: {xs: "5.3rem"},
+  marginBottom: `0rem`,
+}
+
+const h2sx = {
+  ...h1sx,
+  fontSize: {xs: '2.8rem'},
+  marginTop: '-0.9rem',
+  lineHeight: '2.7rem'
+}
+
+const h4sx = {
+  ...h1sx,
+  fontSize: {xs: '1.8rem'},
+}
+
 const Home = () => {
   const [events, setEvents] = useState(null);
   const [selectedEvent, setSelectedEvent] = useState('');
@@ -43,68 +62,68 @@ const Home = () => {
   }
 
   return (
-    <div className="home">
-      <div className="home-headers">
-        <h1>VRMS</h1>
-        <h2>Volunteer Relationship Management System</h2>
-      </div>
+      <Box className="home">
+        <Box className="home-headers">
+          <Typography variant='h1' sx={h1sx}>VRMS</Typography>
+          <Typography variant='h2' sx={h2sx}>Volunteer Relationship Management System</Typography>
+        </Box>
 
-      {events && events.length > 0 ? (
-        <div className="meeting-select-container">
-          <form
-            className="form-select-meeting"
-            autoComplete="off"
-            onSubmit={(e) => e.preventDefault()}
-          >
-            <div className="form-row">
-              <div className="form-input-select">
-                <label htmlFor={'meeting-checkin'}>
-                  Select a meeting to check-in:
-                </label>
-                <div className="radio-buttons">
-                  <select
-                    name={'meeting-checkin'}
-                    className="select-meeting-dropdown"
-                    onChange={handleEventChange}
-                    required
-                    defaultValue="--SELECT ONE--"
-                  >
-                    <option value="--SELECT ONE--" disabled hidden>
-                      --SELECT ONE--
-                    </option>
-                    {events.map((event) => {
-                      return (
-                        <option key={event._id || 0} value={event._id}>
-                          {event?.project?.name + ' - ' + event.name}
-                        </option>
-                      );
-                    })}
-                  </select>
-                </div>
-              </div>
-            </div>
-          </form>
-        </div>
-      ):(
+        {events && events.length > 0 ? (
+          <Box className="meeting-select-container">
+            <form
+              className="form-select-meeting"
+              autoComplete="off"
+              onSubmit={(e) => e.preventDefault()}
+            >
+              <Box className="form-row">
+                <Box className="form-input-select">
+                  <label htmlFor={'meeting-checkin'}>
+                    Select a meeting to check-in:
+                  </label>
+                  <Box className="radio-buttons">
+                    <select
+                      name={'meeting-checkin'}
+                      className="select-meeting-dropdown"
+                      onChange={handleEventChange}
+                      required
+                      defaultValue="--SELECT ONE--"
+                    >
+                      <option value="--SELECT ONE--" disabled hidden>
+                        --SELECT ONE--
+                      </option>
+                      {events.map((event) => {
+                        return (
+                          <option key={event._id || 0} value={event._id}>
+                            {event?.project?.name + ' - ' + event.name}
+                          </option>
+                        );
+                      })}
+                    </select>
+                  </Box>
+                </Box>
+              </Box>
+            </form>
+          </Box>
+        ):(
 
-      <div className="home-buttons">
-        {/* If no events with checkInReady: true */}
-        {/* If no meetings available*/}
-        <h4>No meetings available</h4>
-        <CreateNewProfileButton />
-      </div>
-      )}  
-        {/* If any events with checkInReady: true */}
-        {events.length > 0 && (
-          <div className="home-buttons">
-            <CheckInButtons
-              disabled={selectedEvent === ''}
-              event={selectedEvent}
-              events={events}
-            />
-          </div>  
-        )}
-    </div>
+        <Box className="home-buttons">
+          {/* If no events with checkInReady: true */}
+          {/* If no meetings available*/}
+          <Typography variant='h4' sx={h4sx}>No meetings available</Typography>
+          <CreateNewProfileButton />
+        </Box>
+        )}  
+          {/* If any events with checkInReady: true */}
+          {events.length > 0 && (
+            <Box className="home-buttons">
+              <CheckInButtons
+                disabled={selectedEvent === ''}
+                event={selectedEvent}
+                events={events}
+              />
+            </Box>  
+          )}
+      </Box>
   );
 };