Add AboutPage

client/src/App.tsx

@@ -9,6 +9,7 @@ import LocationPage from './pages/LocationPage';
 import LocationEditPage from './pages/LocationEditPage';
 import WriteReviewPage from './pages/WriteReviewPage';
 import ProfilePage from './pages/ProfilePage';
+import AboutPage from './pages/AboutPage';
 import ModerationPage from './pages/ModerationPage';
 import Header from './components/Header';
 import Footer from './components/Footer';
@@ -42,6 +43,7 @@ function App() {
           <Route exact path="/profile" component={ProfilePage}>
             {currentUser ? <ProfilePage /> : <Redirect to="/login" />}
           </Route>
+          <Route exact path="/about" component={AboutPage} />
           <Route exact path="/moderation" component={ModerationPage}>
             {currentUser ? <ModerationPage /> : <Redirect to="/login" />}
           </Route>

client/src/components/Footer/index.tsx

@@ -6,18 +6,17 @@ function Footer() {
     <div className="footer-container">
       <Link to="/" className="footer-logo-link" />
       <div className="footer-link-section">
-        <Link className="footer-link" to="/loc/3588023830">
-          LINK 1
-        </Link>
-        <Link className="footer-link" to="/loc/3588023830">
-          LINK 2
-        </Link>
-        <Link className="footer-link" to="/loc/3588023830">
-          LINK 3
-        </Link>
-        <Link className="footer-link" to="/loc/3588023830">
-          LINK 4
+        <Link className="footer-link" to="/about">
+          ABOUT
         </Link>
+        <a
+          className="footer-link"
+          href="https://github.com/ucsb-cs148-f21/project-t06-campusmaps"
+          target="_blank"
+          rel="noreferrer"
+        >
+          GITHUB
+        </a>
       </div>
       <p>Copyright © 2021</p>
     </div>

client/src/pages/AboutPage/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AboutPage should render successfully 1`] = `
+<Context.Provider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <AboutPage />
+</Context.Provider>
+`;

client/src/pages/AboutPage/index.scss

@@ -0,0 +1,49 @@
+.about-us-title {
+  font-size: 5em;
+  font-weight: bold;
+  color: black;
+  padding: 20px;
+}
+
+.about-us-text {
+  font-size: 30px;
+  padding-left: 300px;
+  padding-right: 300px;
+}
+
+.about-us-body {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+  padding: 40px;
+}
+
+.about-us-body-parts {
+  padding-top: 25px;
+  color: black;
+  padding-left: 350px;
+  padding-right: 350px;
+}
+
+.about-us-body-top {
+  font-size: 30px;
+  padding-bottom: 10px;
+  text-align: left;
+  color: black;
+}
+
+.about-us-body-middle {
+  text-align: left;
+  font-size: 20px;
+  color: black;
+  border-bottom: 1px solid gray;
+  padding-bottom: 25px;
+}
+
+.about-us-body-last {
+  text-align: left;
+  font-size: 20px;
+  color: black;
+  padding-bottom: 25px;
+}

client/src/pages/AboutPage/index.test.tsx

@@ -0,0 +1,16 @@
+import ShallowRenderer from 'react-test-renderer/shallow';
+import { Provider } from 'react-redux';
+import store from '../../reducers';
+import AboutPage from './index';
+
+describe('AboutPage', () => {
+  it('should render successfully', () => {
+    const renderer = ShallowRenderer.createRenderer();
+    const tree = renderer.render(
+      <Provider store={store}>
+        <AboutPage />
+      </Provider>
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

client/src/pages/AboutPage/index.tsx

@@ -0,0 +1,33 @@
+import './index.scss';
+
+function AboutPage() {
+  return (
+    <div className="about-us-all">
+      <div className="about-us-title">Where Maps meet Campuses</div>
+      <div className="about-us-text">
+        We envisioned a campus where students would no longer spend hours going
+        around campus just to find their classes. That's why we made this to
+        help you find your classes with ease.
+      </div>
+      <div className="about-us-body">
+        <div className="about-us-body-parts">
+          <div className="about-us-body-top">UCSB CS 148</div>
+          <div className="about-us-body-middle">12pm t06-campusmaps</div>
+        </div>
+        <div className="about-us-body-parts">
+          <div className="about-us-body-top">Members:</div>
+          <div className="about-us-body-middle">
+            Christopher Chang<br></br>
+            Janet Zhou<br></br>
+            Jason Em <br></br>
+            Jonathan Wang<br></br>
+            Max Binham<br></br>
+            Sarah Kwon
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AboutPage;