Add style

src/components/Body.jsx

@@ -3,17 +3,19 @@ import CardPosts from './CardPosts';
 import CardFilter from './CardFilters';
 import filters from '../data/filters';
 
-const Body = ({ step, posts, image, setFilter, setCaption, handleLikes }) => (
+const Body = ({ step, posts, image, filter, setFilter, setCaption, handleLikes }) => (
   <main>
     {step === 1
-      && posts.map((post, index) => <CardPosts key={post.id} post={post} handleLikes={handleLikes} />)}
+      && <div className="posts">{posts.map((post, index) => <CardPosts key={post.id} post={post} handleLikes={handleLikes} />)}</div>}
     {step === 2
       && <div className="filter-container">{filters.map((filter => <CardFilter key={filter.name} image={image} filter={filter} setFilter={setFilter} />))}</div>}
     {step === 3
       &&
       <>
         <div className="selected-image">
-          <img src={image} alt="" />
+          <div className={filter}>
+            <img className="img" src={image} alt="" />
+          </div>
         </div>
         <div className="caption-containe">
           <textarea

src/components/CardFilters.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-const CardFilter = ({filter, image, setFilter}) => (
+const CardFilter = ({ filter, image, setFilter }) => (
   <div className={filter.name}>
     <p>{filter.name}</p>
     <div
       className="img"
       id={filter.name}
       onClick={() => setFilter(filter.name)}>
-        <img src={image} alt="" />
+      <img src={image} alt="" />
     </div>
   </div>
 );

src/components/CardPosts.jsx

@@ -1,18 +1,22 @@
 import React from 'react';
 
 const CardPosts = ({ post, handleLikes }) => (
-  <article>
-    <div>
+  <article className="post">
+    <div className="post-user">
       <img src={post.userImage} alt={post.username} />
       <p>{post.username}</p>
     </div>
-    <div>
-      <img src={post.postImage} alt="" />
-      <div>
-        <button onClick={() => handleLikes(post)}>
-          <i className="far fa-heart fa-lg"></i>
-        </button>
-        <p>{post.likes}</p>
+    <div className="post-content">
+      <div className={post.filter}>
+        <img className="img" src={post.postImage} alt="" />
+      </div>
+      <div className="post-info">
+        <div className="post-likes">
+          <button onClick={() => handleLikes(post)}>
+            <span><img src="/img/heart.svg" className={post.hasBeenLiked ? "liked" : "not-liked"}></img></span>
+          </button>
+          <p>{post.likes}</p>
+        </div>
         <p>{post.caption}</p>
       </div>
     </div>

src/components/Footer.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const Footer = ({ step, handleGoHome, handleUploadImage }) => (
   <footer>
     <button onClick={handleGoHome}><img src="/img/home.svg" className="icon" alt="Home" /></button>
-    <div class="upload-btn-wrapper">
+    <div className="upload-btn-wrapper">
       <button><img src="/img/camera.svg" className="icon" alt="Subir imagen" /></button>
       <input
         type="file"

src/containers/Home.jsx

@@ -1,74 +1,74 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import Header from '../components/Header'
-import Body from '../components/Body'
-import Footer from '../components/Footer';
-import userImage from '../data/userImage';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Header from "../components/Header";
+import Body from "../components/Body";
+import Footer from "../components/Footer";
+import userImage from "../data/userImage";
 
 const Home = () => {
   const [step, setStep] = useState(1);
   const [posts, setPosts] = useState([]);
-  const [image, setImage] = useState('');
-  const [filter, setFilter] = useState('');
-  const [caption, setCaption] = useState('');
-  const savePost = async (post) => {
+  const [image, setImage] = useState("");
+  const [filter, setFilter] = useState("");
+  const [caption, setCaption] = useState("");
+  const savePost = async post => {
     const config = {
-      method: 'post',
-      url: 'http://localhost:3000/api/posts',
+      method: "post",
+      url: "http://localhost:3000/api/posts",
       data: post
     };
     const res = await axios(config);
     return res;
-  }
+  };
   const handleGoHome = () => setStep(1);
   const handleNext = () => setStep(step + 1);
-  const handleUploadImage = (ev) => {
+  const handleUploadImage = ev => {
     const files = ev.target.files;
     if (files.length > 0) {
       const reader = new FileReader();
       reader.readAsDataURL(files[0]);
       reader.onload = ev => {
         setImage(ev.target.result);
         setStep(2);
-      }
+      };
     }
-  }
+  };
 
-  const handleLikes = async (post) => {
+  const handleLikes = async post => {
     const hasBeenLiked = !post.hasBeenLiked;
     const likes = hasBeenLiked ? post.likes + 1 : post.likes - 1;
     const config = {
-      method: 'put',
+      method: "put",
       url: `http://localhost:3000/api/posts/${post.id}`,
       data: { hasBeenLiked, likes }
     };
     const res = await axios(config);
     getPosts();
-  }
+  };
 
   const getPosts = async () => {
     const config = {
-      method: 'get',
-      url: 'http://localhost:3000/api/posts'
+      method: "get",
+      url: "http://localhost:3000/api/posts"
     };
     const res = await axios(config);
     setPosts(res.data);
-  }
+  };
 
   const handleShare = () => {
     const post = {
-      username: 'nodegirls',
+      username: "nodegirls",
       userImage,
       postImage: image,
       caption,
       filter,
       hasBeenLiked: false,
-      likes: 0,
-    }
+      likes: 0
+    };
     const res = savePost(post);
     setStep(1);
     setTimeout(() => getPosts());
-  }
+  };
 
   useEffect(() => {
     getPosts();
@@ -82,11 +82,11 @@ const Home = () => {
         handleNext={handleNext}
         handleShare={handleShare}
       />
-      <h1>Home</h1>
       <Body
         step={step}
         posts={posts}
         image={image}
+        filter={filter}
         setFilter={setFilter}
         setCaption={setCaption}
         handleLikes={handleLikes}
@@ -98,7 +98,6 @@ const Home = () => {
       />
     </>
   );
-}
-
+};
 
-export default Home;
+export default Home;

src/index.css

@@ -193,3 +193,94 @@ textarea {
   text-transform: capitalize;
   z-index: 9;
 }
+
+
+/* Post */
+.post {
+  margin-bottom: 4rem;
+}
+
+.post-user {
+  display: flex;
+  align-items: center;
+  margin-bottom: .5rem;
+}
+
+.post-user img {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 50%;
+  display: block;
+  border: 2px solid #318431;
+}
+
+.post-user p {
+  margin: 0;
+  margin-left: 1rem;
+  height: fit-content;
+  font-size: 1.1rem;
+  letter-spacing: 0.025rem;
+  margin-bottom: .5em;
+}
+
+img:not([src]) {
+  background: white;
+  overflow: hidden;
+  position: relative;
+}
+
+img:not([src]):after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url(/img/nodegirls.svg), linear-gradient(white, white);
+  background-size: contain;
+}
+
+.post-content > div:first-child {
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
+.post-info {
+  text-align: left;
+} 
+
+.post-info p {
+  margin: 0;
+  font-weight: 100;
+}
+
+.post-likes {
+  display: flex;
+  padding: 1rem 0;
+  font-weight: 100;
+  color: var(--text-low-emphasis);
+}
+
+.post-likes button, .post-likes p {
+  margin: 0;
+  padding: 0;
+}
+
+.post-likes button {
+  margin-right: .75rem;
+  display: block;
+}
+
+.post-likes img {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.post-likes img.not-liked {
+  filter: grayscale(1);
+}
+
+/* Posts */
+.posts {
+  display: flex;
+  flex-direction: column-reverse;
+}