final design of frontend

frontend/src/App.js

@@ -10,7 +10,7 @@ import Events from "./components/Events";
 import Profile from "./components/Profile";
 import CreateEvent from "./components/CreateEvent";
 import CreatePost from "./components/CreatePost";
-
+import Main from "./components/Main";
 import "bootstrap/dist/css/bootstrap.min.css";
 import $ from "jquery";
 import Popper from "popper.js";
@@ -25,6 +25,7 @@ function App() {
         <Switch>
           <Route component={Signup} path="/register" />
           <Route component={Signin} path="/login" />
+          <Route component={Main} path="/about" />
           <ProtectedRoute component={CreateEvent} path="/createevent" />
           <ProtectedRoute component={CreatePost} path="/createpost" />
           <ProtectedRoute component={Posts} path="/posts" />

frontend/src/components/CreateEvent.js

@@ -18,56 +18,60 @@ const CreateEvent = (props) => {
       });
   };
   return (
-    <div
-      className="container card card-body text-left"
-      style={{ backgroundColor: "#F1EAE8" }}
-    >
-      <form onSubmit={onSubmit}>
-        <h1>Create Event</h1>
-        <div className="form-group">
-          <label className="" for="title">
-            Event Title:{" "}
-          </label>
+    <div className="bg-dark" style={{ minHeight: "100vh" }}>
+      <div
+        className="container card card-body text-left"
+        style={{ backgroundColor: "#F1EAE8", fontFamily: "Courier New" }}
+      >
+        <form onSubmit={onSubmit}>
+          <h1 className="form-title" style={{ fontFamily: "Impact" }}>
+            Create Event
+          </h1>
+          <div className="form-group">
+            <label className="" for="title">
+              Event Title:{" "}
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              className="form-control d-flex"
+              placeholder="Enter title here..."
+            ></input>
+          </div>
+          <div className="form-group">
+            <label className="" for="title">
+              Event Website:
+            </label>
+            <input
+              type="text"
+              id="link"
+              name="link"
+              className="form-control d-flex"
+              placeholder="Enter link here..."
+            ></input>
+          </div>
+          <div class="form-group">
+            <label className="" for="title">
+              Event Description:
+            </label>
+            <textarea
+              type="text"
+              id="post-text"
+              name="post-text"
+              style={{ height: "400px" }}
+              className="form-control"
+              placeholder="Enter text here..."
+            ></textarea>
+          </div>
           <input
-            type="text"
-            id="title"
-            name="title"
-            className="form-control d-flex"
-            placeholder="Enter title here..."
-          ></input>
-        </div>
-        <div className="form-group">
-          <label className="" for="title">
-            Event Website:
-          </label>
-          <input
-            type="text"
-            id="link"
-            name="link"
-            className="form-control d-flex"
-            placeholder="Enter link here..."
-          ></input>
-        </div>
-        <div class="form-group">
-          <label className="" for="title">
-            Event Description:
-          </label>
-          <textarea
-            type="text"
-            id="post-text"
-            name="post-text"
-            style={{ height: "400px" }}
-            className="form-control"
-            placeholder="Enter text here..."
-          ></textarea>
-        </div>
-        <input
-          className="btn btn-success text-left"
-          type="submit"
-          value="Submit"
-        />
-        <br />
-      </form>
+            className="btn btn-success text-left"
+            type="submit"
+            value="Submit"
+          />
+          <br />
+        </form>
+      </div>
     </div>
   );
 };

frontend/src/components/CreatePost.js

@@ -19,43 +19,50 @@ const CreatePost = (props) => {
   };
   return (
     <div
-      className="container card card-body text-left "
-      style={{ backgroundColor: "#F1EAE8" }}
+      className="bg-dark"
+      style={{ minHeight: "100vh", fontFamily: "Courier New" }}
     >
-      <form onSubmit={onSubmit}>
-        <div className="form-group">
-          <h1>Create Post</h1>
-          <label className="" for="title">
-            Post Title:{" "}
-          </label>
+      <div
+        className="container card card-body text-left "
+        style={{ backgroundColor: "#F1EAE8" }}
+      >
+        <form onSubmit={onSubmit}>
+          <div className="form-group">
+            <h1 className="form-title" style={{ fontFamily: "Impact" }}>
+              Create Post
+            </h1>
+            <label className="" for="title">
+              Post Title:{" "}
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              className="form-control d-flex"
+              placeholder="Enter title here..."
+            ></input>
+          </div>
+          <div class="form-group">
+            <label className="" for="title">
+              Post:
+            </label>
+            <textarea
+              type="text"
+              id="post-text"
+              name="post-text"
+              style={{ height: "400px" }}
+              className="form-control"
+              placeholder="Enter text here..."
+            ></textarea>
+          </div>
           <input
-            type="text"
-            id="title"
-            name="title"
-            className="form-control d-flex"
-            placeholder="Enter title here..."
-          ></input>
-        </div>
-        <div class="form-group">
-          <label className="" for="title">
-            Post:
-          </label>
-          <textarea
-            type="text"
-            id="post-text"
-            name="post-text"
-            style={{ height: "400px" }}
-            className="form-control"
-            placeholder="Enter text here..."
-          ></textarea>
-        </div>
-        <input
-          className="btn btn-success text-left"
-          type="submit"
-          value="Submit"
-        />
-        <br />
-      </form>
+            className="btn btn-success text-left"
+            type="submit"
+            value="Submit"
+          />
+          <br />
+        </form>
+      </div>
     </div>
   );
 };

frontend/src/components/Event.js

@@ -65,68 +65,73 @@ const Event = (props) => {
       });
   };
   return (
-    <div className="container">
-      <h1>Hello {state.user.username}!</h1>
-      <h1 className="d-flex justify-content-center m-2 p-4">
+    <div className="bg-dark" style={{ minHeight: "100vh" }}>
+      <h1
+        className="d-flex justify-content-center p-4"
+        style={{ fontFamily: "Impact", backgroundColor: "#F1EAE8" }}
+      >
         Event {props.match.params.id}
       </h1>
+      <div className="container" style={{ fontFamily: "Courier New" }}>
+        <h1 className="text-white">Hello {state.user.username}!</h1>
 
-      <div className="card card-body " style={{ backgroundColor: "#F1EAE8" }}>
-        <h1 className="card-title">Event: {state.event_title}</h1>
-        <a className="" href={state.website}>
-          Website
-        </a>
-        <p className="card-text text-left">{state.event_text}</p>
+        <div className="card card-body " style={{ backgroundColor: "#F1EAE8" }}>
+          <h1 className="card-title">Event: {state.event_title}</h1>
+          <a className="" href={state.website}>
+            Website
+          </a>
+          <p className="card-text text-left">{state.event_text}</p>
 
-        <h4 className="text-left">Topics:</h4>
-        <div className="d-flex">
-          {state.topics.map((topic) => {
+          <h4 className="text-left">Topics:</h4>
+          <div className="d-flex">
+            {state.topics.map((topic) => {
+              return (
+                <div
+                  className="text-left m-2 p-1 d-inline-block"
+                  style={{ backgroundColor: "#D6D1D0" }}
+                >
+                  <p>{topic}</p>
+                </div>
+              );
+            })}
+          </div>
+          <form onSubmit={onSubmit} className="text-left">
+            <div id="form-group">
+              <input className="btn btn-success" type="submit" value="+1" />
+            </div>
+            <br />
+          </form>
+          <div className="d-flex">
+            <p className="bg-info rounded p-2 text-white">
+              {state.upvotes} Likes
+            </p>
+          </div>
+        </div>
+        <form onSubmit={onComment}>
+          <div id="form-group" className="text-left">
+            <textarea
+              className="form-control"
+              id="comment"
+              type="text"
+              placeholder="Enter comment here..."
+            />
+            <input className="btn btn-primary" type="submit" value="Submit" />
+          </div>
+          <br />
+        </form>
+        <div className="text-left">
+          <h4 className="text-white">Comments:</h4>
+          {state.comments.map((comment) => {
             return (
               <div
-                className="text-left m-2 p-1 d-inline-block"
+                className="card card-body"
                 style={{ backgroundColor: "#D6D1D0" }}
               >
-                <p>{topic}</p>
+                <p className="card-text">{comment}</p>
               </div>
             );
           })}
         </div>
-        <form onSubmit={onSubmit} className="text-left">
-          <div id="form-group">
-            <input className="btn btn-success" type="submit" value="+1" />
-          </div>
-          <br />
-        </form>
-        <div className="d-flex">
-          <p className="bg-info rounded p-2 text-white">
-            {state.upvotes} Likes
-          </p>
-        </div>
-      </div>
-      <form onSubmit={onComment}>
-        <div id="form-group">
-          <textarea
-            className="form-control"
-            id="comment"
-            type="text"
-            placeholder="Enter comment here..."
-          />
-          <input className="btn btn-primary" type="submit" value="Submit" />
-        </div>
-        <br />
-      </form>
-      <div className="text-left">
-        <h4>Comments:</h4>
-        {state.comments.map((comment) => {
-          return (
-            <div
-              className="card card-body"
-              style={{ backgroundColor: "#D6D1D0" }}
-            >
-              <p className="card-text">{comment}</p>
-            </div>
-          );
-        })}
       </div>
     </div>
   );

frontend/src/components/Events.js

@@ -71,25 +71,35 @@ const Events = (props) => {
   const maybePluralize = (count, noun, suffix = "s") =>
     `${count} ${noun}${count !== 1 ? suffix : ""}`;
   return (
-    <div>
+    <div className="bg-dark" style={{ minHeight: "100vh" }}>
       <h1
         className="d-flex justify-content-center p-4"
-        style={{ backgroundColor: "#F1EAE8" }}
+        style={{ backgroundColor: "#F1EAE8", fontFamily: "Impact" }}
       >
         Events
       </h1>
-      <a className="btn btn-large btn-success" href="/createevent">
+      <a
+        className="btn btn-large btn-success"
+        href="/createevent"
+        style={{ fontFamily: "Courier New" }}
+      >
         Create Event
       </a>
-      <div className="container">
+      <div className="container" style={{ fontFamily: "Courier New" }}>
         <br></br>
 
-        <h1>Hello {state.user.username}!</h1>
-        {state.events.map((event) => {
+        <h1 className="text-white">Hello {state.user.username}!</h1>
+        {state.events.map((event, el) => {
+          let background;
+          if (el % 2 == 0) {
+            background = "#F1EAE8";
+          } else {
+            background = "#FFFFFF";
+          }
           return (
             <div
               className="card card-body text-left"
-              style={{ backgroundColor: "#F1EAE8" }}
+              style={{ backgroundColor: background }}
             >
               <a className="card-title" href={"/event/" + event.id}>
                 {event.text}

frontend/src/components/Main.js

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from "react";
+
+const Main = (props) => {
+  return (
+    <div>
+      <section
+        id="reinvest"
+        style={{
+          backgroundImage: "url('images/background.jpg')",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover",
+          height: "690px",
+          paddingTop: "80px",
+        }}
+      >
+        <div className="container">
+          <br />
+          <br />
+          <br />
+          <h1 className="text-primary text-center bg-white rounded-lg shadow-lg p-3 mb-5">
+            PoliTalk
+          </h1>
+          <br />
+          <br />
+          <br />
+          <h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5">
+            Digitally empowering underrepresented minorities in politics
+          </h3>
+        </div>
+      </section>
+      <section id="about" className="p-4">
+        <div className="container">
+          <h1 className="d-flex justify-content-center m-2 p-2">About Us</h1>
+          <p className="d-flex justify-content-center m-2 p-2">
+            PoliTalk is a politics exchange platform, aiming to create a
+            professional and efficient connection between underrepresented
+            minority groups and politics. Community members can post questions
+            or concerns and other members can +1 the post. Professional
+            legislators or lawmakers can then answer or attempt to enforce laws
+            to support these concerns. To make this process as effective as
+            possible, we use NLP Machine Learning to suggest other articles or
+            posts to users based on previous likes. Our platform also offers
+            suggestions for events that coincide with their interests and free
+            time via Google Calendar.
+          </p>
+        </div>
+      </section>
+      <section id="services" className="">
+        <div className="bg-dark text-white p-4">
+          <div className="container">
+            <h1 className="d-flex justify-content-center m-2 p-4">
+              Our Services
+            </h1>
+
+            <div className="row exp-grids py-3 d-inline-flex justify-content-center">
+              <div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
+                <img src="images/browse.png" alt=" " className="img-fluid" />
+                <div className="exp wthree">
+                  <h5>Browse Stocks</h5>
+                  <div className="clearfix"></div>
+                  <p>
+                    Easily browse through stocks and see their past. Change the
+                    scale of the graph to your pleasing. Then if you wish to
+                    hold a position, specify the amount of money you wish to
+                    donate and submit.
+                  </p>
+                </div>
+              </div>
+              <div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
+                <br />
+                <br />
+                <br />
+                <img src="images/logo.png" alt=" " className="img-fluid" />
+                <div className="exp wthree">
+                  <br />
+                  <br />
+                  <br />
+
+                  <h5>Charities</h5>
+                  <div className="clearfix"></div>
+
+                  <p>
+                    Help out your favorite charities while learning and
+                    practicing trading. The charities will receive the initial
+                    buy price. Then, you can set a percentage of the profits
+                    that also goes to charity. In this era, instead of a simple
+                    donation, you can use our trading platform to trade for your
+                    charities.
+                  </p>
+                </div>
+              </div>
+              <div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
+                <br />
+                <br />
+                <br />
+                <img src="images/portfolio.png" alt=" " className="img-fluid" />
+                <div className="exp wthree">
+                  <br />
+                  <br />
+                  <br />
+
+                  <h5>Portfolio</h5>
+                  <div className="clearfix"></div>
+
+                  <p>
+                    Easily manage your portfolio with Reinvest. Here you can see
+                    all the positions you currently hold as well as the initial
+                    buy price and quantity. You can sell the stock by clicking
+                    Sell for the desired stock. You can also see the current
+                    earnings for yourself and the charity.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="support" className="m-2">
+        <div className="container">
+          <h1 className="d-flex justify-content-center m-2 p-4">Support</h1>
+          <h4>Contact:</h4>
+          <p>@gmail.com</p>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Main;

frontend/src/components/Nav.js

@@ -17,8 +17,8 @@ const Nav = (props) => {
       <div className="collapse navbar-collapse" id="navbarNavDropdown">
         <ul className="navbar-nav mr-auto">
           <li className="nav-item">
-            <a className="nav-link text-white" href="/">
-              <span className="sr-only">(current)</span>
+            <a className="nav-link text-white" href="/about">
+              PoliTalk/Openly <span className="sr-only">(current)</span>
             </a>
           </li>
           <li className="nav-item">

frontend/src/components/Post.js

@@ -70,67 +70,73 @@ const Post = (props) => {
     callAPI();
   }, []);
   return (
-    <div className="container">
-      <h1>Hello {state.user.username}!</h1>
-      <h1 className="d-flex justify-content-center m-2 p-4">
+    <div className="bg-dark" style={{ minHeight: "100vh" }}>
+      <h1
+        style={{ backgroundColor: "#F1EAE8", fontFamily: "Impact" }}
+        className=" d-flex justify-content-center p-4"
+      >
         Post {props.match.params.id}
       </h1>
-      <div className="card card-body " style={{ backgroundColor: "#F1EAE8" }}>
-        <h2 className="card-title">{state.post_title}</h2>
-        <p className="text-left">{state.post_text}</p>
-        <h4 className="text-left">Topics:</h4>
-        <div className="d-flex">
-          {state.topics.map((topic) => {
+      <div className="container " style={{ fontFamily: "Courier New" }}>
+        <h1 className="text-white">Hello {state.user.username}!</h1>
+
+        <div className="card card-body " style={{ backgroundColor: "#F1EAE8" }}>
+          <h1 className="card-title">{state.post_title}</h1>
+          <p className="text-left">{state.post_text}</p>
+          <h4 className="text-left">Topics:</h4>
+          <div className="d-flex">
+            {state.topics.map((topic) => {
+              return (
+                <div
+                  className="text-left m-2 p-1 d-inline-block"
+                  style={{ backgroundColor: "#D6D1D0" }}
+                >
+                  <p>{topic}</p>
+                </div>
+              );
+            })}
+          </div>
+          <form onSubmit={onSubmit} className="text-left">
+            <div id="form-group">
+              <input
+                className="btn btn-success text-left"
+                type="submit"
+                value="+1"
+              />
+            </div>
+            <br />
+          </form>
+          <div className="d-flex">
+            <p className="bg-info rounded p-2 text-white">
+              {state.upvotes} Likes
+            </p>
+          </div>
+        </div>
+        <form onSubmit={onComment}>
+          <div id="form-group" className="text-left">
+            <textarea
+              className="form-control"
+              id="comment"
+              type="text"
+              placeholder="Enter comment here..."
+            />
+            <input className="btn btn-primary" type="submit" value="Submit" />
+          </div>
+          <br />
+        </form>
+        <div className="text-left">
+          <h4 className="text-white">Comments:</h4>
+          {state.comments.map((comment) => {
             return (
               <div
-                className="text-left m-2 p-1 d-inline-block"
+                className="card card-body"
                 style={{ backgroundColor: "#D6D1D0" }}
               >
-                <p>{topic}</p>
+                <p className="card-text">{comment}</p>
               </div>
             );
           })}
         </div>
-        <form onSubmit={onSubmit} className="text-left">
-          <div id="form-group">
-            <input
-              className="btn btn-success text-left"
-              type="submit"
-              value="+1"
-            />
-          </div>
-          <br />
-        </form>
-        <div className="d-flex">
-          <p className="bg-info rounded p-2 text-white">
-            {state.upvotes} Likes
-          </p>
-        </div>
-      </div>
-      <form onSubmit={onComment}>
-        <div id="form-group">
-          <textarea
-            className="form-control"
-            id="comment"
-            type="text"
-            placeholder="Enter comment here..."
-          />
-          <input className="btn btn-primary" type="submit" value="Submit" />
-        </div>
-        <br />
-      </form>
-      <div className="text-left">
-        <h4>Comments:</h4>
-        {state.comments.map((comment) => {
-          return (
-            <div
-              className="card card-body"
-              style={{ backgroundColor: "#D6D1D0" }}
-            >
-              <p className="card-text">{comment}</p>
-            </div>
-          );
-        })}
       </div>
     </div>
   );

frontend/src/components/Posts.js

@@ -37,24 +37,34 @@ const Posts = (props) => {
   const maybePluralize = (count, noun, suffix = "s") =>
     `${count} ${noun}${count !== 1 ? suffix : ""}`;
   return (
-    <div>
+    <div className="bg-dark" style={{ minHeight: "100vh" }}>
       <h1
         className="d-flex justify-content-center p-4"
-        style={{ backgroundColor: "#F1EAE8" }}
+        style={{ backgroundColor: "#F1EAE8", fontFamily: "Impact" }}
       >
         Posts
       </h1>
-      <a className="btn btn-large btn-success" href="/createpost">
+      <a
+        className="btn btn-large btn-success"
+        href="/createpost"
+        style={{ fontFamily: "Courier New" }}
+      >
         Create Post
       </a>
-      <div className="container">
+      <div className="container" style={{ fontFamily: "Courier New" }}>
         <br></br>
-        <h1>Hello {state.user.username}!</h1>
-        {state.posts.map((post) => {
+        <h1 className="text-white">Hello {state.user.username}!</h1>
+        {state.posts.map((post, el) => {
+          let background;
+          if (el % 2 == 0) {
+            background = "#F1EAE8";
+          } else {
+            background = "#FFFFFF";
+          }
           return (
             <div
               className="card card-body text-left"
-              style={{ backgroundColor: "#F1EAE8" }}
+              style={{ backgroundColor: background }}
             >
               <a href={"/post/" + post.id} className="card-title">
                 {post.text}

frontend/src/components/Profile.js

@@ -28,14 +28,14 @@ const Profile = (props) => {
     callAPI();
   }, []);
   return (
-    <div>
+    <div className="" style={{ minHeight: "100vh" }}>
       <h1
         className="d-flex justify-content-center p-4"
-        style={{ backgroundColor: "#F1EAE8" }}
+        style={{ backgroundColor: "#F1EAE8", fontFamily: "Impact" }}
       >
         Profile
       </h1>
-      <div className="container">
+      <div className="container" style={{ fontFamily: "Courier New" }}>
         <h1>Hello {state.user.username}!</h1>
         <h2>Topics you are interested in:</h2>
         <div className="d-flex">