From c586107fea8fbdfa2eb84332a576441238d90aa9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 27 May 2021 22:01:14 +0200
Subject: [PATCH] Turn icons into Bootstrap badges in deckoptions

---
 ts/deckoptions/ConfigEntry.svelte    |  6 ++----
 ts/deckoptions/DailyLimits.svelte    |  2 +-
 ts/deckoptions/HelpPopup.svelte      |  4 ++--
 ts/deckoptions/RevertButton.svelte   | 18 +++++++-----------
 ts/deckoptions/deckoptions-base.scss |  1 +
 5 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/ts/deckoptions/ConfigEntry.svelte b/ts/deckoptions/ConfigEntry.svelte
index f6bfd7192..0ac29ff71 100644
--- a/ts/deckoptions/ConfigEntry.svelte
+++ b/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}
diff --git a/ts/deckoptions/DailyLimits.svelte b/ts/deckoptions/DailyLimits.svelte
index d2fef394f..acdc8a59e 100644
--- a/ts/deckoptions/DailyLimits.svelte
+++ b/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()}
diff --git a/ts/deckoptions/HelpPopup.svelte b/ts/deckoptions/HelpPopup.svelte
index ddb1265d8..b7a643477 100644
--- a/ts/deckoptions/HelpPopup.svelte
+++ b/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>
diff --git a/ts/deckoptions/RevertButton.svelte b/ts/deckoptions/RevertButton.svelte
index 29176ff95..2988f1290 100644
--- a/ts/deckoptions/RevertButton.svelte
+++ b/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>
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss
index 845d900dc..8c9f41bb6 100644
--- a/ts/deckoptions/deckoptions-base.scss
+++ b/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;