From 502a91328c2e0fcfcf3073dd4db4c0bae86e15e7 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Wed, 15 Jul 2020 01:51:46 -0400
Subject: [PATCH] Mejorado el css de comentarios

---
 src/components/Comments.jsx  | 24 +++++----
 src/components/Comments.scss | 98 ++++++++++++++++--------------------
 2 files changed, 57 insertions(+), 65 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 0ae5a24..282f418 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -28,14 +28,14 @@ const Opinions = (props) => {
       break;
   }
 
-  if(!Y) Y = '';
-  if(!N) N = '';
-  if(!F) F = '';
+  if (!Y) Y = '';
+  if (!N) N = '';
+  if (!F) F = '';
 
   const handleClick = (type) => () => {
-    if(type === pressed){
+    if (type === pressed) {
       setPressed(null)
-    }else{
+    } else {
       setPressed(type)
     }
   };
@@ -88,14 +88,18 @@ const Stars = (props) => {
 
 const Comment = (props) => (
   <div className='comment'>
-    <div className='avatar-container'>
+    <div className='avatar'>
       <FaUser/>
     </div>
-    <div className='body'>
-      <Link to={`/user/${props.user.id}`} className='username'>{props.user.username}</Link>
-      <p>{props.opinion}</p>
-      <div className={'acciones'}>
+    <div className='content'>
+      <div className="header">
+        <Link to={`/user/${props.user.id}`} className='username'>{props.user.username}</Link>
         <Stars stars={props.stars}/>
+      </div>
+      <div className="body">
+        <p>{props.opinion}</p>
+      </div>
+      <div className="footer">
         <Opinions helpful={props.helpful}/>
       </div>
     </div>
diff --git a/src/components/Comments.scss b/src/components/Comments.scss
index 473ba58..ba8a10b 100644
--- a/src/components/Comments.scss
+++ b/src/components/Comments.scss
@@ -1,73 +1,61 @@
-.comments {
-  .comment {
-    display: flex;
-    padding-bottom: 1em;
-    margin-top: 1em;
-    border-bottom: var(--line-width) solid var(--accent);
+.comment {
+  display: flex;
+  flex-direction: row;
 
-    .avatar-container {
-      flex-shrink: 0;
-      width: 75px;
-      height: 75px;
-      margin-right: 1em;
-      outline: 1px var(--gray-2) solid;
-      background-color: rgb(230, 230, 230);
+  padding-bottom: 1em;
+  margin-top: 1em;
+  border-bottom: var(--line-width) solid var(--accent);
 
-      svg {
-        padding-top: 10%;
-        width: 90%;
-        height: 90%;
-        color: rgb(250, 250, 250);
-      }
+  width: 100%;
 
+  .avatar {
+    width: 75px;
+    height: 75px;
+    margin-right: 1em;
+    outline: 1px var(--gray-2) solid;
+    background-color: rgb(230, 230, 230);
+
+    svg {
+      padding-top: 10%;
+      width: 90%;
+      height: 90%;
+      color: rgb(250, 250, 250);
     }
+  }
+
+  .content {
+    width: 90%;
+    .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-    .body {
       .username {
         font-weight: 500;
       }
+
+      .stars .star {
+        cursor: auto;
+      }
     }
 
-    .acciones {
-      display: flex;
-      flex-direction: row;
-
-      &>*{
-        margin-right: 1em;
+    .body {
+      p {
+        white-space: pre-wrap;
       }
+    }
 
-      .opinions {
-        display: flex;
-        flex-direction: row;
+    .footer {
+      button {
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
 
-        button {
-          border: none;
-          background-color: transparent;
-          cursor: pointer;
-
-          span > *{
-            display: inline;
-          }
-
-          &:hover, &.selected {
-            color: var(--accent);
-          }
-
-        }
-      }
-
-      .stars {
-        display: flex;
-        justify-content: flex-start;
-
-        .star {
-          margin: inherit;
-          width: 1.5em;
-          height: 1.5em;
-          cursor: auto;
+        span > * {
+          display: inline;
         }
 
-        .star.selected {
+        &:hover, &.selected {
           color: var(--accent);
         }
       }