console: Fix tooltip style

TheThingsNetwork · Dec 16, 2024 · 36edd97 · 36edd97
1 parent adb2ff1
commit 36edd97
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/pkg/webui/components/tooltip/index.js b/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: {

diff --git a/pkg/webui/components/tooltip/tooltip.styl b/pkg/webui/components/tooltip/tooltip.styl
@@ -17,7 +17,7 @@
 :global {
   .tippy-box {
     z-index: $zi.tooltip
-    border-radius: $br.m
+    border-radius: $br.xl
     background: var(--c-bg-neutral-heavy)
     color: var(--c-text-neutral-min)
     padding: $cs.m

diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js b/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js
@@ -27,13 +27,21 @@ import style from './shortcut-item.styl'
 
 const ShortcutItem = ({ icon, link, action, title, className }) =>
   action ? (
-    <Tooltip content={<Message content={title} />}>
+    <Tooltip
+      content={<Message content={title} />}
+      className={classnames(style.shortcutTooltip, 'fs-m br-l')}
+      delay={0}
+    >
       <button onClick={action} className={classnames(style.shortcut, className)}>
         <Icon icon={icon} className={style.icon} size={28} />
       </button>
     </Tooltip>
   ) : (
-    <Tooltip content={<Message content={title} />}>
+    <Tooltip
+      content={<Message content={title} />}
+      className={classnames(style.shortcutTooltip, 'fs-m br-l')}
+      delay={0}
+    >
       <Link to={link} className={classnames(style.shortcut, className)}>
         <Icon icon={icon} className={style.icon} size={28} />
       </Link>

diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -12,6 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+.shortcut-tooltip
+  padding: $cs.xs $cs.m 0.6rem
+
 .shortcut
   padding: $cs.s $cs.m
   background: var(--c-bg-brand-light)