Merge pull request #7302 from TheThingsNetwork/fix/console-redesign-i…

…ssues Fix console redesign issues
TheThingsNetwork · Oct 3, 2024 · 4d8571b · 4d8571b
2 parents 3d00b5e + f50d3c8
commit 4d8571b
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 39 deletions.
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
@@ -70,7 +70,7 @@
       width: 2.5rem
       height: 2.5rem
 
-    &.primary
+    &.primary:not(.naked)
       color: var(--c-bg-neutral-min)
       background-color: var(--c-text-brand-normal)
 
@@ -159,7 +159,7 @@
           gradient-border(var(--c-bg-neutral-min-hover), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
           box-shadow: none
 
-    &.naked
+    &.naked:not(.primary)
       color: var(--c-text-neutral-light)
 
       &:disabled
@@ -177,6 +177,25 @@
         &:active
           background-color: var(--c-bg-neutral-semilight)
 
+    &.primary.naked
+      color: var(--c-bg-brand-normal)
+
+      &:disabled
+        color: var(--c-bg-brand-normal-disabled)
+
+      &:not(:disabled)
+        &:hover
+          background-color: var(--c-bg-brand-semilight)
+          color: var(--c-bg-brand-normal-hover)
+
+        +focus-visible()
+          background-color: var(--c-bg-brand-semilight)
+          color: var(--c-bg-brand-normal-hover)
+
+        &:active
+          background-color: var(--c-bg-brand-semilight)
+          color: var(--c-bg-brand-normal-hover)
+
       &.small
         border-radius: $br.s
 

diff --git a/pkg/webui/components/button/index.js b/pkg/webui/components/button/index.js
@@ -39,7 +39,6 @@ const assembleClassnames = ({
   primary,
   secondary,
   naked,
-  grey,
   icon,
   small,
   busy,
@@ -57,7 +56,6 @@ const assembleClassnames = ({
     [style.secondary]: secondary,
     [style.naked]: naked,
     [style.busy]: busy,
-    [style.grey]: grey,
     [style.small]: small,
     [style.withIcon]: icon !== undefined && message,
     [style.noDropdownIcon]: noDropdownIcon,
@@ -68,20 +66,33 @@ const assembleClassnames = ({
   })
 
 const buttonChildren = props => {
-  const { dropdownItems, icon, busy, message, messageValues, noDropdownIcon, children, small } =
-    props
+  const {
+    dropdownItems,
+    icon,
+    busy,
+    message,
+    messageValues,
+    noDropdownIcon,
+    children,
+    small,
+    large,
+  } = props
 
   const content = (
     <>
-      {icon && <Icon className={style.icon} icon={icon} size={small ? 16 : 18} />}
+      {icon && <Icon className={style.icon} icon={icon} size={small ? 16 : large ? 24 : 18} />}
       {message && (
         <Message content={message} values={messageValues} className={style.linkButtonMessage} />
       )}
       {children}
       {dropdownItems && (
         <>
           {!noDropdownIcon && (
-            <Icon className={style.expandIcon} icon={IconChevronDown} size={small ? 12 : 18} />
+            <Icon
+              className={style.expandIcon}
+              icon={IconChevronDown}
+              size={small ? 12 : large ? 22 : 18}
+            />
           )}
         </>
       )}
@@ -321,6 +332,8 @@ const commonPropTypes = {
   dropdownItems: PropTypes.node,
   /** A flag specifying whether the small styling should applied to the button. */
   small: PropTypes.bool,
+  /** A flag specifying whether the large styling should applied to the button. */
+  large: PropTypes.bool,
 }
 
 buttonChildren.propTypes = {
@@ -342,6 +355,7 @@ buttonChildren.defaultProps = {
   messageValues: undefined,
   children: null,
   small: false,
+  large: false,
 }
 
 Button.propTypes = {

diff --git a/pkg/webui/components/link/index.js b/pkg/webui/components/link/index.js
@@ -80,9 +80,9 @@ const Link = React.forwardRef((props, ref) => {
 
   if (disabled) {
     return (
-      <span className={classnames(classNames, style.disabled)} role={role}>
+      <button className={classnames(classNames, style.disabled)} disabled={disabled} role={role}>
         {children}
-      </span>
+      </button>
     )
   }
 

diff --git a/pkg/webui/components/link/link.styl b/pkg/webui/components/link/link.styl
@@ -24,8 +24,8 @@
   &.primary
     color: var(--c-text-brand-normal)
 
-    &:active:not(.disabled),
-    &:hover:not(.disabled)
+    &:active:not(:disabled),
+    &:hover:not(:disabled)
       color: var(--c-text-brand-normal-hover)
       text-decoration: underline
 
@@ -35,18 +35,22 @@
 
   &.secondary
     color: var(--c-text-neutral-light)
-    &:active:not(.disabled),
-    &:hover:not(.disabled)
+    &:active:not(:disabled),
+    &:hover:not(:disabled)
       color: var(--c-text-neutral-heavy)
 
     &.link-visited
       &:visited
         color: var(--c-text-neutral-heavy)
 
+  &:disabled
+    cursor: not-allowed !important
+    background: transparent
+    border: none
+
   &.primary, &.secondary
-    &.disabled
+    &:disabled
       opacity: .5
-      cursor: not-allowed
 
 .doc-link
   align-items: center

diff --git a/pkg/webui/components/map/widget/index.js b/pkg/webui/components/map/widget/index.js
@@ -29,7 +29,6 @@ import style from './widget.styl'
 
 const Map = ({ id, markers, setupLocationLink, panel }) => {
   const leafletConfig = {
-    zoomControl: false,
     zoom: 10,
     minZoom: 1,
   }

diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js
@@ -15,11 +15,13 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import Icon, { IconArrowUpRight } from '@ttn-lw/components/icon'
+import Button from '@ttn-lw/components/button'
+
 import Message from '@ttn-lw/lib/components/message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
-import Icon from '../icon'
 import Link from '../link'
 
 import Toggle from './toggle'
@@ -58,6 +60,7 @@ const Panel = ({
   divider,
   shortCutLinkTarget,
   shortCutLinkDisabled,
+  shortCutLinkButton,
   compact,
 }) => (
   <div
@@ -81,17 +84,30 @@ const Panel = ({
         {toggleOptions ? (
           <Toggle options={toggleOptions} active={activeToggle} onToggleChange={onToggleClick} />
         ) : (
-          shortCutLinkTitle && (
-            <Link
-              primary
-              to={shortCutLinkPath}
-              className={styles.panelButton}
-              target={shortCutLinkTarget}
-              disabled={shortCutLinkDisabled}
-            >
-              <Message content={shortCutLinkTitle} /> →
-            </Link>
-          )
+          <>
+            {shortCutLinkButton && !shortCutLinkTitle && (
+              <Button.Link
+                to={shortCutLinkPath}
+                target={shortCutLinkTarget}
+                disabled={shortCutLinkDisabled}
+                icon={IconArrowUpRight}
+                primary
+                naked
+                large
+              />
+            )}
+            {shortCutLinkTitle && !shortCutLinkButton && (
+              <Link
+                primary
+                to={shortCutLinkPath}
+                className={styles.panelButton}
+                target={shortCutLinkTarget}
+                disabled={shortCutLinkDisabled}
+              >
+                <Message content={shortCutLinkTitle} /> →
+              </Link>
+            )}
+          </>
         )}
       </div>
     )}
@@ -111,6 +127,7 @@ Panel.propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   onToggleClick: PropTypes.func,
+  shortCutLinkButton: PropTypes.bool,
   shortCutLinkDisabled: PropTypes.bool,
   shortCutLinkPath: PropTypes.string,
   shortCutLinkTarget: PropTypes.string,
@@ -130,7 +147,8 @@ Panel.defaultProps = {
   compact: false,
   messageDecorators: undefined,
   divider: false,
-  shortCutLinkDisabled: undefined,
+  shortCutLinkDisabled: false,
+  shortCutLinkButton: false,
   shortCutLinkPath: undefined,
   shortCutLinkTitle: undefined,
   shortCutLinkTarget: undefined,

diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
@@ -72,10 +72,3 @@
   color: var(--c-bg-brand-normal)
   font-variation-settings: 'FILL' 1
 
-@container panel (max-width: 300px)
-  .panel-header
-    flex-direction: column
-    align-items: flex-start
-
-  .panel-button
-    align-self: flex-start
diff --git a/pkg/webui/console/components/blurry-noc-metrics-panel/blurry-noc-metrics-panel.styl b/pkg/webui/console/components/blurry-noc-metrics-panel/blurry-noc-metrics-panel.styl
@@ -18,6 +18,9 @@
   flex-direction: column
   position: relative
 
+  & > :first-child
+    flex-wrap: nowrap
+
 .content
   display: flex
   flex-direction: column

diff --git a/pkg/webui/console/components/blurry-noc-metrics-panel/index.js b/pkg/webui/console/components/blurry-noc-metrics-panel/index.js
@@ -44,7 +44,7 @@ const BlurryNocMetricsPanel = ({ title, icon }) => {
     <Panel
       title={title}
       icon={icon}
-      shortCutLinkTitle={sharedMessages.nocShortened}
+      shortCutLinkButton
       shortCutLinkPath="#"
       className={style.panel}
       compact

diff --git a/pkg/webui/console/components/total-end-devices-upseller-panel/index.js b/pkg/webui/console/components/total-end-devices-upseller-panel/index.js
@@ -32,7 +32,7 @@ const TotalEndDevicesUpsellerPanel = () => {
     <Panel
       title={sharedMessages.totalEndDevices}
       icon={IconDevice}
-      shortCutLinkTitle={sharedMessages.nocShortened}
+      shortCutLinkButton
       shortCutLinkPath="#"
       shortCutLinkDisabled
       className={style.panel}

diff --git a/...console/components/total-end-devices-upseller-panel/total-end-devices-upseller-panel.styl b/...console/components/total-end-devices-upseller-panel/total-end-devices-upseller-panel.styl
@@ -18,6 +18,9 @@
   flex-direction: column
   position: relative
 
+  & > :first-child
+    flex-wrap: nowrap
+
   .content
     display: flex
     flex-direction: column

diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl
@@ -45,6 +45,7 @@ $tokens = {
 
       'bg-brand-extralight': $c.tts-025, // Background for navigation elements background.
       'bg-brand-light': $c.tts-050, // ?
+      'bg-brand-semilight': $c.tts-075, // ?
       'bg-brand-normal': $c.tts-500, // Background for highlight elements.
       'bg-brand-normal-hover': $c.tts-600, // Background for highlight elements on hover.
 
@@ -74,6 +75,7 @@ $tokens = {
       'bg-warning-normal-disabled': $c.warning-200, // Background for warning highlight elements on disabled.
       'bg-error-normal-disabled': $c.error-200, // Background for error highlight elements on disabled.
       'bg-info-normal-disabled': $c.information-200, // Background for info highlight elements on disabled.
+      'bg-brand-normal-disabled': $c.tts-200, // Background for brand elements on disabled.
 
       // TEXT COLORS
       // ===========