adding images to pages and updating context issue

packages/frontend/components/Header/GraduateHeaders.tsx

@@ -15,6 +15,8 @@ import {
   Text,
   Box,
   useMediaQuery,
+  Stack,
+  HStack,
 } from "@chakra-ui/react";
 import { MetaInfoWidget } from "../MetaInfo/MetaInfo";
 import { HamburgerIcon, RepeatClockIcon } from "@chakra-ui/icons";
@@ -50,30 +52,46 @@ interface GraduateHeaderProps {
 }
 
 const GraduateHeader: React.FC<GraduateHeaderProps> = ({ rightContent }) => {
+  return (
+    <WhatsNewModalContextProvider>
+      <GraduateHeaderContent rightContent={rightContent} />
+    </WhatsNewModalContextProvider>
+  );
+};
+
+const GraduateHeaderContent: React.FC<GraduateHeaderProps> = ({
+  rightContent,
+}) => {
   const { openModal } = useWhatsNewModal();
 
   return (
-    <WhatsNewModalContextProvider>
-      <HeaderContainer>
-        <Logo />
-        <Flex columnGap="md" alignItems="center">
-          <MetaInfoWidget />
-          <Box onClick={openModal}>
-            <LatestReleaseNotesIcon mx="2px" />
-            Latest Release Notes
-          </Box>
-          <ChakraLink href="https://forms.gle/uXDfLFWvgCiYcqgf9" isExternal>
-            <FeedbackIcon mx="2px" />
-            Feedback
-          </ChakraLink>
-          <ChakraLink href="https://forms.gle/bXgRXyYTXN8wgYy78" isExternal>
-            <BugIcon mx="2px" />
-            Bug/Feature
-          </ChakraLink>
-          {rightContent}
+    <HeaderContainer>
+      <Logo />
+      <Flex columnGap="md" alignItems="center">
+        <MetaInfoWidget />
+        <Flex
+          onClick={() => {
+            openModal();
+          }}
+          cursor="pointer"
+          _hover={{ textDecoration: "underline" }}
+          wrap="wrap"
+          alignItems="center"
+        >
+          <LatestReleaseNotesIcon mx="4px" />
+          <Text>Latest Release Notes</Text>
         </Flex>
-      </HeaderContainer>
-    </WhatsNewModalContextProvider>
+        <ChakraLink href="https://forms.gle/uXDfLFWvgCiYcqgf9" isExternal>
+          <FeedbackIcon mx="2px" />
+          Feedback
+        </ChakraLink>
+        <ChakraLink href="https://forms.gle/bXgRXyYTXN8wgYy78" isExternal>
+          <BugIcon mx="2px" />
+          Bug/Feature
+        </ChakraLink>
+        {rightContent}
+      </Flex>
+    </HeaderContainer>
   );
 };
 

packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   HStack,
   Image,
@@ -10,6 +9,9 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { ModalBodyPagination } from "./ModalBodyPagination";
+import InProgressIndicatorImage from "../../public/in-progress-indicator.png";
+import SearchNEUIntegrationImage from "../../public/searchneu-integration.png";
+import { InfoOutlineIcon } from "@chakra-ui/icons";
 
 interface ModalContentProps {
   onClose: () => void;
@@ -71,7 +73,7 @@ const InProgressIndicatorFeaturePage: React.FC = () => {
           are currently in progress!
         </Text>
       }
-      image="https://placehold.co/600x400"
+      image={InProgressIndicatorImage.src}
     />
   );
 };
@@ -86,12 +88,15 @@ const SearchNEUIntegrationFeaturePage: React.FC = () => {
             Want to know more about a class before adding it to the plan?{" "}
           </Text>
           <Text>
-            Click on the new <span>i</span> button to read more about a class on
-            SearchNEU
+            Click on the new{" "}
+            <span>
+              <InfoOutlineIcon />
+            </span>{" "}
+            button to read more about a class on SearchNEU
           </Text>
         </Stack>
       }
-      image="https://placehold.co/600x400"
+      image={SearchNEUIntegrationImage.src}
     />
   );
 };
@@ -111,7 +116,14 @@ const NewFeaturePage: React.FC<NewFeaturePageProps> = ({
     <HStack pt="8" alignItems="start" gap="8">
       <NewFeatureText title={title} descriptionSection={descriptionSection} />
       <Stack flex="3">
-        <Image src={image} borderRadius="2xl" />
+        <Image
+          src={image}
+          alt={title + " image"}
+          fit={"contain"}
+          maxWidth={400}
+          maxHeight={300}
+          borderRadius="2xl"
+        />
       </Stack>
     </HStack>
   );

packages/frontend/components/WhatsNewModal/WhatsNewModalContextProvider.tsx

@@ -19,7 +19,10 @@ export const WhatsNewModalContextProvider = ({
   children: ReactNode;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const openModal = () => setIsOpen(true);
+  const openModal = () => {
+    console.log("openModal");
+    setIsOpen(true);
+  };
   const cookies = new Cookies();
 
   useEffect(() => {