Merge pull request #7070 from TheThingsNetwork/fix/various-console-re…

…design Apply various redesign fixes
TheThingsNetwork · May 16, 2024 · 6fa8244 · 6fa8244
2 parents c86c8f1 + 9844b75
commit 6fa8244
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 39 deletions.
diff --git a/pkg/webui/components/dropdown/portal/index.js b/pkg/webui/components/dropdown/portal/index.js
@@ -43,6 +43,7 @@ const Portal = ({ children, visible, positionReference }) => {
           minWidth: '100%',
           minHeight: '100%',
         }}
+        ref={positionReference.current}
       >
         {/* Simulate button to allow for the dropdown positioning logic to work correctly */}
         <div

diff --git a/pkg/webui/components/sidebar/search-button/search-button.styl b/pkg/webui/components/sidebar/search-button/search-button.styl
@@ -65,6 +65,6 @@
     padding-bottom: 1px
 
 .fly-out-list
-  --dropdown-offset: calc(.75rem - 2px)
+  --dropdown-offset: calc(.75rem - 3px)
   top: - $cs.xs
   color: var(--c-text-neutral-heavy)
diff --git a/pkg/webui/components/sidebar/side-menu/item/item.styl b/pkg/webui/components/sidebar/side-menu/item/item.styl
@@ -78,6 +78,6 @@
       color: inherit
 
 .fly-out-list
-  --dropdown-offset: $cs.xs
+  --dropdown-offset: calc(.75rem - 2px)
   top: - $cs.xs
   z-index: $zi.dropdown
diff --git a/pkg/webui/components/sidebar/switcher/switcher.styl b/pkg/webui/components/sidebar/switcher/switcher.styl
@@ -61,6 +61,7 @@
     font-weight: 300
 
 .fly-out-list
-  --dropdown-offset: calc(1rem - 2px)
+  position: relative
+  --dropdown-offset: calc(.75rem - (-1px))
   top: - $cs.xs
   color: var(--c-text-neutral-heavy)
diff --git a/pkg/webui/console/containers/documentation-dashboard-panel/index.js b/pkg/webui/console/containers/documentation-dashboard-panel/index.js
@@ -61,11 +61,11 @@ DocsPanelLink.propTypes = {
 const DocumentationDashboardPanel = () => (
   <Panel
     title={sharedMessages.documentation}
-    path={docBaseUrl}
     icon={IconBook}
-    buttonTitle={sharedMessages.documentation}
+    shortCutLinkPath={docBaseUrl}
+    shortCutLinkTitle={sharedMessages.showMore}
+    shortCutLinkTarget="_blank"
     divider
-    target="_blank"
     className="h-full"
   >
     <DocsPanelLink

diff --git a/pkg/webui/console/containers/notifications-dashboard-panel/index.js b/pkg/webui/console/containers/notifications-dashboard-panel/index.js
@@ -108,14 +108,14 @@ const NotificationsDashboardPanel = () => {
   return (
     <Panel
       title={sharedMessages.notifications}
-      path="/notifications"
       icon={IconInbox}
-      buttonTitle={sharedMessages.viewAll}
+      shortCutLinkPath="/notifications"
+      shortCutLinkTitle={sharedMessages.viewAll}
       messageDecorators={totalUnseenNotifications > 0 ? <MessageDecorator /> : undefined}
       className={style.notificationPanel}
     >
       {notifications && notifications.length === 0 ? (
-        <div className="flex-grow j-center">
+        <div className="d-flex direction-column flex-grow j-center">
           <Message content={m.noNotifications} className="d-block text-center fs-l fw-bold" />
           <Message
             content={m.noNotificationsDescription}

diff --git a/...webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl b/...webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl
@@ -15,6 +15,9 @@
 .notification-panel
   height: 100%
   min-height: 26rem
+  display: flex
+  flex-direction: column
+
   &-title, &-preview
     overflow: hidden
     text-overflow: ellipsis

diff --git a/pkg/webui/console/containers/shortcut-panel/index.js b/pkg/webui/console/containers/shortcut-panel/index.js
@@ -38,7 +38,7 @@ const m = defineMessages({
 })
 
 const ShortcutPanel = () => (
-  <Panel title={m.shortcuts} path="/edit-shortcuts" icon={IconBolt} divider className="h-full">
+  <Panel title={m.shortcuts} icon={IconBolt} divider className="h-full">
     <div className="grid gap-cs-xs">
       <ShortcutItem
         icon={IconApplication}

diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js b/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js
@@ -15,7 +15,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Icon, { IconPlus } from '@ttn-lw/components/icon'
+import Icon from '@ttn-lw/components/icon'
 import Link from '@ttn-lw/components/link'
 
 import Message from '@ttn-lw/lib/components/message'
@@ -27,9 +27,6 @@ import style from './shortcut-item.styl'
 const ShortcutItem = ({ icon, title, link, className }) => (
   <Link to={link} className={classnames(style.shortcut, className)}>
     <div className="pos-relative w-full h-full">
-      <div className={style.addIconWrapper}>
-        <Icon icon={IconPlus} className={style.addIcon} size={42} />
-      </div>
       <div className={style.shortcutTitleWrapper}>
         <Icon icon={icon} className={style.icon} size={28} />
         <Message content={title} className={style.title} component="span" />

diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -28,46 +28,24 @@
   font-weight: $fwv2.semibold
   transition: $ad.s background ease-in-out
 
-  &-title-wrapper,
-  .add-icon-wrapper
-    position: absolute
+  &-title-wrapper
     width: 100%
     height: 100%
     display: flex
     justify-content: center
     align-items: center
     flex-direction: column
-    gap: $cs.m
-    top: 0
-    opacity: 1
-    transition: $ad.s opacity ease-in-out
-
-  &-title-wrapper
     text-wrap: wrap
     text-align: center
-    opacity: 1
-
-  .add-icon-wrapper
-    opacity: 0
+    gap: $cs.m
+    transition: $ad.s opacity ease-in-out
 
   span.icon
     font-size: 2rem
 
-  span.add-icon
-    font-size: 2.5rem
-
   &:hover
     cursor: pointer
     background: var(--c-bg-brand-normal-hover)
 
-    .shortcut-title-wrapper
-      opacity: 0
-
-    .add-icon-wrapper
-      opacity: 1
-
     span.icon
       font-size: 2rem
-
-    span.add-icon
-      font-size: 2.5rem