console: Adapt svg to use current color

TheThingsNetwork · Jan 31, 2024 · 6b40f44 · 6b40f44
1 parent 3a84c0f
commit 6b40f44
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 22 deletions.
diff --git a/pkg/webui/assets/misc/favorite-outline.svg b/pkg/webui/assets/misc/favorite-outline.svg
diff --git 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
@@ -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
@@ -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
@@ -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