From 6f07f2acf2c841dc03c363c2a96af2760945eb3b Mon Sep 17 00:00:00 2001
From: Lauris BH <lauris@nix.lv>
Date: Thu, 9 Nov 2023 08:07:20 +0200
Subject: [PATCH] Fix error color contrast in dark theme (#2778)

---
 web/src/components/atomic/Button.vue            | 3 ++-
 web/src/components/form/RadioField.vue          | 4 ++--
 web/src/components/repo/settings/ActionsTab.vue | 2 --
 web/src/views/Login.vue                         | 2 +-
 web/windi.config.ts                             | 8 ++++----
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index db656554d..dd11dd1ea 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -8,7 +8,8 @@
         color === 'gray',
       'bg-wp-control-ok-100 hover:bg-wp-control-ok-200 border-wp-control-ok-300 text-white': color === 'green',
       'bg-wp-control-info-100 hover:bg-wp-control-info-200 border-wp-control-info-300 text-white': color === 'blue',
-      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
+      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white dark:text-dark-300':
+        color === 'red',
       ...passedClasses,
     }"
     :title="title"
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index fab08ec71..b20164af9 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -54,8 +54,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
   display: block;
   top: 50%;
   left: 50%;
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: white;
   transform: translate(-50%, -50%);
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/components/repo/settings/ActionsTab.vue
index ccf72e39f..443d84a1f 100644
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@@ -3,7 +3,6 @@
     <div class="flex flex-wrap items-center">
       <Button
         class="mr-4 my-1"
-        color="blue"
         start-icon="heal"
         :is-loading="isRepairingRepo"
         :text="$t('repo.settings.actions.repair.repair')"
@@ -13,7 +12,6 @@
       <Button
         v-if="isActive"
         class="mr-4 my-1"
-        color="blue"
         start-icon="turn-off"
         :is-loading="isDeactivatingRepo"
         :text="$t('repo.settings.actions.disable.disable')"
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index cdf8b8ea2..93d728362 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -3,7 +3,7 @@
     <!-- TODO: Should use vue notifications. -->
     <div
       v-if="errorMessage"
-      class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white p-4 rounded-md"
+      class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white dark:text-dark-300 p-4 rounded-md"
     >
       {{ errorMessage }}
     </div>
diff --git a/web/windi.config.ts b/web/windi.config.ts
index cdcfc551d..fb9dea707 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -79,16 +79,16 @@ export default defineConfig({
           300: colors.red[900],
         },
         'int-wp-control-error-dark': {
-          100: tinycolor(colors.red[700]).desaturate(25).toString(),
-          200: tinycolor(colors.red[800]).desaturate(25).toString(),
-          300: tinycolor(colors.red[900]).desaturate(25).toString(),
+          100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
+          200: tinycolor(colors.red[800]).saturate(80).brighten(30).toString(),
+          300: tinycolor(colors.red[900]).saturate(80).brighten(30).toString(),
         },
 
         'int-wp-state-error': {
           100: colors.red[700],
         },
         'int-wp-state-error-dark': {
-          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+          100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
         },
         'int-wp-state-neutral': {
           100: colors.gray[600],