Make settings modal really big, adjust colors, add button size option

src/css/main.css

@@ -94,11 +94,20 @@ html, body {
         max-width: 700px;
     }
 }
+@media (min-width: 1600px) {
+    .modal-dialog.modal-xxl {
+        max-width: 90vw;
+    }
+}
 
 select option {
     color: var(--bs-dark);
 }
 
+.alert {
+    color: var(--bs-dark);
+}
+
 .theme-purple {
     background-image: linear-gradient(90deg,#33b7e2,#5e62b0,#dc307c);
 }

src/index.html

@@ -14,7 +14,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 <link rel="icon" href="img/icon.svg" />
 
 <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl">
+    <div class="modal-dialog modal-xl modal-xxl">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
@@ -68,7 +68,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                     <div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings">
                         <h4><i class="fas fa-cog"></i> App Options</h4>
                         Button size: <select class="form-control" id="button_size">
-                            <option value="lg" selected>Large</option>
+                            <option value="lg">Large</option>
+                            <option value="" selected>Medium</option>
                             <option value="sm">Small</option>
                         </select>
                         Color theme: <select class="form-control" id="color_theme">

src/js/main.js

@@ -63,6 +63,8 @@ function saveSettingsModal() {
 
     setStorage("color_theme", $("#appOptionsSettings #color_theme option:selected").val());
     setAppTheme(getStorage("color_theme"));
+    setStorage("button_size", $("#appOptionsSettings #button_size option:selected").val());
+    setButtonSize(getStorage("button_size"));
 }
 
 function initSignaturePad() {
@@ -142,10 +144,16 @@ $("body").on("input change paste", "#notaryProfileSettings input,#notaryProfileS
 
 $("body").on("input change paste", "#appOptionsSettings select", function () {
     setAppTheme($("#appOptionsSettings #color_theme option:selected").val());
+    setButtonSize($("#appOptionsSettings #button_size option:selected").val());
 });
 
 function setAppTheme(theme) {
     $("body").removeClass().addClass("theme-" + theme);
 }
 
-setAppTheme(getStorage("color_theme"));
+function setButtonSize(size) {
+    $(".btn").removeClass(["btn-sm", "btn-lg", "btn-"]).addClass("btn-" + size);
+}
+
+setAppTheme(getStorage("color_theme"));
+setButtonSize(getStorage("button_size"));