diff --git a/packages/frontend/components/Help/HelperTooltip.tsx b/packages/frontend/components/Help/HelperTooltip.tsx index 202dbfe1c..27d3bae10 100644 --- a/packages/frontend/components/Help/HelperTooltip.tsx +++ b/packages/frontend/components/Help/HelperTooltip.tsx @@ -8,7 +8,7 @@ interface HelperToolTipProps { export const HelperToolTip: React.FC = ({ label }) => { return ( - + ); diff --git a/packages/frontend/components/Plan/ReqErrorModal.tsx b/packages/frontend/components/Plan/ReqErrorModal.tsx index 96ed299ba..b32d99559 100644 --- a/packages/frontend/components/Plan/ReqErrorModal.tsx +++ b/packages/frontend/components/Plan/ReqErrorModal.tsx @@ -80,7 +80,7 @@ export const ReqErrorModal: React.FC = ({ color="primary.blue.dark.main" > Course Errors - + {getCourseDisplayString(course)}: {course.name} diff --git a/packages/frontend/components/Sidebar/DropdownWarning.tsx b/packages/frontend/components/Sidebar/DropdownWarning.tsx new file mode 100644 index 000000000..7daab0416 --- /dev/null +++ b/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 ( + + + + + + Heads up! + + + + + + 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. + + + + + ); +}; + +export default DropdownWarning; diff --git a/packages/frontend/components/Sidebar/Sidebar.tsx b/packages/frontend/components/Sidebar/Sidebar.tsx index ad21de3f7..fe073444f 100644 --- a/packages/frontend/components/Sidebar/Sidebar.tsx +++ b/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 = memo( const creditsTaken = totalCreditsInSchedule(selectedPlan.schedule); - const sidebarHelperText = ( - - - 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. - - - 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. - - - Finally, if you notice something incorrect in your requirements, - please let us know through the bug report button up top! - - - ); - return ( @@ -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> = ({ creditsToTake, renderCoopBlock, renderBetaMajorBlock, - helperText, children, }) => { return ( @@ -370,7 +340,6 @@ const SidebarContainer: React.FC> = ({ > {title} - {helperText && } {subtitle && ( @@ -378,6 +347,7 @@ const SidebarContainer: React.FC> = ({ )} + {creditsTaken !== undefined && ( = ({ const green = "states.success.main"; const warningLabel = section.warnings && ( - + 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. {section.warnings.map((warning, idx) => ( @@ -109,7 +109,7 @@ const SidebarSection: React.FC = ({ 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). */}