From 44205f9f68670e4b57d781dcdca78f7e92d96339 Mon Sep 17 00:00:00 2001 From: Vio Date: Thu, 8 Feb 2024 22:59:06 +0100 Subject: [PATCH 1/2] fix(ui): Remove obsolete styles --- packages/ui/src/css/default.css | 62 --------------------------------- 1 file changed, 62 deletions(-) diff --git a/packages/ui/src/css/default.css b/packages/ui/src/css/default.css index b92344d472..22f7b0c04d 100644 --- a/packages/ui/src/css/default.css +++ b/packages/ui/src/css/default.css @@ -53,7 +53,6 @@ code { font-family: var(--font-family-fixed); } -/** Orbit updates */ a { color: var(--color-primary); } @@ -65,67 +64,6 @@ a:focus { outline: none; } -.ui-button--primary { - background: var(--color-primary); -} - -.ui-button--primary:active, -.ui-button--primary:focus, -.ui-button--primary:hover { - background: var(--color-primary-dark); -} - -.ui-button--secondary { - background: var(--color-secondary); -} - -.ui-button--secondary:active, -.ui-button--secondary:focus, -.ui-button--secondary:hover { - background: var(--color-secondary-dark); -} - -.ui-button--info { - background: var(--color-info); -} - -.ui-button--info:active, -.ui-button--info:focus, -.ui-button--info:hover { - background: var(--color-info-dark); -} - -.ui-button--success { - background: var(--color-success); -} - -.ui-button--success:active, -.ui-button--success:focus, -.ui-button--success:hover { - background: var(--color-success-dark); -} - - -.ui-button--warning { - background: var(--color-warning); -} - -.ui-button--warning:active, -.ui-button--warning:focus, -.ui-button--warning:hover { - background: var(--color-warning-dark); -} - -.ui-button--danger { - background: var(--color-danger); -} - -.ui-button--danger:active, -.ui-button--danger:focus, -.ui-button--danger:hover { - background: var(--color-danger-dark); -} - .__reakit-portal { z-index: var(--layer-xhigh); position: relative; From d0662d81c0acb939d3f57e49a487d4343ff12f25 Mon Sep 17 00:00:00 2001 From: Vio Date: Thu, 8 Feb 2024 23:08:20 +0100 Subject: [PATCH 2/2] fix(ui): Correct tooltip/hovercard z-index --- packages/ui/src/css/default.css | 5 ----- packages/ui/src/css/variables.css | 1 + packages/ui/src/ui/hover-card/hover-card.module.css | 1 + packages/ui/src/ui/hover-card/hover-card.tsx | 3 +-- packages/ui/src/ui/tooltip/tooltip.module.css | 1 + 5 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/css/default.css b/packages/ui/src/css/default.css index 22f7b0c04d..fd5cb6750d 100644 --- a/packages/ui/src/css/default.css +++ b/packages/ui/src/css/default.css @@ -63,8 +63,3 @@ a:focus { color: var(--color-primary-dark); outline: none; } - -.__reakit-portal { - z-index: var(--layer-xhigh); - position: relative; -} diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css index e1e15980a6..ee5f80b75c 100644 --- a/packages/ui/src/css/variables.css +++ b/packages/ui/src/css/variables.css @@ -185,6 +185,7 @@ --layer: 100; --layer-high: 1000; --layer-xhigh: 10000; + --layer-xxhigh: 100000; --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow); --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow); diff --git a/packages/ui/src/ui/hover-card/hover-card.module.css b/packages/ui/src/ui/hover-card/hover-card.module.css index 7832dd722d..88cf2d1b70 100644 --- a/packages/ui/src/ui/hover-card/hover-card.module.css +++ b/packages/ui/src/ui/hover-card/hover-card.module.css @@ -17,6 +17,7 @@ } .hoverCard { + z-index: var(--layer-xxhigh); padding: var(--space-xsmall) var(--space-small); border-radius: var(--radius-medium); width: calc(100vw - 2 * var(--space-small)); diff --git a/packages/ui/src/ui/hover-card/hover-card.tsx b/packages/ui/src/ui/hover-card/hover-card.tsx index 98a1114f32..359c0359fb 100644 --- a/packages/ui/src/ui/hover-card/hover-card.tsx +++ b/packages/ui/src/ui/hover-card/hover-card.tsx @@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => { children, } = props; - const state = useHovercardState({ gutter: 8, timeout: 800 }); + const state = useHovercardState({ gutter: 8, timeout: 300 }); const hovercardProps = useHovercard({ state, portal: true }); // Fallback to span if no href @@ -62,7 +62,6 @@ export const HoverCard = (props: HoverCardProps) => { {...hovercardProps} state={state} className={cx(css.hoverCard, hoverCardClassName)} - style={{ zIndex: 10000 }} > {typeof children === 'function' ? children({ close: state.hide }) : children} diff --git a/packages/ui/src/ui/tooltip/tooltip.module.css b/packages/ui/src/ui/tooltip/tooltip.module.css index 535a6b4cde..9790b9b468 100644 --- a/packages/ui/src/ui/tooltip/tooltip.module.css +++ b/packages/ui/src/ui/tooltip/tooltip.module.css @@ -19,6 +19,7 @@ filter: drop-shadow(var(--shadow-layer)); will-change: filter; font-size: var(--size-xsmall); + z-index: var(--layer-xxhigh); } .arrow svg {