From 090f4b854e28ea5ea0b789860ea6f775541bda4e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 2 Mar 2023 21:26:31 -0500
Subject: [PATCH] Make ChatListItem use focused-style

---
 .../chat_list_item/chat_list_item.scss        | 20 +++++++++++--------
 .../chat_list_item/chat_list_item.vue         |  1 +
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 3a84672b..4c32d62d 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -1,3 +1,5 @@
+@import "src/mixins";
+
 .chat-list-item {
   display: flex;
   flex-direction: row;
@@ -7,11 +9,11 @@
   box-sizing: border-box;
   cursor: pointer;
 
-  :focus {
+  @include unfocused-style {
     outline: none;
   }
 
-  &:hover {
+  @include focused-style {
     background-color: var(--selectedPost, $fallback--lightBg);
     box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
   }
@@ -63,13 +65,15 @@
     pointer-events: none;
   }
 
-  &:hover .animated.avatar {
-    canvas {
-      display: none;
-    }
+  @include focused-style {
+    .animated.avatar {
+      canvas {
+        display: none;
+      }
 
-    img {
-      visibility: visible;
+      img {
+        visibility: visible;
+      }
     }
   }
 
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 69ad609b..2a31fef8 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="chat-list-item"
+    tabindex="0"
     @click.capture.prevent="openChat"
   >
     <div class="chat-list-item-left">