Fix quick actions panel

pkg/webui/components/button/button.styl

@@ -120,6 +120,9 @@
         &:disabled
           background-color: var(--c-bg-error-normal-disabled)
 
+      .expand-icon
+        color: var(--c-text-neutral-min)
+
     &.secondary
       color: var(--c-text-neutral-heavy)
       background-color: var(--c-bg-neutral-min)

pkg/webui/components/header/index.js

@@ -95,7 +95,8 @@ const Header = ({
         <div className="d-flex al-center gap-cs-xs">
           <AppStatusBadge />
           <Button
-            secondary
+            primary
+            message={sharedMessages.add}
             icon={IconPlus}
             dropdownItems={addDropdownItems}
             dropdownPosition="below left"

pkg/webui/components/tooltip/index.js

@@ -23,12 +23,6 @@ import style from './tooltip.styl'
 let currentInstance
 
 const popperModifiers = [
-  {
-    name: 'offset',
-    options: {
-      offset: [-12, 8],
-    },
-  },
   {
     name: 'arrow',
     options: {

pkg/webui/components/tooltip/tooltip.styl

@@ -17,7 +17,7 @@
 :global {
   .tippy-box {
     z-index: $zi.tooltip
-    border-radius: $br.m
+    border-radius: $br.l
     background: var(--c-bg-neutral-heavy)
     color: var(--c-text-neutral-min)
     padding: $cs.m
@@ -72,6 +72,5 @@
 // stylelint-enable stylus/pythonic
 
 .small
-  padding: $cs.xxs $cs.s
-  border-radius: $br.xs
-  font-size: $fs.s
+  padding: 0.65rem $cs.m $cs.s
+  border-radius: $br.l

pkg/webui/console/components/total-end-devices-upseller-panel/index.js

@@ -1,4 +1,4 @@
 // Copyright © 2024 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.
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React from 'react'
+import classNames from 'classnames'
 
 import { IconBolt, IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
@@ -21,10 +22,11 @@
 import Message from '@ttn-lw/lib/components/message'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './total-end-devices-upseller-panel.styl'
 
-const TotalEndDevicesUpsellerPanel = () => {
+const TotalEndDevicesUpsellerPanel = ({ className }) => {
   const upgradeUrl = 'https://www.thethingsindustries.com/stack/plans/'
 
   return (
@@ -34,7 +36,7 @@
       shortCutLinkButton
       shortCutLinkPath="#"
       shortCutLinkDisabled
-      className={style.panel}
+      className={classNames(className, style.panel)}
       compact
     >
       <div className={style.upseller}>
@@ -58,4 +60,12 @@
   )
 }
 
+TotalEndDevicesUpsellerPanel.propTypes = {
+  className: PropTypes.string,
+}
+
+TotalEndDevicesUpsellerPanel.defaultProps = {
+  className: undefined,
+}
+
 export default TotalEndDevicesUpsellerPanel

pkg/webui/console/components/total-end-devices-upseller-panel/total-end-devices-upseller-panel.styl

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 .panel
-  height: 100%
   display: flex
   flex-direction: column
   position: relative

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

@@ -15,6 +15,7 @@
 import React from 'react'
 import { defineMessages } from 'react-intl'
 import { useDispatch } from 'react-redux'
+import classNames from 'classnames'
 
 import { APPLICATION } from '@console/constants/entities'
 
@@ -28,6 +29,7 @@ import {
 } from '@ttn-lw/components/icon'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import { setSearchOpen, setSearchScope } from '@console/store/actions/search'
 
@@ -37,55 +39,94 @@ import ShortcutItem from './shortcut-item'
 
 const m = defineMessages({
   shortcuts: 'Quick actions',
-  addApplication: 'New application',
-  addGateway: 'New gateway',
-  addNewOrganization: 'New organization',
-  addPersonalApiKey: 'New personal API key',
+  addEndDevice: 'Add end device',
 })
 
-const ShortcutPanel = () => {
+const ShortcutPanel = ({ panelClassName, mobile }) => {
   const dispatch = useDispatch()
   const handleRegisterDeviceClick = React.useCallback(() => {
     dispatch(setSearchScope(APPLICATION))
     dispatch(setSearchOpen(true))
   }, [dispatch])
 
+  if (mobile) {
+    return (
+      <div className="d-flex gap-cs-s">
+        <ShortcutItem
+          icon={IconApplication}
+          title={sharedMessages.createApplication}
+          link="/applications/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconDevice}
+          title={m.addEndDevice}
+          action={handleRegisterDeviceClick}
+          mobile
+        />
+        <ShortcutItem
+          icon={IconUsersGroup}
+          title={sharedMessages.createOrganization}
+          link="/organizations/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconKey}
+          title={sharedMessages.addApiKey}
+          link="/user-settings/api-keys/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconGateway}
+          title={sharedMessages.registerGateway}
+          link="/gateways/add"
+          mobile
+        />
+      </div>
+    )
+  }
+
   return (
-    <Panel title={m.shortcuts} icon={IconBolt} divider className="h-full">
-      <div className="grid gap-cs-xs">
+    <Panel title={m.shortcuts} icon={IconBolt} className={classNames(panelClassName, 'h-full')}>
+      <div className="d-flex gap-cs-xs w-full">
         <ShortcutItem
           icon={IconApplication}
-          title={m.addApplication}
+          title={sharedMessages.createApplication}
           link="/applications/add"
-          className="item-6"
         />
         <ShortcutItem
           icon={IconDevice}
-          title={sharedMessages.registerDeviceInApplication}
+          title={sharedMessages.registerEndDevice}
           action={handleRegisterDeviceClick}
-          className="item-6"
         />
         <ShortcutItem
           icon={IconUsersGroup}
-          title={m.addNewOrganization}
+          title={sharedMessages.createOrganization}
           link="/organizations/add"
-          className="item-4"
         />
         <ShortcutItem
           icon={IconKey}
-          title={m.addPersonalApiKey}
-          link="/user/api-keys/add"
-          className="item-4"
+          title={sharedMessages.addApiKey}
+          link="/user-settings/api-keys/add"
         />
         <ShortcutItem
           icon={IconGateway}
-          title={m.addGateway}
+          title={sharedMessages.registerGateway}
           link="/gateways/add"
-          className="item-4"
         />
       </div>
     </Panel>
   )
 }
 
+ShortcutPanel.propTypes = {
+  mobile: PropTypes.bool,
+  panelClassName: PropTypes.string,
+}
+
+ShortcutPanel.defaultProps = {
+  panelClassName: undefined,
+  mobile: false,
+}
+
 export default ShortcutPanel

pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js

@@ -17,46 +17,51 @@ import classnames from 'classnames'
 
 import Icon from '@ttn-lw/components/icon'
 import Link from '@ttn-lw/components/link'
+import Tooltip from '@ttn-lw/components/tooltip'
 
 import Message from '@ttn-lw/lib/components/message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './shortcut-item.styl'
 
-const ShortcutItem = ({ icon, title, link, action, className }) =>
+const ShortcutItem = ({ icon, link, action, title, className, mobile }) =>
   action ? (
-    <button onClick={action} className={classnames(style.shortcut, className)}>
-      <div className="pos-relative w-full h-full">
-        <div className={style.shortcutTitleWrapper}>
-          <Icon icon={icon} className={style.icon} size={28} />
-          <Message content={title} component="span" />
-        </div>
-      </div>
-    </button>
+    <Tooltip content={<Message content={title} />} delay={0}>
+      <button
+        onClick={action}
+        className={classnames(style.shortcut, className, { [style.shortcutPanel]: !mobile })}
+      >
+        <Icon icon={icon} className={style.icon} size={25} />
+        {mobile && <Message content={title} className="lg-xl:d-none" />}
+      </button>
+    </Tooltip>
   ) : (
-    <Link to={link} className={classnames(style.shortcut, className)}>
-      <div className="pos-relative w-full h-full">
-        <div className={style.shortcutTitleWrapper}>
-          <Icon icon={icon} className={style.icon} size={28} />
-          <Message content={title} component="span" />
-        </div>
-      </div>
-    </Link>
+    <Tooltip content={<Message content={title} />} delay={0}>
+      <Link
+        to={link}
+        className={classnames(style.shortcut, className, { [style.shortcutPanel]: !mobile })}
+      >
+        <Icon icon={icon} className={style.icon} size={25} />
+        {mobile && <Message content={title} className="lg-xl:d-none" />}
+      </Link>
+    </Tooltip>
   )
 
 ShortcutItem.propTypes = {
   action: PropTypes.func,
   className: PropTypes.string,
   icon: PropTypes.icon.isRequired,
   link: PropTypes.string,
+  mobile: PropTypes.bool,
   title: PropTypes.message.isRequired,
 }
 
 ShortcutItem.defaultProps = {
   className: undefined,
   action: undefined,
   link: undefined,
+  mobile: false,
 }
 
 export default ShortcutItem

pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl

@@ -13,44 +13,30 @@
 // limitations under the License.
 
 .shortcut
+  padding: $cs.s $cs.m
+  color: var(--c-text-brand-normal)
+  background-color: var(--c-bg-brand-light)
+  border-radius: $br.l
+  height: 4.5rem
+  width: 100%
   display: flex
-  gap: $cs.m
-  flex-direction: column
   align-items: center
   justify-content: center
-  padding: $cs.s $cs.m
-  text-decoration: none
-  height: 9rem
-  border-radius: $br.l
-  background: var(--c-bg-brand-normal)
-  color: var(--c-text-neutral-min)
-  font-size: $fs.m
+  gap: $cs.xs
   font-weight: $fw.bold
-  transition: $ad.s background ease-in-out
-  -webkit-appearance: none
   border: 0
 
-  &-title-wrapper
-    width: 100%
-    height: 100%
-    display: flex
-    justify-content: center
-    align-items: center
-    flex-direction: column
-    text-wrap: wrap
-    text-align: center
-    gap: $cs.m
-    transition: $ad.s opacity ease-in-out
-
-    span
-      line-height: normal
+  +media-query(1304px)
+    padding: $cs.xxs $cs.xs
 
-  span.icon
-    font-size: 2rem
+  .icon
+    color: var(--c-icon-brand-normal)
 
   &:hover
     cursor: pointer
-    background: var(--c-bg-brand-normal-hover)
+    background-color: var(--c-bg-brand-semilight)
 
-    span.icon
-      font-size: 2rem
+  &-panel
+    height: unset
+    aspect-ratio: 1 / 1
+    box-sizing: border-box