Merge pull request #9 from she-code-africa/stem-club-fixes

Stem club fixes

src/components/contact-us/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -25,6 +25,7 @@ const ContactUsComponent = () => {
     formState: { errors },
   } = useForm({
     resolver: yupResolver(schema),
+    mode: "onBlur",
   });
   const { mutate: handleContactUs } = useMutation({
     mutationFn: makeEnquiry,
@@ -40,6 +41,16 @@ const ContactUsComponent = () => {
     },
   });
   const onsubmit = (data) => handleContactUs(data);
+
+  const textareaRef = useRef();
+
+  const handleTextAreaFocus = () => {
+    textareaRef.current.classList.add("border-[rgb(233,152,203)]");
+  };
+
+  const handleTextAreaBlur = () => {
+    textareaRef.current.classList.remove("border-[rgb(233,152,203)]");
+  };
   return (
     <>
       <section className=" text-sealBrown font-mulish w-full -mt-8 bg-whiteSmoke">
@@ -105,12 +116,15 @@ const ContactUsComponent = () => {
                   className={`w-full md:max-w-[549px] h-[290px] mt-2 rounded-md border border-gains overflow-hidden ${
                     errors.description?.message && "border-primaryPink"
                   }`}
+                  ref={textareaRef}
                 >
                   <textarea
                     {...register("description")}
                     name="description"
                     placeholder="Write your message"
                     className="text-base w-full h-full border-0 outline-none p-3 bg-white placeholder:text-[rgba(130,130,130,1)] resize-none"
+                    onFocus={handleTextAreaFocus}
+                    onBlur={handleTextAreaBlur}
                   ></textarea>
                 </div>
                 <p className="text-primaryPink text-sm">

src/components/inputs/PrimaryInput.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 
 const PrimaryInput = ({
   label,
@@ -9,11 +9,20 @@ const PrimaryInput = ({
   errors,
   isRequired = true,
 }) => {
+  const inputRef = useRef();
+
+  const handleInputFocus = () => {
+    inputRef.current.classList.add("border-[rgb(233,152,203)]");
+  };
+
+  const handleInputBlur = () => {
+    inputRef.current.classList.remove("border-[rgb(233,152,203)]");
+  };
   return (
     <div className="w-full md:max-w-[455px] mb-6">
       <label
         htmlFor={name}
-        className="text-base capitalize font-medium text-[rgba(46,52,79,1)]"
+        className="text-base capitalize font-medium text-[rgba(46,52,79,1)] "
       >
         {label}
       </label>
@@ -22,19 +31,24 @@ const PrimaryInput = ({
         className={`w-full rounded-md border border-gains h-[50px] overflow-hidden mt-2 ${
           errors && "border-primaryPink"
         }`}
+        ref={inputRef}
       >
         {isRequired ? (
           <input
             type={type}
             placeholder={placeholder}
             {...register(name)}
             className="text-base w-full h-full border-0 outline-none px-3 bg-white placeholder:text-[rgba(130,130,130,1)]"
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
           />
         ) : (
           <input
             type={type}
             placeholder={placeholder}
             className="text-base w-full h-full border-0 outline-none px-3 bg-white placeholder:text-[rgba(130,130,130,1)]"
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
           />
         )}
       </div>

src/pages/home/page.jsx

@@ -51,7 +51,6 @@ const HomePage = () => {
                   <p className="text-lg md:text-2xl my-3 font-semibold">
                     {activity.title}
                   </p>
-                  <p>{activity.description}</p>
                 </div>
               </div>
             ))}

src/utils/appData.js

@@ -107,11 +107,11 @@ export const communityLinks = [
     path: "https://bit.ly/joinshecodeafrica",
     isNewsLetter: false,
   },
-  {
-    pathname: "Sign Up For Our Newsletter",
-    path: "#",
-    isNewsLetter: true,
-  },
+  // {
+  //   pathname: "Sign Up For Our Newsletter",
+  //   path: "#",
+  //   isNewsLetter: true,
+  // },
 ];
 
 export const coursesSlider = [
@@ -243,27 +243,24 @@ export const clubActivities = [
 
 export const activities = [
   {
-    title: "Coding workshops",
+    title: "Coding",
     image: codingHeroImage,
-    description: "Coding workshops",
   },
   {
     title: "Game Development",
     image: gameDevHeroImage,
-    description: "Coding workshops",
   },
   {
     title: "Robotics (Arduino, Raspberry Pi)",
     image: roboticsHeroImage,
-    description: "Coding workshops",
   },
 ];
 
 export const faqs = [
   {
-    title: "What is the SheCodeAfrica STEM-A-GIRL program about?",
+    title: "What is the SheCodeAfrica STEM-A-GIRL Program about?",
     content:
-      "The She Code Africa STEM Club is an initiative aimed at empowering girls to pursue careers in Science, Technology, Engineering, and Math (STEM).",
+      "The She Code Africa STEM-A-Girl Program is an initiative aimed at empowering girls to pursue careers in Science, Technology, Engineering, and Math (STEM).",
   },
   {
     title: "Who can join the STEM Club?",