UI Redesign (#121)

 - Added color theme support
 - Added `neon-dark` and `custom-dark` color themes
 - Added `/settings` endpoint to change color themes client-side

CHANGELOG.adoc

@@ -11,6 +11,8 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
  - Migrated config to use `utils.config.Config` from `settings.py` (#117)
  - Added `user.fetch_attacks_runner` and `user.stat_db_attacks_user`
  - Added auto-cancellation of vault withdrawals
+ - Added color theme support
+ - Added account settings endpoint
 
 === Fixed
  - Fixed Tox CI runs (due to broken dependency installation)

controllers/__init__.py

@@ -29,9 +29,13 @@ def index():
     return render_template("index.html", extensions=extensions)
 
 
+@mod.route("/settings")
+def settings():
+    return render_template("settings.html")
+
+
 @mod.route("/static/toast.js")
 @mod.route("/static/favicon.svg")
-@mod.route("/static/login.css")
 @mod.route("/static/utils.js")
 @mod.route("/static/bot/oc.js")
 @mod.route("/static/bot/stakeouts.js")
@@ -43,6 +47,7 @@ def index():
 @mod.route("/static/faction/bankingaa.js")
 @mod.route("/static/faction/chain.js")
 @mod.route("/static/faction/members.js")
+@mod.route("/static/fonts/JetBrainsMono-Light.woff2")
 @mod.route("/static/stats/db.js")
 @mod.route("/static/stats/list.js")
 @mod.route("/static/torn/factions.js")

controllers/errors.py

@@ -66,17 +66,6 @@ def error404(e):
         )
 
 
-@mod.app_errorhandler(422)
-def error422(e):
-    """
-    Returns the 422 error page
-
-    :param e: HTTP error
-    """
-
-    return render_template("/errors/422.html"), 422
-
-
 @mod.app_errorhandler(500)
 def error500(e):
     """

models/server.py

@@ -35,6 +35,7 @@ def __init__(self, sid):
         self.name = server.name
         self.admins = server.admins
         self.config = server.config
+        self.icon = server.icon
 
         self.factions = server.factions
 

models/servermodel.py

@@ -21,6 +21,7 @@ class ServerModel(DynamicDocument):
     name = StringField(default="")
     admins = ListField(default=[])  # List of admin ids
     config = DictField(default={"stakeouts": 0, "verify": 0})  # Dictionary of server configurations
+    icon = StringField(default="")  # icon hash
 
     factions = ListField(default=[])  # List of factions in server
 

skynet/commands/bot/verify.py

@@ -141,7 +141,7 @@ def verify(interaction, *args, **kwargs):
                         {
                             "title": "Verification Failed",
                             "description": "No Discord ID found. Please verify that you are officially verified by Torn. "
-                                           "Otherwise, try forcing the verification.",
+                            "Otherwise, try forcing the verification.",
                             "color": SKYNET_ERROR,
                         }
                     ],

static/base.css

@@ -1,3 +1,12 @@
-a:link {
-    text-decoration: none;
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("/static/fonts/JetBrainsMono-Light.woff2") format("woff");
+}
+
+body {
+    font-family: "JetBrains Mono", serif;
+}
+
+.vertical-navbar {
+    min-height: 100vh;
 }

static/global/modeSelector.js

@@ -0,0 +1,35 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+    'use strict';
+
+    const storedTheme = localStorage.getItem('theme');
+
+    const getPreferredTheme = function () {
+        if (storedTheme) {
+            return storedTheme;
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'custom-dark' : 'light';
+    }
+
+    const setTheme = function (theme) {
+        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.setAttribute('data-bs-theme', 'custom-dark');
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', theme);
+        }
+    }
+
+    setTheme(getPreferredTheme());
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (storedTheme !== 'light' || storedTheme !== 'custom-dark') {
+            setTheme(getPreferredTheme());
+        }
+    });
+})()