Added functionality to avatar overlay.

Overlay changed from div to button.
Clicking on the overlay will bring you directly to the settings account tab.
Modified overlay background color.

app/assets/css/launcher.css

@@ -2308,16 +2308,21 @@ input:checked + .toggleSwitchSlider:before {
     transition: 0.25s ease;
     font-weight: bold;
     letter-spacing: 2px;
-    background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%);
+    background-color: rgba(0, 0, 0, 0.35);
     -webkit-user-select: none;
+    border: none;
     cursor: pointer;
     width: 100%;
     height: 100%;
     border-radius: 50%;
 }
-#avatarOverlay:hover {
+#avatarOverlay:hover,
+#avatarOverlay:focus {
     opacity: 1;
 }
+#avatarOverlay:active {
+    background-color: rgba(0, 0, 0, 0.45);
+}
 
 /* User profile name text. */
 #user_text {

app/assets/js/scripts/landing.js

@@ -110,6 +110,14 @@ document.getElementById('settingsMediaButton').onclick = (e) => {
     switchView(getCurrentView(), VIEWS.settings)
 }
 
+// Bind avatar overlay button.
+document.getElementById('avatarOverlay').onclick = (e) => {
+    prepareSettings()
+    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
+        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
+    })
+}
+
 // Bind selected account
 function updateSelectedAccount(authUser){
     let username = 'No Account Selected'

app/assets/js/scripts/settings.js

@@ -140,7 +140,7 @@ function saveSettingsValues(){
     })
 }
 
-let selectedTab = 'settingsTabAccount'
+let selectedSettingsTab = 'settingsTabAccount'
 
 /**
  * Modify the settings container UI when the scroll threshold reaches
@@ -162,8 +162,22 @@ function settingsTabScrollListener(e){
 function setupSettingsTabs(){
     Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => {
         if(val.hasAttribute('rSc')){
-            val.onclick = (e) => {
+            val.onclick = () => {
-                if(val.hasAttribute('selected')){
+                settingsNavItemListener(val)
+            }
+        }
+    })
+}
+
+/**
+ * Settings nav item onclick lisener. Function is exposed so that
+ * other UI elements can quickly toggle to a certain tab from other views.
+ * 
+ * @param {Element} ele The nav item which has been clicked.
+ * @param {boolean} fade Optional. True to fade transition.
+ */
+function settingsNavItemListener(ele, fade = true){
+    if(ele.hasAttribute('selected')){
         return
     }
     const navItems = document.getElementsByClassName('settingsNavItem')
@@ -172,27 +186,37 @@ function setupSettingsTabs(){
             navItems[i].removeAttribute('selected')
         }
     }
-                val.setAttribute('selected', '')
+    ele.setAttribute('selected', '')
-                let prevTab = selectedTab
+    let prevTab = selectedSettingsTab
-                selectedTab = val.getAttribute('rSc')
+    selectedSettingsTab = ele.getAttribute('rSc')
 
     document.getElementById(prevTab).onscroll = null
-                document.getElementById(selectedTab).onscroll = settingsTabScrollListener
+    document.getElementById(selectedSettingsTab).onscroll = settingsTabScrollListener
 
+    if(fade){
         $(`#${prevTab}`).fadeOut(250, () => {
-                    $(`#${selectedTab}`).fadeIn({
+            $(`#${selectedSettingsTab}`).fadeIn({
                 duration: 250,
                 start: () => {
                     settingsTabScrollListener({
-                                target: document.getElementById(selectedTab)
+                        target: document.getElementById(selectedSettingsTab)
+                    })
+                }
+            })
+        })
+    } else {
+        $(`#${prevTab}`).hide(0, () => {
+            $(`#${selectedSettingsTab}`).show({
+                duration: 0,
+                start: () => {
+                    settingsTabScrollListener({
+                        target: document.getElementById(selectedSettingsTab)
                     })
                 }
             })
         })
     }
 }
-    })
-}
 
 const settingsNavDone = document.getElementById('settingsNavDone')
 

app/landing.ejs

@@ -13,7 +13,7 @@
                 <div id="user_content">
                     <span id="user_text">Username</span>
                     <div id="avatarContainer">
-                        <div id="avatarOverlay">Edit</div>
+                        <button id="avatarOverlay">Edit</button>
                     </div>
                 </div>
                 <div id="mediaContent">

app/settings.ejs

@@ -6,7 +6,7 @@
             </div>
             <div id="settingsNavItemsContainer">
                 <div id="settingsNavItemsContent">
-                    <button class="settingsNavItem" rSc="settingsTabAccount" selected>Account</button>
+                    <button class="settingsNavItem" rSc="settingsTabAccount" id="settingsNavAccount" selected>Account</button>
                     <button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
                     <button class="settingsNavItem" rSc="settingsTabMods">Mods</button>
                     <button class="settingsNavItem" rSc="settingsTabJava">Java</button>