console: Add various styling fixes

TheThingsNetwork · Aug 14, 2024 · 9ce1261 · 9ce1261
1 parent 235dda0
commit 9ce1261
Show file tree

Hide file tree

Showing 17 changed files with 173 additions and 89 deletions.
diff --git a/pkg/webui/components/form/field/index.js b/pkg/webui/components/form/field/index.js
@@ -85,6 +85,7 @@ const FormField = props => {
     required,
     title,
     titleChildren,
+    tooltip,
     tooltipId,
     warning,
     validate,
@@ -189,7 +190,7 @@ const FormField = props => {
 
   const value = decode(encodedValue)
   const disabled = inputDisabled || formDisabled
-  const hasTooltip = Boolean(tooltipId)
+  const hasTooltip = Boolean(tooltipId) || Boolean(tooltip)
   const hasTitle = Boolean(title)
   const showError =
     touched &&
@@ -198,7 +199,9 @@ const FormField = props => {
   const showWarning = !showError && Boolean(warning)
   const error = showError && errors[0]
   const showDescription = !showError && !showWarning && Boolean(description)
-  const tooltipIcon = hasTooltip ? <Tooltip id={tooltipId} glossaryTerm={title} /> : null
+  const tooltipIcon = hasTooltip ? (
+    <Tooltip id={tooltipId} tooltip={tooltip} glossaryTerm={title} />
+  ) : null
   const describedBy = showError
     ? `${name}-field-error`
     : showWarning
@@ -305,6 +308,7 @@ FormField.propTypes = {
   required: PropTypes.bool,
   title: PropTypes.message,
   titleChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  tooltip: PropTypes.message,
   tooltipId: PropTypes.string,
   validate: PropTypes.func,
   valueSetter: PropTypes.func,
@@ -324,7 +328,8 @@ FormField.defaultProps = {
   required: false,
   title: undefined,
   titleChildren: null,
-  tooltipId: '',
+  tooltip: undefined,
+  tooltipId: undefined,
   validate: undefined,
   valueSetter: defaultValueSetter,
   warning: '',

diff --git a/pkg/webui/components/form/field/tooltip.js b/pkg/webui/components/form/field/tooltip.js
@@ -35,7 +35,7 @@ const m = defineMessages({
 })
 
 const Content = props => {
-  const { tooltipDescription, glossaryTerm, children } = props
+  const { tooltipDescription, tooltip, glossaryTerm, children } = props
   const { description, location, absence, glossaryId } = tooltipDescription
 
   const hasLocation = Boolean(location)
@@ -46,12 +46,22 @@ const Content = props => {
   return (
     <div className={style.tooltipContent}>
       <Message className={style.tooltipTitle} content={m.descriptionTitle} component="h4" />
-      <Message
-        className={style.tooltipDescription}
-        content={description}
-        component="p"
-        convertBackticks
-      />
+      {description && (
+        <Message
+          className={style.tooltipDescription}
+          content={description}
+          component="p"
+          convertBackticks
+        />
+      )}
+      {Boolean(tooltip) && (
+        <Message
+          className={style.tooltipDescription}
+          content={tooltip}
+          component="p"
+          convertBackticks
+        />
+      )}
       {hasLocation && (
         <>
           <Message className={style.tooltipTitle} content={m.locationTitle} component="h4" />
@@ -94,24 +104,27 @@ const Content = props => {
 Content.propTypes = {
   children: PropTypes.node,
   glossaryTerm: PropTypes.message,
+  tooltip: PropTypes.node,
   tooltipDescription: PropTypes.shape({
     description: PropTypes.message.isRequired,
     location: PropTypes.message,
     absence: PropTypes.message,
     glossaryId: PropTypes.string,
-  }).isRequired,
+  }),
 }
 
 Content.defaultProps = {
   children: null,
   glossaryTerm: undefined,
+  tooltipDescription: {},
+  tooltip: null,
 }
 
 const FieldTooltip = React.memo(props => {
-  const { id, glossaryTerm } = props
+  const { id, glossaryTerm, tooltip } = props
 
   const tooltipDescription = descriptions[id]
-  if (!tooltipDescription) {
+  if ((!id || !tooltipDescription) && !tooltip) {
     return null
   }
 
@@ -142,6 +155,7 @@ const FieldTooltip = React.memo(props => {
       content={
         <Content
           glossaryTerm={glossaryTerm}
+          tooltip={tooltip}
           tooltipDescription={tooltipDescription}
           children={link}
         />
@@ -154,11 +168,14 @@ const FieldTooltip = React.memo(props => {
 
 FieldTooltip.propTypes = {
   glossaryTerm: PropTypes.message,
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  tooltip: PropTypes.node,
 }
 
 FieldTooltip.defaultProps = {
   glossaryTerm: undefined,
+  id: undefined,
+  tooltip: undefined,
 }
 
 export default FieldTooltip
diff --git a/pkg/webui/components/spinner/spinner.styl b/pkg/webui/components/spinner/spinner.styl
@@ -72,23 +72,15 @@ $xs = $cs.m
 .center
   &:not(.inline)
     position: absolute
-    top: ($l * -1) // To achieve visual centering.
+    top: 0
     left: 0
     right: 0
     bottom: 0
     margin: auto
-    height: $l
+    height: fit-content
   &.inline
     justify-content: center
 
-  &.small
-    height: $s
-    top: ($s * -1) // To achieve visual centering.
-
-  &.micro
-    height: $xs
-    top: ($xs * -1) // To achieve visual centering.
-
 .small .spinner
   width: $s
   height: @width

diff --git a/pkg/webui/console/containers/access-point-list/access-point-list.styl b/pkg/webui/console/containers/access-point-list/access-point-list.styl
@@ -15,16 +15,20 @@
 .list
   border-input()
   input-width-classes()
+  position: relative
   box-sizing: border-box
   border-radius: $br.s
-  max-height: $ls.xxl
+  height: 15rem
   min-width: 15rem
   overflow-x: auto
   .item
     padding: $cs.xxs $cs.xs
     &.active
       background-color: $c-active-blue-active
       color: white
+
+      span
+        color: white
     &:not(.active):hover
       cursor: pointer
       background-color: $c-backdrop

diff --git a/pkg/webui/console/containers/access-point-list/index.js b/pkg/webui/console/containers/access-point-list/index.js
@@ -50,6 +50,7 @@ const m = defineMessages({
   lastRefresh: 'Last refresh',
   description:
     'This list shows WiFi networks as detected by your gateway. You can select an access point or choose "Other..." to enter an SSID of a hidden access point.',
+  scanningWifi: 'Scanning WiFi networks…',
 })
 
 const computeDeltaInSeconds = (from, to) => {
@@ -158,10 +159,13 @@ const AccessPointList = ({ onChange, value, className, inputWidth, onBlur, ssid
     <div className={classnames(className, 'd-flex', 'w-full')} onBlur={onBlur}>
       <div className="w-full">
         {isLoading ? (
-          <div className="d-flex mt-cs-m">
-            <Spinner>
-              <Message content={sharedMessages.fetching} />
-            </Spinner>
+          <div className="d-flex gap-cs-l">
+            <div className={classnames(style.list, [style[`input-width-${inputWidth}`]])}>
+              <Spinner small center>
+                <Message content={m.scanningWifi} />
+              </Spinner>
+            </div>
+            <Message content={m.description} className="tc-subtle-gray" />
           </div>
         ) : (
           <div className="d-flex gap-cs-l">

diff --git a/...nsole/containers/gateway-managed-gateway/connection-settings/connections/connections.styl b/...nsole/containers/gateway-managed-gateway/connection-settings/connections/connections.styl
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 .root
-  border-normal()
+  border-dark()
   border-radius: $br.l
   box-sizing: border-box
   padding: $cs.l
@@ -22,29 +22,35 @@
   gap: $cs.l
 
   .top
-    border-normal()
+    border-dark()
     box-sizing: border-box
     border-radius: $br.l
     display: flex
 
   .img-div
     background-color: $c-backdrop-lighter
     border-radius: $br.l 0 0 $br.l
+    border-dark('right')
     .image
+      object-fit: contain
+      box-sizing: border-box
+      padding: $cs.s
       height: 6rem
-      width: auto
+      width: 10rem
+      opacity: 0.7
+      filter: grayscale(100%)
 
   .horizontal-line
-    background-color: $c-divider
+    background-color: $c-divider-dark
 
   .connections
-    border-normal()
+    border-dark()
     box-sizing: border-box
     border-radius: $br.l
     display: flex
     flex-direction: column
     gap: $cs.xxs
-    padding: $cs.m $cs.s
+    padding: $cs.xs $cs.s
 
   .connection
     padding-inline: $cs.xxs

diff --git a/...webui/console/containers/gateway-managed-gateway/connection-settings/connections/index.js b/...webui/console/containers/gateway-managed-gateway/connection-settings/connections/index.js
@@ -16,10 +16,9 @@ import React, { useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import classnames from 'classnames'
 
-import managedGatewayImage from '@assets/misc/managed-gateway.png'
+import managedGatewayImage from '@assets/misc/gateway.svg'
 
 import Icon from '@ttn-lw/components/icon'
-import Link from '@ttn-lw/components/link'
 import DataSheet from '@ttn-lw/components/data-sheet'
 
 import Message from '@ttn-lw/lib/components/message'
@@ -50,7 +49,7 @@ const ConnectionByType = ({ type, isConnected, details, connectedVia, macAddress
     <div className="d-flex al-center gap-cs-xxs">
       <Icon icon={connectionIconMap[type]} />
       <Message content={connectionNameMap[type]} component="p" className="m-0 fw-bold" />
-      <div className={classnames(style.connection, 'd-flex al-center gap-cs-xxs')}>
+      <div className={classnames(style.connection, 'd-flex al-center gap-cs-xxs ml-cs-xs')}>
         <Icon
           small
           icon={isConnected ? 'check_circle_outline' : 'highlight_remove'}
@@ -207,22 +206,27 @@ const ManagedGatewayConnections = ({ connectionsData }) => {
             />
 
             {systemStatus?.cpu_temperature && (
-              <div className="d-flex al-center gap-cs-xxs tc-subtle-gray">
+              <div className="d-flex al-center gap-cs-xxs">
                 <Icon icon="device_thermostat" />
-                {systemStatus?.cpu_temperature} &deg;C
+                <Message
+                  content={m.cpuTemperature}
+                  values={{ temperature: `${systemStatus.cpu_temperature}°C` }}
+                />
               </div>
             )}
           </div>
         </div>
 
+        {/* TODO: Add link to official once available.
         <Link.DocLink primary path="#">
           <Message content={m.officialDocumentation} />
         </Link.DocLink>
+        */}
       </div>
 
       <hr className={classnames(style.horizontalLine, 'w-full m-0')} />
 
-      <Message className="fw-bold m-0" component="h3" content={m.connections} />
+      <Message className="fw-bold m-0 lh-1" component="h3" content={m.connections} />
 
       <div className={style.connections}>
         {getConnectionData({
@@ -239,7 +243,7 @@ const ManagedGatewayConnections = ({ connectionsData }) => {
         })}
       </div>
 
-      <div className="d-flex flex-column gap-cs-m">
+      <div className="d-flex flex-column gap-ls-xs">
         <ConnectionByType
           isConnected={isCellularConnected}
           type={CONNECTION_TYPES.CELLULAR}

diff --git a/...ui/console/containers/gateway-managed-gateway/connection-settings/connections/messages.js b/...ui/console/containers/gateway-managed-gateway/connection-settings/connections/messages.js
@@ -31,6 +31,7 @@ const messages = defineMessages({
   hardwareVersion: 'Hardware version: <span>{version}</span>',
   firmwareVersion: 'Firmware version: <span>{version}</span>',
   connectedVia: 'Connected via {connectedVia}',
+  cpuTemperature: 'CPU temperature: {temperature}',
 })
 
 export default messages