From 3547f366dc85fe75b0e918180c955a303525c440 Mon Sep 17 00:00:00 2001
From: Darya Plotnytska <d.plotnytska.s@gmail.com>
Date: Mon, 29 Jan 2024 09:41:14 +0100
Subject: [PATCH] console: Add transitions

---
 pkg/webui/components/news-panel/news-item/news-item.styl     | 2 +-
 pkg/webui/components/panel/panel.styl                        | 2 ++
 pkg/webui/components/panel/toggle/toggle.styl                | 1 +
 .../shortcut-panel/shortcut-item/shortcut-item.styl          | 5 ++++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl
index ca1db886e4..32588a55ad 100644
--- a/pkg/webui/components/news-panel/news-item/news-item.styl
+++ b/pkg/webui/components/news-panel/news-item/news-item.styl
@@ -38,4 +38,4 @@
     -webkit-box-orient: vertical
     -webkit-line-clamp: 2 /* start showing ellipsis when 2nd line is reached */
     white-space: pre-wrap
-    line-height: normal
+    line-height: 1.15
diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
index c962cde1e9..5324bcdfae 100644
--- a/pkg/webui/components/panel/panel.styl
+++ b/pkg/webui/components/panel/panel.styl
@@ -29,10 +29,12 @@
   .button
     font-weight: $fwv2.semibold
     text-decoration: none
+    transition: text-decoration 0.2s ease-in-out
 
     &:hover
       color: var(--c-text-brand-normal)
       text-decoration: underline
+      text-underline-offset: $cs.xxs
 
   &-divider
     border-bottom: 1px solid var(--c-border-neutral-light)
diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl
index 2d64f4ba60..00cc0cf29d 100644
--- a/pkg/webui/components/panel/toggle/toggle.styl
+++ b/pkg/webui/components/panel/toggle/toggle.styl
@@ -27,6 +27,7 @@
     border-radius: $br.m
     padding: 0 $cs.s
     height: 2.25rem
+    transition: background 80ms ease-in-out
 
     &-active
       color: var(--c-text-neutral-min)
diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl
index 6ffb9a5c9e..bfa9adf762 100644
--- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl
+++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -19,7 +19,7 @@
   align-items: center
   justify-content: center
   padding: $cs.s $cs.m
-  transition: $ad.m background ease-in, $ad.m display ease-out
+  transition: 0.2s background ease-in
   text-decoration: none
   height: 10.7rem
   border-radius: $br.l
@@ -29,14 +29,17 @@
   font-weight: $fwv2.semibold
 
   span.icon
+    transition: 0.2s display ease-out
     font-size: 2rem
     display: block
 
   span.add-icon
+    transition: 0.2s display ease-in
     font-size: 2.5rem
     display: none
 
   .title
+    transition: 0.2s display ease-out
     display: block
 
   &:hover