simplify tour overlay markup/styles

Author: haschek

src/components/VisualTour/VisualTour.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { createPortal } from "react-dom";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { createPopper } from "@popperjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -229,12 +230,9 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
                         {
                             name: "offset",
                             options: {
-                                offset: [0, 8],
+                                offset: [0, 15],
                             },
                         },
-                        {
-                            name: "arrow",
-                        },
                     ],
                 });
             }
@@ -267,30 +265,34 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
         <div className={`${eccgui}-visual-tour`}>
             <div className={`${eccgui}-visual-tour__focushelper`} ref={backdropRef} />
             <div>
-                <div className={`${eccgui}-visual-tour__overlay`} />
+                <div className={`${eccgui}-visual-tour__backdrop`} />
             </div>
             <div
                 className={
-                    `${eccgui}-tooltip__content` +
-                    ` ${eccgui}-tooltip--${step.size ?? "large"}` +
-                    ` ${eccgui}-visual-tour__tooltip`
+                    `${eccgui}-visual-tour__overlay` +
+                    ` ${eccgui}-visual-tour__overlay--${step.size ?? "large"}` +
+                    ` ${BlueprintClasses.POPOVER}`
                 }
                 role="tooltip"
                 ref={tooltipRef}
             >
-                <div id="arrow" data-popper-arrow>
-                    <span className={`${eccgui}-visual-tour__tooltip__arrow-shape`} />
+                <div
+                    className={`${eccgui}-visual-tour__arrow ${BlueprintClasses.POPOVER_ARROW}`}
+                    data-popper-arrow
+                    aria-hidden
+                />
+                <div className={BlueprintClasses.POPOVER_CONTENT}>
+                    <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
+                        <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>
         </div>,
         document.body

src/components/VisualTour/visualTour.scss

@@ -17,54 +17,42 @@
     box-shadow: 0 0 0 10000px $eccgui-color-modal-backdrop;
 }
 
-.#{$eccgui}-visual-tour__overlay {
+.#{$eccgui}-visual-tour__backdrop {
     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
-
-#arrow,
-#arrow .#{$eccgui}-visual-tour__tooltip__arrow-shape,
-#arrow .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
-    position: absolute;
-    border-right: 8px solid transparent;
-    border-bottom: 8px solid dimgrey;
-    border-left: 8px solid transparent;
-}
-
-#arrow {
-    visibility: hidden;
-}
-
-#arrow .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
-    visibility: visible;
-    content: "";
-}
+.#{$eccgui}-visual-tour__arrow {
+    &::before {
+        background: $card-background-color;
+    }
 
-.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="top"] > #arrow {
-    bottom: -8px;
-    .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
-        transform: rotate(180deg);
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
     }
 }
 
-.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="bottom"] > #arrow {
-    top: -8px;
-}
+.#{$eccgui}-visual-tour__overlay {
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
 
-.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="left"] > #arrow {
-    right: 4px;
-    .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
-        transform: rotate(90deg);
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
     }
-}
 
-.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="right"] > #arrow {
-    left: -28px;
-    .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
-        transform: rotate(270deg);
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
     }
 }