From 10063ff7c40a1c5d4ef2726dc30a36186678f8da Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 30 Jan 2023 05:55:35 +0300
Subject: [PATCH] Corrected messages in Telegram (#2562)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_colors.scss                     |  4 ++--
 packages/theme/styles/common.scss                      | 10 ++++++++++
 plugins/telegram-resources/src/components/Date.svelte  |  5 +++--
 .../telegram-resources/src/components/Message.svelte   |  9 +++++----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index cf676bb04b..7511dd04c4 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -275,8 +275,8 @@
   --toggle-on-bg-color: #6e79d6;
   --toggle-on-bg-hover: #535db3;
 
-  --incoming-msg: rgba(67, 67, 72, .3);
-  --outcoming-msg: rgba(67, 67, 72, .6);
+  --incoming-msg: rgba(67, 67, 72, .1);
+  --outcoming-msg: rgba(67, 67, 72, .2);
 
   --trans-content-05: rgba(60, 65, 73, .05);
   --trans-content-10: rgba(60, 65, 73, .1);
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index b37399b398..e1bcf485c3 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -480,3 +480,13 @@
     &:focus-within .caption { border-color: var(--primary-edit-border-color); }
   }
 }
+
+// Consecutive messages in Telegram (incomung/outcoming)
+.message-row-bg[data-type="in"] + .message-row-bg[data-type="in"] .message-row .message-container {
+  padding-top: 0;
+  .message { border-radius: 0.125rem 0.75rem 0.75rem 0.125rem; }
+}
+.message-row-bg[data-type="out"] + .message-row-bg[data-type="out"] .message-row .message-container {
+  padding-top: 0;
+  .message.outcoming { border-radius: 0.75rem 0.125rem 0.125rem 0.75rem; }
+}
diff --git a/plugins/telegram-resources/src/components/Date.svelte b/plugins/telegram-resources/src/components/Date.svelte
index cf195ce486..6e9feaba62 100644
--- a/plugins/telegram-resources/src/components/Date.svelte
+++ b/plugins/telegram-resources/src/components/Date.svelte
@@ -41,8 +41,9 @@
     margin: 0.3rem auto;
     padding: 0.25rem 0.75rem;
     width: fit-content;
-    color: var(--theme-content-accent-color);
-    background-color: var(--theme-menu-divider);
+    font-weight: 500;
+    color: var(--caption-color);
+    background-color: var(--divider-color);
     border-radius: 1.25rem;
     user-select: text;
   }
diff --git a/plugins/telegram-resources/src/components/Message.svelte b/plugins/telegram-resources/src/components/Message.svelte
index 0faf6c526c..eddc9f0061 100644
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@@ -32,7 +32,8 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="message-row-bg" class:selectable class:selected-row={selected}>
+<div class="message-row-bg" class:selectable class:selected-row={selected} data-type={message.incoming ? 'in' : 'out'}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="message-row"
     class:selectable
@@ -133,19 +134,19 @@
     max-width: 66%;
     width: fit-content;
     background-color: var(--incoming-msg);
-    border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
+    border-radius: 0.75rem 0.75rem 0.75rem 0.125rem;
     overflow-wrap: anywhere;
     user-select: text;
     cursor: default;
 
     &.outcoming {
       background-color: var(--outcoming-msg);
-      border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
+      border-radius: 0.75rem 0.75rem 0.125rem 0.75rem;
     }
     .time {
       align-self: flex-end;
       margin-left: auto;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
       font-size: 0.75rem;
       font-style: italic;
       white-space: nowrap;