Button component and Links (#103)

* Added Button component, button styles and href to contact form button

* Added button.scss to main.scss

* Replaced Navbar Home Link href '/public' with '/'

* Added href to project form link

* Add href's to pitch page

* Added link to Meetup text on pitch page

* Replaced a tags with Link

* Fix link class on pitch page

src/app/about/aboutSectionOpportunities.jsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 /**
  * About opportunities section.
  * @returns {JSX.Element}
@@ -28,7 +30,7 @@ export default function AboutSectionOpportunities({sectionType}) {
           <p className={`opportunities-anchor`}>
             Not a volunteer yet?
             <br/>
-            <a href="">Get Started</a>
+            <Link href="/get-started">Get Started</Link>
           </p>
         </div>
       </div>
@@ -86,7 +88,7 @@ export default function AboutSectionOpportunities({sectionType}) {
         <p className={`opportunities-anchor-bottom`}>
           Not a volunteer yet?
           <br/>
-          <a href="">Get Started</a>
+          <Link href="/get-started">Get Started</Link>
         </p>
       </div>
     </section>

src/app/code-of-conduct/conductSectionEmail.jsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function conductSectionBullets({ sectionType }) {
   return (
     <section className={`conduct-${sectionType}-theme`}>
@@ -16,7 +18,7 @@ export default function conductSectionBullets({ sectionType }) {
         <p className={`conduct-item-paragraph`}>
           If you are being harassed, notice that someone else is being harassed,
           or have any other concerns, please fill out{" "}
-          <a href="https://forms.gle/JF3Q1AQA6pGxNSNS8">this form</a>.
+          <Link href="https://forms.gle/JF3Q1AQA6pGxNSNS8">this form</Link>.
         </p>
       </div>
     </section>

src/app/code-of-conduct/conductSectionPolicies.jsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function conductSectionPolicies() {
   return (
     <section className={`conduct-dark-theme`}>
@@ -14,9 +16,9 @@ export default function conductSectionPolicies() {
         </div>
         <p className={`conduct-item-paragraph`}>
           This anti-harassment policy is based on{" "}
-          <a className={`conduct-paragraph-anchor`} href="/">
+          <Link className={`conduct-paragraph-anchor`} href="/">
             the example policy
-          </a>{" "}
+          </Link>{" "}
           from the Geek Feminism wiki, created by the Ada Initiative and other
           volunteers.
           <br />
@@ -40,9 +42,9 @@ export default function conductSectionPolicies() {
           Sacramento will only lend its brand and fund groups that offer an
           anti-harassment policy to their attendees. For information on how to
           offer an anti-harassment policy to your group,{" "}
-          <a className={`conduct-paragraph-anchor`} href="/">
+          <Link className={`conduct-paragraph-anchor`} href="/">
             see this guide.
-          </a>
+          </Link>
         </p>
 
         <p className={`conduct-item-paragraph`}>
@@ -78,7 +80,7 @@ export default function conductSectionPolicies() {
         <p className={`conduct-item-paragraph`}>
           If you are being harassed, notice that someone else is being harassed,
           or have any other concerns, please fill out{" "}
-          <a href="https://forms.gle/JF3Q1AQA6pGxNSNS8">this form</a>.
+          <Link href="https://forms.gle/JF3Q1AQA6pGxNSNS8">this form</Link>.
         </p>
 
         <p className={`conduct-item-paragraph`}>

src/app/contact/contactSectionMission.jsx

@@ -48,15 +48,15 @@ export default function ContactSectionMission({ sectionType }) {
           .<br></br>
           <br></br>
           Check out our weekly meetings on our{" "}
-          <a
+          <Link
             className="contactActionLinksAnchor"
             href="https://www.meetup.com/code4sac/"
             target="_blank"
             rel="noopener noreferrer"
             aria-label="Link to Meetup."
           >
             meetup page
-          </a>
+          </Link>
           .
         </p>
       </div>
@@ -213,6 +213,7 @@ export default function ContactSectionMission({ sectionType }) {
             />
           </div>
           <Button
+            href={mailtoUri}
             variant="contained"
             size="large"
             sx={{

src/app/home/homeSectionDonate.jsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Button from "@/components/Buttons";
 
 /**
  * Home donate section.
@@ -22,8 +22,8 @@ export default function HomeSectionDonate({sectionType}) {
           innovation.<span> Join us today and be a catalyst for lasting, community-driven transformation!</span>
         </p>
         <div className={`home-buttons-group`}>
-          <Link href="/get-started" className={`home-button home-button-numbered`}>Get Started</Link>
-          <Link href="" className={`home-button home-button-alt`}>Donate</Link>
+          <Button href="/get-started" className={`btn btn-alt-gold`} textContent="Get Started" />
+          <Button href="/donate" className={`btn btn-gold`} textContent="Donate" />
         </div>
       </div>
     </section>

src/app/home/homeSectionLandingImage.jsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Button from "@/components/Buttons";
 
 /**
  * Home projects section.
@@ -19,8 +19,8 @@ export default function HomeSectionLandingImage() {
             better future!
           </p>
           <div className={`home-buttons-group`}>
-            <Link href="/get-started" className={`home-button`}>Get Started</Link>
-            <Link href="/projects" className={`home-button home-button-alt`}>View Projects</Link>
+            <Button className={`btn btn-alt-light`} href="/get-started" textContent="Get Started" />
+            <Button className={`btn btn-gold`} href="/projects" textContent="View Projects" />
           </div>
         </div>
       </section>

src/app/home/homeSectionProjects.jsx

@@ -1,17 +1,17 @@
 'use client'
 import 'keen-slider/keen-slider.min.css'
 import {useKeenSlider} from 'keen-slider/react'
-import React from 'react'
-import Link from 'next/link'
+import { useState } from 'react';
+import Button from '@/components/Buttons';
 
 /**
  * Home projects section.
  * @returns {JSX.Element}
  */
 export default function HomeSectionProjects({sectionType}) {
 
-  const [currentSlide, setCurrentSlide] = React.useState(0)
-  const [loaded, setLoaded] = React.useState(false)
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [loaded, setLoaded] = useState(false)
   const [sliderRef, instanceRef] = useKeenSlider({
     initial: 0,
     slideChanged(slider) {
@@ -36,7 +36,7 @@ export default function HomeSectionProjects({sectionType}) {
           <span className={`paragraph-bold`}> our open-source tech and collaboration drive innovation</span>
           for transparent, efficient, engaged local governance.
         </p>
-        <Link href="/projects" className={`home-button home-button-alt`}>Find Projects</Link>
+        <Button href="/projects" className={`btn btn-gold`} textContent="Find Projects" />
       </div>
 
       <div className="test">

src/app/home/homeSectionServices.jsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Button from "@/components/Buttons";
 
 /**
  * Home services section.
@@ -21,9 +21,7 @@ export default function HomeSectionServices({sectionType}) {
             projects at our meetups. Join us to be a part of a vibrant community
             dedicated to positive change through technology.
           </p>
-          <a className={`home-button home-button-numbered`} href="https://www.meetup.com/code4sac/" target="_blank" rel="noopener noreferrer" aria-label="Link to Meetup.">
-            Visit Meetup
-          </a>
+          <Button className={`btn btn-alt-gold`} href="https://www.meetup.com/code4sac/" target="_blank" textContent="Visit Meetup" />
         </div>
 
         <div className={`home-numbered-container`}>
@@ -34,7 +32,7 @@ export default function HomeSectionServices({sectionType}) {
             real challenges and enhance our city. Be part of a dynamic team working
             on solutions that make a difference.
           </p>
-          <Link className={`home-button home-button-numbered`} href="/projects">See Our Projects</Link>
+          <Button className={`btn btn-alt-gold`} href="/projects" textContent="See Our Projects" />
         </div>
 
         <div className={`home-numbered-container`}>
@@ -45,7 +43,7 @@ export default function HomeSectionServices({sectionType}) {
             join forces with our community of innovators to bring your vision to
             life, driving positive change in Sacramento.
           </p>
-          <Link className={`home-button home-button-numbered md:container md:mx-auto`} href="/pitch">Pitch a Project</Link>
+          <Button className={`btn btn-alt-gold`} href="/pitch" textContent="Pitch a Project" />
         </div>
       </div>
     </section>

src/app/not-found.js

@@ -1,4 +1,5 @@
 import '@/styles/pages/not-found.scss';
+import Link from 'next/link';
 
 /**
  * 404 not found page. This is a built-in Next.js function.
@@ -16,15 +17,15 @@ export default function notFound() {
             <p>Looks like this page hasn&apos;t been developed yet.</p>
             <p>Would you like to join and be a part of creating it?</p>
           </div>
-          <a
+          <Link
               href="https://github.com/code4sac/opensac.org"
               className="not-found-link"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Link to opensac.org github page."
             >
               Get Started
-            </a>
+            </Link>
           <p>Explore our site using the menu above.</p>
         </div>
       </section>

src/app/pitch/instructions.json

@@ -7,17 +7,17 @@
   {
     "id": 2,
     "title": "Review our Code of Conduct",
-    "body": "Familiarize yourself with our Code of Conduct, which outlines the principles and expectations\nguiding our community. We value respectful and inclusive interactions to create a positive\nenvironment for everyone. Please read and understand <a href=\"/\" class=\"step-anchor\">our\nguidelines</a> for a positive experience."
+    "body": "Familiarize yourself with our Code of Conduct, which outlines the principles and expectations\nguiding our community. We value respectful and inclusive interactions to create a positive\nenvironment for everyone. Please read and understand <a href=\"/code-of-conduct\" class=\"step-anchor\" aria-label=\"Link to code of conduct.\">our\nguidelines</a> for a positive experience."
   },
   {
     "id": 3,
     "title": "Complete Project Form",
-    "body": "Fill out a <a href=\"/\" class=\"step-anchor\">Project Form</a> to formally propose your idea.\nAfter submitting, please allow 1-2 weeks for our team to review your project proposal.\nWe&apos;ll carefully assess its alignment with our mission and guidelines.\nDuring this time, someone from our team will reach out to discuss your project further."
+    "body": "Fill out a <a href=\"https://docs.google.com/forms/d/1abnO-X0OQU-fR2WwLNNrXys7cYNdNH3KWSSHiGbz2ug/viewform?pli=1&pli=1&edit_requested=true\" class=\"step-anchor\" target=\"_blank\" aria-label=\"Link to project form.\">Project Form</a> to formally propose your idea.\nAfter submitting, please allow 1-2 weeks for our team to review your project proposal.\nWe&apos;ll carefully assess its alignment with our mission and guidelines.\nDuring this time, someone from our team will reach out to discuss your project further."
   },
   {
     "id": 4,
     "title": "Attend Weekly Meetings (optional)",
-    "body": "For the fastest way to engage with our community and potentially pitch your project,\nconsider attending our weekly meetings posted on Meetup. These meetings provide an excellent\nopportunity to connect with our team, discuss your project ideas,\nand explore collaborations within our community."
+    "body": "For the fastest way to engage with our community and potentially pitch your project,\nconsider attending our weekly meetings posted on <a class=\"step-anchor\" href=\"https://www.meetup.com/code4sac/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Link to Meetup.\">Meetup</a>. These meetings provide an excellent\nopportunity to connect with our team, discuss your project ideas,\nand explore collaborations within our community."
   },
   {
     "id": 5,

src/app/projects/[project]/singleProjectsContribute.jsx

@@ -1,3 +1,5 @@
+import Button from "@/components/Buttons";
+
 export default function SingleProjectsContribute({ sectionType, contributeAs, setContributeAs }) {
   return (
       <section id="how-to-contribute" className={`project-contribute-container`}>
@@ -10,10 +12,10 @@ export default function SingleProjectsContribute({ sectionType, contributeAs, se
         </p>
         <h4 className={`project-info-label`}>Get Involved As</h4>
         <div className = {`project-button-container`}>
-          <button className = {`project-button ${contributeAs === 'developer' && 'project-button-alt'}`} onClick={() => setContributeAs("developer")}>Developer</button>
-          <button className={`project-button ${contributeAs === 'designer' && 'project-button-alt'}`} onClick={() => setContributeAs("designer")}>Designer</button>
-          <button className={`project-button ${contributeAs === 'other' && 'project-button-alt'}`} onClick={() => setContributeAs("other")}>Other</button>
+          <Button className = {`btn ${contributeAs === "developer" ? "btn-gold" : "btn-alt-gold"}`} onClick={() => setContributeAs("developer")} textContent={"Developer"} />
+          <Button className={`btn ${contributeAs === "designer" ? "btn-gold" : "btn-alt-gold"}`} onClick={() => setContributeAs("designer")} textContent={"Designer"} />
+          <Button className={`btn ${contributeAs === "other" ? "btn-gold" : "btn-alt-gold"}`} onClick={() => setContributeAs("other")} textContent={"Other"} />
         </div>
       </section>
   );
-}
+}

src/app/projects/[project]/singleProjectsSectionStart.jsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import moment from "moment";
+import Button from "@/components/Buttons";
 
 /**
  * Single project start section.
@@ -25,18 +25,10 @@ export default function SingleProjectsSectionStart({ sectionType, data }) {
         <p className={`project-paragraph`}>{data.meta.description}</p>
         <p className={`project-paragraph`}>Last Updated: {`${moment(data.updated_at).format("ddd MMM D, H:mma")}`}</p>
         <div className={`project-button-container`}>
-          <Link
-            href={data.html_url} // source code
-            target="_blank"
-            className={`project-button project-button-alt`}
-          >
-            View Source Code
-          </Link>
-          <Link href="/get-started" className={`project-button project-button-alt`}>
-            Get Started
-          </Link>
+          <Button className={"btn btn-gold"} href={data.html_url} target={'_blank'} textContent={"View Source Code"} />
+          <Button className={"btn btn-gold"} href={"/get-started"} textContent={"Get Started"} />
         </div>
       </div>
     </section>
   );
-}
+}

src/app/projects/projectCard.jsx

@@ -1,3 +1,5 @@
+import Button from "@/components/Buttons";
+
 /**
  * Projects start section.
  * @returns {JSX.Element}
@@ -33,12 +35,8 @@ export default function ProjectCard({
         Last Updated: {lastUpdatedTimestamp.format("ddd MMM D, H:mma")}
       </div>
       <div className={`project-card-buttons-container`}>
-        <a className={`project-card-button-dark ${isLoading && 'project-card-loading'}`} href={pageUrl}>
-          Learn More
-        </a>
-        <a className={`project-card-button-light ${isLoading && 'project-card-loading'}`} href={githubUrl}>
-          Source Code
-        </a>
+        <Button className={`btn btn-blue ${isLoading && 'project-card-loading'}`} href={pageUrl} textContent="Learn More" />
+        <Button className={`btn btn-alt-blue ${isLoading && 'project-card-loading'}`} href={githubUrl} textContent="Source Code" />
       </div>
     </section>
   );

src/app/projects/projectsSectionStart.jsx

@@ -1,4 +1,5 @@
 import { getWednesday } from "@/utils/get-wednesday";
+import Link from "next/link";
 
 /**
  * Projects start section.
@@ -40,10 +41,10 @@ export default function ProjectsSectionStart({ sectionType }) {
           </ul>
         </div>
         <div className={`meeting-card-section`}>
-          <a className={`meeting-card-link`} href="https://www.meetup.com/code4sac/" target="_blank" rel="noopener noreferrer" aria-label="Link to Meetup.">
+          <Link className={`meeting-card-link`} href="https://www.meetup.com/code4sac/" target="_blank" rel="noopener noreferrer" aria-label="Link to Meetup.">
             <span>Go to meetup</span>
             <img src="./img/meeting-card/arrow-right.svg" alt="Arrow right." />
-          </a>
+          </Link>
         </div>
       </div> 
       </div>

src/components/Buttons/Button.jsx

@@ -0,0 +1,10 @@
+import Link from "next/link";
+
+const Button = ({className, href, target, onClick, textContent}) => {
+  return (
+        href ? <Link className={className} href={href} target={target ? target : '_self'}>{textContent}</Link> :
+        <button className={className} onClick={onClick ? onClick : null}>{textContent}</button>
+  )
+}
+
+export default Button

src/components/Buttons/index.js

@@ -0,0 +1,3 @@
+import Button from "./Button";
+
+export default Button

src/components/app/AppFooter.jsx

@@ -20,15 +20,15 @@ export default function AppFooter() {
         <div className="footerActionLinks">
           <p className="footerActionLinksItem">
             Join us for our weekly meetings on{" "}
-            <a
+            <Link
               className="footerActionLinksAnchor"
               href="https://www.meetup.com/code4sac/"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Link to Meetup."
             >
               meetup
-            </a>
+            </Link>
             .
           </p>
           <p className="footerActionLinksItem">

src/components/app/AppNavbar/AppNavbar.jsx

@@ -60,7 +60,7 @@ export default function AppNavbar() {
         <div className={'navbar-toolbar-main'}>
           <div className={'navbar-toolbar-content container-xxl'}>
             <div className={'navbar-left-container'}>
-              <Link className={'navbar-left-section'} href="/public">
+              <Link className={'navbar-left-section'} href="/">
                 <img src="/img/logo_opensac_black_transparent_2.png" alt="Open Sacramento logo" height="60"
                      width="200"/>
               </Link>
@@ -69,7 +69,7 @@ export default function AppNavbar() {
             <div className={'navbar-middle-container'}>
               <ul className={'navbar-middle-section'}>
                 <li className={`navbar-link ${websiteURL === '/' ? 'navbar-link-selected one' : ''}`}>
-                  <Link href="/public">Home</Link>
+                  <Link href="/">Home</Link>
                 </li>
                 <li className={`navbar-link ${websiteURL === '/about' ? 'navbar-link-selected two' : ''}`}>
                   <Link href="/about">About</Link>