Fixes for the overlay on the settings UI.

The background of the settings UI is set to transparent when the overlay is toggled.
The color of the frame bar has been adjusted to what it should actually be.

app/assets/css/launcher.css

@@ -61,7 +61,7 @@ body, button {
     display: flex;
     flex-direction: column;
     transition: background-color 1s ease;
-    /*background-color: rgba(1, 2, 1, 0.5);*/
+    /*background-color: rgba(0, 0, 0, 0.5);*/
     -webkit-user-select: none;
 }
 
@@ -883,7 +883,8 @@ body, button {
     position: relative;
     height: 100%;
     display: flex;
-    background: rgba(0, 0, 0, 0.50);
+    background-color: rgba(0, 0, 0, 0.50);
+    transition: background-color 0.25s cubic-bezier(.02, .01, .47, 1);
 }
 
 /* Drop shadow displayed when content is scrolled out of view. */

app/assets/js/scripts/overlay.js

@@ -30,18 +30,33 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
         } else {
             $('#overlayDismiss').hide()
         }
-        $('#overlayContainer').fadeIn(250)
+        $('#overlayContainer').fadeIn({
+            duration: 250,
+            start: () => {
+                if(getCurrentView() === VIEWS.settings){
+                    document.getElementById('settingsContainer').style.backgroundColor = 'transparent'
+                }
+            }
+        })
     } else {
         document.getElementById('main').removeAttribute('overlay')
         // Make things tabbable.
         $("#main *").removeAttr('tabindex')
-        $('#overlayContainer').fadeOut(250, () => {
-            $('#' + content).parent().children().hide()
-            $('#' + content).show()
-            if(dismissable){
-                $('#overlayDismiss').show()
-            } else {
-                $('#overlayDismiss').hide()
+        $('#overlayContainer').fadeOut({
+            duration: 250,
+            start: () => {
+                if(getCurrentView() === VIEWS.settings){
+                    document.getElementById('settingsContainer').style.backgroundColor = 'rgba(0, 0, 0, 0.50)'
+                }
+            },
+            complete: () => {
+                $('#' + content).parent().children().hide()
+                $('#' + content).show()
+                if(dismissable){
+                    $('#overlayDismiss').show()
+                } else {
+                    $('#overlayDismiss').hide()
+                }
             }
         })
     }

app/assets/js/scripts/uibinder.js

@@ -20,7 +20,7 @@ const VIEWS = {
 }
 
 // The currently shown view container.
-let currentView = VIEWS.landing
+let currentView
 
 /**
  * Switch launcher views.
@@ -63,7 +63,7 @@ function showMainUI(){
     updateSelectedServer(AssetGuard.getServerById(ConfigManager.getSelectedServer()).name)
     refreshServerStatus()
     setTimeout(() => {
-        document.getElementById('frameBar').style.backgroundColor = 'rgba(1, 2, 1, 0.5)'
+        document.getElementById('frameBar').style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
         document.body.style.backgroundImage = `url('assets/images/backgrounds/${document.body.getAttribute('bkid')}.jpg')`
         $('#main').show()
 
@@ -82,11 +82,14 @@ function showMainUI(){
         }
 
         if(ConfigManager.isFirstLaunch()){
+            currentView = VIEWS.welcome
             $(VIEWS.welcome).fadeIn(1000)
         } else {
             if(isLoggedIn){
+                currentView = VIEWS.landing
                 $(VIEWS.landing).fadeIn(1000)
             } else {
+                currentView = VIEWS.login
                 $(VIEWS.login).fadeIn(1000)
             }
         }