Fixes related to the console redesign

pkg/webui/components/status/status.styl

@@ -1,4 +1,4 @@
 // Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -34,8 +34,9 @@
   &:after
     content: ''
     position: absolute
-    top: 0
-    left: 0
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
     border-radius: 50%
     width: 5px
     height: 5px
@@ -63,6 +64,12 @@
 .triggered-good-pulse:after
   animation: triggeredGoodPulse 1.5s ease-out
 
+.green-pulse:after
+  animation: greenPulse 4s infinite
+
+.triggered-green-pulse:after
+  animation: triggeredGreenPulse 1.5s ease-out
+
 pulse-animation($color, $name)
   @keyframes $name
     0%
@@ -89,5 +96,7 @@
       box-shadow: 0 0 0 0 alpha($color, 0)
 
 pulse-animation($tokens.theme-light.color.icon-info-normal, 'goodPulse')
+pulse-animation($tokens.theme-light.color.icon-success-normal, 'greenPulse')
 
 triggered-pulse-animation($tokens.theme-light.color.icon-info-normal, 'triggeredGoodPulse')
+triggered-pulse-animation($tokens.theme-light.color.icon-success-normal, 'triggeredGreenPulse')

pkg/webui/console/containers/device-info-panel/device-info-panel.styl

@@ -32,8 +32,7 @@
   &-placeholder
     width: 6rem
   img
-    border-radius: $br.m
-    object-fit: contain
+    object-fit: cover
     width: 100%
     height: 100%
 

pkg/webui/console/containers/devices-panel/devices-panel.styl

@@ -26,7 +26,6 @@
     &-header
       top: 0
       position: sticky
-      background: var(--c-bg-neutral-min)
       z-index: 1
 
 .scroll-gradient

pkg/webui/console/containers/devices-panel/index.js

@@ -19,6 +19,7 @@ import { useSelector } from 'react-redux'
 
 import { IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
+import Toggle from '@ttn-lw/components/panel/toggle'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
@@ -35,35 +36,39 @@ const m = defineMessages({
 })
 
 const DevicesPanel = () => {
-  const [active, setActive] = useState('top')
+  const [activeToggle, setActiveToggle] = useState('top')
   const appId = useSelector(selectSelectedApplicationId)
 
-  const handleChange = useCallback(
+  const handleToggleChange = useCallback(
     (_, value) => {
       if (value !== 'all') {
-        setActive(value)
+        setActiveToggle(value)
       }
     },
-    [setActive],
+    [setActiveToggle],
   )
 
-  const options = [
+  const toggleOptions = [
     { label: sharedMessages.topDevices, value: 'top' },
     { label: m.recentDevices, value: 'recent' },
-    { label: sharedMessages.all, value: 'all', link: `/applications/${appId}/devices` },
   ]
 
   return (
     <Panel
       title={sharedMessages.devices}
       icon={IconDevice}
-      toggleOptions={options}
-      activeToggle={active}
-      onToggleClick={handleChange}
       className={classNames(style.devicesPanel)}
+      shortCutLinkTitle={sharedMessages.viewAll}
+      shortCutLinkPath={`/applications/${appId}/devices`}
     >
-      {active === 'top' && <TopDevicesList appId={appId} />}
-      {active === 'recent' && <RecentEndDevices />}
+      <Toggle
+        options={toggleOptions}
+        active={activeToggle}
+        onToggleChange={handleToggleChange}
+        fullWidth
+      />
+      {activeToggle === 'top' && <TopDevicesList appId={appId} />}
+      {activeToggle === 'recent' && <RecentEndDevices />}
     </Panel>
   )
 }

pkg/webui/console/containers/devices-panel/recent-devices.js

@@ -72,22 +72,15 @@ const RecentEndDevices = () => {
         id: row.ids.device_id,
         name: row.name,
       }),
-      render: details => (
-        <div className="c-text-neutral-light fw-bold">
-          <Message
-            content={details.name ?? details.id}
-            component="p"
-            className="mt-0 mb-cs-xs p-0 text-overflow-ellipsis c-text-neutral-heavy"
-          />
-          {details.name && (
-            <Message
-              content={details.id}
-              component="span"
-              className="c-text-neutral-light fw-normal"
-            />
-          )}
-        </div>
-      ),
+      render: ({ id, name }) =>
+        Boolean(name) ? (
+          <>
+            <span className="mt-0 mb-cs-xxs p-0 fw-bold d-block">{name}</span>
+            <span className="c-text-neutral-light d-block">{id}</span>
+          </>
+        ) : (
+          <span className="mt-0 p-0 fw-bold d-block">{id}</span>
+        ),
     },
     {
       name: 'last_seen_at',

pkg/webui/console/containers/gateway-status-panel/index.js

@@ -158,6 +158,7 @@ const GatewayStatusPanel = () => {
       iconClassName={isDisconnected ? style.gtwStatusPanelIcon : undefined}
       messageDecorators={
         <Status
+          className="pr-cs-s"
           status={
             isDisconnected
               ? 'bad'

pkg/webui/console/containers/top-entities-dashboard-panel/top-devices/index.js

@@ -46,7 +46,7 @@ const TopDevicesList = ({ appId }) => {
         const cleanedId = Boolean(appId) ? id.split('/')[1] : id
         return Boolean(entity?.name) ? (
           <>
-            <span className="mt-0 mb-cs-xxs p-0 fw-bold d-block">{name}</span>
+            <span className="mt-0 mb-cs-xxs p-0 fw-bold d-block">{entity.name}</span>
             <span className="c-text-neutral-light d-block">{cleanedId}</span>
           </>
         ) : (