From 15db3b305c24e066740d90bfc6053226ea6b059e Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Sun, 18 Jul 2021 20:09:16 -0600
Subject: [PATCH] Fade in on load to hide theme and button preferences being
 applied

---
 src/css/main.css | 13 +++++++++++++
 src/js/main.js   | 33 ++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 39997c4..f2f1780 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -17,6 +17,19 @@ html, body {
     overflow: hidden;
 }
 
+html {
+    background-image: linear-gradient(151deg, rgba(0,0,0,1) 0%, rgba(46,46,46,1) 38%, rgba(46,46,46,1) 58%, rgba(15,14,14,1) 100%);
+}
+
+body {
+    opacity: 0;
+}
+
+body.load {
+    opacity: 1;
+    transition: opacity 0.25s ease-in;
+}
+
 
 #page-canvas-container {
     position: absolute;
diff --git a/src/js/main.js b/src/js/main.js
index b9eda68..33015d0 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -26,8 +26,8 @@ function openSettingsModal() {
     $("#settingsModal #notary_idnumber").val(getStorage("notary_idnumber"));
     $("#settingsModal #notary_state").val(getStorage("notary_state"));
 
-    $("#settingsModal #color_theme").val(getStorage("color_theme"));
-    $("#settingsModal #button_size").val(getStorage("button_size"));
+    $("#settingsModal #color_theme").val(inStorage("color_theme") ? getStorage("color_theme") : "purple");
+    $("#settingsModal #button_size").val(getStorage("button_size") ? getStorage("button_size") : "sm");
     // show preview of stamp
     if (inStorage("notary_state")) {
         getStampSvg(function (svg) {
@@ -207,16 +207,29 @@ $("body").on("input change paste", "#appOptionsSettings select", function () {
 });
 
 function setAppTheme(theme) {
-    $("body").removeClass().addClass("theme-" + theme);
+    if (typeof theme != "string") {
+        theme = "purple";
+    }
+    var classobj = $("body").attr("class");
+    if (classobj != undefined) {
+        var classlist = classobj.split(" ");
+        var classes = [];
+        for (var i = 0; i < classlist.length; i++) {
+            if (!classlist[i].startsWith("theme-")) {
+                classes.push(classlist[i]);
+            }
+        }
+    }
+    $("body").removeClass().addClass(classes).addClass("theme-" + theme);
 }
 
 function setButtonSize(size) {
+    if (typeof size != 'string') {
+        size = "sm";
+    }
     $(".btn").removeClass(["btn-sm", "btn-lg", "btn-"]).addClass("btn-" + size);
 }
 
-setAppTheme(getStorage("color_theme"));
-setButtonSize(getStorage("button_size"));
-
 function showToast(message) {
     $("#toastBox .toast-body").html(message);
     toastEl.show();
@@ -227,4 +240,10 @@ var toastEl = new bootstrap.Toast(document.getElementById("toastBox"));
 function showAlert(message) {
     $("#alertModal .modal-body").html(message);
     new bootstrap.Modal(document.getElementById('alertModal')).show();
-}
\ No newline at end of file
+}
+
+$(document).ready(function () {
+    setButtonSize(getStorage("button_size"));
+    setAppTheme(getStorage("color_theme"));
+    $("body").addClass("load");
+});
\ No newline at end of file