From 6b40f44ff509e7025b594ec44fee580f3fade26a Mon Sep 17 00:00:00 2001
From: Darya Plotnytska <d.plotnytska.s@gmail.com>
Date: Wed, 31 Jan 2024 15:08:49 +0100
Subject: [PATCH] console: Adapt svg to use current color

---
 pkg/webui/assets/misc/favorite-outline.svg          |  9 ---------
 pkg/webui/components/panel/index.js                 |  8 ++++----
 pkg/webui/components/panel/panel.styl               | 13 +++++++------
 pkg/webui/components/panel/story.js                 |  5 +++--
 .../shortcut-panel/shortcut-item/shortcut-item.styl |  2 +-
 5 files changed, 15 insertions(+), 22 deletions(-)
 delete mode 100644 pkg/webui/assets/misc/favorite-outline.svg

diff --git a/pkg/webui/assets/misc/favorite-outline.svg b/pkg/webui/assets/misc/favorite-outline.svg
deleted file mode 100644
index 66d0e7e0ce..0000000000
--- a/pkg/webui/assets/misc/favorite-outline.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<mask id="a" x="0" y="0" width="20" height="20" style="mask-type:alpha" maskUnits="userSpaceOnUse">
-<rect width="20" height="20" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#a)">
-<path d="m7.2736 14.313 2.7266-1.6152 2.7488 1.6152-0.7298-3.0589 2.367-2.0243-3.1304-0.27654-1.2556-2.9149-1.2555 2.9202-3.1305 0.27126 2.3892 2.019-0.72979 3.0642zm2.7266 0.52-3.638 2.175c-0.18661 0.1024-0.36954 0.1454-0.54879 0.1289-0.17926-0.0165-0.33658-0.0759-0.47199-0.1784-0.1354-0.1024-0.23694-0.2423-0.30463-0.4198-0.0677-0.1775-0.07595-0.3596-0.02474-0.5462l0.95499-4.0576-3.2183-2.7324c-0.15365-0.13539-0.24784-0.29184-0.28257-0.46934-0.03474-0.17748-0.02825-0.35041 0.01946-0.51878 0.04769-0.16837 0.14187-0.30921 0.28254-0.42253 0.14069-0.1133 0.3117-0.17731 0.51302-0.19204l4.2122-0.37546 1.667-3.8641c0.08419-0.19013 0.20223-0.33097 0.35411-0.42251 0.15187-0.09155 0.31376-0.13733 0.48563-0.13733 0.1719 0 0.3338 0.04578 0.4857 0.13733 0.1519 0.09154 0.2699 0.23238 0.3541 0.42251l1.667 3.8862 4.2122 0.35338c0.2013 0.01473 0.3724 0.08242 0.513 0.20308 0.1407 0.12068 0.2349 0.26521 0.2826 0.43358s0.0505 0.33762 0.0084 0.50774c-0.0421 0.17013-0.14 0.3229-0.2936 0.45829l-3.1962 2.7324 0.9549 4.0576c0.0512 0.1866 0.043 0.3687-0.0247 0.5462s-0.1692 0.3174-0.3046 0.4198c-0.1354 0.1025-0.2928 0.1619-0.472 0.1784-0.1793 0.0165-0.3622-0.0265-0.5488-0.1289l-3.638-2.175z" fill="#1C1B1F"/>
-</g>
-</svg>
diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js
index b6ad4bd1e7..93c62e3038 100644
--- a/pkg/webui/components/panel/index.js
+++ b/pkg/webui/components/panel/index.js
@@ -30,7 +30,7 @@ const Panel = ({
   children,
   title,
   icon,
-  svg,
+  svgIcon,
   toggleOptions,
   activeToggle,
   onToggleClick,
@@ -44,7 +44,7 @@ const Panel = ({
     <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} />}
-        {svg && <img src={svg} alt="star" className={styles.panelHeaderSvg} />}
+        {svgIcon}
         <Message content={title} className={styles.panelHeaderTitle} />
         {messageDecorators}
       </div>
@@ -71,7 +71,7 @@ Panel.propTypes = {
   messageDecorators: PropTypes.node,
   onToggleClick: PropTypes.func,
   path: PropTypes.string.isRequired,
-  svg: PropTypes.string,
+  svgIcon: PropTypes.node,
   title: PropTypes.message.isRequired,
   toggleOptions: PropTypes.arrayOf(PropTypes.shape({})),
 }
@@ -85,7 +85,7 @@ Panel.defaultProps = {
   className: undefined,
   messageDecorators: undefined,
   divider: false,
-  svg: undefined,
+  svgIcon: undefined,
 }
 
 export default Panel
diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
index 4304067b8f..84f8cacb63 100644
--- a/pkg/webui/components/panel/panel.styl
+++ b/pkg/webui/components/panel/panel.styl
@@ -26,12 +26,13 @@
       font-size: $fsv2.l
       line-height: 1
 
-    &-svg
-      width: 21px
-      height: 21px
-      background-color: var(--c-bg-brand-extralight)
-      padding: $cs.xs
-      border-radius: $br.l
+  svg
+    width: 21px
+    height: 21px
+    background-color: var(--c-bg-brand-extralight)
+    padding: $cs.xs
+    border-radius: $br.l
+    color: var(--c-bg-brand-normal)
 
   a.button
     font-weight: $fwv2.semibold
diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js
index 9a35eb316f..b4c07adbef 100644
--- a/pkg/webui/components/panel/story.js
+++ b/pkg/webui/components/panel/story.js
@@ -15,7 +15,8 @@
 import React from 'react'
 
 import loginVisual from '@assets/img/layout/bg/login-visual.jpg'
-import starIcon from '@assets/misc/favorite-outline.svg'
+
+import StarIcon from '@ttn-lw/components/icon/star-icon'
 
 import NewsItem from '../news-panel/news-item'
 
@@ -72,7 +73,7 @@ export const WithToggle = () => {
 
   return (
     <div style={{ width: '32.5rem' }}>
-      <Example title="Your top entities" svg={starIcon} toggleOptions={options} />
+      <Example title="Your top entities" svgIcon={<StarIcon />} toggleOptions={options} />
     </div>
   )
 }
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 a4d7f09598..c9e5583903 100644
--- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl
+++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -40,7 +40,7 @@
     flex-direction: column
     top: 0
     opacity: 1
-    transition: $ad.m opacity ease-in-out
+    transition: $ad.s opacity ease-in-out
 
   &-title-wrapper
     opacity: 1