Merge branch 'development' into authToMui

hollydo · Feb 6, 2025 · 3c162f5 · 3c162f5
2 parents 173284d + 189fb23
commit 3c162f5
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 40 deletions.
diff --git a/client/package.json b/client/package.json
@@ -30,7 +30,7 @@
     "react-hook-form": "^7.44.3",
     "react-router-dom": "^5.1.2",
     "validator": "^13.7.0",
-    "vite": "^4.5.5",
+    "vite": "^4.5.6",
     "vite-plugin-svgr": "^3.2.0"
   },
   "scripts": {

diff --git a/client/src/components/Form.jsx b/client/src/components/Form.jsx
@@ -1,3 +1,6 @@
+// Form.jsx contains several unused components, including abstractions for button and form elements.
+// They are not currently being used in the codebase.
+
 import React from "react";
 
 import "../sass/Form.scss";

diff --git a/client/src/components/manageProjects/editableMeeting.jsx b/client/src/components/manageProjects/editableMeeting.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import EventForm from './eventForm';
+import { Box, Button } from '@mui/material';
 import '../../sass/ManageProjects.scss';
 
 const EditableMeeting = ({
@@ -49,8 +50,8 @@ const EditableMeeting = ({
       formValues={formValues}
       formErrors={formErrors}
     >
-      <div>
-        <button
+      <Box>
+        <Button
           type="button"
           className="create-form-button"
           onClick={handleEventUpdate(
@@ -61,22 +62,22 @@ const EditableMeeting = ({
           )}
         >
           UPDATE
-        </button>
-        <button
+        </Button>
+        <Button
           type="button"
           className="create-form-button"
           onClick={handleResetEvent(eventId)}
         >
           RESET
-        </button>
-        <button
+        </Button>
+        <Button
           type="button"
           className="create-form-button"
           onClick={handleEventDelete(eventId)}
         >
           DELETE
-        </button>
-      </div>
+        </Button>
+      </Box>
     </EventForm>
   );
 };

diff --git a/client/src/components/presentational/upcomingEvent.jsx b/client/src/components/presentational/upcomingEvent.jsx
@@ -2,33 +2,34 @@ import React from "react";
 import { ReactComponent as ClockIcon } from "../../svg/Icon_Clock.svg";
 import { ReactComponent as LocationIcon } from "../../svg/Icon_Location.svg";
 import { Link } from "react-router-dom";
+import { Box, Typography } from "@mui/material";
 
 import moment from "moment";
 
 const upcomingEvent = (props) => {
     return props.nextEvent[0] ? (
-        <div className="warning-event">
-            <div className="warning-event-headers">
-                <p className="event-name">{props.nextEvent[0].name}</p>
-                <div className="event-info-wrapper">
+        <Box className="warning-event">
+            <Box className="warning-event-headers">
+                <Typography className="event-name">{props.nextEvent[0].name}</Typography>
+                <Box className="event-info-wrapper">
                     <ClockIcon />
-                    <p className="event-info">
+                    <Typography className="event-info" sx={{ margin: '0px 0px 0px 12px' }}>
                         {moment(props.nextEvent[0].date).format(
                             "ddd, MMM D @ h:mm a"
                         )}
-                    </p>
-                </div>
+                    </Typography>
+                </Box>
                 {props.nextEvent[0].location.city !== "" &&
-                    <div className="event-info-wrapper">
+                    <Box className="event-info-wrapper">
                         <LocationIcon />
-                        <p className="event-info">
+                        <Typography className="event-info" sx={{ margin: '0px 0px 0px 12px' }}>
                             {props.nextEvent[0].location.city},{" "}
                             {props.nextEvent[0].location.state}
-                        </p>
-                    </div>
+                        </Typography>
+                    </Box>
                 }
-            </div>
-            <div className="warning-event-toggle">
+            </Box>
+            <Box className="warning-event-toggle">
                 {props.nextEvent[0] && props.isCheckInReady === false ? (
                     <Link
                         to={`/events/${props.nextEvent[0]._id}`}
@@ -50,10 +51,10 @@ const upcomingEvent = (props) => {
                         CLOSE CHECK-IN
                     </Link>
                 )}
-            </div>
-        </div>
+            </Box>
+        </Box>
     ) : (
-        <div>No events coming up!</div>
+        <Box>No events coming up!</Box>
     );
 };
 export default upcomingEvent;
diff --git a/client/src/pages/UserProfile.jsx b/client/src/pages/UserProfile.jsx
@@ -4,31 +4,65 @@ import UserTable from '../components/presentational/profile/UserTable';
 import UserEvents from '../components/presentational/profile/UserEvents';
 import UserTeams from '../components/presentational/profile/UserTeams';
 import { UserProvider, UserContext } from '../context/userContext';
+import { Box, Typography, Grid } from '@mui/material';
 
 const UserProfile = (props) => (
   <UserProvider>
-    <div>
-      <div className="profile__header">
-        <h3 className="profile__title">My Profile</h3>
-      </div>
+    <Box>
+      <Box style={{ backgroundColor: '#bad3ff' }}>
+        <Typography
+          variant="h3"
+          component="h3"
+          style={{
+            fontSize: '24px',
+            fontFamily: 'Source Code Pro, monospace',
+            padding: '5px 23.4844px',
+            fontWeight: 800,
+          }}
+        >
+          My Profile
+        </Typography>
+      </Box>
       <UserContext.Consumer>
         {({ user, removeOption }) => (
           <UserTable context={{ user, removeOption }} />
         )}
       </UserContext.Consumer>
-      <div className="profile__header">
-        <h3 className="profile__subtitle">My Upcoming Events</h3>
-      </div>
+      <Box style={{ backgroundColor: '#bad3ff' }}>
+        <Typography
+          variant="h4"
+          component="h4"
+          style={{
+            fontSize: '18.4px',
+            fontFamily: 'Source Code Pro, monospace',
+            padding: '5px 23.4844px',
+            fontWeight: 800,
+          }}
+        >
+          My Upcoming Events
+        </Typography>
+      </Box>
       <UserContext.Consumer>
         {({ events }) => <UserEvents context={{ events }} />}
       </UserContext.Consumer>
-      <div className="profile__header">
-        <h3 className="profile__subtitle">My Teams</h3>
-      </div>
+      <Box style={{ backgroundColor: '#bad3ff' }}>
+        <Typography
+          variant="h4"
+          component="h4"
+          style={{
+            fontSize: '18.4px',
+            fontFamily: 'Source Code Pro, monospace',
+            padding: '5px 23.4844px',
+            fontWeight: 800,
+          }}
+        >
+          My Teams
+        </Typography>
+      </Box>
       <UserContext.Consumer>
         {({ teams }) => <UserTeams context={{ teams }} />}
       </UserContext.Consumer>
-    </div>
+    </Box>
   </UserProvider>
 );
 

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -5050,10 +5050,10 @@ vite-plugin-svgr@^3.2.0:
     "@svgr/core" "^8.1.0"
     "@svgr/plugin-jsx" "^8.1.0"
 
-vite@^4.5.5:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.5.tgz#639b9feca5c0a3bfe3c60cb630ef28bf219d742e"
-  integrity sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==
+vite@^4.5.6:
+  version "4.5.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.6.tgz#48bbd97fe06e8241df2e625b31c581707e10b57d"
+  integrity sha512-ElBNuVvJKslxcfY2gMmae5IjaKGqCYGicCNZ+8R56sAznobeE3pI9ctzI17cBS/6OJh5YuQNMSN4BP4dRjugBg==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"