console: Improve animation and add svg to panel

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

Hide file tree

Showing 5 changed files with 30 additions and 19 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,6 +30,7 @@ const Panel = ({
   children,
   title,
   icon,
+  svg,
   toggleOptions,
   activeToggle,
   onToggleClick,
@@ -43,6 +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} />}
         <Message content={title} className={styles.panelHeaderTitle} />
         {messageDecorators}
       </div>
@@ -69,6 +71,7 @@ Panel.propTypes = {
   messageDecorators: PropTypes.node,
   onToggleClick: PropTypes.func,
   path: PropTypes.string.isRequired,
+  svg: PropTypes.string,
   title: PropTypes.message.isRequired,
   toggleOptions: PropTypes.arrayOf(PropTypes.shape({})),
 }
@@ -82,6 +85,7 @@ Panel.defaultProps = {
   className: undefined,
   messageDecorators: undefined,
   divider: false,
+  svg: undefined,
 }
 
 export default Panel
diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
@@ -26,6 +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
+
   a.button
     font-weight: $fwv2.semibold
     text-decoration: none transparent
@@ -46,7 +53,7 @@
 
 span.panel-header-icon
   font-size: 1.5rem
-  font-variation-settings: 'FILL' 1
+  // font-variation-settings: 'FILL' 1
   background-color: var(--c-bg-brand-extralight)
   padding: $cs.xs
   border-radius: $br.l

diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js
@@ -15,6 +15,7 @@
 import React from 'react'
 
 import loginVisual from '@assets/img/layout/bg/login-visual.jpg'
+import starIcon from '@assets/misc/favorite-outline.svg'
 
 import NewsItem from '../news-panel/news-item'
 
@@ -71,7 +72,7 @@ export const WithToggle = () => {
 
   return (
     <div style={{ width: '32.5rem' }}>
-      <Example title="Your top entities" icon="star" toggleOptions={options} />
+      <Example title="Your top entities" svg={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
@@ -27,9 +27,10 @@
   color: var(--c-text-neutral-min)
   font-size: $fs.m
   font-weight: $fwv2.semibold
-  transition: 0.2s background ease-in-out
+  transition: $ad.s background ease-in-out
 
-  &-title-wrapper
+  &-title-wrapper,
+  .add-icon-wrapper
     position: absolute
     width: 100%
     height: 100%
@@ -39,22 +40,13 @@
     flex-direction: column
     top: 0
     opacity: 1
-    transition: $ad.s visibility ease-in-out, $ad.m opacity ease-in-out
-    transition-delay: $ad.s
+    transition: $ad.m opacity ease-in-out
+
+  &-title-wrapper
+    opacity: 1
 
   .add-icon-wrapper
-    position: absolute
-    width: 100%
-    height: 100%
-    display: flex
-    justify-content: center
-    align-items: center
-    flex-direction: column
-    top: 0
     opacity: 0
-    visibility: hidden
-    transition: $ad.s visibility ease-in-out, $ad.m opacity ease-in-out
-    transition-delay: $ad.s
 
   span.icon
     font-size: 2rem
@@ -68,11 +60,9 @@
 
     .shortcut-title-wrapper
       opacity: 0
-      visibility: hidden
 
     .add-icon-wrapper
       opacity: 1
-      visibility: visible
 
     span.icon
       font-size: 2rem