From 54d55e7c9ed38dcc16c20d99c55d46eee3562555 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Fri, 3 Sep 2021 20:30:13 +0300
Subject: [PATCH] Adjust chatlist badge transition

---
 src/scss/partials/_chatlist.scss | 13 ++++++++++---
 src/scss/style.scss              |  2 ++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss
index a5a47f25..eddb3c9c 100644
--- a/src/scss/partials/_chatlist.scss
+++ b/src/scss/partials/_chatlist.scss
@@ -277,13 +277,22 @@ ul.chatlist {
         @include animation-level(2) {
           transition: none;
           transform: scale(0);
+          opacity: 1;
 
           &.is-visible:not(.backwards) {
             transform: scale(1);
           }
 
+          &.backwards {
+            opacity: 0;
+          }
+
           &.animating {
-            transition: background-color .2s var(--transition-standard-easing), transform .2s var(--transition-standard-easing);
+            transition: background-color var(--chatlist-badge-transition-in), transform var(--chatlist-badge-transition-in);
+            
+            &.backwards {
+              transition: background-color var(--chatlist-badge-transition-out), transform var(--chatlist-badge-transition-out), opacity var(--chatlist-badge-transition-out);
+            }
           }
         }
 
@@ -333,8 +342,6 @@ ul.chatlist {
   }
 
   .user-caption {
-    max-width: 100%;
-    max-height: 100%;
     overflow: hidden;
     color: var(--secondary-text-color);
     flex: 1 1 auto;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 08fce2b3..9b810ccc 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -66,6 +66,8 @@ $chat-input-inner-padding-handhelds: .25rem;
   //--layer-transition: .3s cubic-bezier(.33, 1, .68, 1);
   //--layer-transition: none;
   --btn-corner-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
+  --chatlist-badge-transition-in: .2s cubic-bezier(.35,.35,.47,1); // 1.34
+  --chatlist-badge-transition-out: .2s cubic-bezier(.35,.35,.7,1);
   --message-handhelds-margin: 5.5625rem;
   --message-beside-button-margin: 2.875rem;
   --message-time-background: rgba(0, 0, 0, .35);