From 9f6e4c10e01791b1b9dd62005a13a51c309a6786 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Sat, 15 Jul 2023 15:35:50 +0200
Subject: [PATCH] Use consistent woodpecker color scheme

---
 web/src/components/admin/settings/AdminQueueTab.vue       | 2 +-
 .../components/admin/settings/queue/AdminQueueStats.vue   | 2 +-
 web/src/components/atomic/Button.vue                      | 2 +-
 web/src/components/form/Checkbox.vue                      | 2 +-
 web/src/components/form/RadioField.vue                    | 2 +-
 web/src/components/layout/header/Navbar.vue               | 4 +++-
 web/src/components/repo/pipeline/PipelineItem.vue         | 2 +-
 web/src/components/repo/pipeline/PipelineLog.vue          | 2 +-
 web/src/components/repo/pipeline/PipelineStatusIcon.vue   | 2 +-
 web/src/views/Login.vue                                   | 2 +-
 web/windi.config.ts                                       | 8 ++++++++
 11 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/web/src/components/admin/settings/AdminQueueTab.vue b/web/src/components/admin/settings/AdminQueueTab.vue
index b38e849cdcd..a0726711523 100644
--- a/web/src/components/admin/settings/AdminQueueTab.vue
+++ b/web/src/components/admin/settings/AdminQueueTab.vue
@@ -25,7 +25,7 @@
           :name="queueInfo.paused ? 'pause' : 'play'"
           :class="{
             'text-red-400': queueInfo.paused,
-            'text-lime-400': !queueInfo.paused,
+            'text-woodpecker-300': !queueInfo.paused,
           }"
         />
       </div>
diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 8c32b567fe5..f8886722059 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -81,7 +81,7 @@ const data = computed(() => {
       label: t('admin.settings.queue.stats.worker_count'),
       value: props.stats.worker_count,
       perc: total.value > 0 ? (props.stats.worker_count / total.value) * 100 : 0,
-      color: 'bg-lime-400',
+      color: 'bg-woodpecker-300',
     },
     {
       key: 'running_count',
diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index ecdc3f59b5a..1829a681211 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -5,7 +5,7 @@
     :class="{
       'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800':
         color === 'gray',
-      'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-300 dark:bg-lime-900 dark:hover:bg-lime-800':
+      'bg-woodpecker-400 hover:bg-woodpecker-500 border-woodpecker-600 text-white dark:text-gray-300 dark:bg-woodpecker-500 dark:hover:bg-woodpecker-400':
         color === 'green',
       'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-300 dark:bg-cyan-900 dark:hover:bg-cyan-800':
         color === 'blue',
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index 47f0e3d072a..166bf741c6a 100644
--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@@ -3,7 +3,7 @@
     <input
       :id="`checkbox-${id}`"
       type="checkbox"
-      class="checkbox flex-shrink-0 relative border border-gray-400 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
+      class="checkbox flex-shrink-0 relative border border-gray-400 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-woodpecker-400 checked:border-woodpecker-400 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-woodpecker-500 checked:border-woodpecker-500 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
       :checked="innerValue"
       @click="innerValue = !innerValue"
     />
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index a3d45b4b947..cd22a28cddf 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -3,7 +3,7 @@
     <input
       :id="`radio-${id}-${option.value}`"
       type="radio"
-      class="radio relative flex-shrink-0 border border-gray-400 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
+      class="radio relative flex-shrink-0 border border-gray-400 cursor-pointer rounded-full w-5 h-5 checked:bg-woodpecker-400 checked:border-woodpecker-400 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-woodpecker-500 checked:border-woodpecker-500 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
       :value="option.value"
       :checked="innerValue.includes(option.value)"
       @click="innerValue = option.value"
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index b844f710552..9bf178912df 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,6 +1,8 @@
 <template>
   <!-- Navbar -->
-  <nav class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
+  <nav
+    class="flex bg-woodpecker-400 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700 font-bold"
+  >
     <!-- Left Links Box -->
     <div class="flex text-white dark:text-gray-400 items-center space-x-2">
       <!-- Logo -->
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index cf4b4fd3c11..71783a46b29 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -7,7 +7,7 @@
           'bg-yellow-400 dark:bg-dark-200': pipeline.status === 'pending',
           'bg-red-400 dark:bg-red-800': pipelineStatusColors[pipeline.status] === 'red',
           'bg-gray-600 dark:bg-gray-500': pipelineStatusColors[pipeline.status] === 'gray',
-          'bg-lime-400 dark:bg-lime-900': pipelineStatusColors[pipeline.status] === 'green',
+          'bg-woodpecker-400 dark:bg-lime-900': pipelineStatusColors[pipeline.status] === 'green',
           'bg-blue-400 dark:bg-blue-900': pipelineStatusColors[pipeline.status] === 'blue',
         }"
       />
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index f18c69dc4b7..25b9cbd7753 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -83,7 +83,7 @@
 
       <div
         v-if="step?.end_time !== undefined"
-        :class="step.exit_code == 0 ? 'dark:text-lime-400 text-lime-700' : 'dark:text-red-400 text-red-600'"
+        :class="step.exit_code == 0 ? 'dark:text-woodpecker-400 text-lime-700' : 'dark:text-red-400 text-red-600'"
         class="w-full bg-gray-200 dark:bg-dark-gray-800 text-md p-4"
       >
         {{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}
diff --git a/web/src/components/repo/pipeline/PipelineStatusIcon.vue b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
index 0b3cb294cc8..612cf3e940a 100644
--- a/web/src/components/repo/pipeline/PipelineStatusIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
@@ -8,7 +8,7 @@
       :class="{
         'text-red-400': pipelineStatusColors[status] === 'red',
         'text-gray-400': pipelineStatusColors[status] === 'gray',
-        'text-lime-400': pipelineStatusColors[status] === 'green',
+        'text-woodpecker-400': pipelineStatusColors[status] === 'green',
         'text-blue-400': pipelineStatusColors[status] === 'blue',
       }"
     />
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 1f96eb8f35b..92cfdbeb2bf 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -7,7 +7,7 @@
     <div
       class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:bg-white md:dark:bg-dark-gray-700 dark:border-dark-200 md:flex-row md:w-3xl md:h-sm justify-center"
     >
-      <div class="flex md:bg-lime-500 md:dark:bg-lime-900 md:w-3/5 justify-center items-center">
+      <div class="flex md:bg-woodpecker-400 md:dark:bg-dark-gray-800 md:w-3/5 justify-center items-center">
         <img class="w-48 h-48" src="../assets/logo.svg?url" />
       </div>
       <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 80c1474f8ab..56f3be1f630 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -9,6 +9,14 @@ export default defineConfig({
     extend: {
       colors: {
         greenish: '#4caf50',
+        woodpecker: {
+          100: '#BDFFAC',
+          200: '#7FD777',
+          300: '#4CAF50',
+          400: '#2A8737',
+          500: '#115F24',
+          600: '#043818',
+        },
         link: colors.blue[400],
         'dark-gray': {
           600: '#383c4a',