Add back info circles, remove underlines

ts/deckoptions/Badge.svelte

@@ -0,0 +1,18 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<span class="badge">
+    <slot />
+</span>
+
+<style>
+    .badge {
+        color: inherit;
+    }
+
+    span :global(svg) {
+        vertical-align: -0.125rem;
+        opacity: 0.3;
+    }
+</style>

ts/deckoptions/CheckBoxRow.svelte

@@ -3,11 +3,10 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
     import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import CheckBox from "./CheckBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -19,15 +18,9 @@
 <Row>
     <Col>
         <CheckBox bind:value
-            >{#if markdownTooltip}<WithTooltip
-                    tooltip={marked(markdownTooltip)}
-                    let:createTooltip
-                >
-                    <Label on:mount={(event) => createTooltip(event.detail.span)}
-                        ><slot /></Label
-                    >
-                </WithTooltip>{:else}<Label><slot /></Label>{/if}
-        </CheckBox>
+            >{#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
+                >{:else}<Label><slot /></Label>{/if}</CheckBox
+        >
     </Col>
     <Col grow={false}>
         <RevertButton bind:value {defaultValue} />

ts/deckoptions/EnumSelectorRow.svelte

@@ -5,11 +5,9 @@
 <script lang="ts">
     import type { Breakpoint } from "./col";
 
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import EnumSelector from "./EnumSelector.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -22,11 +20,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col {breakpoint} size={5}>
         <RevertButton bind:value {defaultValue} />

ts/deckoptions/HelpPopup.svelte

@@ -1,36 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { infoCircle } from "./icons";
-    import { onMount } from "svelte";
-    import Tooltip from "bootstrap/js/dist/tooltip";
-
-    export let html: string;
-
-    let ref: HTMLAnchorElement;
-
-    onMount(() => {
-        new Tooltip(ref, {
-            placement: "bottom",
-            html: true,
-            offset: [0, 20],
-        });
-    });
-</script>
-
-<span bind:this={ref} class="badge" title={html}>
-    {@html infoCircle}
-</span>
-
-<style>
-    .badge {
-        color: inherit;
-    }
-
-    span :global(svg) {
-        vertical-align: -0.125rem;
-        opacity: 0.3;
-    }
-</style>

ts/deckoptions/SpinBoxFloatRow.svelte

@@ -3,11 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -20,11 +18,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <RevertButton bind:value {defaultValue} />

ts/deckoptions/SpinBoxRow.svelte

@@ -3,12 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    /* import HelpPopup from "./HelpPopup.svelte"; */
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import SpinBox from "./SpinBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -21,11 +18,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <RevertButton bind:value {defaultValue} />

ts/deckoptions/StepsInputRow.svelte

@@ -3,11 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import StepsInput from "./StepsInput.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -18,11 +16,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <RevertButton bind:value {defaultValue} />

ts/deckoptions/TooltipLabel.svelte

@@ -0,0 +1,19 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import marked from "marked";
+    import { infoCircle } from "./icons";
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
+    import Badge from "./Badge.svelte";
+
+    export let markdownTooltip: string;
+</script>
+
+<WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+    <Label on:mount={(event) => createTooltip(event.detail.span)}
+        ><slot /><Badge>{@html infoCircle}</Badge>
+    </Label>
+</WithTooltip>

ts/deckoptions/WithTooltip.svelte

@@ -3,8 +3,6 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
     import Tooltip from "bootstrap/js/dist/tooltip";
 
     export let tooltip: string;
@@ -17,19 +15,6 @@
             offset: [0, 20],
         });
     }
-
-    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
-<span class:night-mode={nightMode}><slot {createTooltip} /></span>
-
-<style lang="scss">
-    span {
-        text-decoration: underline dashed;
-        text-decoration-color: rgba(0 0 0 / 0.5);
-    }
-
-    .night-mode {
-        text-decoration-color: rgba(255 255 255 / 0.5);
-    }
-</style>
+<slot {createTooltip} />