add proper dark/light mode

yes
update primary color
2024-01-09 14:49:22 +01:00 · 2024-01-09 14:49:05 +01:00 · 2024-01-09 14:48:58 +01:00 · 2024-01-09 14:48:47 +01:00 · 2024-01-09 14:47:28 +01:00
9 changed files with 141 additions and 72 deletions
--- a/main.js
+++ b/main.js
@ -20,12 +20,11 @@ function createWindow() {

  // Create the browser window.
  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 600,
+    height: 380,
    resizable: false,
    frame: false,
    titleBarStyle: "hidden",
-    titleBarOverlay: true,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, "preload.js"),
@ -55,8 +54,10 @@ function createWindow() {
  // loadURL(mainWindow);

  // Open the DevTools and also disable Electron Security Warning.
-  // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
-  // mainWindow.webContents.openDevTools();
+  if (isDev()) {
+    process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = true;
+    mainWindow.webContents.openDevTools({ mode: "detach" });
+  }

  // Emitted when the window is closed.
  mainWindow.on("closed", function () {
--- a/package-lock.json
+++ b/package-lock.json
@ -3998,6 +3998,14 @@
      ],
      "optional": true
    },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
    "node_modules/import-cwd": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@ -6120,6 +6128,25 @@
        "truncate-utf8-bytes": "^1.0.0"
      }
    },
+    "node_modules/sass": {
+      "version": "1.69.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.7.tgz",
+      "integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/sax": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
--- a/preload.js
+++ b/preload.js
@ -5,7 +5,6 @@ window.addEventListener("DOMContentLoaded", () => {
    backgroundColor: TitlebarColor.fromHex("#202020"),
    itemBackgroundColor: TitlebarColor.fromHex("#202020"),
    menu: null,
-    
    enableMnemonics: false,
    maximizable: false,
  });
--- a/public/index.html
+++ b/public/index.html
@ -1,20 +1,22 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" class="dark">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />

-	<title>EZPPLauncher</title>
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
+    <title>EZPPLauncher</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/build/bundle.css" />

-	<script defer src='/build/bundle.js'></script>
-</head>
+    <script defer src="/build/bundle.js"></script>
+  </head>

-<body class="bg-gray-900">
-</body>
+  <body class="bg-gray-100 dark:bg-gray-900"></body>
 </html>
--- a/src/App.svelte
+++ b/src/App.svelte
@ -5,18 +5,28 @@
    DropdownItem,
    DropdownHeader,
    DropdownDivider,
+    Button,
+    Checkbox,
+    DarkMode,
+    Progressbar,
  } from "flowbite-svelte";
  import ezppLogo from "../public/favicon.png";
+
+  let patch = true;
+  let rand = 0;
 </script>

 <div class="p-2 flex flex-row justify-between items-center">
  <div class="flex flex-row items-center">
-    <img src={ezppLogo} class="w-12 h-12 mr-2" />
-    <span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
+    <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
+    <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight"
+      >EZPPLauncher</span
+    >
  </div>
-  <div class="w-fill cursor-pointer flex md:order-2">
+  <div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
+    <DarkMode class="dark:border-gray-700"></DarkMode>
    <Avatar
-      class="rounded-lg hover:ring hover:ring-4 hover:ring-gray-800"
+      class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
      src="https://a.ez-pp.farm/1001"
      id="avatar-menu"
    />
@ -29,23 +39,41 @@
      >
    </DropdownHeader>
    <DropdownItem
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+      class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
      >Profile</DropdownItem
    >
    <DropdownItem
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+      class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
      >Settings</DropdownItem
    >
    <DropdownDivider />
    <DropdownItem
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+      class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
      >Sign out</DropdownItem
    >
  </Dropdown>
 </div>

-<main class="p-1">
-  <div class="container border border-gray-700 rounded-lg"></div>
+<main class="p-5">
+  <div
+    class="container flex flex-col items-center justify-center gap-5 border border-gray-300 dark:border-gray-700 rounded-lg"
+  >
+    <Button
+      color="light"
+      size="xl"
+      on:click={() => (rand = Math.random() * 100)}>Launch</Button
+    >
+    <Checkbox color="primary" bind:checked={patch}>
+      Patching {patch ? "enabled" : "disabled"}
+    </Checkbox>
+    <Progressbar
+      animate={true}
+      progress={rand}
+      labelInside={true}
+      size="h-6"
+      labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
+    />
+  </div>
 </main>

 <style>
@ -54,18 +82,4 @@
    padding: 1em;
    margin: 0 auto;
  }
-  h1 {
-    font-size: 2rem;
-    margin: 0;
-    font-weight: 300;
-    font-style: normal;
-    color: #ccc;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    text-shadow: 0 0 1px #000;
-    text-align: center;
-    padding: 0.5em 0;
-    border-bottom: 1px solid #353535;
-    margin-bottom: 1.5rem;
-  }
 </style>
--- a/src/app.pcss
+++ b/src/app.pcss
@ -6,3 +6,25 @@
 * {
  font-family: "Prompt";
 }
+
+html .cet-titlebar {
+  background-color: #ececec !important;
+  color: #202020 !important;
+}
+
+html.dark .cet-titlebar {
+  background-color: #202020 !important;
+  color: #ececec !important;
+}
+
+html .cet-titlebar .cet-control-icon svg {
+  fill: #000;
+}
+
+html.dark .cet-titlebar .cet-control-icon svg {
+  fill: #fff;
+}
+
+.cet-titlebar .cet-icon {
+  display: none;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,5 @@
 import "./app.pcss";
 import App from "./App.svelte";
-import "@fontsource/prompt";

 const app = new App({
  target: document.body,
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -1,41 +1,46 @@
 /** @type {import('tailwindcss').Config}*/
 const config = {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
-  darkMode: 'class',
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+  ],
+  darkMode: "class",
  theme: {
    extend: {
      colors: {
        // flowbite-svelte
        primary: {
-          50: '#FFF5F2',
-          100: '#FFF1EE',
-          200: '#FFE4DE',
-          300: '#FFD5CC',
-          400: '#FFBCAD',
-          500: '#FE795D',
-          600: '#EF562F',
-          700: '#EB4F27',
-          800: '#CC4522',
-          900: '#A5371B'
+          DEFAULT: "#FA1C74",
+          50: "#FED0E2",
+          100: "#FEBCD6",
+          200: "#FD94BD",
+          300: "#FC6CA5",
+          400: "#FB448C",
+          500: "#FA1C74",
+          600: "#D90559",
+          700: "#A20442",
+          800: "#6B022C",
+          900: "#340115",
+          950: "#19010A",
        },
        gray: {
-          50: '#F9F9F9',
-          100: '#ECECEC',
-          200: '#D3D3D3',
-          300: '#B9B9B9',
-          400: '#A0A0A0',
-          500: '#868686',
-          600: '#6D6D6D',
-          700: '#535353',
-          800: '#393939',
-          900: '#202020',
-          950: '#1A1A1A'
+          50: "#F9F9F9",
+          100: "#ECECEC",
+          200: "#D3D3D3",
+          300: "#B9B9B9",
+          400: "#A0A0A0",
+          500: "#868686",
+          600: "#6D6D6D",
+          700: "#535353",
+          800: "#393939",
+          900: "#202020",
+          950: "#1A1A1A",
        },
-      }
-    }
+      },
+    },
  },

-  plugins: [require('flowbite/plugin')],
+  plugins: [require("flowbite/plugin")],
 };

 module.exports = config;
Author	SHA1	Message	Date
HorizonCode	a4faa9dd1a	add proper dark/light mode	2024-01-09 14:49:22 +01:00
HorizonCode	800a424b67	yes	2024-01-09 14:49:05 +01:00
HorizonCode	873aeaf921	update primary color	2024-01-09 14:48:58 +01:00
HorizonCode	310c206367	reformat, remove unused imports	2024-01-09 14:48:47 +01:00
HorizonCode	895b71ef16	adjust window size, enable dev tools in dev	2024-01-09 14:47:28 +01:00