Merge branch 'master' into use-reactstrap

2025-04-09 15:00:20 -04:00 · 2021-06-27 20:43:46 -04:00 · 2021-06-27 20:43:46 -04:00 · edf38888b4
commit edf38888b4
parent 9c8ddeb316 19765e2b17
16 changed files with 1108 additions and 995 deletions
--- a/.deepsource.toml
+++ b/.deepsource.toml
@ -0,0 +1,19 @@
+version = 1
+
+test_patterns = [
+  "public/**",
+  "src/**"
+]
+
+exclude_patterns = ["src/components/assets/img/**"]
+
+[[analyzers]]
+name = "javascript"
+enabled = true
+
+  [analyzers.meta]
+  plugins = ["react"]
+
+[[transformers]]
+name = "standardjs"
+enabled = true
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '24 20 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@ -0,0 +1,25 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+name: Node.js CI
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    
+    - run: npm install
+    - run: npm run build --if-present
+    - run: npm test
--- a/src/App.js
+++ b/src/App.js
@ -1,34 +1,34 @@
-import React, {Component} from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import About from "./components/About";
-import ContactForm from "./components/Contact";
-import Home from "./components/Home";
-import PostDetail from "./components/PostDetail";
-import Olympian from "./components/Olympian";
-import Blog from "./components/Blog";
-import Donate from "./components/Donate";
-import Navbar from "./components/Navbar";
-import Sponsors from "./components/Sponsors";
-import Events from "./components/Events";
+import React, { Component } from 'react'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import About from './components/About'
+import ContactForm from './components/Contact'
+import Home from './components/Home'
+import PostDetail from './components/PostDetail'
+import Olympian from './components/Olympian'
+import Blog from './components/Blog'
+import Donate from './components/Donate'
+import Navbar from './components/Navbar'
+import Sponsors from './components/Sponsors'
+import Events from './components/Events'

-function App() {
+function App () {
  return (
    <BrowserRouter>
      <Navbar />
      <Switch>
-        <Route component={About} path="/about" />
-        <Route component={ContactForm} path="/contact" />
-        <Route component={PostDetail} path="/blog/:slug" />
-        <Route component={Blog} path="/blog" />
-        <Route component={Donate} path="/donate" />
-        <Route component={Sponsors} path="/sponsors" />
-        <Route component={Events} path="/events" />
-        <Route component={Olympian} path="/meet-olympian" />
-        <Route component={Home} path="/" />
+        <Route component={About} path='/about' />
+        <Route component={ContactForm} path='/contact' />
+        <Route component={PostDetail} path='/blog/:slug' />
+        <Route component={Blog} path='/blog' />
+        <Route component={Donate} path='/donate' />
+        <Route component={Sponsors} path='/sponsors' />
+        <Route component={Events} path='/events' />
+        <Route component={Olympian} path='/meet-olympian' />
+        <Route component={Home} path='/' />

      </Switch>
    </BrowserRouter>
-  );
+  )
 }

-export default App;
+export default App
--- a/src/client.js
+++ b/src/client.js
@ -1,6 +1,6 @@
-import sanityClient from "@sanity/client";
+import sanityClient from '@sanity/client'

 export default sanityClient({
-  projectId: "1wob9lyq",
-  dataset: "production",
-});
+  projectId: '1wob9lyq',
+  dataset: 'production'
+})
--- a/src/components/About.js
+++ b/src/components/About.js
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@ -1,26 +1,26 @@
-import React from "react";
-import "./assets/Blog.scss";
-import hero from "./assets/img/olympian_hero.png";
+import React from 'react'
+import './assets/Blog.scss'
+import hero from './assets/img/olympian_hero.png'

-export default function Blog(props) {
+export default function Blog (props) {
  return (
    <body>
-      <section className="hero-temp">
-      <div className="landing-header">
-        <h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
-        <h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
-      </div>
-      <div className="landing-subheader">
-        <p>
-        <span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span>
-        </p>
-      </div>
-      <img
-        className="landing-robot"
-        src={hero}
-        alt=""
-      />    
+      <section className='hero-temp'>
+        <div className='landing-header'>
+          <h1 id='potentia'><span className='highlight-gray'>&nbsp;Potentia&nbsp;</span></h1>
+          <h1 id='robotics'><span className='highlight-gray'>&nbsp;Robotics&nbsp;</span></h1>
+        </div>
+        <div className='landing-subheader'>
+          <p>
+            <span className='highlight-gray'>&nbsp;This page is under construction.&nbsp;<br />&nbsp;Please check back later!&nbsp;</span>
+          </p>
+        </div>
+        <img
+          className='landing-robot'
+          src={hero}
+          alt=''
+        />
      </section>
    </body>
-  );
+  )
 }
--- a/src/components/Events.js
+++ b/src/components/Events.js
@ -1,40 +1,36 @@
-import "./assets/Events.scss";
-import React, {Component} from "react";
-import {createGlobalStyle} from 'styled-components';
-import bot2 from "./assets/img/bot2.png";
+import './assets/Events.scss'
+import React, { Component } from 'react'
+import { createGlobalStyle } from 'styled-components'
+import bot2 from './assets/img/bot2.png'
 import './assets/Donate.scss'
-//var Diamond = require("./assets/img/0002.jpg")
-import icon from "./assets/img/0002.jpg";
-import icon2 from "./assets/img/0001.jpg";
-import icon3 from "./assets/img/0003.jpg";
-import pdf from "./assets/Python_BootCamp.pdf";
+// var Diamond = require("./assets/img/0002.jpg")
+import icon from './assets/img/0002.jpg'
+import icon2 from './assets/img/0001.jpg'
+import icon3 from './assets/img/0003.jpg'
+import pdf from './assets/Python_BootCamp.pdf'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'

-
 class Events extends Component {
-  render() {
-      return(
-          <>
-          <br></br>
-          <div className="flyer-container">
-            <img src = {icon2} width="30%" height="100%" alt="image of team member"></img>
-          </div>
-          <div className="pdf-link-container">
-          
-            <div className="pdf-link">
-              <a href={pdf} download className="pdf-download"><strong>Learn More</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>  
-            </div>
-        
+  render () {
+    return (
+      <>
+        <br />
+        <div className='flyer-container'>
+          <img src={icon2} width='30%' height='100%' alt='image of team member' />
+        </div>
+        <div className='pdf-link-container'>
+
+          <div className='pdf-link'>
+            <a href={pdf} download className='pdf-download'><strong>Learn More</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight} /></a>
          </div>

-          <div className="bottom">
+        </div>

-          </div>
-          </>
-      );
+        <div className='bottom' />
+      </>
+    )
  }
 }

-
-export default Events;
+export default Events
--- a/src/components/Home.js
+++ b/src/components/Home.js
@ -1,92 +1,93 @@
-import React from "react";
-import "./assets/Home.scss";
-import hero from "./assets/img/olympian_hero.png";
-import team_picture from "./assets/img/team_picture.png";
-import olympian_waving from "./assets/img/olympian_waving.png";
+import React from 'react'
+import './assets/Home.scss'
+import hero from './assets/img/olympian_hero.png'
+import team_picture from './assets/img/team_picture.png'
+import olympian_waving from './assets/img/olympian_waving.png'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
-import {Spring} from 'react-spring/renderprops'
+import { Spring } from 'react-spring/renderprops'

-export default function Home(props) {
+export default function Home (props) {
  return (
-    <body className="main-content">
-      <section className="hero">
-        <div className="landing-header">
-          <h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
-          <h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
+    <body className='main-content'>
+      <section className='hero'>
+        <div className='landing-header'>
+          <h1 id='potentia'><span className='highlight-gray'>&nbsp;Potentia&nbsp;</span></h1>
+          <h1 id='robotics'><span className='highlight-gray'>&nbsp;Robotics&nbsp;</span></h1>
        </div>
-        <div className="landing-subheader">
+        <div className='landing-subheader'>
          <p>
-          <span className="highlight-gray">&nbsp;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
+            <span className='highlight-gray'>&nbsp;The first high school team to design and&nbsp;<br />&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
          </p>
        </div>
        <img
-          className="landing-robot"
+          className='landing-robot'
          src={hero}
-          alt=""
-        />    
+          alt=''
+        />
      </section>
-      <section className="intro-wrapper">
-        <div className="intro-content">
-          <h1 className="intro-header">Who are we?</h1>
-          <p className="intro-text">
-          Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot <strong>entirely from scratch</strong>. 
-          It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST). <br></br><br></br>
-          We're building <span class="text-blue"><strong>Olympian</strong></span>: our low-cost, 6-foot tall, bipedal humanoid robot with a human-like dynamically stable gait, limb mobility, and balance capabilities, that can be controlled effectively and efficiently from afar.</p>
+      <section className='intro-wrapper'>
+        <div className='intro-content'>
+          <h1 className='intro-header'>Who are we?</h1>
+          <p className='intro-text'>
+            Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot <strong>entirely from scratch</strong>.
+            It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST). <br /><br />
+            We're building <span class='text-blue'><strong>Olympian</strong></span>: our low-cost, 6-foot tall, bipedal humanoid robot with a human-like dynamically stable gait, limb mobility, and balance capabilities, that can be controlled effectively and efficiently from afar.
+          </p>
        </div>
-        <div className="intro-space"></div>
-        <div className="mission-statement">
-          <h1 className="intro-header">Our mission</h1>
-          <p className="intro-text">
-          At Potentia Robotics, we want to push the boundaries of what high-school students can achieve.
-          Our ultimate goal is to further STEM knowledge in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale.
+        <div className='intro-space' />
+        <div className='mission-statement'>
+          <h1 className='intro-header'>Our mission</h1>
+          <p className='intro-text'>
+            At Potentia Robotics, we want to push the boundaries of what high-school students can achieve.
+            Our ultimate goal is to further STEM knowledge in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale.
          </p>
        </div>
      </section>
-      <section className="picture-redirect-wrapper">
-        <div className="about-us-content">
-          <a href="/about">
-          <img
-            className="team-picture"
-            src={team_picture}
-            alt=""
-          />  
-          </a> 
-          <div className="about-us-link-wrapper">
-            <a href="/about" className="about-us-link"><strong>Meet the Team</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>
+      <section className='picture-redirect-wrapper'>
+        <div className='about-us-content'>
+          <a href='/about'>
+            <img
+              className='team-picture'
+              src={team_picture}
+              alt=''
+            />
+          </a>
+          <div className='about-us-link-wrapper'>
+            <a href='/about' className='about-us-link'><strong>Meet the Team</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight} /></a>
          </div>
        </div>
-        <div className="intro-space"></div>
-        <div className="meet-olympian-content">
-        <a href="/meet-olympian">
-          <img
-            className="olympian-waving"
-            src={olympian_waving}
-            alt=""
-          />  
-          </a> 
-          <div className="about-us-link-wrapper">
-            <a href="/meet-olympian" className="about-us-link"><strong>Meet Olympian</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>
+        <div className='intro-space' />
+        <div className='meet-olympian-content'>
+          <a href='/meet-olympian'>
+            <img
+              className='olympian-waving'
+              src={olympian_waving}
+              alt=''
+            />
+          </a>
+          <div className='about-us-link-wrapper'>
+            <a href='/meet-olympian' className='about-us-link'><strong>Meet Olympian</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight} /></a>
          </div>
        </div>
      </section>
-      <div className="buttonSet" id="goHere">
-          <Spring
-          from= {{ opacity: 0 }}
-          to={{opacity: 1}}
-          config = {{delay: 1000}}
-          >
-            { props=> (
-              <div style={props}>
-                <a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" rel="noopener noreferrer" className="fa fa-linkedin"></a>
-                <a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" rel="noopener noreferrer" className="fa fa-youtube"></a>
-                <a href="https://github.com/PotentiaRobotics" target="_blank" rel="noopener noreferrer" className="fa fa-github"></a>
-                <a href="#" target="_blank" rel="noopener noreferrer" className="fa fa-instagram"></a>
-                <a href="https://www.facebook.com/potentiarobotics/" target="_blank" rel="noopener noreferrer" className="fa fa-facebook"></a>
-              </div>
-            )}
-          </Spring>
-        </div>
+      <div className='buttonSet' id='goHere'>
+        <Spring
+          from={{ opacity: 0 }}
+          to={{ opacity: 1 }}
+          config={{ delay: 1000 }}
+        >
+          {props => (
+            <div style={props}>
+              <a href='https://www.linkedin.com/in/potentia-robotics-790582204/' target='_blank' rel='noopener noreferrer' className='fa fa-linkedin' />
+              <a href='https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q' target='_blank' rel='noopener noreferrer' className='fa fa-youtube' />
+              <a href='https://github.com/PotentiaRobotics' target='_blank' rel='noopener noreferrer' className='fa fa-github' />
+              <a href='#' target='_blank' rel='noopener noreferrer' className='fa fa-instagram' />
+              <a href='https://www.facebook.com/potentiarobotics/' target='_blank' rel='noopener noreferrer' className='fa fa-facebook' />
+            </div>
+          )}
+        </Spring>
+      </div>
    </body>
-  );
+  )
 }
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@ -1,42 +1,42 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-import "./assets/Navbar.scss";
-import logo from "./assets/img/logo_tr_bg.png"
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import './assets/Navbar.scss'
+import logo from './assets/img/logo_tr_bg.png'

-export default function Navbar(props) {
+export default function Navbar (props) {
  const handleBurger = () => {
-    const burger = document.querySelector(".burger");
-    const nav = document.querySelector(".nav-links");
-    const navLinks = document.querySelectorAll(".nav-links li");
+    const burger = document.querySelector('.burger')
+    const nav = document.querySelector('.nav-links')
+    const navLinks = document.querySelectorAll('.nav-links li')

-    nav.classList.toggle("nav-active");
+    nav.classList.toggle('nav-active')

    // animate links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
-        link.style.animation = "";
+        link.style.animation = ''
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${
          index / 7 + 0.5
-        }s`;
+        }s`
      }
-    });
+    })

    // burger anim
-    burger.classList.toggle("toggle");
-  };
+    burger.classList.toggle('toggle')
+  }

  return (
    <nav>
-      <div className="brand">
-        <NavLink to="/" exact>
-          <img src={logo} className="nav-logo"></img>
+      <div className='brand'>
+        <NavLink to='/' exact>
+          <img src={logo} className='nav-logo' />
        </NavLink>
      </div>
-      <ul className="nav-links">
+      <ul className='nav-links'>
        <li>
-          {" "}
-          <NavLink to="/" exact activeClassName="active-link">
+          {' '}
+          <NavLink to='/' exact activeClassName='active-link'>
            Home
          </NavLink>
        </li>
@ -47,26 +47,26 @@ export default function Navbar(props) {
          </NavLink>
        </li> */}
        <li>
-          {" "}
-          <NavLink to="/meet-olympian" activeClassName="active-link">
+          {' '}
+          <NavLink to='/meet-olympian' activeClassName='active-link'>
            Meet Olympian
          </NavLink>
        </li>
        <li>
-          {" "}
-          <NavLink to="/blog" activeClassName="active-link">
+          {' '}
+          <NavLink to='/blog' activeClassName='active-link'>
            Blog
          </NavLink>
        </li>
        <li>
-          {" "}
-          <NavLink to="/sponsors" activeClassName="active-link">
+          {' '}
+          <NavLink to='/sponsors' activeClassName='active-link'>
            Sponsors
          </NavLink>
        </li>
        <li>
-          {" "}
-          <NavLink to="/contact" activeClassName="active-link">
+          {' '}
+          <NavLink to='/contact' activeClassName='active-link'>
            Contact Us
          </NavLink>
        </li>
@ -77,17 +77,17 @@ export default function Navbar(props) {
          </NavLink>
        </li> */}
        <li>
-          {" "}
-          <NavLink to="/events" activeClassName="active-link">
+          {' '}
+          <NavLink to='/events' activeClassName='active-link'>
            Events
          </NavLink>
        </li>
      </ul>
-      <div className="burger" onClick={handleBurger}>
-        <div className="line1"></div>
-        <div className="line2"></div>
-        <div className="line3"></div>
+      <div className='burger' onClick={handleBurger}>
+        <div className='line1' />
+        <div className='line2' />
+        <div className='line3' />
      </div>
    </nav>
-  );
+  )
 }
--- a/src/components/Olympian.js
+++ b/src/components/Olympian.js
@ -1,26 +1,26 @@
-import React from "react";
-import "./assets/Olympian.scss";
-import hero from "./assets/img/olympian_hero.png";
+import React from 'react'
+import './assets/Olympian.scss'
+import hero from './assets/img/olympian_hero.png'

-export default function Events(props) {
+export default function Events (props) {
  return (
    <body>
-      <section className="hero-temp">
-      <div className="landing-header">
-        <h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
-        <h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
-      </div>
-      <div className="landing-subheader">
-        <p>
-        <span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span>
-        </p>
-      </div>
-      <img
-        className="landing-robot"
-        src={hero}
-        alt=""
-      />    
+      <section className='hero-temp'>
+        <div className='landing-header'>
+          <h1 id='potentia'><span className='highlight-gray'>&nbsp;Potentia&nbsp;</span></h1>
+          <h1 id='robotics'><span className='highlight-gray'>&nbsp;Robotics&nbsp;</span></h1>
+        </div>
+        <div className='landing-subheader'>
+          <p>
+            <span className='highlight-gray'>&nbsp;This page is under construction.&nbsp;<br />&nbsp;Please check back later!&nbsp;</span>
+          </p>
+        </div>
+        <img
+          className='landing-robot'
+          src={hero}
+          alt=''
+        />
      </section>
    </body>
-  );
+  )
 }
--- a/src/components/PostDetail.js
+++ b/src/components/PostDetail.js
@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react'

-export default function PostDetail(props) {
-  return <div>Post Detail</div>;
+export default function PostDetail (props) {
+  return <div>Post Detail</div>
 }
--- a/src/components/Sponsors.js
+++ b/src/components/Sponsors.js
@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import {createGlobalStyle} from 'styled-components';
-import {Container, Row, Col} from "react-bootstrap"
-import {Spring} from 'react-spring/renderprops'
+import React, { Component } from 'react'
+import { createGlobalStyle } from 'styled-components'
+import { Container, Row, Col } from 'react-bootstrap'
+import { Spring } from 'react-spring/renderprops'

 import './assets/Sponsors.scss'

@ -19,55 +19,53 @@ const GlobalStyle = createGlobalStyle`
  h2 {
    color: #fff;
  }
-`;
+`

 class Sponsors extends Component {
-  render() {
+  render () {
    return (
      <>
-      <GlobalStyle/>
-      <div className="sponsor-intro-wrapper">
-        <h3 className="sponsor-intro" style={{color: '#fff', textAlign: 'center'}}>Our amazing sponsors help make Potentia Robotics' projects possible! <br></br> Contact us to learn more about sponsorship.</h3>
-        <Container fluid className="sponsor-tier-list">
-          <Col className="show-container">
-            <Col md={4}>
-              <h1 style={{color: '#FFD753'}} className='glow'><b>Gold</b></h1>
-              <h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $1000+<br></br>Perks: Silver + logo on Olympian</h2>
+        <GlobalStyle />
+        <div className='sponsor-intro-wrapper'>
+          <h3 className='sponsor-intro' style={{ color: '#fff', textAlign: 'center' }}>Our amazing sponsors help make Potentia Robotics' projects possible! <br /> Contact us to learn more about sponsorship.</h3>
+          <Container fluid className='sponsor-tier-list'>
+            <Col className='show-container'>
+              <Col md={4}>
+                <h1 style={{ color: '#FFD753' }} className='glow'><b>Gold</b></h1>
+                <h2 style={{ textAlign: 'center' }} className='tier-detail'>Donation amount: $1000+<br />Perks: Silver + logo on Olympian</h2>
+              </Col>
+              <Col md={4}>
+                <h1 style={{ color: '#C8C3C3' }} className='glow'><b>Silver</b></h1>
+                <h2 style={{ textAlign: 'center' }} className='tier-detail'>Donation amount: $500-$999<br />Perks: Bronze + logo on all Potentia merchandise</h2>
+              </Col>
+              <Col md={4}>
+                <h1 style={{ color: '#E2964E' }} className='glow'><b>Bronze</b></h1>
+                <h2 style={{ textAlign: 'center' }} className='tier-detail'>Donation amount: $100-$499<br />Perks: logo on website + recognition on social media</h2>
+              </Col>
            </Col>
-            <Col md={4}>
-              <h1 style={{color: '#C8C3C3'}} className='glow'><b>Silver</b></h1>
-              <h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $500-$999<br></br>Perks: Bronze + logo on all Potentia merchandise</h2>
-            </Col>
-            <Col md={4}>
-              <h1 style={{color: '#E2964E'}} className='glow'><b>Bronze</b></h1>
-              <h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $100-$499<br></br>Perks: logo on website + recognition on social media</h2>
-            </Col>
-          </Col>
-        </Container>
-      </div>
-      <div className="buttonSet" id="goHere">
+          </Container>
+        </div>
+        <div className='buttonSet' id='goHere'>
          <Spring
-          from= {{ opacity: 0 }}
-          to={{opacity: 1}}
-          config = {{delay: 1000}}
+            from={{ opacity: 0 }}
+            to={{ opacity: 1 }}
+            config={{ delay: 1000 }}
          >
-            { props=> (
+            {props => (
              <div style={props}>
-                <a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" rel="noopener noreferrer" className="fa fa-linkedin"></a>
-                <a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" rel="noopener noreferrer" className="fa fa-youtube"></a>
-                <a href="https://github.com/PotentiaRobotics" target="_blank" rel="noopener noreferrer" className="fa fa-github"></a>
-                <a href="#" target="_blank" rel="noopener noreferrer" className="fa fa-instagram"></a>
-                <a href="https://www.facebook.com/potentiarobotics/" target="_blank" rel="noopener noreferrer" className="fa fa-facebook"></a>
+                <a href='https://www.linkedin.com/in/potentia-robotics-790582204/' target='_blank' rel='noopener noreferrer' className='fa fa-linkedin' />
+                <a href='https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q' target='_blank' rel='noopener noreferrer' className='fa fa-youtube' />
+                <a href='https://github.com/PotentiaRobotics' target='_blank' rel='noopener noreferrer' className='fa fa-github' />
+                <a href='#' target='_blank' rel='noopener noreferrer' className='fa fa-instagram' />
+                <a href='https://www.facebook.com/potentiarobotics/' target='_blank' rel='noopener noreferrer' className='fa fa-facebook' />
              </div>
            )}
          </Spring>
        </div>
-        <div className="bottom">
-
-        </div>
+        <div className='bottom' />
      </>
-      );
+    )
  }
 }

-export default Sponsors;
+export default Sponsors
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
-import './Contact.scss';
-import { MdClose } from 'react-icons/md';
+import styled, { css } from 'styled-components'
+import './Contact.scss'
+import { MdClose } from 'react-icons/md'

 const sharedStyles = css`
  background-color: #ccc;
@ -8,7 +8,7 @@ const sharedStyles = css`
  border: 1px solid #ddd;
  margin: 10px 0 20px 0;
  box-sizing: border-box;
-`;
+`

 const StyledFormWrapper = styled.div`
  display: flex;
@ -17,7 +17,7 @@ const StyledFormWrapper = styled.div`
  position:relative;
  margin-top: 4vw;
  padding: 0 2%;
-`;
+`

 const StyledForm = styled.form`
  width: 70%;
@ -29,9 +29,9 @@ const StyledForm = styled.form`
  @media only screen and (max-width: 800px) {
    width: 90%
  }
-`;
+`
 //  height:100%;
-  // border-radius: 10px; (if we want a round form)
+// border-radius: 10px; (if we want a round form)

 const StyledInput = styled.input`
  display: block;
@ -39,7 +39,7 @@ const StyledInput = styled.input`
  rows: 1;
  padding 1.5%;
  ${sharedStyles}
-`;
+`

 const StyledTextAreaSubject = styled.textarea`
  background-color: #98c1d9;
@ -51,7 +51,7 @@ const StyledTextAreaSubject = styled.textarea`
  spellcheck:true;
  resize: vertical;
  ${sharedStyles}
-`;
+`

 const StyledTextArea = styled.textarea`
  background-color: #98c1d9;
@ -63,7 +63,7 @@ const StyledTextArea = styled.textarea`
  overflow: auto;
  spellcheck:true;
  ${sharedStyles}
-`;
+`
 const StyledButton = styled.button`
  display: block;
  background-color: #ee6c4d;
@ -81,13 +81,13 @@ const StyledButton = styled.button`
 		cursor: pointer;
    opacity:0.7;
 	}
-`;
+`

 const StyledError = styled.div`
  color: red;
  font-weight: 800;
  margin: 0 0 5% 0;
-`;
+`

 const Background = styled.div`
  width: 100%;
@ -97,7 +97,7 @@ const Background = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
-`;
+`

 const ModalWrapper = styled.div`
  overflow: auto;
@ -151,7 +151,7 @@ const ModalWrapper = styled.div`
      width: 100%;
    }
  }
-`;
+`
 const ModalContent = styled.div`
  align-items: center;
  line-height: 1.8;
@ -192,7 +192,7 @@ const ModalContent = styled.div`
    width: 80%;
  } 
  overflow-y: scroll;
-`;
+`

 const CloseModalButton = styled(MdClose)`
  cursor: pointer;
@ -207,33 +207,33 @@ const CloseModalButton = styled(MdClose)`
  @media only screen and (max-width: 500px) {
    top: 3%;
  }
-`;
+`

 const Modal = ({ handleClose, show, children }) => {
-  const showHideClassName = show ? "modal display-block" : "modal display-none";
+  const showHideClassName = show ? 'modal display-block' : 'modal display-none'

  return (
    <div className={showHideClassName}>
      <Background>
-      <ModalWrapper>
-        <ModalContent>{children}</ModalContent>
-        <CloseModalButton type="button" onClick={handleClose}></CloseModalButton>
-      </ModalWrapper>
-     </Background>
+        <ModalWrapper>
+          <ModalContent>{children}</ModalContent>
+          <CloseModalButton type='button' onClick={handleClose} />
+        </ModalWrapper>
+      </Background>
    </div>
-  );
-};
+  )
+}

-export default StyledFormWrapper;
+export default StyledFormWrapper

 export {
-    StyledFormWrapper,
-    StyledForm,
-    sharedStyles,
-    StyledInput,
-    StyledTextArea,
-    StyledButton,
-    StyledError,
-    StyledTextAreaSubject,
-    Modal
-};
+  StyledFormWrapper,
+  StyledForm,
+  sharedStyles,
+  StyledInput,
+  StyledTextArea,
+  StyledButton,
+  StyledError,
+  StyledTextAreaSubject,
+  Modal
+}
--- a/src/index.js
+++ b/src/index.js
@ -1,4 +1,5 @@
 import './bootstrap.css'
+
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import React from 'react'
 import ReactDOM from 'react-dom'
--- a/studio/schemas/schema.js
+++ b/studio/schemas/schema.js
@ -12,5 +12,5 @@ export default createSchema({
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    /* Your types here! */
-  ]),
+  ])
 })