Merge pull request #7112 from TheThingsNetwork/fix/icons-and-color-to…

…kens Fix icon definitions and color variables (Console redesign)
TheThingsNetwork · May 28, 2024 · 9e455ab · 9e455ab
2 parents c750118 + bad80bb
commit 9e455ab
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/pkg/webui/console/components/entity-title-section/content/messages-count/index.js b/pkg/webui/console/components/entity-title-section/content/messages-count/index.js
@@ -16,7 +16,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { FormattedNumber } from 'react-intl'
 
-import Icon from '@ttn-lw/components/icon'
+import Icon, { IconHelp } from '@ttn-lw/components/icon'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -30,7 +30,7 @@ const MessagesCount = React.forwardRef((props, ref) => {
       <Icon className={iconClassName} icon={icon} nudgeUp />
       {typeof value === 'number' ? <FormattedNumber value={value} /> : value}
       {helpTooltip && (
-        <Icon className="tc-subtle-gray ml-cs-xxs" icon="help_outline" nudgeUp small />
+        <Icon className="c-text-neutral-light ml-cs-xxs" icon={IconHelp} nudgeUp small />
       )}
     </div>
   )

diff --git a/pkg/webui/console/components/entity-title-section/entity-title-section.js b/pkg/webui/console/components/entity-title-section/entity-title-section.js
@@ -47,7 +47,7 @@ const EntityTitleSection = props => {
 EntityTitleSection.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   className: PropTypes.string,
-  icon: PropTypes.icon.isRequired,
+  icon: PropTypes.string.isRequired,
   iconAlt: PropTypes.message.isRequired,
   id: PropTypes.string.isRequired,
   name: PropTypes.string,

diff --git a/pkg/webui/console/components/events/index.js b/pkg/webui/console/components/events/index.js
@@ -18,7 +18,13 @@ import classnames from 'classnames'
 import EVENT_STORE_LIMIT from '@console/constants/event-store-limit'
 import hamburgerMenuClose from '@assets/misc/hamburger-menu-close.svg'
 
-import Icon, { IconInfoCircle, IconFileDownload, IconTrash } from '@ttn-lw/components/icon'
+import Icon, {
+  IconInfoCircle,
+  IconFileDownload,
+  IconTrash,
+  IconPlayerPlay,
+  IconPlayerPause,
+} from '@ttn-lw/components/icon'
 import Button from '@ttn-lw/components/button'
 import Routes from '@ttn-lw/components/switch'
 
@@ -103,7 +109,7 @@ const Events = React.memo(
                   message={paused ? sharedMessages.resume : sharedMessages.pause}
                   naked
                   warning={paused}
-                  icon={paused ? 'play_arrow' : 'pause'}
+                  icon={paused ? IconPlayerPlay : IconPlayerPause}
                 />
                 <Button onClick={onClear} message={sharedMessages.clear} naked icon={IconTrash} />
               </div>

diff --git a/pkg/webui/console/containers/organization-form/form.js b/pkg/webui/console/containers/organization-form/form.js
@@ -160,7 +160,7 @@ const OrganizationForm = props => {
           <Message
             content={m.gatewayFanoutNotificationsDescription}
             component="p"
-            className="mt-cs-xs tc-subtle-gray"
+            className="mt-cs-xs c-text-neutral-light"
           />
         </>
       )}

diff --git a/pkg/webui/console/containers/organizations-table/index.js b/pkg/webui/console/containers/organizations-table/index.js
@@ -169,7 +169,7 @@ const OrganizationsTable = () => {
           align: 'center',
           render: deviceCount =>
             typeof deviceCount !== 'number' ? (
-              <Spinner micro center inline after={100} className="c-subtle-gray" />
+              <Spinner micro center inline after={100} className="c-text-neutral-light" />
             ) : (
               deviceCount
             ),