Sexierer titlebar and official UI changes

index.html

@@ -13,8 +13,8 @@
     }
 
     .titlebar {
-      font-family: Verdana, Geneva, Tahoma, sans-serif;
-      background-color: #202225;
+      background-color: #2c2f33 !important;
+      font-size: 0px !important;
     }
 
     body {
@@ -26,7 +26,7 @@
       text-align: center;
       font-weight: 100;
       transform: translateY(360%);
-      font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
+      font-family: Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif;
       text-rendering: optimizeLegibility;
       font-style: italic;
     }

main.js

@@ -10,6 +10,7 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
+    icon: __dirname + '/discord.ico',
     frame: false,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),

preload.js

@@ -2,8 +2,61 @@ const customTitlebar = require('custom-electron-titlebar')
 
 window.addEventListener('DOMContentLoaded', () => {
   new customTitlebar.Titlebar({
-    backgroundColor: customTitlebar.Color.fromHex("#2C2F33"),
+    backgroundColor: customTitlebar.Color.fromHex("#202225"),
   });
 
+/**
+ * Utility function to add CSS in multiple passes.
+ * @param {string} styleString
+ */
+ function addStyle(styleString) {
+  const style = document.createElement('style');
+  style.textContent = styleString;
+  document.head.append(style);
+}
 
+addStyle(`
+@import url("https://kckarnige.github.io/femboi_owo/discord-font.css");
+
+.base-3dtUhz, .sidebar-2K8pFh {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  overflow: hidden;
+  border-top-left-radius: 8px;
+}
+
+div.menubar[role="menubar"] {
+  width: 0px;
+}
+
+.window-title:after {
+  content: "Cord";
+  color: #fff;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Discordinated;
+}
+
+.window-title:before {
+  content: "ARM";
+  color: #7289da;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Helvetica, sans-serif;
+}
+
+.window-title {
+  font-size: 0px !important;
+  margin-left: initial !important;
+  transform: translate(10px, 3px) !important;
+}
+
+.titlebar {
+  background: #202225 !important;
+}
+`);
 })

renderer.js

@@ -0,0 +1,55 @@
+// This file is required by the index.html file and will
+// be executed in the renderer process for that window.
+// All of the Node.js APIs are available in this process.
+const remote = require('electron').remote;
+
+const win = remote.getCurrentWindow(); /* Note this is different to the
+html global `window` variable */
+
+// When document has loaded, initialise
+document.onreadystatechange = (event) => {
+    if (document.readyState == "complete") {
+        handleWindowControls();
+
+        document.getElementById('electron-ver').innerHTML = `${process.versions.electron}`
+    }
+};
+
+window.onbeforeunload = (event) => {
+    /* If window is reloaded, remove win event listeners
+    (DOM element listeners get auto garbage collected but not
+    Electron win listeners as the win is not dereferenced unless closed) */
+    win.removeAllListeners();
+}
+
+function handleWindowControls() {
+    // Make minimise/maximise/restore/close buttons work when they are clicked
+    document.getElementById('min-button').addEventListener("click", event => {
+        win.minimize();
+    });
+
+    document.getElementById('max-button').addEventListener("click", event => {
+        win.maximize();
+    });
+
+    document.getElementById('restore-button').addEventListener("click", event => {
+        win.unmaximize();
+    });
+
+    document.getElementById('close-button').addEventListener("click", event => {
+        win.close();
+    });
+
+    // Toggle maximise/restore buttons when maximisation/unmaximisation occurs
+    toggleMaxRestoreButtons();
+    win.on('maximize', toggleMaxRestoreButtons);
+    win.on('unmaximize', toggleMaxRestoreButtons);
+
+    function toggleMaxRestoreButtons() {
+        if (win.isMaximized()) {
+            document.body.classList.add('maximized');
+        } else {
+            document.body.classList.remove('maximized');
+        }
+    }
+}