From 4af51b3e5150d12dcef88140411cd6257d50e44e Mon Sep 17 00:00:00 2001
From: Vinzenz Schroeter <vinzenz.f.s@gmail.com>
Date: Tue, 16 Apr 2024 00:08:41 +0200
Subject: [PATCH] theming tweaks

---
 tank-frontend/src/ClientScreen.css |  3 ---
 tank-frontend/src/Controls.css     |  2 +-
 tank-frontend/src/theme.ts         | 17 ++++++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/tank-frontend/src/ClientScreen.css b/tank-frontend/src/ClientScreen.css
index b0405a9..3304737 100644
--- a/tank-frontend/src/ClientScreen.css
+++ b/tank-frontend/src/ClientScreen.css
@@ -6,7 +6,4 @@
     max-width: 100vw;
     max-height: 100vh;
     flex-shrink: 0;
-
-    border: solid var(--border-size-thick);
-    border-color: var(--color-primary);
 }
diff --git a/tank-frontend/src/Controls.css b/tank-frontend/src/Controls.css
index 2c587fa..f204c7c 100644
--- a/tank-frontend/src/Controls.css
+++ b/tank-frontend/src/Controls.css
@@ -25,6 +25,6 @@ kbd {
 }
 
 kbd.space {
-    width: calc(3 * var(--kbd-key-size) + 2 * var(--padding-normal));
+    width: calc(4 * var(--kbd-key-size) + 3 * var(--padding-normal));
     margin-top: calc(var(--kbd-key-size) + var(--padding-normal));
 }
diff --git a/tank-frontend/src/theme.ts b/tank-frontend/src/theme.ts
index 69c6819..0045122 100644
--- a/tank-frontend/src/theme.ts
+++ b/tank-frontend/src/theme.ts
@@ -53,13 +53,20 @@ function angle(a: number) {
 export function getRandomTheme(): Theme {
     const goldenAngle = 180 * (3 - Math.sqrt(5));
 
-    const background = getRandomHsl({maxSaturation: 50, minLightness: 10, maxLightness: 40});
+    const background = getRandomHsl({maxSaturation: 50, minLightness: 10, maxLightness: 30});
 
-    const primary = getRandomHsl({minSaturation: background.s * 1.2, minLightness: background.l + 20});
-    primary.h = angle(-Math.floor(1 + Math.random() * 2) * goldenAngle + primary.h);
+    const otherColorParams = {
+        minSaturation: background.s,
+        maxSaturation: 90,
+        minLightness: background.l + 20,
+        maxLightness: 90
+    };
 
-    const secondary = getRandomHsl({minSaturation: background.s * 1.2, minLightness: background.l + 20});
-    primary.h = angle(+Math.floor(1 + Math.random() * 2) * goldenAngle + primary.h);
+    const primary = getRandomHsl(otherColorParams);
+    primary.h = angle(-1 * goldenAngle + primary.h);
+
+    const secondary = getRandomHsl(otherColorParams);
+    primary.h = angle(+1 * goldenAngle + primary.h);
 
     return {background, primary, secondary};
 }