Chat List: Better colors and rounded corners

src/components/common/ChatForumLastMessage.module.scss

@@ -1,11 +1,7 @@
 .root {
-  --radius: 0.5rem;
+  --radius: 0.75rem;
   --first-column-background-color: var(--color-background-selected);
 
-  :global(.is-ios) & {
-    --radius: 0.75rem;
-  }
-
   display: flex;
   min-width: 0;
   overflow: hidden;
@@ -60,11 +56,7 @@
   color: var(--color-text);
 
   &.main-column, &.last-message {
-    padding: 0 0.25rem;
-
-    :global(.is-ios) & {
-      padding: 0 0.375rem;
-    }
+    padding: 0 0.375rem;
   }
 
   &.main-column, &.last-message, .after-wrapper {
@@ -160,10 +152,6 @@
 
   .last-message {
     border-start-end-radius: var(--radius);
-
-    :global(.is-ios) & {
-      border-start-end-radius: var(--radius);
-    }
   }
 }
 

src/components/left/main/Chat.scss

@@ -117,6 +117,7 @@
         --color-text-secondary: var(--color-white);
         --color-error: var(--color-white);
         --color-pinned: var(--color-white);
+        --color-chat-username: var(--color-white);
       }
 
       .icon-muted {
@@ -157,6 +158,10 @@
     }
   }
 
+  &.forum {
+    --color-chat-username: var(--color-text);
+  }
+
   .ripple-container {
     z-index: 2;
   }
@@ -233,7 +238,12 @@
       }
 
       .sender-name {
-        color: var(--color-text);
+        color: var(--color-chat-username);
+
+        body.is-macos &,
+        body.is-ios & {
+          color: var(--color-text);
+        }
       }
 
       .draft {

src/components/left/main/Topic.module.scss

@@ -24,6 +24,10 @@
   :global(body.is-ios) &::after {
     left: 0.75rem !important;
   }
+
+  &::after {
+    left: 0.75rem !important;
+  }
 }
 
 .closed-icon {

src/components/ui/ListItem.scss

@@ -23,6 +23,13 @@
     }
   }
 
+  body.is-android & {
+    &:not(:last-of-type)::after {
+      /* stylelint-disable-next-line plugin/whole-pixel */
+      box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers-android);
+    }
+  }
+
   .ListItem-button {
     width: 100%;
     background-color: var(--background-color);

src/styles/_variables.scss

@@ -41,6 +41,7 @@ $color-text-meta: #686c72;
 $color-text-meta-apple: #8c8c91;
 $color-borders: #dadce0;
 $color-dividers: #c8c6cc;
+$color-dividers-android: #E7E7E7;
 $color-item-active: #ededed;
 $color-chat-hover: #f4f4f5;
 $color-chat-active: #3390ec;
@@ -88,6 +89,7 @@ $color-message-reaction-own-hover: #b5e0a4;
   --color-borders: #{$color-borders};
   --color-borders-input: #{$color-borders};
   --color-dividers: #{$color-dividers};
+  --color-dividers-android: #{$color-dividers-android};
   --color-webpage-initial-background: #{$color-dark-gray};
   --color-interactive-active: var(--color-primary);
   --color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
@@ -148,6 +150,7 @@ $color-message-reaction-own-hover: #b5e0a4;
   --color-white: #{$color-white};
   --color-gray: #{$color-gray};
 
+  --color-chat-username: #3C7EB0;
   --color-chat-hover: #{$color-chat-hover};
   --color-chat-active: #{$color-chat-active};
   --color-item-active: #{$color-item-active};

src/styles/themes.json

@@ -24,6 +24,7 @@
   "--color-borders": ["#DADCE0", "#303030"],
   "--color-borders-input": ["#DADCE0", "#5B5B5A"],
   "--color-dividers": ["#C8C6CC", "#3B3B3D"],
+  "--color-dividers-android": ["#E7E7E7", "#0F0F0F"],
   "--color-links": ["#3390EC", "#8774E1"],
   "--color-gray": ["#C4C9CC", "#717579"],
   "--color-pinned": ["#C4C9CC", "#707579"],
@@ -59,5 +60,6 @@
   "--color-topic-red": ["#EB6858", "#fb6f5f"],
   "--color-topic-grey": ["#6C6C6C", "#999999"],
   "--color-forum-unread-topic-hover": ["#e9e9e9", "#363636"],
-  "--color-forum-hover-unread-topic-hover": ["#e2e2e2", "#3f3f3f"]
+  "--color-forum-hover-unread-topic-hover": ["#e2e2e2", "#3f3f3f"],
+  "--color-chat-username": ["#3C7EB0", "#E9EEF4"]
 }