Implementadas opiniones reales

src/components/Comments.scss

@@ -11,11 +11,13 @@
       height: 75px;
       margin-right: 1em;
       outline: 1px var(--gray-2) solid;
+      background-color: rgb(230, 230, 230);
 
-      .avatar {
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
+      svg {
+        padding-top: 10%;
+        width: 90%;
+        height: 90%;
+        color: rgb(250, 250, 250);
       }
 
     }
@@ -24,18 +26,50 @@
       .username {
         font-weight: 500;
       }
-      p {
-      }
     }
 
-    .buttons {
+    .acciones {
       display: flex;
       flex-direction: row;
 
-      button {
-        border: none;
-        padding: 0 1em;
-        background-color: transparent;
+      &>*{
+        margin-right: 1em;
+      }
+
+      .opinions {
+        display: flex;
+        flex-direction: row;
+
+        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;
+        }
+
+        .star.selected {
+          color: var(--accent);
+        }
       }
     }
   }