Add remaining warnings

packages/frontend/components/Help/HelperTooltip.tsx

@@ -8,7 +8,7 @@ interface HelperToolTipProps {
 
 export const HelperToolTip: React.FC<HelperToolTipProps> = ({ label }) => {
   return (
-    <GraduateToolTip label={label} placement="top">
+    <GraduateToolTip label={label} placement="top" p="sm">
       <QuestionOutlineIcon color="primary.blue.dark.main" />
     </GraduateToolTip>
   );

packages/frontend/components/Plan/ReqErrorModal.tsx

@@ -80,7 +80,7 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
               color="primary.blue.dark.main"
             >
               <Text>Course Errors</Text>
-              <HelperToolTip label="Based on your catalog year, it is possible that these requirment errors are not valid. We are continuously working towards making these as accurate as possible for your plan." />
+              <HelperToolTip label="Some of these requirement errors may not be valid. We are continuously working towards making these as accurate as possible!" />
             </Flex>
             <Text fontWeight="normal" fontSize="sm">
               {getCourseDisplayString(course)}: {course.name}

packages/frontend/components/Sidebar/DropdownWarning.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { InfoIcon } from "@chakra-ui/icons";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+  Text,
+} from "@chakra-ui/react";
+
+const DropdownWarning = () => {
+  return (
+    <Accordion pb="sm" allowToggle>
+      <AccordionItem
+        borderRadius="lg"
+        backgroundColor="informationBadge.back"
+        border="1px #5F6CF6 solid"
+      >
+        <AccordionButton>
+          <InfoIcon mr="xs" color="informationBadge.main" />
+          <Text fontWeight="semibold" textAlign="left" fontSize="md" flex="1">
+            Heads up!
+          </Text>
+          <AccordionIcon color="informationBadge.main" />
+        </AccordionButton>
+        <AccordionPanel>
+          <Text fontSize="sm">
+            This is our representation of the degree audit. It may not be fully
+            accurate. Kindly always reference the actual degree audit for
+            validating your graduation eligibility. We are actively working to
+            improve this.
+          </Text>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default DropdownWarning;

packages/frontend/components/Sidebar/Sidebar.tsx

@@ -5,14 +5,7 @@ import {
   PlanModel,
   ScheduleCourse2,
 } from "@graduate/common";
-import {
-  memo,
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { memo, PropsWithChildren, useEffect, useRef, useState } from "react";
 import { DraggableScheduleCourse } from "../ScheduleCourse";
 import SidebarSection from "./SidebarSection";
 import {
@@ -36,6 +29,7 @@ import {
 import { useFetchCourses, useMajor } from "../../hooks";
 import { HelperToolTip } from "../Help";
 import NUPathSection from "./NUPathSection";
+import DropdownWarning from "./DropdownWarning";
 
 export enum SidebarValidationStatus {
   Loading = "Loading",
@@ -198,34 +192,12 @@ const Sidebar: React.FC<SidebarProps> = memo(
 
     const creditsTaken = totalCreditsInSchedule(selectedPlan.schedule);
 
-    const sidebarHelperText = (
-      <Stack py="xs">
-        <Text>
-          The sidebar is our version of the degree audit. We attempt to display
-          the same requirements you see in the course catalog and validate your
-          plan against them.
-        </Text>
-        <Text>
-          Presently, we try to to satisfy as many requirements as possible with
-          your plan. Hence, while you are filling your plan in, some of your
-          courses may temporarily satisfy a different requirement than intended.
-          We apologize for any confusion and are actively working on improving
-          this.
-        </Text>
-        <Text>
-          Finally, if you notice something incorrect in your requirements,
-          please let us know through the bug report button up top!
-        </Text>
-      </Stack>
-    );
-
     return (
       <SidebarContainer
         title={major.name}
         subtitle={selectedPlan.concentration}
         creditsTaken={creditsTaken}
         creditsToTake={major.totalCreditsRequired}
-        helperText={sidebarHelperText}
         renderCoopBlock
         renderBetaMajorBlock={major.metadata?.verified !== true}
       >
@@ -318,7 +290,6 @@ interface SidebarContainerProps {
   creditsToTake?: number;
   renderCoopBlock?: boolean;
   renderBetaMajorBlock?: boolean;
-  helperText?: ReactNode;
 }
 
 export const NoPlanSidebar: React.FC = () => {
@@ -332,7 +303,6 @@ const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
   creditsToTake,
   renderCoopBlock,
   renderBetaMajorBlock,
-  helperText,
   children,
 }) => {
   return (
@@ -370,14 +340,14 @@ const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
             >
               {title}
             </Heading>
-            {helperText && <HelperToolTip label={helperText} />}
           </Flex>
           {subtitle && (
             <Text fontSize="sm" color="primary.blue.dark.main">
               {subtitle}
             </Text>
           )}
         </Box>
+        <DropdownWarning />
         {creditsTaken !== undefined && (
           <Flex mb="sm" alignItems="baseline" columnGap="xs">
             <Text

packages/frontend/components/Sidebar/SidebarSection.tsx

@@ -33,10 +33,10 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
   const green = "states.success.main";
 
   const warningLabel = section.warnings && (
-    <Stack py="xs">
+    <Stack p="sm">
       <Text>
         Unfortunately, we currently have no way of verifying the following.
-        Please ensure that you have a closer look yourself.
+        Please take a closer look yourself.
       </Text>
       {section.warnings.map((warning, idx) => (
         <Text key={idx}>
@@ -109,7 +109,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
             mt="4xs"
             p="xs"
           >
-            {/* 
+            {/*
               The following three icons appear and disappear based on opacity to allow for transitions (if they're conditionally rendered, then transitions can't occur).
             */}
             <CheckIcon

packages/frontend/utils/constants.ts

@@ -7,7 +7,7 @@ export const WEAK_PASSWORD_MSG =
 export const SEARCH_NEU_FETCH_COURSE_ERROR_MSG =
   "Sorry, we can't load details for this course right now 😞. We rely on SearchNEU for our course details, and there may be an ongoing issue on their end. We recommend refreshing the page and trying again soon.";
 export const BETA_MAJOR_TOOLTIP_MSG =
-  "Requirements for beta majors have not been validated and therefore may be inconsistent with your degree audit";
+  "Requirements for beta majors have not been validated and therefore may be inconsistent with your degree audit.";
 
 export const defaultGuestStudent: GetStudentResponse = {
   uuid: undefined,

packages/frontend/utils/theme/index.ts

@@ -72,6 +72,10 @@ const colors = {
       main: "#fa9f47",
     },
   },
+  informationBadge: {
+    main: "#5F6CF6",
+    back: "#E0EBFC",
+  },
 };
 
 const fonts = {