Apply console redesign fixes

pkg/webui/components/dropdown/index.js

@@ -133,7 +133,7 @@ const DropdownItem = ({
       className={classnames(style.button, { [style.buttonActive]: active })}
     >
       {iconElement}
-      <Message content={title} />
+      <Message content={title} className={messageClassName} />
     </button>
   ) : external ? (
     <Link.Anchor href={path} external tabIndex={tabIndex} className={style.button}>

pkg/webui/components/form/section/index.js

@@ -16,7 +16,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { defineMessages, useIntl } from 'react-intl'
 
-import Icon from '@ttn-lw/components/icon'
+import Icon, { IconChevronDown, IconChevronUp } from '@ttn-lw/components/icon'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -65,7 +65,7 @@ const FormCollapseSection = props => {
         disabled={disabled}
       >
         <Message content={title} className={style.title} />
-        <Icon className={style.icon} icon={isSectionClosed ? 'expand_down' : 'expand_up'} />
+        <Icon className={style.icon} icon={isSectionClosed ? IconChevronDown : IconChevronUp} />
       </button>
       <div className={classnames(style.content, { [style.expanded]: !isSectionClosed })} id={id}>
         {children}

pkg/webui/components/input/index.js

@@ -16,7 +16,7 @@ import React, { useCallback, useImperativeHandle, useRef, useState } from 'react
 import { defineMessages, useIntl } from 'react-intl'
 import classnames from 'classnames'
 
-import Icon from '@ttn-lw/components/icon'
+import Icon, { IconEye, IconEyeOff } from '@ttn-lw/components/icon'
 import Spinner from '@ttn-lw/components/spinner'
 import Button from '@ttn-lw/components/button'
 import Tooltip from '@ttn-lw/components/tooltip'
@@ -234,7 +234,7 @@ const Input = React.forwardRef((props, ref) => {
             small
           >
             <Button
-              icon={hidden ? 'visibility' : 'visibility_off'}
+              icon={hidden ? IconEye : IconEyeOff}
               className={style.hideToggle}
               onClick={handleHideToggleClick}
               naked

pkg/webui/components/key-value-map/entry.js

@@ -113,7 +113,7 @@ const Entry = ({
   const showRemoveButton = atLeastOneEntry ? index !== 0 : true
 
   return (
-    <div className="d-flex j-start mb-cs-s">
+    <div className={classnames(style.inputContainer, 'd-flex j-start mb-cs-s')}>
       {!indexAsKey && (
         <InputElement
           data-test-id={_getKeyInputName}

pkg/webui/components/key-value-map/key-value-map.styl

@@ -18,3 +18,6 @@
 
   &-index-as-key
     flex-grow: .25
+
+.input-container
+  max-width: 58rem

pkg/webui/console/components/routing-policy/sheet.js

@@ -15,7 +15,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Icon from '@ttn-lw/components/icon'
+import Icon, { IconCheck, IconX } from '@ttn-lw/components/icon'
 import Tooltip from '@ttn-lw/components/tooltip'
 
 import Message from '@ttn-lw/lib/components/message'
@@ -29,12 +29,12 @@ import style from './routing-policy-sheet.styl'
 
 const RoutingPolicy = ({ enabled, message, positiveMessage, negativeMessage }) => (
   <Tooltip content={<Message content={enabled ? positiveMessage : negativeMessage} />}>
-    <span className={style.policy} data-enabled={enabled}>
+    <span className={classnames(style.policy, 'd-flex al-center')} data-enabled={enabled}>
       <Icon
-        icon={enabled ? 'check' : 'clear'}
+        icon={enabled ? IconCheck : IconX}
         className={classnames('mr-cs-xxs', {
-          'c-bg-success-normal': enabled,
-          'c-bg-error-normal': !enabled,
+          'c-text-success-normal': enabled,
+          'c-text-error-normal': !enabled,
         })}
       />
       <Message content={message} />

pkg/webui/console/containers/application-overview-header/index.js

@@ -186,6 +186,7 @@ const ApplicationOverviewHeader = () => {
           <Dropdown.Item
             title={sharedMessages.deleteApp}
             action={handleOpenDeleteApplicationModal}
+            messageClassName="c-text-error-normal"
           />
         </Require>
       }

pkg/webui/console/containers/application-payload-formatters/downlink.js

@@ -102,8 +102,8 @@ const ApplicationPayloadFormatters = () => {
   const hasError = Boolean(linkError) && !isNotFoundError(linkError)
 
   return (
-    <div className="container container--xxl grid gap-ls-xxs box-border">
-      <div className="item-6">
+    <div className="container container--xl grid gap-ls-xxs box-border">
+      <div className="item-12">
         <PageTitle title={m.title} />
         {hasError && <ErrorNotification content={linkError} small />}
         {!isNoneType && <Notification className="mb-ls-s" small info content={m.infoText} />}

pkg/webui/console/containers/application-payload-formatters/uplink.js

@@ -102,8 +102,8 @@ const ApplicationPayloadFormatters = () => {
   const hasError = Boolean(linkError) && !isNotFoundError(linkError)
 
   return (
-    <div className="container container--xxl grid gap-ls-xxs box-border">
-      <div className="item-6">
+    <div className="container container--xl grid gap-ls-xxs box-border">
+      <div className="item-12">
         <PageTitle title={m.title} />
         {hasError && <ErrorNotification content={linkError} small />}
         {!isNoneType && <Notification className="mb-ls-s" small info content={m.infoText} />}

pkg/webui/console/containers/device-onboarding-form/qr-scan-form-section/index.js

@@ -149,8 +149,8 @@ const DeviceQRScanFormSection = () => {
   return (
     <>
       {qrData.approved ? (
-        <div className="mb-cs-xs">
-          <Icon icon={IconCheck} textPaddedRight className="c-bg-success-normal" />
+        <div className="mb-cs-xs d-flex al-center">
+          <Icon icon={IconCheck} textPaddedRight className="c-text-success-normal" />
           <Message content={sharedMessages.scanSuccess} />
         </div>
       ) : (

pkg/webui/console/containers/device-overview-header/index.js

@@ -335,6 +335,7 @@ const DeviceOverviewHeader = ({ device }) => {
           supportsClaiming ? sharedMessages.unclaimAndDeleteDevice : sharedMessages.deleteDevice
         }
         action={handleOpenDeleteDeviceModal}
+        messageClassName="c-text-error-normal"
       />
     </>
   )

pkg/webui/console/containers/gateway-managed-gateway/connection-settings/connections/connections.styl

@@ -22,6 +22,7 @@
   gap: $cs.l
   max-width: 35rem
   box-shadow: var(--shadow-box-panel-normal)
+  width: 100%
 
   .top
     border: 1px solid var(--c-border-neutral-light)

pkg/webui/console/containers/gateway-managed-gateway/connection-settings/index.js

@@ -383,35 +383,35 @@ const GatewayConnectionSettings = () => {
 
   return (
     <RequireRequest requestAction={loadData}>
-      <div className="item-12 lg:item-6 lg-xl:item-6 xl:item-7">
-        <PageTitle title={sharedMessages.connectionSettings} />
-        {isFirstClaim && <Notification info small content={m.firstNotification} />}
-        <Form
-          error={error}
-          onSubmit={handleSubmit}
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-        >
-          <>
-            <WifiSettingsFormFields
-              initialValues={initialValues}
-              isWifiConnected={connectionsData.isWifiConnected}
-              saveFormClicked={saveFormClicked}
-            />
-            <hr />
-            <EthernetSettingsFormFields />
-
-            <SubmitBar className="mb-cs-l">
-              <Form.Submit
-                component={SubmitButton}
-                message={sharedMessages.saveChanges}
-                disabled={isLoading}
+      <div className="item-12 d-flex gap-ls-s md:direction-column">
+        <div className="w-full">
+          <PageTitle title={sharedMessages.connectionSettings} />
+          {isFirstClaim && <Notification info small content={m.firstNotification} />}
+          <Form
+            error={error}
+            onSubmit={handleSubmit}
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+          >
+            <>
+              <WifiSettingsFormFields
+                initialValues={initialValues}
+                isWifiConnected={connectionsData.isWifiConnected}
+                saveFormClicked={saveFormClicked}
               />
-            </SubmitBar>
-          </>
-        </Form>
-      </div>
-      <div className="item-12 lg:item-6 lg-xl:item-6 xl:item-5">
+              <hr />
+              <EthernetSettingsFormFields />
+
+              <SubmitBar className="mb-cs-l">
+                <Form.Submit
+                  component={SubmitButton}
+                  message={sharedMessages.saveChanges}
+                  disabled={isLoading}
+                />
+              </SubmitBar>
+            </>
+          </Form>
+        </div>
         <ManagedGatewayConnections connectionsData={connectionsData} />
       </div>
     </RequireRequest>

pkg/webui/console/containers/gateway-managed-gateway/wifi-profiles/index.js

@@ -39,7 +39,7 @@ const GatewayWifiProfiles = () => {
   )
 
   return (
-    <div className="item-12 xl:item-8">
+    <div className="item-12">
       <Routes>
         <Route index Component={GatewayWifiProfilesOverview} />
         <Route path="add" Component={GatewayWifiProfilesForm} />

pkg/webui/console/containers/gateway-onboarding-form/qr-scan-section/index.js

@@ -18,7 +18,7 @@ import { defineMessages } from 'react-intl'
 
 import QRModalButton from '@ttn-lw/components/qr-modal-button'
 import { useFormContext } from '@ttn-lw/components/form'
-import Icon from '@ttn-lw/components/icon'
+import Icon, { IconCheck, IconX } from '@ttn-lw/components/icon'
 import ModalButton from '@ttn-lw/components/button/modal-button'
 import ButtonGroup from '@ttn-lw/components/button/group'
 
@@ -119,8 +119,8 @@ const GatewayQRScanSection = () => {
   return (
     <>
       {qrData.approved ? (
-        <div className="mb-cs-xs">
-          <Icon icon="check" textPaddedRight className="c-success" />
+        <div className="mb-cs-xs d-flex al-center">
+          <Icon icon={IconCheck} textPaddedRight className="c-text-success-normal" />
           <Message content={sharedMessages.scanSuccess} />
         </div>
       ) : (
@@ -141,7 +141,7 @@ const GatewayQRScanSection = () => {
               buttonMessage: sharedMessages.qrCodeDataReset,
               children: <Message content={sharedMessages.resetConfirm} component="span" />,
               approveButtonProps: {
-                icon: 'close',
+                icon: IconX,
               },
             }}
           />

pkg/webui/console/containers/gateway-overview-header/index.js

@@ -128,6 +128,7 @@ const GatewayOverviewHeader = ({ gateway }) => {
             supportsClaiming ? sharedMessages.unclaimAndDeleteGateway : sharedMessages.deleteGateway
           }
           action={handleOpenDeleteGatewayModal}
+          messageClassName="c-text-error-normal"
         />
       )}
     </>

pkg/webui/console/containers/user-data-form/add.js

@@ -115,7 +115,7 @@ const UserDataFormAdd = () => {
   )
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={sharedMessages.userAdd} />
       <div className="item-12">
         <Form

pkg/webui/console/views/application-add/index.js

@@ -56,7 +56,7 @@ const ApplicationAdd = () => {
   return (
     <Require featureCheck={mayCreateApplications} otherwise={{ redirect: '/applications' }}>
       <RequireRequest requestAction={getOrganizationsList()}>
-        <div className="container container--xxl grid">
+        <div className="container container--xl grid">
           <PageTitle
             colProps={{ md: 10, lg: 9 }}
             className="mb-cs-s"
@@ -76,7 +76,7 @@ const ApplicationAdd = () => {
             />
             <hr className="mb-ls-s" />
           </PageTitle>
-          <div className="item-10 xl:item-9">
+          <div className="item-12">
             <ApplicationForm onSuccess={handleSuccess} />
           </div>
         </div>

pkg/webui/console/views/application-api-key-add/index.js

@@ -34,9 +34,9 @@ const ApplicationApiKeyAdd = () => {
   )
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={sharedMessages.addApiKey} />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <ApiKeyCreateForm entityId={appId} entity={APPLICATION} />
       </div>
     </div>

pkg/webui/console/views/application-api-key-edit/index.js

@@ -44,9 +44,9 @@ const ApplicationApiKeyEditInner = () => {
   )
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={sharedMessages.keyEdit} />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <ApiKeyEditForm entity={APPLICATION} entityId={appId} />
       </div>
     </div>

pkg/webui/console/views/application-collaborator-add/index.js

@@ -34,9 +34,9 @@ const ApplicationCollaboratorAdd = () => {
   )
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={sharedMessages.addCollaborator} />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <ConsoleCollaboratorsForm entity={APPLICATION} entityId={appId} />
       </div>
     </div>

pkg/webui/console/views/application-collaborator-edit/index.js

@@ -33,9 +33,9 @@ const ApplicationCollaboratorEditInner = () => {
   const { appId, collaboratorId } = useParams()
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={sharedMessages.collaboratorEdit} values={{ collaboratorId }} />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <ConsoleCollaboratorsForm
           entity={APPLICATION}
           entityId={appId}

pkg/webui/console/views/application-general-settings/index.js

@@ -85,9 +85,9 @@ const ApplicationGeneralSettings = () => {
       {/* The request getApplicationLink returns 404 when there is no `skip_payload_crypto`. */}
       {/* This is expected behavior and should not be treated as an error. */}
       <RequireRequest requestAction={requestsList} handleErrors={false}>
-        <div className="container container--xxl grid">
+        <div className="container container--xl grid">
           <PageTitle title={sharedMessages.generalSettings} />
-          <div className="item-12 xl:item-8">
+          <div className="item-12">
             <ApplicationGeneralSettingsContainer appId={appId} />
           </div>
         </div>

pkg/webui/console/views/application-integrations-lora-cloud/index.js

@@ -81,9 +81,9 @@ const LoRaCloud = () => {
         ]}
       >
         <ErrorView errorRender={SubViewError}>
-          <div className="container container--xxl grid">
+          <div className="container container--xl grid">
             <PageTitle title="LoRa Cloud Modem and Geolocation Services" />
-            <div className="item-12 xl:item-8">
+            <div className="item-12">
               <img className={style.logo} src={LoRaCloudImage} alt="LoRa Cloud" />
               <Message content={m.loraCloudInfoText} className="mt-0" />
               <div>

pkg/webui/console/views/application-integrations-mqtt/index.js

@@ -157,8 +157,8 @@ const ApplicationMqtt = () => {
         otherwise={{ redirect: `/applications/${appId}` }}
       >
         <ErrorView errorRender={SubViewError}>
-          <div className="container container--xxl grid">
-            <div className="item-12 xl:item-8">
+          <div className="container container--xl grid">
+            <div className="item-12">
               <PageTitle title={sharedMessages.mqtt} noGrid />
               <Message content={m.mqttInfoText} className="mt-0" />
               <div>

pkg/webui/console/views/application-integrations-pubsub-add/index.js

@@ -70,9 +70,9 @@ const ApplicationPubsubAdd = () => {
   )
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={sharedMessages.addPubsub} className="mb-0" />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <PubsubForm
           appId={appId}
           update={false}

pkg/webui/console/views/application-integrations-pubsub-edit/index.js

@@ -104,9 +104,9 @@ const EditPubsubInner = () => {
   }, [appId, dispatch, navigate, pubsubId])
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={m.editPubsub} className="mb-0" />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <PubsubForm
           update
           appId={appId}

pkg/webui/console/views/application-integrations-webhook-add-form/index.js

@@ -79,9 +79,9 @@ const ApplicationWebhookAddForm = () => {
   }
 
   return (
-    <div className="container container--xxl grid">
+    <div className="container container--xl grid">
       <PageTitle title={pageTitle} className="mb-0" hideHeading={Boolean(webhookTemplate)} />
-      <div className="item-12 xl:item-8">
+      <div className="item-12">
         <WebhookAdd
           appId={appId}
           templateId={templateId}