console: Fix panel animations and icon

Author: ryaplots

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

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} />

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)

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.