Merge pull request #243 from kidata-summer-2023:noahpro99/issue238-si…

…gnup-page-colors-need-to-match-login

Fix signup page colors to match login

frontend/src/components/ActivityBookList.tsx

@@ -10,7 +10,7 @@ function BookPreview({ BookData }: { BookData: Book }) {
             src={BookData.bookCover}
             width={275}
             height={280}
-            alt={`Book Image-Background`}
+            alt="Book Background"
             className="absolute"
           />
           <div className="relative top-12 left-4 w-52 h-64 flex-col flex items-center p-2 text-center">
@@ -19,7 +19,7 @@ function BookPreview({ BookData }: { BookData: Book }) {
               src={BookData.cover ? BookData.cover : BookData.pages[0].image}
               width={125}
               height={125}
-              alt={`Book Image-${BookData.title}`}
+              alt={`Book ${BookData.title}`}
               className="rounded-2xl"
             />
             <h1 className="text-black font-semibold">{BookData.title}</h1>

frontend/src/components/Card.tsx

@@ -12,7 +12,7 @@ function Card({
       <div className="max-w-sm m-2 drop-shadow-md transition-transform hover:-translate-y-1">
         <img
           src="/GameImage_1.png"
-          alt="Game card image"
+          alt="Game card"
           width={300}
           height={300}
           className="w-full object-cover rounded-lg"

frontend/src/components/ColorPattern.tsx

@@ -1,13 +1,7 @@
-import React, { useState } from "react";
-
-interface colorState {
-  pattern: string[];
-  userInput: string[];
-  message: string;
-}
+import { useState } from "react";
 
 export function ColorPattern() {
-  const [pattern, setPattern] = useState(["red", "red", "blue", "blue"]);
+  const pattern = ["red", "red", "blue", "blue"];
   const [userInput, setUserInput] = useState([""]);
   const [message, setMessage] = useState("Repeat the pattern!");
 

frontend/src/components/FoodTruckActivity.tsx

@@ -76,7 +76,7 @@ export function FoodTruckActivity({
                   option.text === selectedOption,
               )?.image || ""
             }
-            alt="Image"
+            alt="Output"
             className="max-w-100 max-h-100 rounded-md shadow-md"
             width={props.width || 400}
             height={props.height || 500}

frontend/src/components/Footer.tsx

@@ -1,5 +1,3 @@
-import Link from "react-router-dom";
-
 function FooterLink({ name, href }: { name: string; href: string }) {
   return (
     <li className="m-1 p-1 float-right tablet:float-none tablet:inline-block">
@@ -15,11 +13,9 @@ export default function Footer() {
         &copy; KiData Project 2023. All Rights Reserved.
       </span>
       <ul className="p-auto my-auto tablet:text-center text-sm">
-        {/* 
         <FooterLink name="About" href="/about" />
         <FooterLink name="Contact" href="/contact" />
-        <FooterLink name="License" href="/license" /> 
-        */}
+        <FooterLink name="License" href="/license" />
       </ul>
     </footer>
   );

frontend/src/components/HokieBirdColor.tsx

@@ -53,6 +53,13 @@ export function HokieBirdColoring({
   });
 
   const [currentColorIndex, setCurrentColorIndex] = useState(0);
+
+  enum AlertType {
+    NONE,
+    SUCCESS,
+    FAILURE,
+  }
+
   const colorNextPart = (color: string) => {
     if (currentColorIndex < availableParts.length) {
       const partToColor = availableParts[currentColorIndex];
@@ -65,20 +72,14 @@ export function HokieBirdColoring({
     }
   };
 
-  enum AlertType {
-    NONE,
-    SUCCESS,
-    FAILURE,
-  }
-
   const [currentAlert, setCurrentAlert] = useState<{
     type: AlertType;
     message: string;
   }>({ type: AlertType.NONE, message: "" });
 
   React.useEffect(() => {
     setAllowNext(currentAlert.type === AlertType.SUCCESS);
-  }, [currentAlert]);
+  }, [currentAlert, AlertType.SUCCESS, setAllowNext]);
 
   function HokieBirdColors() {
     const handlePart = (index: number, value: string) => {
@@ -118,7 +119,7 @@ export function HokieBirdColoring({
       }
       if (value.startsWith('"') && value.endsWith('"')) {
         const strippedValue = val.substring(1, val.length - 1);
-        if (availableColors.includes(strippedValue) && part != "") {
+        if (availableColors.includes(strippedValue) && part !== "") {
           setCurrentAlert({ type: AlertType.SUCCESS, message: "Correct!" });
           setColors((prevColors) => ({
             ...prevColors,
@@ -282,70 +283,70 @@ export function HokieBirdColoring({
       <div className="flex flex-col flex-grow justify-center items-center relative">
         <img
           src="/HokieBird.png"
-          alt="book image"
+          alt="Hokie Bird"
           className={"center-left w-[200px] xl:w-[500px]"}
           width={500}
           height={500}
         />
         <img
           src="/HokieHead.png"
-          alt="book image"
+          alt="Hokie Bird Head"
           className={`absolute center-left img-${colors.head} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieNose.png"
-          alt="book image"
+          alt="Hokie Bird Nose"
           className={`absolute center-left img-${colors.nose} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieNeck.png"
-          alt="book image"
+          alt="Hokie Bird Neck"
           className={`absolute center-left img-${colors.neck} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieBody.png"
-          alt="book image"
+          alt="Hokie Bird Body"
           className={`absolute center-left img-${colors.body} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieTail.png"
-          alt="book image"
+          alt="Hokie Bird Tail"
           className={`absolute center-left img-${colors.tail} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieLeftLeg.png"
-          alt="book image"
+          alt="Hokie Bird Left Leg"
           className={`absolute center-left img-${colors.left_leg} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieRightLeg.png"
-          alt="book image"
+          alt="Hokie Bird Right Leg"
           className={`absolute center-left img-${colors.right_leg} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieLeftFoot.png"
-          alt="book image"
+          alt="Hokie Bird Left Foot"
           className={`absolute center-left img-${colors.left_foot} `}
           width={500}
           height={500}
         />
         <img
           src="/HokieRightFoot.png"
-          alt="book image"
+          alt="Hokie Bird Right Foot"
           className={`absolute center-left img-${colors.right_foot} `}
           width={500}
           height={500}

frontend/src/components/HokieBirdIfCondition.tsx

@@ -24,7 +24,7 @@ export function HokieBirdIfCondition({
 
   React.useEffect(() => {
     setAllowNext(good);
-  }, [good]);
+  }, [good, setAllowNext]);
 
   function handleOptionSelect(option: string) {
     const isCorrectAnswer =
@@ -42,9 +42,9 @@ export function HokieBirdIfCondition({
     e.dataTransfer.setData("statement", statement);
   }
 
-  function handleOnDragCondition(e: React.DragEvent, condition: string) {
-    e.dataTransfer.setData("condition", condition);
-  }
+  // function handleOnDragCondition(e: React.DragEvent, condition: string) {
+  //   e.dataTransfer.setData("condition", condition);
+  // }
 
   function handleDragOver(e: React.DragEvent) {
     e.preventDefault();
@@ -112,15 +112,15 @@ export function HokieBirdIfCondition({
           src={currentImage}
           width={400}
           height={400}
-          alt="Hokie Bird Image"
+          alt="Hokie Bird"
           className="absolute  w-[200px] xl:w-[450px] rounded-2xl"
         ></img>
         {props?.effect && (
           <img
             src={props.effect}
             width={400}
             height={400}
-            alt="Hokie Bird Image Effect"
+            alt="Hokie Bird Effect"
             className="absolute  w-[200px] xl:w-[450px]"
           ></img>
         )}

frontend/src/components/HokieBirdMap.tsx

@@ -1,11 +1,6 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-interface HokieBirdColorState {
-  images: string[];
-  ans: string[];
-}
-
 const actions = ["turn_left()", "turn_right()", "move(2)", "move(3)"];
 
 export function HokieBirdMap({
@@ -28,7 +23,7 @@ export function HokieBirdMap({
 
   React.useEffect(() => {
     setAllowNext(false);
-  }, []);
+  }, [setAllowNext]);
 
   function handleOnDragStatement(e: React.DragEvent, statement: string) {
     e.dataTransfer.setData("statement", statement);
@@ -58,7 +53,7 @@ export function HokieBirdMap({
     for (let i = 0; i < procedures.length; i++) {
       if (procedures[i] !== props.ans[i]) {
         console.log(`Error at ${i} ${procedures[i]} ${props.ans[i]}`);
-        if (procedures[i] == "") {
+        if (procedures[i] === "") {
           setMessage(`Keep going! Your're almost there!`);
         } else {
           setMessage(
@@ -97,7 +92,7 @@ export function HokieBirdMap({
         src={`/Maze/${currentImage}`}
         width={400}
         height={400}
-        alt="Hokie Bird Maze Image"
+        alt="Hokie Bird Maze"
       />
       <div className="flex flex-row ">
         <div>

frontend/src/components/InputActivity.tsx

@@ -51,7 +51,7 @@ export function InputActivity({
       <div className="my-4">
         <img
           src={currentImage}
-          alt="Image"
+          alt="Activity"
           className="max-w-100 max-h-100 rounded-md shadow-md"
           width={props.width || 400}
           height={props.height || 500}

frontend/src/components/MisconceptionComponents/ConditionalOperators.tsx

@@ -163,7 +163,7 @@ export function ConditionalOperators({
 
   function getPage1() {
     return (
-      <div className="flex flex-col w-full text-center items-center font-semibold text-lg text-center gap-5">
+      <div className="flex flex-col w-full items-center font-semibold text-lg text-center gap-5">
         {image}
         <CodeSnippet code={p1Code} />
         <MultipleChoiceQuestion

frontend/src/components/MisconceptionComponents/DataTypesIntro.tsx

@@ -16,7 +16,7 @@ export function DataTypesIntro() {
   );
 
   return (
-    <div className="flex flex-col w-full text-center items-center font-semibold text-lg text-center">
+    <div className="flex flex-col w-full items-center font-semibold text-lg text-center">
       <Reader text="The Variable name jersey_number is of type Integer" />
       <div className="flex flex-col-2 m-5 items-center gap-36">
         <CodeSnippet
@@ -61,7 +61,7 @@ export function DataTypesIntro() {
           width={200}
           height={200}
           src="/VariablesBook/sky-boolean.png"
-          alt="Image of sky show it is True that the sky is blue"
+          alt="sky show it is True that the sky is blue"
         />
       </div>
     </div>

frontend/src/components/MisconceptionComponents/FlowchartsBook/BuyDonut.tsx

@@ -65,7 +65,7 @@ export function BuyDonut({
             height={1000}
             width={1000}
             src={currentImage}
-            alt="Partial image of flowchart"
+            alt="Partial flowchart"
           />
         )}
         {showQuestion && (

frontend/src/components/MisconceptionComponents/FlowchartsBook/BuyMultiple.tsx

@@ -78,7 +78,7 @@ export function BuyMultiple({
           width={600}
           height={600}
           src={"/FlowchartsBook/BuyMultiple/buy_multiple.png"}
-          alt="Image of flowchart and food."
+          alt="buy multiple flow."
         />
         <MultipleChoiceQuestion
           question={q1.question}
@@ -115,7 +115,7 @@ export function BuyMultiple({
                 height={imageDim[0]}
                 width={imageDim[1]}
                 src={currentImage}
-                alt="Image of flow chart"
+                alt="flow"
               />
             )}
           </div>

frontend/src/components/MisconceptionComponents/FlowchartsBook/ChangingCondition.tsx

@@ -85,7 +85,7 @@ export function ChangingCondition({
           height={1300}
           width={1300}
           src={"/FlowchartsBook/example_4.svg"}
-          alt="Image of flow chart."
+          alt="flow"
         />
         <div className="flex flex-col gap-5">
           <MultipleChoiceQuestion
@@ -124,7 +124,7 @@ export function ChangingCondition({
                 height={imageDim[0]}
                 width={imageDim[1]}
                 src={currentImage}
-                alt="Image of flow chart"
+                alt="flow"
               />
             )}
           </div>

frontend/src/components/MisconceptionComponents/FlowchartsBook/MultipleConditions.tsx

@@ -83,13 +83,13 @@ export function MultipleConditions({
           width={400}
           height={400}
           src={"/FlowchartsBook/MultipleConditions/food.png"}
-          alt="Image of food."
+          alt="food."
         />
         <img
           width={500}
           height={500}
           src={"/FlowchartsBook/example_3.svg"}
-          alt="Image of food."
+          alt="food."
         />
       </div>
     );
@@ -104,7 +104,7 @@ export function MultipleConditions({
             width={120}
             height={120}
             src={"/FlowchartsBook/MultipleConditions/food2.png"}
-            alt="Image of food."
+            alt="food."
           />
           <MultipleChoiceQuestion
             question={q1.question}
@@ -117,7 +117,7 @@ export function MultipleConditions({
           width={500}
           height={500}
           src={"/FlowchartsBook/example_3.svg"}
-          alt="Image of food."
+          alt="food."
         />
       </div>
     );
@@ -148,7 +148,7 @@ export function MultipleConditions({
                 height={imageDim[0]}
                 width={imageDim[1]}
                 src={currentImage}
-                alt="Image of flow chart"
+                alt="flow chart"
               />
             )}
           </div>