- improve contrast of list group items, tables, sidebar to background in both themes

- change dark color schemd
- change primary font
- fix state bugs with back button navigating to account page
- neuter autofilled inputs colors

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "AGPL-3.0-only",
       "dependencies": {
+        "@fontsource/inter": "^5.0.8",
         "@influxdata/influxdb-client": "^1.33.2",
         "acme-client": "^5.0.0",
         "bcrypt": "^5.1.0",
@@ -1516,6 +1517,11 @@
         "@floating-ui/core": "^1.2.6"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.8.tgz",
+      "integrity": "sha512-28knWH1BfOiRalfLs90U4sge5mpQ8ZH6FS0PTT+IZMKrZ7wNHDHRuKa1kQJg+uHcc6axBppnxll+HXM4c7zo/Q=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",

package.json

@@ -15,6 +15,7 @@
   "author": "Thomas Lynch (fatchan) <tom@69420.me>",
   "license": "AGPL-3.0-only",
   "dependencies": {
+    "@fontsource/inter": "^5.0.8",
     "@influxdata/influxdb-client": "^1.33.2",
     "acme-client": "^5.0.0",
     "bcrypt": "^5.1.0",

pages/_app.js

@@ -4,6 +4,7 @@ import Layout from '../components/Layout.js';
 import 'nprogress/nprogress.css';
 import NProgress from "nprogress";
 import Router from "next/router";
+import "@fontsource/inter";
 
 const loadRoutes = ['/login', '/register', '/changepassword', '/']
 NProgress.configure({ showSpinner: false });
@@ -16,7 +17,12 @@ export default function App({ Component, pageProps }) {
 		<Layout>
 			<style>
 			{`
-				html, body { font-family: arial,Helvetica,sans-serif; height: 100%; overflow: hidden; }
+				:root { font-family: 'Inter', sans-serif; }
+				@supports (font-variation-settings: normal) {
+				  :root { font-family: 'Inter var', sans-serif; }
+				}
+				html, body { letter-spacing: -0.3px; font-family: 'Inter', arial,Helvetica,sans-serif; height: 100%; overflow: hidden; background: #F4F5F7; }
+				.sidebar { background: var(--bs-body-bg); }
 				.corner-ribbon {z-index:9999; width: 180px;top: 8px;left: auto;text-align: center;line-height: 30px;letter-spacing: 1px;color: white;background: darkorange;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);right: -70px;transform: rotate(45deg);-webkit-transform: rotate(46deg);position: fixed;overflow: hidden;}
 				.green { color: green; }
 				.red { color: red; }
@@ -37,6 +43,11 @@ export default function App({ Component, pageProps }) {
 				.select__control {
 					transition: none;
 				}
+				input:autofill, input:-webkit-autofill {
+					background-color: initial!important;
+					background-image: initial!important;
+					color: initial!important;
+				}
 				.select__control:hover:not(.select__control--is-focused) {
 					border-color: #ced4da;
 				}
@@ -60,11 +71,34 @@ export default function App({ Component, pageProps }) {
 					.sidebar { display: none; }
 				}
 				@media (prefers-color-scheme: dark) {
-					:root { --bs-body-color: #fff; --bs-body-bg: #222; }
+					:root {
+						--bs-body-color: #fff;
+						--bs-body-bg: #23272a;
+					}
+					html, body { background: var(--bs-body-bg); }
+					.nav-pills {
+						--bs-nav-pills-link-active-bg: #7289da;
+						--bs-btn-hover-bg: #7289da;
+						--bs-btn-hover-border-color: #7289da;
+					}
+					.btn-primary {
+						--bs-btn-bg: #7289da;
+						--bs-btn-border-color: #7289da;
+						--bs-btn-hover-bg: #6481e7;
+						--bs-btn-hover-border-color: #6481e7;
+						--bs-btn-active-bg: #6481e7;
+						--bs-btn-active-border-color: #6481e7;
+						--bs-btn-disabled-bg: #7289da;
+						--bs-btn-disabled-border-color: #7289da;
+					}
+					.badge.bg-primary {
+						background-color: #7289da;
+					}
 					.text-muted, a, a:visited, a:hover, .nav-link, .nav-link:hover { color:#fff!important; }
-					.list-group-item { color: #fff; background-color: unset; }
-					input:not(.btn):not(.select__input), option, select.form-select, textarea { color: #fff!important; background-color: #393939!important; border: 1px solid black!important; }
+					.list-group-item { color: #fff; background-color: #2c2f33; }
+					input:not(.btn):not(.select__input), option, select.form-select, textarea, .input-group-text { color: #fff!important; background-color: #2c2f33!important; border: 1px solid black!important; }
 					.list-group-item-action:focus, .list-group-item-action:hover { color: #fff; background-color: #1F1F1F; }
+					.sidebar, .table { background-color: #2c2f33; }
 					.table { color: #fff; border-color: var(--bs-gray-900)!important; }
 					tr:target {
 						background: #ffc10720!important;

pages/account.js

@@ -14,10 +14,8 @@ export default function Account(props) {
 	const [error, setError] = useState();
 
 	useEffect(() => {
-		if (!state.user || !state.user.clusters) {
-			API.getAccount(dispatch, setError, router);
-		}
-	}, [state.user, router]);
+		API.getAccount(dispatch, setError, router);
+	}, []);
 
 	const loadingSection = useMemo(() => {
 		return (
@@ -29,7 +27,7 @@ export default function Account(props) {
 
 	let innerData;
 
-	if (state.maps != null) {
+	if (state && state.user && state.maps != null) {
 
 		const { user, maps, globalAcl, csrf } = state;