Re-do the setup page (#98)

.prettierignore

@@ -1,6 +1,7 @@
 # Some prettier-specific files so it doesn't die.
 **/*.png
 **/*.ico
+**/*.woff
 LICENSE
 .gitignore
 

src/content/css/setup.css

@@ -1,91 +1,148 @@
-/*CSS ONLY FOR INTERNAL USE (setup and loading)*/
 @import url("https://armcord.smartfridge.space/logofont.css");
 
+/* Meta {{{ */
 :root {
-    background-color: #2c2f33 !important;
+    --background-primary: #282b30;
-    --header-secondary: #b9bbbe !important;
+    --background-secondary: rgba(255, 255, 255, 0.1);
-    --header-primary: #fff !important;
+    --brand-experiment: #7289da;
-    --background-tertiary: #202225 !important;
+    --header-primary: #fff;
+    --text-muted: #72767d;
+    --font-primary: "Whitney";
 }
+
+@font-face {
+    font-family: Whitney;
+    font-weight: 400;
+    font-style: normal;
+    src: url(https://armcord.smartfridge.space/whitney_400.woff) format("woff");
+}
+
+html,
 body {
-    background-color: #2c2f33;
+    overflow: hidden;
-    color: white;
+
+    margin: 0;
+    padding-top: 30px;
+    width: 100%;
+    height: 100%;
+
+    background: var(--background-primary);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
-p {
+* {
-    color: white;
+    font-family: var(--font-primary), sans-serif;
+
+    box-sizing: border-box;
+    user-select: none;
+    cursor: default;
+}
+/* }}} */
+
+/* Utility classes {{{ */
+.hidden {
+    display: none !important;
+}
+.text-center {
     text-align: center;
-    font-weight: 100;
-    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
-    text-rendering: optimizeLegibility;
-}
-
-.logo {
-    font-size: 0px;
-    text-align: center;
-    transform: translateY(-105%);
-}
-
-.logo:before {
-    content: "ARM";
-    color: #7289da;
-    font-weight: normal;
-    font-family: Helvetica, sans-serif;
-    font-size: 32px;
-}
-
-.logo:after {
-    content: "Cord";
-    color: #ffffff;
-    font-weight: normal;
-    font-family: Discordinated;
-    font-size: 32px;
-}
-
-span {
-    text-align: center;
-}
-
-.logo {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-height: 204px;
-    max-width: 204px;
-    transform: translateY(5%);
-}
-
-.container {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    color: #fff;
-    transform: translate(-50%, -50%);
-}
-button#express {
-    margin-right: 84px;
-}
-button {
-    background-color: #7289da;
-    font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #ffffff;
-    padding: 4px;
-    border-radius: 5px;
-    margin-top: 5px;
-
-    text-align: center;
-    border-style: none;
-    outline: none;
 }
 .setup-ask {
     font-size: 20px;
 }
+
+.center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+/* }}} */
+
+#setup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    color: white;
+}
+
+/* Warning {{{ */
+#warning {
+    font-size: 1.5em;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    max-width: 328px;
+    background-color: rgba(255, 0, 0, 0.1);
+
+    border: red solid 2px;
+    border-radius: 0.5rem;
+}
+#warning > p {
+    color: white;
+    font-weight: bold;
+    margin: 1rem;
+}
+/* }}} */
+
+/* Logo {{{ */
+#logo {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+#logo p:first-child {
+    color: #7289da;
+    margin: 0;
+    font-weight: normal;
+    font-family: Helvetica, sans-serif;
+    font-size: 32px;
+}
+#logo p:last-child {
+    color: white;
+    margin: 0;
+    font-weight: normal;
+    font-family: Discordinated;
+    font-size: 32px;
+}
+/* }}} */
+
+/* Buttons {{{ */
+#buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+
+    user-select: all !important;
+
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+button {
+    background: var(--brand-experiment);
+    color: var(--header-primary);
+
+    border: none;
+    border-radius: 4px;
+
+    padding: 8px 20px;
+}
 button:hover {
-    background-color: #687dc6;
+    filter: brightness(85%);
-    border-style: none;
-    outline: none;
     cursor: pointer;
 }
+/* }}} */
+
+/* Dropdowns {{{ */
 select {
     -webkit-appearance: button;
     -moz-appearance: button;
@@ -106,6 +163,4 @@ select {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.center {
+/* }}} */
-    text-align: center;
-}

src/content/setup.html

@@ -1,134 +1,150 @@
-<!--- This is awful and should be replaced in later versions. Possibly based of current settings as of 3.1.0 version. If you have time please PR a better setup screen. --->
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" />
         <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>ArmCord Setup</title>
         <style>
             @import url("css/setup.css");
         </style>
     </head>
-
     <body>
         <div class="container">
-            <h1 class="logo"></h1>
+            <div id="warning" class="hidden">
+                <p>You appear to be offline. Please connect to the internet and restart ArmCord Setup.</p>
+            </div>
             <div id="setup">
-                <p>Select what kind of setup you want to perform:</p>
+                <div id="logo" class="hidden">
-                <button id="express" class="center">Express setup</button>
+                    <p>ARM</p>
-                <button id="full" class="center">Full setup</button>
+                    <p>Cord</p>
+                </div>
+                <div id="page1" class="hidden">
+                    <p>Select the type of setup you want to perform.</p>
+                    <div id="buttons">
+                        <button id="express" class="center">Express</button>
+                        <button id="full" class="center">Full</button>
+                    </div>
+                </div>
+
+                <div id="page2" class="hidden">
+                    <p class="text-center setup-ask">Choose your Discord channel/instance:</p>
+                    <div class="center">
+                        <select name="channel" id="channel" class="dropdown-button">
+                            <option value="stable">Stable</option>
+                            <option value="canary">Canary</option>
+                            <option value="ptb">PTB</option>
+                            <option value="foss">Fosscord</option>
+                        </select>
+                    </div>
+                    <p class="text-center setup-ask">Should ArmCord handle client mods installation?</p>
+                    <div class="center">
+                        <select name="csp" id="csp" class="dropdown-button">
+                            <option value="true">Yes</option>
+                            <option value="false">No</option>
+                        </select>
+                    </div>
+                    <div id="buttons">
+                        <button id="next" class="center">Next</button>
+                    </div>
+                </div>
+
+                <div id="page3" class="hidden">
+                    <p class="text-center setup-ask">Select a client mod you want to install:</p>
+                    <div class="center">
+                        <select name="mod" id="mod" class="dropdown-button">
+                            <option value="cumcord">Cumcord</option>
+                            <option value="goosemod">GooseMod</option>
+                            <option value="flicker">Flicker (Heavily WIP)</option>
+                        </select>
+                    </div>
+                    <p>
+                        Why not all of them? Having many client mods at the same time can cause issues. If you really
+                        want to do it though, check our documentation ;)
+                    </p>
+                    <div id="buttons">
+                        <button id="next" class="center">Next</button>
+                    </div>
+                </div>
             </div>
         </div>
+
         <script>
-            function fade(element) {
+            // Accessors {{{
-                var op = 1; // initial opacity
+            let options = {};
-                var timer = setInterval(function () {
+
-                    if (op <= 0.1) {
+            let logo = document.getElementById("logo");
-                        clearInterval(timer);
+            logo.classList.remove("hidden");
-                        element.style.display = "none";
+
-                    }
+            let page1 = document.getElementById("page1");
-                    element.style.opacity = op;
+            page1.classList.remove("hidden");
-                    element.style.filter = "alpha(opacity=" + op * 100 + ")";
+            page1.buttons = document.querySelectorAll("#page1 > #buttons > button");
-                    op -= op * 0.1;
+
-                }, 50);
+            // Connection check
+            let warning = document.getElementById("warning");
+            if (window.navigator.onLine === false) {
+                warning.classList.remove("hidden");
             }
 
-            if (window.navigator.onLine === false) {
+            let page2 = document.getElementById("page2");
-                document.getElementById("setup").innerHTML =
+            let page3 = document.getElementById("page3");
-                    "You appear to be offline. Please connect to the internet and restart ArmCord Setup.";
+            // }}}
-            } else {
+
-                console.log("Starting ArmCord Setup...");
+            // Express
-                document.getElementById("express").addEventListener("click", function () {
+            page1.buttons[0].addEventListener("click", () => {
+                window.armcordinternal.saveSettings({
+                    windowStyle: "default",
+                    channel: "stable",
+                    armcordCSP: true,
+                    minimizeToTray: true,
+                    automaticPatches: false,
+                    mods: "cumcord",
+                    blurType: "acrylic"
+                });
+                setTimeout(() => window.armcordinternal.restart(), 5000);
+            });
+
+            // Full
+            page1.buttons[1].addEventListener("click", () => {
+                page1.classList.add("hidden");
+                page2.classList.remove("hidden");
+            });
+
+            page2.buttons = document.querySelectorAll("#page2 > #buttons > button");
+            page2.buttons[0].addEventListener("click", () => {
+                options.channel = document.getElementById("channel").value;
+                options.csp = document.getElementById("csp").value;
+                page2.classList.add("hidden");
+
+                page3.buttons = document.querySelectorAll("#page3 > #buttons > button");
+                if (options.csp === "true") {
+                    page3.classList.remove("hidden");
+                    page3.buttons[0].addEventListener("click", () => {
+                        options.mod = document.getElementById("mod").value;
+                        window.armcordinternal.saveSettings({
+                            windowStyle: "default",
+                            channel: options.channel,
+                            armcordCSP: true,
+                            minimizeToTray: true,
+                            automaticPatches: false,
+                            mods: options.mod,
+                            blurType: "acrylic"
+                        });
+                        setTimeout(() => window.armcordinternal.restart(), 500);
+                    });
+                } else {
                     window.armcordinternal.saveSettings({
                         windowStyle: "default",
-                        channel: "stable",
+                        channel: options.channel,
                         armcordCSP: true,
                         minimizeToTray: true,
                         automaticPatches: false,
-                        mods: "cumcord",
+                        mods: "none",
-                        blurType: "acrylic",
+                        blurType: "acrylic"
-                        inviteWebsocket: true,
-                        doneSetup: true
                     });
-                    fade(document.getElementById("setup"));
+                    setTimeout(() => window.armcordinternal.restart(), 500);
-                    setTimeout(function () {
+                }
-                        window.armcordinternal.restart();
+            });
-                    }, 5000);
-                });
-                document.getElementById("full").addEventListener("click", function () {
-                    document.getElementById("setup").innerHTML = `
-        <p class="text-center setup-ask">Choose your Discord channel/instance:</p>
-    <div class="center">
-      <select name="channel" id="channel" class="dropdown-button">
-        <option value="stable">Stable</option>
-        <option value="canary">Canary</option>
-        <option value="ptb">PTB</option>
-        <option value="foss">Fosscord</option>
-      </select>
-      </div>
-      <p class="text-center setup-ask">Should ArmCord handle client mods installation?</p>
-    <div class="center">
-      <select name="csp" id="csp" class="dropdown-button">
-        <option value="true">Yes</option>
-        <option value="false">No</option>
-      </select>
-      </div>
-      <button id="next" class="center">Next</button>
-      `;
-                    document.getElementById("next").addEventListener("click", function () {
-                        var branch = document.getElementById("channel").value;
-                        var csp = document.getElementById("csp").value;
-                        if (csp === "true") {
-                            document.getElementById("setup").innerHTML = `
-        <p class="text-center setup-ask">Select a client mod you want to install:</p>
-    <div class="center">
-      <select name="mod" id="mod" class="dropdown-button">
-        <option value="cumcord">Cumcord</option>
-        <option value="goosemod">GooseMod</option>
-        <option value="flicker">Flicker (Heavily WIP)</option>
-      </select>
-      </div>
-      <p>Why not all of them? Having many client mods at the same time can cause issues. If you really want to do it though, check our documentation ;)</p>
-      <button id="next" class="center">Next</button>
-      `;
-                            document.getElementById("next").addEventListener("click", function () {
-                                var mod = document.getElementById("mod").value;
-                                window.armcordinternal.saveSettings({
-                                    windowStyle: "default",
-                                    channel: branch,
-                                    armcordCSP: true,
-                                    minimizeToTray: true,
-                                    automaticPatches: false,
-                                    mods: mod,
-                                    blurType: "acrylic",
-                                    inviteWebsocket: true,
-                                    doneSetup: true
-                                });
-                                fade(document.getElementById("setup"));
-                                setTimeout(function () {
-                                    window.armcordinternal.restart();
-                                }, 5000);
-                            });
-                        } else {
-                            window.armcordinternal.saveSettings({
-                                windowStyle: "default",
-                                channel: branch,
-                                armcordCSP: true,
-                                minimizeToTray: true,
-                                automaticPatches: false,
-                                mods: "none",
-                                blurType: "acrylic",
-                                inviteWebsocket: true,
-                                doneSetup: true
-                            });
-                            fade(document.getElementById("setup"));
-                            setTimeout(function () {
-                                window.armcordinternal.restart();
-                            }, 5000);
-                        }
-                    });
-                });
-            }
         </script>
     </body>
 </html>

src/window.ts

@@ -68,8 +68,8 @@ async function doAfterDefiningTheWindow() {
 }
 export function createCustomWindow() {
     mainWindow = new BrowserWindow({
-        width: 300,
+        width: 390,
-        height: 350,
+        height: 470,
         title: "ArmCord",
         darkTheme: true,
         icon: path.join(__dirname, "/assets/icon_transparent.png"),