Forum: Update colors for the last unread topic (#2548)

src/components/common/ChatForumLastMessage.module.scss

@@ -1,6 +1,6 @@
 .root {
   --radius: 0.5rem;
-  --first-column-background-color: var(--color-item-active);
+  --first-column-background-color: var(--color-background-selected);
 
   :global(.is-ios) & {
     --radius: 0.75rem;
@@ -19,8 +19,24 @@
 
   pointer-events: none;
 
-  &:hover {
-    --first-column-background-color: var(--color-borders);
+  @media (hover: hover) {
+    :global(.ListItem-button:hover) & {
+      --first-column-background-color: var(--color-forum-unread-topic-hover);
+    }
+
+    &:hover {
+      --first-column-background-color: var(--color-forum-hover-unread-topic-hover) !important;
+    }
+  }
+
+  @media not (hover: hover) {
+    :global(.ListItem-button:active) & {
+      --first-column-background-color: var(--color-forum-unread-topic-hover);
+    }
+
+    &:active {
+      --first-column-background-color: var(--color-forum-hover-unread-topic-hover) !important;
+    }
   }
 }
 
@@ -52,7 +68,6 @@
   }
 
   &.main-column, &.last-message, .after-wrapper {
-    transition: background-color 0.15s ease-in-out;
     background: var(--first-column-background-color);
   }
 }

src/styles/_variables.scss

@@ -174,6 +174,9 @@ $color-message-reaction-own-hover: #b5e0a4;
 
   --color-telegram-blue: #{$color-primary};
 
+  --color-forum-hover-unread-topic: #e9e9e9;
+  --color-forum-hover-unread-topic-hover: #dcdcdc;
+
   --vh: 1vh;
 
   --border-radius-default: 0.75rem;

src/styles/themes.json

@@ -57,5 +57,7 @@
   "--color-topic-green": ["#44774A", "#8eee98"],
   "--color-topic-rose": ["#9B576B", "#ff93b2"],
   "--color-topic-red": ["#EB6858", "#fb6f5f"],
-  "--color-topic-grey": ["#6C6C6C", "#999999"]
+  "--color-topic-grey": ["#6C6C6C", "#999999"],
+  "--color-forum-unread-topic-hover": ["#e9e9e9", "#363636"],
+  "--color-forum-hover-unread-topic-hover": ["#e2e2e2", "#3f3f3f"]
 }