From cdc81d89a397bd2e4ea1c1d3191dfe4b6ecfd7b0 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Thu, 15 Jul 2021 17:23:31 -0600
Subject: [PATCH] Make settings modal really big, adjust colors, add button
 size option

---
 src/css/main.css |  9 +++++++++
 src/index.html   |  5 +++--
 src/js/main.js   | 10 +++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index f916f64..82ce5d3 100644
--- a/src/css/main.css
+++ b/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);
 }
diff --git a/src/index.html b/src/index.html
index 9654574..0a23080 100644
--- a/src/index.html
+++ b/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">
diff --git a/src/js/main.js b/src/js/main.js
index deddf36..9a2d421 100644
--- a/src/js/main.js
+++ b/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"));
\ No newline at end of file
+function setButtonSize(size) {
+    $(".btn").removeClass(["btn-sm", "btn-lg", "btn-"]).addClass("btn-" + size);
+}
+
+setAppTheme(getStorage("color_theme"));
+setButtonSize(getStorage("button_size"));
\ No newline at end of file