Merge pull request #6 from Sawbez/main

Numerous fixes

README.md

@@ -10,7 +10,7 @@ This is currently being hosted by: <a href="https://github.com/Gam3rrXD" target=
 - Clone the repository
     - ```git clone https://github.com/SkylineSpartabots/SpartaSite```
 - Change directory into the "client" folder
-  - ```cd SpartSite/client```
+  - ```cd SpartaSite/client```
 - Install all the NPM packages
   - ```npm i```
 - Obtain the env file
@@ -33,3 +33,4 @@ This is currently being hosted by: <a href="https://github.com/Gam3rrXD" target=
 <a href="https://github.com/TheCubeHamster" target="_blank" title="TheCubeHamster"><img src="https://github.com/TheCubeHamster.png?size=40" height="40" width="40" alt="TheCubeHamster"/></a>
 <a href="https://github.com/LS-x21" target="_blank" title="LS-x21"><img src="https://github.com/LS-x21.png?size=40" height="40" width="40" alt="LS-x21"/></a>
 <a href="https://github.com/solar138" target="_blank" title="solar138"><img src="https://github.com/solar138.png?size=40" height="40" width="40" alt="solar138"/></a>
+<a href="https://github.com/Sawbez" target="_blank" title="Sawbez"><img src="https://github.com/Sawbez.png?size=40" height="40" width="40" alt="Sawbez"/></a>

client/public/index.html

@@ -30,7 +30,8 @@
       Within our completely student built team, we use our problem solving, critical thinking and analytical skills to create a competitive robot within 6 weeks.
       
       The club was created in 2008 and initially worked in the garage of one of our mentors. In the first few years of the club we struggled, but always managed to bring a robot to competitions. During that time, our team never managed to advance to the elimination rounds of any competitions, but by 2014, the Spartabots had made it through two district competitions, getting second place in one of them, and qualified for regionals." />
-    <meta property="twitter:image" content="https://pbs.twimg.com/profile_images/1452098362312826881/khFJznRg_400x400.jpg" <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta property="twitter:image" content="https://pbs.twimg.com/profile_images/1452098362312826881/khFJznRg_400x400.jpg"/>
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>The Spartabots</title>
   </head>

client/src/App.js

@@ -1,25 +1,25 @@
 import {
-  BrowserRouter as Router,
+  Navigate,
   Route,
+  BrowserRouter as Router,
   Routes,
-  Navigate,
 } from "react-router-dom";
-import Home from "./pages/Home";
-import Sponsors from "./pages/Sponsors";
-import FontDemo from "./pages/FontDemo";
-import About from "./pages/About";
 import Footer from "./components/Footer";
-import Join from "./pages/Join";
-import Login from "./pages/Login";
-import Dashboard from "./pages/Dashboard";
 import Sidebar from "./components/Sidebar";
 import TopBar from "./components/TopBar";
 import { useAuthContext } from "./hooks/useAuthContext";
-import NotFound from "./pages/NotFound";
+import About from "./pages/About";
 import AccountManage from "./pages/AccountManage";
 import AddAccount from "./pages/AddAccount";
 import ComingSoon from "./pages/ComingSoon";
+import Dashboard from "./pages/Dashboard";
+import FontDemo from "./pages/FontDemo";
+import Home from "./pages/Home";
+import Join from "./pages/Join";
+import Login from "./pages/Login";
+import NotFound from "./pages/NotFound";
 import Purchase from "./pages/Purchase";
+import Sponsors from "./pages/Sponsors";
 function App() {
   const { user } = useAuthContext();
   return (

client/src/components/Card.js

@@ -1,5 +1,5 @@
 import LazyImage from "./LazyImage";
-const Card = ({ title, text, image }) => {
+const Card = ({ title, text, image, alt }) => {
   return (
     <div className="flex flex-col sm:flex-row flex-1 px-6 py-4 max-w-[1000px] bg-white rounded gap-4 min-h-[300px]">
       <div className="flex-1 max-w-[500px] break-words">
@@ -9,7 +9,7 @@ const Card = ({ title, text, image }) => {
         <p className="font-productsans text-base">{text}</p>
       </div>
       <div className="flex-1 w-full">
-      <LazyImage alt="" img={image} style="object-cover w-[500px] h-full rounded" />
+      <LazyImage alt={alt} img={image} style="object-cover w-[500px] h-full rounded" />
     </div>
 
     </div>

client/src/components/Footer.js

@@ -104,9 +104,9 @@ export default function Footer() {
             </p>
           </div>
           <div className="">
-            <h6 className="uppercase font-semibold mb-4 flex justify-center md:justify-start">
+            <h2 className="uppercase font-semibold mb-4 flex justify-center md:justify-start">
               Learn
-            </h6>
+            </h2>
             <p className="mb-4">
               <a href="/comingsoon" className="text-gray-600">
                 Onshape
@@ -129,9 +129,9 @@ export default function Footer() {
             </p>
           </div>
           <div className="">
-            <h6 className="uppercase font-semibold mb-4 flex justify-center md:justify-start">
+            <h2 className="uppercase font-semibold mb-4 flex justify-center md:justify-start">
               Useful links
-            </h6>
+            </h2>
             <p className="mb-4">
               <a
                 href="https://learn.onshape.com/"
@@ -161,12 +161,12 @@ export default function Footer() {
               <a href="/comingsoon" className="text-gray-600">
                 Design Calculator
               </a>
-            </p>
+            </p>  
           </div>
           <div className="">
-            <h6 className="uppercase font-semibold mb-4 flex justify-center md:justify-start">
+            <h2 className="uppercase font-semibold mb-4 flex justify-center md:justify-start">
               Contact
-            </h6>
+            </h2>
             <p className="flex items-center justify-center md:justify-start mb-4">
               <svg
                 aria-hidden="true"

client/src/components/LazyImage.js

@@ -25,7 +25,8 @@ const LazyImage = ({ img, alt, style }) => {
   return visible ? (
     <img src={img} alt={alt} className={style} /> 
   ) : (
-    <img ref={ref} style={{ backgroundColor: "gray" }} className={style} />
+    // An empty alt tag is required for accessibility
+    <img ref={ref} alt="" style={{ backgroundColor: "gray" }} className={style} />
   );
 };
 

client/src/pages/Home.js

@@ -1,11 +1,11 @@
+import { useEffect } from "react";
 import Card from "../components/Card.js";
-import Splash from "../components/Splash.js";
 import InfoBlock from "../components/InfoBlock.js";
-import { useEffect } from "react";
-import intakeImage from "../graphics/images/Intake-min.jpg";
-import groupImage from "../graphics/images/GroupPhoto-min.jpg";
-import competitionImage from "../graphics/images/Competition-min.jpg";
+import Splash from "../components/Splash.js";
 import botImage from "../graphics/images/Bot.jpg";
+import competitionImage from "../graphics/images/Competition-min.jpg";
+import groupImage from "../graphics/images/GroupPhoto-min.jpg";
+import intakeImage from "../graphics/images/Intake-min.jpg";
 
 const Home = () => {
   useEffect(() => {
@@ -20,16 +20,19 @@ const Home = () => {
           title="ABOUT US"
           text="Created in 2008, our team participates in the FIRST Robotics Competition as team 2976. We are a high school club operating at Skyline High School, Sammamish, WA."
           image={groupImage}
+          alt="Group photo of the Spartabots team"
         />
         <Card
           title="WHAT IS FIRST ROBOTICS?"
           text="The FIRST Robotics Competition is an international high school robotics competition operated by FIRST. The game of the competition changes each year to keep the excitement fresh."
           image={competitionImage}
+          alt="Wide shot of the FIRST Robotics Competition"
         />
         <Card
           title="WHY SHOULD I JOIN?"
           text="Being part of a FIRST robotics team is fun! It doesn't matter whether you have experience with robotics or not, you'll gain amazing experiences and learn valuable skills that you can carry to college and beyond."
           image={botImage}
+          alt="Picture of the CHRONOS bot"
         />
         <div className="hidden sm:flex flex-row flex-initial px-6 py-8 max-w-[1000px] bg-white rounded gap-4">
           <InfoBlock