improve visual focus for tour target

Author: haschek

src/components/VisualTour/VisualTour.tsx

@@ -242,29 +242,56 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
         [highlightedElement]
     );
 
-    return createPortal(
-        <div
-            className={
-                `${eccgui}-tooltip__content` +
-                ` ${eccgui}-tooltip--${step.size ?? "large"}` +
-                ` ${eccgui}-visual-tour__tooltip`
+    const backdropRef = React.useCallback(
+        (backdrop: HTMLDivElement | null) => {
+            if (backdrop) {
+                const targetRect = highlightedElement.getBoundingClientRect();
+                backdrop.style.left = `calc(${
+                    targetRect.left + window.scrollX + "px"
+                } - var(--${eccgui}-visual-tour-focus-padding))`;
+                backdrop.style.top = `calc(${
+                    targetRect.top + window.scrollY + "px"
+                } - var(--${eccgui}-visual-tour-focus-padding))`;
+                backdrop.style.width = `calc(${
+                    targetRect.width + "px"
+                } + 2 * var(--${eccgui}-visual-tour-focus-padding))`;
+                backdrop.style.height = `calc(${
+                    targetRect.height + "px"
+                } + 2 * var(--${eccgui}-visual-tour-focus-padding))`;
             }
-            role="tooltip"
-            ref={tooltipRef}
-        >
-            <div id="arrow" data-popper-arrow>
-                <span className={`${eccgui}-visual-tour__tooltip__arrow-shape`} />
+        },
+        [highlightedElement]
+    );
+
+    return createPortal(
+        <div className={`${eccgui}-visual-tour`}>
+            <div className={`${eccgui}-visual-tour__focushelper`} ref={backdropRef} />
+            <div>
+                <div className={`${eccgui}-visual-tour__overlay`} />
+            </div>
+            <div
+                className={
+                    `${eccgui}-tooltip__content` +
+                    ` ${eccgui}-tooltip--${step.size ?? "large"}` +
+                    ` ${eccgui}-visual-tour__tooltip`
+                }
+                role="tooltip"
+                ref={tooltipRef}
+            >
+                <div id="arrow" data-popper-arrow>
+                    <span className={`${eccgui}-visual-tour__tooltip__arrow-shape`} />
+                </div>
+                <Card>
+                    <CardHeader>
+                        <CardTitle>{step.title}</CardTitle>
+                        <CardOptions>{titleOption}</CardOptions>
+                    </CardHeader>
+                    <CardContent>
+                        <StepContent step={step} />
+                    </CardContent>
+                    <CardActions inverseDirection>{actionButtons}</CardActions>
+                </Card>
             </div>
-            <Card>
-                <CardHeader>
-                    <CardTitle>{step.title}</CardTitle>
-                    <CardOptions>{titleOption}</CardOptions>
-                </CardHeader>
-                <CardContent>
-                    <StepContent step={step} />
-                </CardContent>
-                <CardActions inverseDirection>{actionButtons}</CardActions>
-            </Card>
         </div>,
         document.body
     );

src/components/VisualTour/visualTour.scss

@@ -1,5 +1,27 @@
+.#{$eccgui}-visual-tour {
+    opacity: 1;
+
+    --#{$eccgui}-visual-tour-focus-padding: 5px;
+}
+
 .#{$eccgui}-visual-tour__highlighted-element {
-    box-shadow: 0 4px 8px 0 rgba(0.1, 0, 0, 0.2), 0 6px 20px 0 rgba(0.1, 0, 0, 0.19) !important;
+    position: relative;
+    z-index: 999999 !important;
+}
+
+.#{$eccgui}-visual-tour__focushelper {
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px solid $eccgui-color-accent;
+    border-radius: 2 * $button-border-radius;
+    box-shadow: 0 0 0 10000px $eccgui-color-modal-backdrop;
+}
+
+.#{$eccgui}-visual-tour__overlay {
+    position: fixed;
+    inset: 0;
+    box-sizing: content-box;
+    opacity: 0;
 }
 
 // TODO: From https://popper.js.org/docs/v2/tutorial/ until we fine-tune this part