added some design to front end

frontend/src/components/CreateEvent.js

@@ -18,7 +18,10 @@ const CreateEvent = (props) => {
       });
   };
   return (
-    <div className="container card card-body text-left">
+    <div
+      className="container card card-body text-left"
+      style={{ backgroundColor: "#F1EAE8" }}
+    >
       <form onSubmit={onSubmit}>
         <h1>Create Event</h1>
         <div className="form-group">

frontend/src/components/CreatePost.js

@@ -18,7 +18,10 @@ const CreatePost = (props) => {
       });
   };
   return (
-    <div className="container card card-body text-left">
+    <div
+      className="container card card-body text-left "
+      style={{ backgroundColor: "#F1EAE8" }}
+    >
       <form onSubmit={onSubmit}>
         <div className="form-group">
           <h1>Create Post</h1>

frontend/src/components/Event.js

@@ -71,7 +71,7 @@ const Event = (props) => {
         Event {props.match.params.id}
       </h1>
 
-      <div className="card card-body">
+      <div className="card card-body " style={{ backgroundColor: "#F1EAE8" }}>
         <h1 className="card-title">Event: {state.event_title}</h1>
         <a className="" href={state.website}>
           Website

frontend/src/components/Events.js

@@ -3,7 +3,48 @@ import React, { useState, useEffect } from "react";
 const Events = (props) => {
   const [state, setState] = useState({
     user: { username: "" },
-    events: [{ id: 1, upvotes: 0, text: "Green Earth" }],
+    events: [
+      {
+        id: 1,
+        upvotes: 0,
+        text: "Green Earth",
+        comments: 1,
+        topics: [
+          "climate change",
+          "global warming",
+          "earth",
+          "green environment",
+        ],
+      },
+      {
+        id: 2,
+        upvotes: 352,
+        text: "Walk for Gun Control",
+        comments: 53,
+        topics: ["gun control", "legislation"],
+      },
+      {
+        id: 3,
+        upvotes: 1,
+        text: "Rights for Gays",
+        comments: 0,
+        topics: ["LGBTQ", "policy"],
+      },
+      {
+        id: 4,
+        upvotes: 3,
+        text: "Black Lives Matter",
+        comments: 4,
+        topics: ["racial justice"],
+      },
+      {
+        id: 5,
+        upvotes: 24,
+        text: "Ending COVID-19",
+        comments: 12,
+        topics: ["health", "covid19"],
+      },
+    ],
   });
   const [stocks, setStocks] = useState([]);
 
@@ -27,21 +68,48 @@ const Events = (props) => {
   useEffect(() => {
     callAPI();
   }, []);
+  const maybePluralize = (count, noun, suffix = "s") =>
+    `${count} ${noun}${count !== 1 ? suffix : ""}`;
   return (
     <div>
-      <h1 className="d-flex justify-content-center m-2 p-4">Events</h1>
+      <h1
+        className="d-flex justify-content-center p-4"
+        style={{ backgroundColor: "#F1EAE8" }}
+      >
+        Events
+      </h1>
       <a className="btn btn-large btn-success" href="/createevent">
         Create Event
       </a>
       <div className="container">
+        <br></br>
+
         <h1>Hello {state.user.username}!</h1>
         {state.events.map((event) => {
           return (
-            <div className="card card-body">
+            <div
+              className="card card-body text-left"
+              style={{ backgroundColor: "#F1EAE8" }}
+            >
               <a className="card-title" href={"/event/" + event.id}>
                 {event.text}
               </a>
               <p className="text-success">+{event.upvotes}</p>
+              <p className="text-warning">
+                {maybePluralize(event.comments, "comment")}
+              </p>
+              <div className="d-flex">
+                {event.topics.map((topic) => {
+                  return (
+                    <div
+                      className="text-left mr-3 p-2 d-inline-block"
+                      style={{ backgroundColor: "#D6D1D0" }}
+                    >
+                      <p>{topic}</p>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           );
         })}

frontend/src/components/Post.js

@@ -75,7 +75,7 @@ const Post = (props) => {
       <h1 className="d-flex justify-content-center m-2 p-4">
         Post {props.match.params.id}
       </h1>
-      <div className="card card-body">
+      <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>

frontend/src/components/Posts.js

@@ -3,7 +3,15 @@ import React, { useState, useEffect } from "react";
 const Posts = (props) => {
   const [state, setState] = useState({
     user: { username: "" },
-    posts: [{ id: 1, upvotes: 0, text: "monkeys" }],
+    posts: [
+      {
+        id: 1,
+        upvotes: 2,
+        text: "Action for Climate Change",
+        comments: 0,
+        topics: ["climate change", "air pollution"],
+      },
+    ],
   });
 
   const requestOptions = {
@@ -26,21 +34,47 @@ const Posts = (props) => {
   useEffect(() => {
     callAPI();
   }, []);
+  const maybePluralize = (count, noun, suffix = "s") =>
+    `${count} ${noun}${count !== 1 ? suffix : ""}`;
   return (
     <div>
-      <h1 className="d-flex justify-content-center m-2 p-4">Posts</h1>
+      <h1
+        className="d-flex justify-content-center p-4"
+        style={{ backgroundColor: "#F1EAE8" }}
+      >
+        Posts
+      </h1>
       <a className="btn btn-large btn-success" href="/createpost">
         Create Post
-      </a>{" "}
+      </a>
       <div className="container">
+        <br></br>
         <h1>Hello {state.user.username}!</h1>
         {state.posts.map((post) => {
           return (
-            <div className="card card-body">
+            <div
+              className="card card-body text-left"
+              style={{ backgroundColor: "#F1EAE8" }}
+            >
               <a href={"/post/" + post.id} className="card-title">
                 {post.text}
               </a>
               <p className="text-success">+{post.upvotes}</p>
+              <p className="text-warning">
+                {maybePluralize(post.comments, "comment")}
+              </p>
+              <div className="d-flex">
+                {post.topics.map((topic) => {
+                  return (
+                    <div
+                      className="text-left mr-3 p-2 d-inline-block"
+                      style={{ backgroundColor: "#D6D1D0" }}
+                    >
+                      <p>{topic}</p>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           );
         })}

frontend/src/components/Profile.js

@@ -29,7 +29,12 @@ const Profile = (props) => {
   }, []);
   return (
     <div>
-      <h1 className="d-flex justify-content-center m-2 p-4">Profile</h1>
+      <h1
+        className="d-flex justify-content-center p-4"
+        style={{ backgroundColor: "#F1EAE8" }}
+      >
+        Profile
+      </h1>
       <div className="container">
         <h1>Hello {state.user.username}!</h1>
         <h2>Topics you are interested in:</h2>