Merge pull request #1 from kateusacova/css-feed-and-post

Basic CSS for post, feed and app

frontend/src/components/app/App.css

@@ -0,0 +1,3 @@
+html {
+  background-color: #Bde0fe;
+}

frontend/src/components/feed/Feed.css

@@ -0,0 +1,18 @@
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+h2 {
+  text-align: center;
+}

frontend/src/components/feed/Feed.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import Post from '../post/Post'
+import Post from '../post/Post';
+import './Feed.css';
 
 const Feed = ({ navigate }) => {
   const [posts, setPosts] = useState([]);
@@ -26,17 +27,19 @@ const Feed = ({ navigate }) => {
     window.localStorage.removeItem("token")
     navigate('/login')
   }
-
+
+
     if(token) {
       return(
         <>
-          <h2>Posts</h2>
+          <h2>Posts &#128075;</h2>
             <button onClick={logout}>
               Logout
             </button>
           <div id='feed' role="feed">
               {posts.map(
-                (post) => ( <Post post={ post } key={ post._id } /> )
+                (post) => ( 
+                <Post post={ post } key={ post._id } /> )
               )}
           </div>
         </>

frontend/src/components/post/Post.css

@@ -0,0 +1,9 @@
+#singlePost {
+  background: #ffffff;
+  width: 700px;
+  margin: auto;
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.15);
+}

frontend/src/components/post/Post.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import './Post.css';
 
 const Post = ({post}) => {
   return(
-    <article data-cy="post" key={ post._id }>{ post.message }</article>
+    <article id='singlePost' data-cy="post" key={ post._id }>{ post.message }</article>
   )
 }
 

frontend/src/index.js

@@ -14,6 +14,7 @@ root.render(
   </BrowserRouter>
 );
 
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals