fixed settings page and updated a few things in tutorial

public/settings/settings.css

@@ -30,6 +30,11 @@ TabMerger team at <https://lbragile.github.io/TabMerger-Extension/contact/>
   box-sizing: border-box;
 }
 
+small {
+  display: block;
+  text-align: justify;
+}
+
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   opacity: 1;

public/settings/settings.html

@@ -59,7 +59,7 @@ <h2 class="text-white my-5">Settings</h2>
 
     <div class="container-fluid">
       <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-6">
           <section>
             <div class="row mx-0">
               <h5 class="mr-2 mb-0">Default Group Color:</h5>
@@ -153,7 +153,7 @@ <h5 class="mr-2 mb-0">Exclude Websites:</h5>
               </small>
               <textarea
                 class="px-1 mt-2"
-                rows="5"
+                rows="7"
                 id="options-blacklist"
                 placeholder="http://www.google.com, https://www.facebook.com, etc."
                 maxlength="1000"
@@ -208,10 +208,10 @@ <h5 class="mb-0">Automatic Backup:</h5>
           </section>
         </div>
 
-        <div class="col-lg-6">
+        <div class="col-xl-6">
           <section>
-            <div class="row mx-0">
-              <h5 class="mr-2 mb-0">Tooltip Visibility:</h5>
+            <h5 class="mr-2 mb-0">Tooltip Visibility:</h5>
+            <div class="row ml-0">
               <span class="pr-2 label-left">Hide</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="tooltip-visibility" checked />
@@ -226,8 +226,8 @@ <h5 class="mr-2 mb-0">Tooltip Visibility:</h5>
           </section>
 
           <section>
+            <h5 class="mr-2 mb-0">Export JSON SaveAs Dialog Visibility:</h5>
             <div class="row mx-0">
-              <h5 class="mr-2 mb-0">Export JSON SaveAs Dialog Visibility:</h5>
               <span class="pr-2 label-left">Hide</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="saveas-visibility" checked />
@@ -242,8 +242,8 @@ <h5 class="mr-2 mb-0">Export JSON SaveAs Dialog Visibility:</h5>
           </section>
 
           <section>
+            <h5 class="mr-2 mb-0">Badge Level Information:</h5>
             <div class="row mx-0">
-              <h5 class="mr-2 mb-0">Badge Level Information:</h5>
               <span class="pr-2 label-left">Hide</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="badge-view" name="badge-view" checked />
@@ -255,37 +255,34 @@ <h5 class="mr-2 mb-0">Badge Level Information:</h5>
               <b>Premium</b>
               <a href="https://lbragile.github.io/TabMerger-Extension/pricing" target="_blank" rel="noreferrer"
                 >subscription</a
-              >. <br /><b>ON</b> → Shows relevant information, about number of tabs and groups inside TabMerger at any
-              moment, as {#tabs}|{#groups} with a background color corresponding to number of tabs. The user can hover
-              over the icon to see these numbers in a clear sentence. <br /><b>OFF</b> → No extra information is
-              displayed on top of the badge icon. However, the user can still hover over the badge icon to see the
-              relevant tab & group information.</small
+              >. <br /><b>ON</b> → Shows relevant information about number of tabs/groups in TabMerger at any moment, as
+              {#tabs}|{#groups} with a background color corresponding to number of tabs. The user can hover over the
+              icon to see these numbers. <br /><b>OFF</b> → No extra information is displayed on top of the badge icon.
+              However, the user can still hover over the badge icon to see the relevant tab & group information.</small
             >
           </section>
 
           <section>
+            <h5 class="mr-2 mb-0">Extension Opening Behavior:</h5>
             <div class="row mx-0">
-              <h5 class="mr-2 mb-0">Extension Opening Behavior:</h5>
               <span class="pr-2 label-left">Open & Merge</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="ext-open" name="ext-open" checked />
                 <label class="custom-control-label" for="ext-open">Open Without Merging (<i>default</i>)</label>
               </div>
             </div>
             <small
-              >Happens when TabMerger's extension icon is clicked. <br /><b>ON</b> → Will open (or switch if already
-              open) TabMerger's extensions page <b>without</b> merging the currently open tabs in the same window. The
-              user can then merge open tabs by using each group's merging buttons. Such behavior is desireable for full
-              control of the merging process. <br /><b>OFF</b> → Same as above but <b>with</b> merging. The merged tabs
-              will be grouped into a new group. Thus, the user will then be able to sort the tabs among various groups
-              or simply sort the groups via the drag-and-drop feature. This behavior is desireable when the user wants
-              to avoid opening an extra tab (TabMerger) prior to merging.</small
+              >Happens when TabMerger's extension icon is clicked. <br /><b>ON</b> → Will open (or switch to, if already
+              open) TabMerger's extensions page <b>without</b> merging the currently open tabs in the same window. When
+              you want full control of the merging process. <br /><b>OFF</b> → Same as above but <b>with</b> merging.
+              The merged tabs are grouped into a new/empty top group. You can then sort the tabs via the drag-and-drop
+              feature. When you want to avoid opening an extra tab (TabMerger) prior to merging.</small
             >
           </section>
 
           <section>
+            <h5 class="mr-2 mb-0">General Merge Behaviour:</h5>
             <div class="row mx-0">
-              <h5 class="mr-2 mb-0">General Merge Behaviour:</h5>
               <span class="pr-2 label-left">Merge Without Closing</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="merge-tabs" name="merge-tabs" checked />
@@ -302,8 +299,8 @@ <h5 class="mr-2 mb-0">General Merge Behaviour:</h5>
           </section>
 
           <section>
+            <h5 class="mr-2 mb-0">Pinned Tab Merge Behavior:</h5>
             <div class="row mx-0">
-              <h5 class="mr-2 mb-0">Pinned Tab Merge Behavior:</h5>
               <span class="pr-2 label-left">Exclude</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="pin-tabs" name="pin-tabs" checked />
@@ -321,18 +318,18 @@ <h5 class="mr-2 mb-0">Pinned Tab Merge Behavior:</h5>
           </section>
 
           <section>
+            <h5 class="mr-2 mb-0">Tab Restoring Behavior:</h5>
             <div class="row mx-0">
-              <h5 class="mr-2 mb-0">Tab Restoring Behavior:</h5>
               <span class="pr-2 label-left">Remove from TabMerger</span>
               <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="restore-tabs" name="restore-tabs" checked />
                 <label class="custom-control-label" for="restore-tabs">Keep in TabMerger (<i>default</i>)</label>
               </div>
             </div>
             <small
-              >Applies to both group and global actions. <br /><b>ON</b> → You can still manually delete tabs by the
-              delete tab, group, or all actions.<br /><b>OFF</b> → Opening a tab (<i>Click</i> on it) will remove that
-              tab from TabMerger's page. This holds for any other opening action (<i>group</i> or <i>all</i>).</small
+              >Applies to tab, group, and global actions. <br /><b>ON</b> → You can still manually delete tabs by the
+              delete tab, group, or all actions.<br /><b>OFF</b> → Opening a tab (<i>click</i> on it, <i>group</i>, or
+              <i>all</i>) will remove that tab from TabMerger's page.</small
             >
           </section>
         </div>

src/components/Extra/TabSearch.js

@@ -25,6 +25,7 @@ export default function TabSearch({ user }) {
         <span
           className="input-group-text"
           data-tip={`#___ → ${translate("group")}<br />___ → ${translate("tab")}`}
+          data-class="text-nowrap"
           data-for="search-tooltip"
         >
           <BsInfoCircle color="white" size="1rem" />

src/components/Extra/Tutorial.js

@@ -601,7 +601,9 @@ export const TOUR_STEPS = [
   {
     selector: "#choose-btn",
     content: (
-      <div className="text-dark my-2">Location where you can choose a subscription plan depending on your needs.</div>
+      <div className="text-dark my-2">
+        Location where you can choose a <b>subscription plan</b> depending on your needs.
+      </div>
     ),
     position: "bottom",
   },
@@ -612,7 +614,7 @@ export const TOUR_STEPS = [
         A <b>video walkthrough</b> with commentary, highlighting all of the above features.
       </div>
     ),
-    position: "bottom",
+    position: "top",
   },
   {
     selector: "#donate-btn",
@@ -621,7 +623,7 @@ export const TOUR_STEPS = [
         Where you can make a <b>donation</b> to TabMerger and show your support!
       </div>
     ),
-    position: "bottom",
+    position: "top",
   },
   {
     selector: "#leave-btn",
@@ -631,7 +633,7 @@ export const TOUR_STEPS = [
         users to see.
       </div>
     ),
-    position: "bottom",
+    position: "top",
   },
   {
     selector: "#my-links",

tests/App_spec/__snapshots__/App_functions.spec.js.snap

@@ -507,6 +507,7 @@ exports[`syncLimitIndication item limt = 100, sync limit = 10000 1`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >
@@ -4672,6 +4673,7 @@ exports[`syncLimitIndication item limt = 439, sync limit = 10000 1`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >
@@ -8837,6 +8839,7 @@ exports[`syncLimitIndication item limt = 1000, sync limit = 100 1`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >
@@ -13003,6 +13006,7 @@ exports[`syncLimitIndication item limt = 1000, sync limit = 1452 1`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >
@@ -17168,6 +17172,7 @@ exports[`syncLimitIndication item limt = 1000, sync limit = 10000 1`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >
@@ -21333,6 +21338,7 @@ exports[`syncLimitIndication item limt = 1000, sync limit = 10000 2`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >
@@ -25498,6 +25504,7 @@ exports[`syncLimitIndication item limt = null, sync limit = 10000 1`] = `
           >
             <span
               class="input-group-text"
+              data-class="text-nowrap"
               data-for="search-tooltip"
               data-tip="#___ → group<br />___ → tab"
             >