Turn icons into Bootstrap badges in deckoptions

ts/deckoptions/ConfigEntry.svelte

@@ -23,9 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div {id} class="row gx-0">
     <div class="col-8">
-        <span
-            >{label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}</span
-        >
+        {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}
     </div>
 
     <div class="col-3">
@@ -39,6 +37,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 {#each warnings as warning}
     {#if warning}
-        <div class="row alert alert-warning" in:slide out:slide>{warning}</div>
+        <div class="col-12 alert alert-warning" in:slide out:slide>{warning}</div>
     {/if}
 {/each}

ts/deckoptions/DailyLimits.svelte

@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div class="container">
-    <p>{tr.deckConfigDailyLimits()}</p>
+    <h2>{tr.deckConfigDailyLimits()}</h2>
 
     <SpinBox
         label={tr.schedulingNewCardsday()}

ts/deckoptions/HelpPopup.svelte

@@ -20,13 +20,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 </script>
 
-<span bind:this={ref} title={html}>
+<span bind:this={ref} class="badge" title={html}>
     {@html infoCircle}
 </span>
 
 <style>
     span :global(svg) {
-        vertical-align: text-bottom;
+        vertical-align: -0.125rem;
         opacity: 0.3;
     }
 </style>

ts/deckoptions/RevertButton.svelte

@@ -49,23 +49,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 {#if modified}
-    <div
-        class="img-div"
-        on:click={revert}
+    <span
         bind:this={ref}
+        class="badge"
         title={tr.deckConfigRevertButtonTooltip()}
+        on:click={revert}
     >
         {@html revertIcon}
-    </div>
+    </span>
 {/if}
 
 <style lang="scss">
-    .img-div {
-        display: flex;
-
-        :global(svg) {
-            align-self: center;
-            opacity: 0.3;
-        }
+    span :global(svg) {
+        vertical-align: -0.125rem;
+        opacity: 0.3;
     }
 </style>

ts/deckoptions/deckoptions-base.scss

@@ -13,6 +13,7 @@
 @import "ts/sass/bootstrap/close";
 @import "ts/sass/bootstrap/alert";
 @import "ts/sass/bootstrap/tooltip";
+@import "ts/sass/bootstrap/badge";
 
 .night-mode {
     @include scrollbar.night-mode;