addition of info blurbs

src/components/Header.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import "../styles/header.scss"
-// import domainLogo from "../assets/domain_logo.svg"
+import domainLogo from "../assets/domain_logo.svg"
 import inLineLogo from "../assets/InLineLogoRed.png"
 import { useNavigate } from 'react-router-dom';
 

src/components/InfoModal.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import "../styles/results.scss";
+import "../styles/infoModal.scss";
 
 function InfoModal(props) {
   const [loading, setLoading] = useState(false);
-  
+
   console.log(props)
 
   // useState(() => {
@@ -13,20 +13,25 @@ function InfoModal(props) {
   //   }, 700);
   // }, [loading]);
 
-
-
-
   return (
     <>
       {props.isModalVisible &&
         <div className="resultsModal">
           <div className="headerModal">
-            <p> {props.text}</p>
+            <h1> {props.heading}</h1>
+            <div className='infoTextBlock'>
+              <h3> Why:</h3>
+              <p> {props.text}</p>
+            </div>
+            <div className='infoTextBlock'>
+              <h3> When:</h3>
+              <p> {props.extraText}</p>
+            </div>
             <div className="buttonsModal">
               <button onClick={props.closeModal}>Close</button>
             </div>
           </div>
-        </div>
+        </div >
       }
     </>
   )

src/pages/Game.jsx

@@ -556,8 +556,9 @@ const Game = (props) => {
           {/* </div> */}
         </div>
         <div className='actionButtons'>
-          {location.pathname.startsWith('/tutorial') && <button className='infoModalButton' onClick={props.openModal} >need help?</button>}
+
           <button className='resetButton' onClick={handleResetSliders} disabled={resetPressable}>Reset</button>
+          {location.pathname.startsWith('/tutorial') && <button className='infoModalButton' onClick={props.openModal} >Need Help?</button>}
           <button onClick={handleCompareClick}>Compare</button>
         </div>
 

src/pages/Stage2.jsx

@@ -86,8 +86,8 @@ const CURRENT_OPTIONS = [
 
 const link = "https://slider-fun.onrender.com/api/photo/654ff0d49389098760e3ebbe"
 
-const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
-
+const infoText = " Adjusting contrast in photo editing enhances the difference between the light and dark areas of an image, making it ideal for adding depth and dimension, especially in flat or dull images."
+const extraText = "Often used in portrait photography to add depth and emphasis to facial features and landscape photography to emphasize textures and contours, and in "
 
 const Stage2 = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
@@ -96,9 +96,14 @@ const Stage2 = () => {
     setIsModalVisible(false)
   };
 
+  const openModal = () => {
+    setIsModalVisible(true)
+  };
+
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal heading="Contrast" text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link}

src/pages/Stage3.jsx

@@ -87,19 +87,23 @@ const CURRENT_OPTIONS = [
 
 const link = "https://slider-fun.onrender.com/api/photo/654feac4663946fee35a1600"
 
-const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
-
-
+const infoText = "Saturation editing alters the intensity of colors in a photo, increasing it can make colors more vivid and eye-catching, while decreasing it can give a more subdued, natural look."
+const extraText = "Commonly applied in nature and travel photography to enhance natural colors, and in food photography to make the dishes appear more appetizing."
 const Stage3 = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
 
   const closeModal = () => {
     setIsModalVisible(false)
   };
 
+  const openModal = () => {
+    setIsModalVisible(true)
+  };
+
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal heading="Saturation"  text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link}

src/pages/Stage4.jsx

@@ -86,8 +86,8 @@ const CURRENT_OPTIONS = [
 
 const link = "https://slider-fun.onrender.com/api/photo/6551641e92d16a06e6567292"
 
-const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
-
+const infoText = "Converting a photo to greyscale removes all color, resulting in a black-and-white image, which is great for creating a timeless, classic look or focusing on textures and shapes."
+const extraText = "Popular in street photography for its timeless quality and ability to focus on emotion and context, and in fine art photography for its dramatic and moody effect."
 
 const Stage4 = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
@@ -96,9 +96,14 @@ const Stage4 = () => {
     setIsModalVisible(false)
   };
 
+  const openModal = () => {
+    setIsModalVisible(true)
+  };
+
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal heading="Greyscale" text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link}

src/pages/Stage5.jsx

@@ -86,7 +86,8 @@ const CURRENT_OPTIONS = [
 
 const link = "https://slider-fun.onrender.com/api/photo/6551658492d16a06e6567353"
 
-const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
+const infoText = "Applying a sepia tone gives photos a warm brown tint, reminiscent of vintage or historical photographs, often used to evoke nostalgia or age."
+const extraText = "Frequently used in portrait photography to create a warm, nostalgic feel, and in documenting historical reenactments or antiques to enhance the vintage aesthetic."
 
 const Stage5 = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
@@ -95,9 +96,14 @@ const Stage5 = () => {
     setIsModalVisible(false)
   };
 
+  const openModal = () => {
+    setIsModalVisible(true)
+  };
+
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal heading="Sepia" text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link}

src/pages/Stage6.jsx

@@ -85,7 +85,8 @@ const CURRENT_OPTIONS = [
 
 const link = "https://slider-fun.onrender.com/api/photo/65527a1c6cdb84a05144ef04"
 
-const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
+const infoText = "Hue rotation changes the overall color spectrum of an image, allowing for creative and dramatic shifts in appearance, useful for artistic effects or correcting color casts."
+const extraText = "Utilized in artistic and abstract photography to create surreal and visually striking images, and in advertising to grab attention with unusual color schemes."
 
 const Stage6 = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
@@ -94,9 +95,14 @@ const Stage6 = () => {
     setIsModalVisible(false)
   };
 
+  const openModal = () => {
+    setIsModalVisible(true)
+  };
+
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal heading="Hue Rotate" text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link}

src/pages/Stage7.jsx

@@ -86,17 +86,24 @@ const CURRENT_OPTIONS = [
 
 const link = "https://slider-fun.onrender.com/api/photo/655280b96cdb84a05144ef65"
 
-const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
+const infoText = "Adding blur to a photo can soften edges, create a sense of motion, or bring focus to a particular element by reducing background detail."
+const extraText = "Widely used in sports and action photography to convey motion and speed, and in portrait photography to isolate the subject from a distracting background."
 
 const Stage7 = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
 
   const closeModal = () => {
     setIsModalVisible(false)
   };
+
+  const openModal = () => {
+    setIsModalVisible(true)
+  };
+
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link}

src/pages/StageOne.jsx

@@ -88,7 +88,7 @@ const CURRENT_OPTIONS = [
 const link = "https://slider-fun.onrender.com/api/photo/65495d668d1d5c2fa933c23a"
 
 const infoText = "Adjusting brightness involves altering the overall lightness or darkness of an image. This can be particularly useful in low-light conditions to enhance image clarity, or in overly bright conditions to reduce glare and balance the exposure."
-
+const extraText = "Commonly used in nature photography to bring out details in underexposed areas like dense forests or sunset scenes or in event photography, such as weddings or concerts, to compensate for varying lighting conditions. "
 const StageOne = () => {
   const [isModalVisible, setIsModalVisible] = useState(true);
 
@@ -102,7 +102,8 @@ const StageOne = () => {
 
   return (
     <div>
-      <InfoModal text={infoText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
+      {isModalVisible && <div className="modal-overlay"></div>}
+      <InfoModal heading="Brightness" text={infoText} extraText={extraText} isModalVisible={isModalVisible} closeModal={closeModal} openModal={openModal} />
       <TutorialHeader />
       <Game
         stage_options={CURRENT_OPTIONS} pic_link={link} openModal={openModal}

src/styles/infoModal.scss

@@ -0,0 +1,72 @@
+.resultsModal {
+  z-index: 11;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  max-width: 80%;
+  text-align: center;
+}
+
+.headerModal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 120px;
+}
+
+.buttonsModal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.imagesModal-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 400px;
+  max-width: 100%;
+}
+
+.imagesModal-container img {
+  max-width: 100%;
+  height: auto;
+}
+
+button {
+  padding: 5px;
+  border-radius: 12px;
+}
+
+.shareResultsButton {
+  margin-top: 22px;
+}
+
+.backButton {
+  display: flex;
+}
+
+.infoTextBlock {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  // justify-content: start;
+  gap: 15px;
+  width: 85%;
+
+  h3 {
+    width: 35%;
+    text-align: left;
+  }
+
+  p {
+    text-align: left;
+
+  }
+}