Mejorado el css de comentarios

src/components/Comments.jsx

@@ -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'>
+    <div className='content'>
+      <div className="header">
         <Link to={`/user/${props.user.id}`} className='username'>{props.user.username}</Link>
-      <p>{props.opinion}</p>
-      <div className={'acciones'}>
         <Stars stars={props.stars}/>
+      </div>
+      <div className="body">
+        <p>{props.opinion}</p>
+      </div>
+      <div className="footer">
         <Opinions helpful={props.helpful}/>
       </div>
     </div>

src/components/Comments.scss

@@ -1,12 +1,14 @@
-.comments {
 .comment {
   display: flex;
+  flex-direction: row;
+
   padding-bottom: 1em;
   margin-top: 1em;
   border-bottom: var(--line-width) solid var(--accent);
 
-    .avatar-container {
-      flex-shrink: 0;
+  width: 100%;
+
+  .avatar {
     width: 75px;
     height: 75px;
     margin-right: 1em;
@@ -19,27 +21,31 @@
       height: 90%;
       color: rgb(250, 250, 250);
     }
-
   }
 
-    .body {
+  .content {
+    width: 90%;
+    .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
       .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;
@@ -52,24 +58,6 @@
         &:hover, &.selected {
           color: var(--accent);
         }
-
-        }
-      }
-
-      .stars {
-        display: flex;
-        justify-content: flex-start;
-
-        .star {
-          margin: inherit;
-          width: 1.5em;
-          height: 1.5em;
-          cursor: auto;
-        }
-
-        .star.selected {
-          color: var(--accent);
-        }
       }
     }
   }