comments ui

src/components/CommentsList.vue

@@ -155,12 +155,13 @@ function onEnter(e: KeyboardEvent) {
                 :image="item.comment.author?.image ?? undefined"
                 :text="initials(item.comment)"
                 color="primary"
-                size="32"
+                rounded="circle"
+                density="compact"
                 border
               />
             </div>
 
-            <v-sheet class="chat__bubble px-4 py-2">
+            <v-sheet border :color="item.own ? 'primary-darken-1' : 'surface-light'" class="chat__bubble px-4 py-2">
               <div v-if="item.showHeader && !item.own" class="font-weight-medium text-body-small text-primary">
                 {{ authorName(item.comment) }}
               </div>
@@ -168,7 +169,7 @@ function onEnter(e: KeyboardEvent) {
               <div v-if="item.comment.deletedAt" class="text-medium-emphasis font-italic">Comment deleted</div>
               <div v-else class="chat__content">{{ item.comment.content }}</div>
 
-              <div class="chat__meta text-medium-emphasis">
+              <div class="chat__meta">
                 <span v-if="item.comment.editedAt && !item.comment.deletedAt">edited · </span>{{ item.time }}
               </div>
             </v-sheet>
@@ -245,7 +246,7 @@ function onEnter(e: KeyboardEvent) {
     margin: 12px 0 4px;
     padding: 2px 10px;
     border-radius: 999px;
-    background: rgba(var(--v-theme-on-surface), 0.06);
+    background: rgba(var(--v-theme-on-surface), 0.1);
   }
 
   &__row {
@@ -272,11 +273,6 @@ function onEnter(e: KeyboardEvent) {
   &__bubble {
     max-width: min(75%, 640px);
     min-width: 0;
-    background: rgba(var(--v-theme-on-surface), 0.06);
-
-    .chat__row--own & {
-      background: rgba(var(--v-theme-primary), 0.35);
-    }
   }
 
   &__content {