308 clean up front end styling

RAILWAY_DEPLOYMENT.md

@@ -150,5 +150,3 @@ Railway respects the ENTRYPOINT, so both environments run `prismaInitAndRun` on
    ```
 4. **Monitor Railway logs** on deployment to verify seeding behavior
 5. **Keep system badges in sync** between `prodData.ts` and production database
-
-TODO: Review & update doc

backend/gql/resolvers/assignedTaskResolver.ts

@@ -75,8 +75,8 @@ const assignedTaskResolver = {
           end_date: { gte: getStartOfDay(new Date()) },
         },
         orderBy: {
-          start_date: "asc"
-        }
+          start_date: "asc",
+        },
       });
     },
     getAssignedTasksByWeek: async (
@@ -97,8 +97,8 @@ const assignedTaskResolver = {
           end_date: { gte: weekStart },
         },
         orderBy: {
-          start_date: "asc"
-        }
+          start_date: "asc",
+        },
       });
     },
     hasCompletedAllRequiredTasks: async (

backend/gql/resolvers/badgeLevelProgressResolver.ts

@@ -20,10 +20,7 @@ const badgeLevelProgressResolver = {
             },
           },
         },
-        orderBy: [
-          { name: "asc" },
-          { badge_level: { value: "asc" } },
-        ],
+        orderBy: [{ name: "asc" }, { badge_level: { value: "asc" } }],
       });
     },
   },

backend/gql/resolvers/participantResolver.ts

@@ -119,22 +119,8 @@ const participantResolver = {
       const isEmpty = Object.keys(updates).length === 0;
       if (isEmpty) throw new Error("no updates received");
 
-      if (room !== undefined) {
-        if (room < 1 || room > 10) {
-          throw new Error("room must be between 1 and 10");
-        }
-
-        const occupiedRoom = await db.participant.findFirst({
-          where: {
-            room,
-            pid: { not: pid },
-            OR: [
-              { departure: null },
-              { departure: { gt: getEndOfDay(new Date()) } },
-            ],
-          },
-        });
-        if (occupiedRoom) throw new Error("room is occupied");
+      if (room !== undefined && (room < 1 || room > 10)) {
+        throw new Error("room must be between 1 and 10");
       }
 
       return db.participant.update({

backend/gql/resolvers/transactionResolver.ts

@@ -1,6 +1,5 @@
 import { Transaction, TransactionType, DayOfWeek } from "@prisma/client";
 import db from "../../prisma";
-import { orderedDays } from "../../constants/days";
 import { getEndOfWeek, getStartOfWeek, whichDay } from "../../utils/dateUtils";
 
 type GetWeeklyEarningsResponse = Record<DayOfWeek, number>;

backend/prisma/seed/seed.ts

@@ -1,5 +1,5 @@
 import { createSeedClient } from "@snaplet/seed";
-import { Priority, TaskType } from "@prisma/client";
+import { TaskType } from "@prisma/client";
 import { badgeLevels, systemBadges, tasks } from "./initialData";
 import db from "../index";
 import * as random from "./random";

backend/utils/dateUtils.ts

@@ -7,8 +7,8 @@ import {
   startOfWeek,
 } from "date-fns";
 import { toZonedTime, fromZonedTime } from "date-fns-tz";
-import { orderedDays } from "../constants/days";
 import { DayOfWeek } from "@prisma/client";
+import { orderedDays } from "../constants/days";
 
 const timeZone = "America/Toronto";
 

backend/utils/taskUtils.ts

@@ -77,14 +77,20 @@ function buildStartAndEndDates(task: Task): StartAndEndDates[] {
   return startAndEndDates;
 }
 
-export async function assignTasksToParticipants(tasks: Task[], pids?: number[]) {
+export async function assignTasksToParticipants(
+  tasks: Task[],
+  pids?: number[]
+) {
   let participantPids: number[];
   if (pids) {
     participantPids = pids;
   } else {
     const participants = await db.participant.findMany({
       where: {
-        OR: [{ departure: null }, { departure: { gt: getEndOfDay(new Date()) } }],
+        OR: [
+          { departure: null },
+          { departure: { gt: getEndOfDay(new Date()) } },
+        ],
       },
       select: { pid: true },
     });

frontend/src/App.tsx

@@ -35,7 +35,7 @@ import NotFoundScreen from "./ui/screens/NotFoundScreen";
 import UI from "./ui/UI";
 import colors from "./theme/colors";
 import { Text, textStyles } from "./theme/typography";
-import { Progress } from "./theme/progress";
+import { Progress, Checkbox, Alert } from "./theme/components";
 
 function initApolloClient() {
   const backendUrl =
@@ -80,9 +80,11 @@ const App = (): React.ReactElement => {
   const theme = extendTheme({
     colors,
     textStyles,
-    components: { 
+    components: {
       Text,
       Progress,
+      Checkbox,
+      Alert,
     },
   });
   const apolloClient = initApolloClient();

frontend/src/admin/AdminContext.tsx

@@ -1,4 +1,4 @@
 import React, { createContext, ReactNode, useEffect, useState } from "react";
 
 type AdminContextType = {
   role: string;
@@ -20,7 +20,9 @@
 
 export const AdminProvider: React.FC<AdminProviderProps> = ({ children }) => {
   const [role, setRole] = useState<string>("");
-  const [roomToParticipant, setRoomToParticipant] = useState<Record<number, number>>({});
+  const [roomToParticipant, setRoomToParticipant] = useState<
+    Record<number, number>
+  >({});
 
   return (
     <AdminContext.Provider

frontend/src/admin/AdminMenu.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Tabs, TabList, Tab, Box, Flex, Text } from "@chakra-ui/react";
 import * as ROUTES from "../constants/routes";
 import PopupContainer from "../ui/containers/PopupContainer";
 import BlackOutlineButton from "../ui/buttons/BlackOutlineButton";
+import { AdminContext } from "./AdminContext";
+import { ADMIN } from "../constants/roles";
 
 type SideBarTabProps = {
   label: string;
@@ -21,12 +23,12 @@ function SideBarTab({ label, handleClick }: SideBarTabProps) {
       fontWeight={500}
       fontSize="16px"
       fontFamily="Nunito"
-      color="#000000"
+      color="text.dark"
       onClick={handleClick}
       _selected={{
         fontWeight: 700,
-        color: "neutral.0",
-        bg: "secondary.700",
+        color: "white",
+        bg: "brand.secondaryDark",
       }}
     >
       {label}
@@ -40,6 +42,7 @@ type SignOutPopUpProps = {
 
 function SignOutPopUp({ cancel }: SignOutPopUpProps) {
   const navigate = useNavigate();
+
   const handleSignOut = () => {
     localStorage.removeItem("token");
     return navigate(ROUTES.ADMIN_LOGIN_PAGE);
@@ -52,7 +55,7 @@ function SignOutPopUp({ cancel }: SignOutPopUpProps) {
       submit_action={handleSignOut}
       cancel_action={cancel}
     >
-      <Text textStyle="web.b2" color="text.light.secondary">
+      <Text textStyle="b1" color="text.grey">
         Are you sure you want to sign out?
       </Text>
     </PopupContainer>
@@ -62,6 +65,7 @@ function SignOutPopUp({ cancel }: SignOutPopUpProps) {
 export default function AdminMenu() {
   const navigate = useNavigate();
   const [signOut, setSignOut] = useState(false);
+  const { role } = useContext(AdminContext);
 
   const pages = [
     { label: "Home", route: ROUTES.ADMIN_HOME_PAGE },
@@ -70,7 +74,10 @@ export default function AdminMenu() {
     { label: "Participants", route: ROUTES.ADMIN_PARTICIPANTS_PAGE },
     { label: "Task Library", route: ROUTES.ADMIN_TASKS_PAGE },
     { label: "Badge Library", route: ROUTES.ADMIN_BADGES_PAGE },
-    { label: "Reports", route: ROUTES.ADMIN_REPORTS_PAGE },
+
+    ...(role === ADMIN
+      ? [{ label: "Reports", route: ROUTES.ADMIN_REPORTS_PAGE }]
+      : []),
   ];
 
   const currentPage = pages.findIndex(
@@ -85,8 +92,8 @@ export default function AdminMenu() {
       top={0}
       left={0}
       borderRight="1px"
-      borderRightColor="neutral.300"
-      bg="neutral.0"
+      borderRightColor="background.border"
+      bg="background.admin"
       padding="25px 20px"
       display="flex"
       flexDirection="column"
@@ -118,7 +125,7 @@ export default function AdminMenu() {
         label="Sign Out"
         action={() => setSignOut(true)}
         is_active={signOut}
-        text_color="danger.900"
+        text_color="indicate.brightRed"
       />
 
       {signOut && <SignOutPopUp cancel={() => setSignOut(false)} />}

frontend/src/admin/AdminRoute.tsx

@@ -11,6 +11,7 @@
 import ErrorScreen from "../ui/screens/ErrorScreen";
 import AdminMenu from "./AdminMenu";
 import { Participant } from "../types/models";
+import useNotification from "../hooks/useNotification";
 
 type AdminRouteProps = {
   children: React.ReactElement;
@@ -64,10 +65,10 @@
           adminContext.setRole(role);
         }
         setPopulatingContext(false);
-      }
+      };
       populateContext();
     }
   }, [authorizing, authorized]);
 
   if (!authorizing && !authorized) {
     return <Navigate to={ADMIN_LOGIN_PAGE} replace />;
@@ -103,9 +104,9 @@
             left="0px"
             width="100%"
             height="55px"
-            bg="primary.100"
+            bg="brand.primaryLight"
             borderBottom="1px solid"
-            borderColor="neutral.300"
+            borderColor="background.border"
             zIndex={5}
           />
           <Flex

frontend/src/admin/pages/announcements/Main.tsx

@@ -1,4 +1,4 @@
 import { Flex, Text, VStack } from "@chakra-ui/react";
 import React, { useEffect, useState, useContext } from "react";
 import { useLazyQuery } from "@apollo/client";
 import AnnouncementCard from "./components/AnnouncementCard";
@@ -12,6 +12,7 @@
 import UnderlineButton from "../../../ui/buttons/UnderlineButton";
 import { getRoomString } from "../../../helpers/stringUtils";
 import { formatDateV3 } from "../../../helpers/formatDateTime";
+import { Plus } from "../../../ui/icons/ActionIcons";
 
 export default function AdminAnnouncementsPage() {
   const [create, setCreate] = useState(false);
@@ -51,7 +52,7 @@
     getAllAnnouncements({
       variables: { pids: selectedParticipantIds },
     });
   }, [selectedButtons, roomToParticipant]);
 
   const handleButtonClick = (id: number) => {
     setSelectedButtons((prevSelected: any) => {
@@ -74,34 +75,35 @@
     return <ErrorScreen message={getAllAnnouncementsError.message} />;
 
   return (
-    <Flex width="100%" flexDir="column" gap="15px">
+    <Flex width="100%" flexDir="column" height="fit-content" gap="15px">
       <Flex
         width="100%"
         height="fit-content"
         alignItems="center"
         justifyContent="space-between"
       >
-        <Flex alignItems="center" gap="15px">
-          <Text textStyle="web.h2" color="primary.700" pl="3px">
+        <Flex alignItems="baseline" gap="15px">
+          <Text textStyle="h2" color="brand.primaryDark" pl="3px">
             Announcements
           </Text>
-          <Text textStyle="web.b3" color="text.light.secondary" marginTop="7px">
+          <Text textStyle="b2" color="text.light">
             Expires in 7 days
           </Text>
         </Flex>
 
         <OrangeButton
+          icon={<Plus />}
           label="Create Announcement"
           action={() => setCreate(true)}
           is_active={create}
         />
       </Flex>
 
       <Flex alignItems="center" gap="15px">
-        <Text textStyle="web.s1" color="#000000" fontWeight={600}>
+        <Text textStyle="s1" color="text.medium" fontWeight={600}>
           Filters:
         </Text>
-        <Flex alignItems="center" gap="5px">
+        <Flex alignItems="center" gap="4px">
           {selectedButtons.map((isSelected: boolean, index: number) => (
             <GreenOutlineButton
               key={index}
@@ -118,11 +120,7 @@
         />
       </Flex>
 
-      <Text textStyle="web.b3" color="text.light.secondary">
-        Most Recent
-      </Text>
-
-      <VStack spacing={4} align="stretch" paddingBottom="20px">
+      <Flex flexDir="column" gap="8px" mt="6px">
         {getAllAnnouncementsData?.getAnnouncementsSentToParticipants.map(
           (announcement: any) => (
             <AnnouncementCard
@@ -136,7 +134,7 @@
             />
           )
         )}
-      </VStack>
+      </Flex>
 
       {create && (
         <CreateAnnouncementModal