From b4a315e486d2c6ea5b1aae027b4924fa2f9a9ec7 Mon Sep 17 00:00:00 2001
From: Darya Plotnytska <d.plotnytska.s@gmail.com>
Date: Tue, 30 Jan 2024 14:56:24 +0100
Subject: [PATCH] console: Fix panel animations and icon

---
 .../components/news-panel/news-item/news-item.styl   |  4 ++--
 pkg/webui/components/panel/index.js                  |  2 +-
 pkg/webui/components/panel/panel.styl                | 12 +++++++++---
 pkg/webui/styles/variables/tokens.styl               |  2 +-
 4 files changed, 13 insertions(+), 7 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 32588a55ad..21d1702d77 100644
--- a/pkg/webui/components/news-panel/news-item/news-item.styl
+++ b/pkg/webui/components/news-panel/news-item/news-item.styl
@@ -16,12 +16,12 @@
   display: flex
   padding: $cs-xs
   gap: $cs.m
-  transition: background-color $ad.m ease-in-out
+  transition: background-color $ad.s ease-in-out
   border-radius: $br.xl
   padding: $cs.xs
 
   &:hover
-    background-color: var(--c-bg-neutral-min-hover)
+    background-color: var(--c-bg-brand-extralight)
 
   .image
     border-radius: $br.l
diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js
index f07aa16461..89bf770379 100644
--- a/pkg/webui/components/panel/index.js
+++ b/pkg/webui/components/panel/index.js
@@ -40,7 +40,7 @@ const Panel = ({
   divider,
 }) => (
   <div className={classnames(styles.panel, className)}>
-    <div className="d-flex j-between mb-cs-m">
+    <div className="d-flex j-between al-center mb-cs-m">
       <div className="d-flex gap-cs-xs al-center">
         {icon && <Icon icon={icon} className={styles.panelHeaderIcon} />}
         <Message content={title} className={styles.panelHeaderTitle} />
diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
index ff29bb7b82..0f786ea910 100644
--- a/pkg/webui/components/panel/panel.styl
+++ b/pkg/webui/components/panel/panel.styl
@@ -26,16 +26,17 @@
       font-size: $fsv2.l
       line-height: 1
 
-  .button
+  a.button
     font-weight: $fwv2.semibold
-    text-decoration: none
-    transition: text-decoration 0.2s ease-in-out
+    text-decoration: none transparent
+    transition: text-decoration $ad.s ease-in-out
 
     &:hover
       color: var(--c-text-brand-normal)
       text-decoration: underline
       text-decoration-thickness: 2px
       text-underline-offset: .4rem
+      text-decoration-color: var(--c-text-brand-normal)
 
   &-divider
     border-bottom: 1px solid var(--c-border-neutral-light)
@@ -45,3 +46,8 @@
 
 span.panel-header-icon
   font-size: 1.5rem
+  font-variation-settings: 'FILL' 1
+  background-color: var(--c-bg-brand-extralight)
+  padding: $cs.xs
+  border-radius: $br.l
+  color: var(--c-bg-brand-normal)
diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl
index 35a32684f3..5d4c2c8147 100644
--- a/pkg/webui/styles/variables/tokens.styl
+++ b/pkg/webui/styles/variables/tokens.styl
@@ -37,7 +37,7 @@ $tokens = {
 
       // Brand
 
-      'bg-brand-extralight': $c.tts-025 // Background for navigation elements background.
+      'bg-brand-extralight': $c.tts-050 // Background for navigation elements background.
       'bg-brand-light': $c.tts-100 // ?
       'bg-brand-normal': $c.tts-500 // Background for highlight elements.
       'bg-brand-normal-hover': $c.tts-600 // Background for highlight elements on hover.