From 830818b006a5a1943aea71d7957a022f84f9f410 Mon Sep 17 00:00:00 2001
From: aldenparoni <aparoni@hawaii.edu>
Date: Mon, 29 Apr 2024 10:39:00 -1000
Subject: [PATCH 1/4] Revert "Merge branch 'main' of
 https://github.com/Ube-Dev/Voluntree"

This reverts commit 6114b173ed75f00a46852f8254791cdeab84b363, reversing
changes made to 45136b551cfb447062a9b60e3e4cc9d3e566217a.
---
 app/tests/tests.testcafe.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/tests/tests.testcafe.js b/app/tests/tests.testcafe.js
index 741ac2b..344487b 100644
--- a/app/tests/tests.testcafe.js
+++ b/app/tests/tests.testcafe.js
@@ -95,7 +95,7 @@ test('Test that User Home page works', async () => {
   await homePage.isDisplayed();
 });
 
-test.only('Test that My Event page works', async () => {
+test('Test that My Event page works', async () => {
   await navBar.gotoSignInPage();
   await signInPage.signin(credentials.username, credentials.password);
   await navBar.isLoggedIn(credentials.username);

From 968c3fed62cb21df5c0b9bc3827ac1501ab07a27 Mon Sep 17 00:00:00 2001
From: aldenparoni <aparoni@hawaii.edu>
Date: Mon, 29 Apr 2024 11:21:47 -1000
Subject: [PATCH 2/4] Changes based on review feedback

---
 app/imports/ui/components/AdminHome.jsx              | 3 ++-
 app/imports/ui/pages/AdminOrganizationModeration.jsx | 6 +++---
 app/imports/ui/utilities/ComponentIDs.js             | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/imports/ui/components/AdminHome.jsx b/app/imports/ui/components/AdminHome.jsx
index 5e96ef9..1769ec6 100644
--- a/app/imports/ui/components/AdminHome.jsx
+++ b/app/imports/ui/components/AdminHome.jsx
@@ -6,6 +6,7 @@ import AdminHoursStats from './AdminHoursStats';
 import AdminSiteStats from './AdminSiteStats';
 import AdminRecentEvents from './AdminRecentEvents';
 
+/** Main component in home page upon logging in as admin. */
 const AdminHome = () => (
   <Container className="py-3" id={COMPONENT_IDS.ADMIN_HOME_PAGE}>
     <Row className="text-center py-3">
@@ -28,7 +29,7 @@ const AdminHome = () => (
                 <Button variant="outline-dark" href="/user-moderation" className="rounded-0 management-btn" id={COMPONENT_IDS.ADMIN_HOME_USER_MODERATION}>
                   Users
                 </Button>
-                <Button variant="outline-dark" className="rounded-0 management-btn">
+                <Button variant="outline-dark" className="rounded-0 management-btn" id={COMPONENT_IDS.ADMIN_HOME_REVIEW_MODERATION}>
                   Reviews
                 </Button>
               </Row>
diff --git a/app/imports/ui/pages/AdminOrganizationModeration.jsx b/app/imports/ui/pages/AdminOrganizationModeration.jsx
index ffa6184..3b23808 100644
--- a/app/imports/ui/pages/AdminOrganizationModeration.jsx
+++ b/app/imports/ui/pages/AdminOrganizationModeration.jsx
@@ -12,6 +12,7 @@ import { removeOrganization } from '../../startup/both/Methods';
 import { Organization } from '../../api/organization/OrganizationCollection';
 import '../css/AdminModeration.css';
 
+/** This admin-only page moderates organizations. Able to view, edit, and delete organizations. */
 const AdminOrganizationModeration = () => {
   const { ready, organization } = useTracker(() => {
     const subscription = Organization.subscribeOrganization(); // Subscribe to organization publication for the current user
@@ -77,7 +78,7 @@ const AdminOrganizationModeration = () => {
             <Col className="col-7">
               <Form.Group className="search-bar">
                 <Form.Control
-                  id={COMPONENT_IDS.ORGANIZATION_SEARCHBAR}
+                  id={COMPONENT_IDS.ADMIN_ORGANIZATION_MODERATION_SEARCH_BAR}
                   type="text"
                   placeholder="Search for organizations..."
                   className="align-content-center"
@@ -105,8 +106,7 @@ const AdminOrganizationModeration = () => {
                   <tbody>
                     {displayedOrganizations.map((org) => (
                       <tr key={org._id}>
-                        {/* eslint-disable-next-line */}
-                        <td><Image src={org.image} className="org-mod-image" /></td>
+                        <td><Image src={org.image} className="org-mod-image" alt="Organization-submitted image" /></td>
                         <td>{org.name}</td>
                         <td>{org.type}</td>
                         <td>{org.contactEmail}</td>
diff --git a/app/imports/ui/utilities/ComponentIDs.js b/app/imports/ui/utilities/ComponentIDs.js
index 16c2b42..fb85eff 100644
--- a/app/imports/ui/utilities/ComponentIDs.js
+++ b/app/imports/ui/utilities/ComponentIDs.js
@@ -153,6 +153,8 @@ export const COMPONENT_IDS = {
   ADMIN_HOME_EVENT_MODERATION: 'admin-home-event-moderation',
   ADMIN_HOME_ORGANIZATION_MODERATION: 'admin-home-organization-moderation',
   ADMIN_HOME_USER_MODERATION: 'admin-home-user-moderation',
+  ADMIN_HOME_REVIEW_MODERATION: 'admin-home-review-moderation',
+  ADMIN_ORGANIZATION_MODERATION_SEARCH_BAR: 'admin-organization-moderation-search-bar',
 
   TOS_MODAL_OPEN: 'tos-modal-open',
   TOS_MODAL_ACCEPT: 'tos-modal-accept',

From f5be35cd0a520f8308c0c18ce772f4c4d401ef2c Mon Sep 17 00:00:00 2001
From: thomasarivera <thomas5info@gmail.com>
Date: Mon, 29 Apr 2024 11:35:06 -1000
Subject: [PATCH 3/4] Updated UserHome Styling

---
 .../ui/components/UpcomingEventCard.jsx       | 70 +++++++++----------
 app/imports/ui/components/UserCalendar.jsx    | 27 ++++---
 app/imports/ui/components/UserDashboard.jsx   | 58 ++++++++-------
 app/imports/ui/components/UserHome.jsx        | 18 ++---
 app/imports/ui/css/Calendar.css               | 15 ++++
 app/imports/ui/css/UserHome.css               |  2 -
 6 files changed, 96 insertions(+), 94 deletions(-)
 create mode 100644 app/imports/ui/css/Calendar.css

diff --git a/app/imports/ui/components/UpcomingEventCard.jsx b/app/imports/ui/components/UpcomingEventCard.jsx
index 2144a50..0fe7f3d 100644
--- a/app/imports/ui/components/UpcomingEventCard.jsx
+++ b/app/imports/ui/components/UpcomingEventCard.jsx
@@ -20,42 +20,40 @@ const UpcomingEventCard = () => {
     };
   });
 
-  return (
-    ready ? (
-      <Card className="rounded-4 my-2">
-        <Card.Header>
-          <h2>Upcoming Events</h2>
-        </Card.Header>
-        <Card.Body>
-          {userProfile && userProfile.onGoingEvents && userProfile.onGoingEvents.length > 0 ? (
-            userProfile.onGoingEvents.map((eventId) => {
-              const event = Events.findOne({ _id: eventId });
-              return event ? (
-                <Container>
-                  <Row key={eventId} className="event-border">
-                    <Col xs={4} className="event-image">
-                      <Image src={event.image} fluid className="rounded" />
-                    </Col>
-                    <Col xs={8} className="d-flex flex-column">
-                      <p className="event-date m-0">{event.startTime.toLocaleDateString()} | {event.startTime.toLocaleTimeString()}</p>
-                      <a className="event-title" href={`/view_event/${eventId}`}>{event.title}</a>
-                    </Col>
-                  </Row>
-                </Container>
-              ) : (<LoadingSpinner />);
-            })
-          ) : (
-            <p className="py-4 text-center">Hmmm... No Events...</p>
-          )}
-        </Card.Body>
-        <Card.Footer className="d-flex justify-content-end p-2">
-          <Button id={COMPONENT_IDS.UPCOMING_EVENT_CARD_FIND_EVENTS} className="justify-content-end commit-btn" href="/Events">Find Events
-          </Button>
-        </Card.Footer>
-      </Card>
-    ) : (
-      <LoadingSpinner />
-    )
+  return ready ? (
+    <Card className="rounded-4 my-2">
+      <Card.Header>
+        <h2>Upcoming Events</h2>
+      </Card.Header>
+      <Card.Body>
+        {userProfile && userProfile.onGoingEvents && userProfile.onGoingEvents.length > 0 ? (
+          userProfile.onGoingEvents.map((eventId) => {
+            const event = Events.findOne({ _id: eventId });
+            return event ? (
+              <Container>
+                <Row key={eventId} className="event-border">
+                  <Col xs={4} className="event-image">
+                    <Image src={event.image} fluid className="rounded" />
+                  </Col>
+                  <Col xs={8} className="d-flex flex-column">
+                    <p className="event-date m-0">{event.startTime.toLocaleDateString()} | {event.startTime.toLocaleTimeString()}</p>
+                    <a className="event-title" href={`/view_event/${eventId}`}>{event.title}</a>
+                  </Col>
+                </Row>
+              </Container>
+            ) : (<LoadingSpinner />);
+          })
+        ) : (
+          <p className="py-4 text-center">Hmmm... No Events...</p>
+        )}
+      </Card.Body>
+      <Card.Footer className="d-flex justify-content-end p-2">
+        <Button id={COMPONENT_IDS.UPCOMING_EVENT_CARD_FIND_EVENTS} className="justify-content-end commit-btn" href="/Events">Find Events
+        </Button>
+      </Card.Footer>
+    </Card>
+  ) : (
+    <LoadingSpinner />
   );
 };
 
diff --git a/app/imports/ui/components/UserCalendar.jsx b/app/imports/ui/components/UserCalendar.jsx
index af9a9d0..dcf50c4 100644
--- a/app/imports/ui/components/UserCalendar.jsx
+++ b/app/imports/ui/components/UserCalendar.jsx
@@ -5,6 +5,7 @@ import moment from 'moment';
 import { Card } from 'react-bootstrap';
 import { useTracker } from 'meteor/react-meteor-data';
 import { Meteor } from 'meteor/meteor';
+import '../css/Calendar.css';
 import { UserProfiles } from '../../api/user/UserProfileCollection';
 import { Events, eventPublications } from '../../api/event/EventCollection';
 import LoadingSpinner from './LoadingSpinner';
@@ -73,20 +74,18 @@ const UserCalendar = () => {
   };
 
   return (
-    <Card style={{ width: 'calc(100% - 20px)', height: 'calc(100% - 20px)', padding: '10px' }}>
-      <div style={{ width: '100%', height: '100%', backgroundColor: 'white', color: 'black' }}>
-        <Calendar
-          localizer={localize}
-          events={getCommittedEvents()}
-          startAccessor="startTime"
-          endAccessor="endTime"
-          selectable
-          onSelectEvent={handleEventSelect}
-          components={{ toolbar: Toolbar }}
-          eventPropGetter={() => ({ style: { backgroundColor: '#03A696' } })}
-          style={{ color: 'black', width: 'calc(100% - 20px)', height: 'calc(100% - 20px)', margin: '10px' }}
-        />
-      </div>
+    <Card className="calendar-card rounded-4">
+      <Calendar
+        localizer={localize}
+        events={getCommittedEvents()}
+        startAccessor="startTime"
+        endAccessor="endTime"
+        selectable
+        onSelectEvent={handleEventSelect}
+        components={{ toolbar: Toolbar }}
+        eventPropGetter={() => ({ style: { backgroundColor: '#03A696' } })}
+        className="rounded-4 p-3"
+      />
     </Card>
   );
 };
diff --git a/app/imports/ui/components/UserDashboard.jsx b/app/imports/ui/components/UserDashboard.jsx
index b0fa967..e3234e8 100644
--- a/app/imports/ui/components/UserDashboard.jsx
+++ b/app/imports/ui/components/UserDashboard.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Row, Col, Card, Image, Button } from 'react-bootstrap';
+import { Row, Col, Card, Image, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { useTracker } from 'meteor/react-meteor-data';
 import { UserProfiles } from '../../api/user/UserProfileCollection';
@@ -21,35 +21,33 @@ const UserDashboard = () => {
   });
 
   return ready ? (
-    <Container>
-      <Card>
-        <Card.Header>
-          <h2>Overview</h2>
-        </Card.Header>
-        <Card.Body className="d-flex flex-column align-items-start">
-          <Row>
-            <Col>
-              <Image src={userProfile?.image || '/path/to/default/profile/image.png'} alt="Profile Image" id="profile-img" />
-            </Col>
-            <Col>
-              <h4>{userProfile.firstName} {userProfile.lastName}</h4>
-              <p>Hours Recorded: {userProfile.totalHours}</p>
-            </Col>
-          </Row>
-        </Card.Body>
-        <Card.Footer className="p-2">
-          <Row>
-            <Col className="text-start">
-              <Button id={COMPONENT_IDS.USER_DASHBOARD_VIEW_PROFILE} className="mx-1" href="/profile">View Profile</Button>
-              <Button id={COMPONENT_IDS.USER_DASHBOARD_EDIT_PROFILE} className="mx-1" href={`/edit-user-profile/${userProfile?._id}`}>Edit</Button>
-            </Col>
-            <Col className="text-end">
-              <Button id={COMPONENT_IDS.USER_DASHBOARD_VIEW_QR_CODE} className="mx-1" href={`/qr-code/${userProfile?._id}`}>Log Hours</Button>
-            </Col>
-          </Row>
-        </Card.Footer>
-      </Card>
-    </Container>
+    <Card className="rounded-4">
+      <Card.Header>
+        <h2>Overview</h2>
+      </Card.Header>
+      <Card.Body className="d-flex flex-column align-items-start">
+        <Row>
+          <Col>
+            <Image src={userProfile?.image || '/path/to/default/profile/image.png'} alt="Profile Image" id="profile-img" />
+          </Col>
+          <Col>
+            <h4>{userProfile.firstName} {userProfile.lastName}</h4>
+            <p>Hours Recorded: {userProfile.totalHours}</p>
+          </Col>
+        </Row>
+      </Card.Body>
+      <Card.Footer className="p-2">
+        <Row>
+          <Col className="text-start">
+            <Button id={COMPONENT_IDS.USER_DASHBOARD_VIEW_PROFILE} className="mx-1" href="/profile">View Profile</Button>
+            <Button id={COMPONENT_IDS.USER_DASHBOARD_EDIT_PROFILE} className="mx-1" href={`/edit-user-profile/${userProfile?._id}`}>Edit</Button>
+          </Col>
+          <Col className="text-end">
+            <Button id={COMPONENT_IDS.USER_DASHBOARD_VIEW_QR_CODE} className="mx-1" href={`/qr-code/${userProfile?._id}`}>Log Hours</Button>
+          </Col>
+        </Row>
+      </Card.Footer>
+    </Card>
   ) : (
     <LoadingSpinner />
   );
diff --git a/app/imports/ui/components/UserHome.jsx b/app/imports/ui/components/UserHome.jsx
index 9bfbd27..79a52ad 100644
--- a/app/imports/ui/components/UserHome.jsx
+++ b/app/imports/ui/components/UserHome.jsx
@@ -7,20 +7,14 @@ import UpcomingEventCard from './UpcomingEventCard';
 import UserCalendar from './UserCalendar';
 
 const UserHome = () => (
-  <Container id={PAGE_IDS.HOME_PAGE} className="py-3">
-    <Card className="user-card-background py-4 px-1 rounded-4">
-      <Row>
-        <Col className="d-flex flex-column col-md-5 col-12">
+  <Container id={PAGE_IDS.HOME_PAGE} className="py-5">
+    <Card className="user-card-background p-3 rounded-4">
+      <Row className="align-content-center">
+        <Col xs={12} md={5}>
           <UserDashboard />
-          <Container className="d-flex flex-column h-100">
-            <Row className="flex-grow-1">
-              <Col className="d-flex flex-column">
-                <UpcomingEventCard />
-              </Col>
-            </Row>
-          </Container>
+          <UpcomingEventCard />
         </Col>
-        <Col className="d-flex flex-column col-md-7 col-12 mt-3 mt-md-0">
+        <Col xs={12} md={7}>
           <UserCalendar />
         </Col>
       </Row>
diff --git a/app/imports/ui/css/Calendar.css b/app/imports/ui/css/Calendar.css
new file mode 100644
index 0000000..21364c8
--- /dev/null
+++ b/app/imports/ui/css/Calendar.css
@@ -0,0 +1,15 @@
+/* Define styles for larger screens */
+@media only screen and (min-width: 768px) {
+  .calendar-card {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* Define styles for smaller screens */
+@media only screen and (max-width: 390px) {
+  .calendar-card {
+    width: 79vw; /* 90% of viewport width */
+    height: 79vw; /* 90% of viewport width */
+  }
+}
\ No newline at end of file
diff --git a/app/imports/ui/css/UserHome.css b/app/imports/ui/css/UserHome.css
index 8a7b6c6..a9babcb 100644
--- a/app/imports/ui/css/UserHome.css
+++ b/app/imports/ui/css/UserHome.css
@@ -1,5 +1,3 @@
 .user-card-background {
   background-color: var(--color2) !important;
-  margin: 0 -35px 0 -35px;
-  color: white !important;
 }
\ No newline at end of file

From 3a6fec825168c342dd4710d7b1cd9ef470448eaf Mon Sep 17 00:00:00 2001
From: thomasarivera <thomas5info@gmail.com>
Date: Mon, 29 Apr 2024 11:38:01 -1000
Subject: [PATCH 4/4] Updated AdminHome

---
 app/imports/ui/components/AdminHome.jsx         | 5 +----
 app/imports/ui/components/AdminRecentEvents.jsx | 2 +-
 app/imports/ui/css/Calendar.css                 | 8 ++++----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/imports/ui/components/AdminHome.jsx b/app/imports/ui/components/AdminHome.jsx
index 5e96ef9..46f2c80 100644
--- a/app/imports/ui/components/AdminHome.jsx
+++ b/app/imports/ui/components/AdminHome.jsx
@@ -7,10 +7,7 @@ import AdminSiteStats from './AdminSiteStats';
 import AdminRecentEvents from './AdminRecentEvents';
 
 const AdminHome = () => (
-  <Container className="py-3" id={COMPONENT_IDS.ADMIN_HOME_PAGE}>
-    <Row className="text-center py-3">
-      <h1>Admin View</h1>
-    </Row>
+  <Container className="py-5" id={COMPONENT_IDS.ADMIN_HOME_PAGE}>
     <Card className="admin-card-background rounded-4">
       <Row className="p-3">
         <Col className="col-4">
diff --git a/app/imports/ui/components/AdminRecentEvents.jsx b/app/imports/ui/components/AdminRecentEvents.jsx
index 01dee95..6fa6d6f 100644
--- a/app/imports/ui/components/AdminRecentEvents.jsx
+++ b/app/imports/ui/components/AdminRecentEvents.jsx
@@ -21,7 +21,7 @@ const AdminRecentEvents = () => {
       <Row className="text-center">
         <h2>Recent Events</h2>
       </Row>
-      <Row className="p-3">
+      <Row className="px-3">
         {recentEvents.map((item) => (
           <Col key={item._id} md={4} className="py-2">
             <EventCard event={item} />
diff --git a/app/imports/ui/css/Calendar.css b/app/imports/ui/css/Calendar.css
index 21364c8..db5b8da 100644
--- a/app/imports/ui/css/Calendar.css
+++ b/app/imports/ui/css/Calendar.css
@@ -1,15 +1,15 @@
 /* Define styles for larger screens */
 @media only screen and (min-width: 768px) {
   .calendar-card {
-    width: 100%;
-    height: 100%;
+    width: 100% !important;
+    height: 100% !important;
   }
 }
 
 /* Define styles for smaller screens */
 @media only screen and (max-width: 390px) {
   .calendar-card {
-    width: 79vw; /* 90% of viewport width */
-    height: 79vw; /* 90% of viewport width */
+    width: 79vw !important; /* 90% of viewport width */
+    height: 79vw !important; /* 90% of viewport width */
   }
 }
\ No newline at end of file