Merge branch 'main' into canary

index.html

@@ -83,4 +83,4 @@
 
 </body>
 
-</html>
+</html>

main.js

@@ -9,6 +9,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

@@ -4,9 +4,19 @@ const { remote } = require("electron");
 
 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);
+}
+
 
 })
 const currentWindow = remote.getCurrentWindow();
@@ -17,3 +27,49 @@ electronLocalshortcut.register(currentWindow, "F12", () => {
   currentWindow.webContents.openDevTools();
 });
 require("./utils/capturer.js")
+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');
+        }
+    }
+}