From b5870a7afbc2de9ce3ff9f392d284044771b1e31 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 00:34:46 +0100
Subject: [PATCH] use darker bg color for containers

---
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 2 +-
 web/src/components/repo/pipeline/PipelineLog.vue         | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 web/src/style.css                                        | 4 ++--
 web/src/views/Login.vue                                  | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index f5a628cbd..bafddadc7 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 09fc3a7aa..7b6b76e4f 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
         <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index f0f5c3fa2..3de1a5586 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/style.css b/web/src/style.css
index a9851bc23..fd97ef46a 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -100,9 +100,9 @@
   --wp-code-inline-100: theme('colors.int-wp-secondary.600');
   --wp-code-inline-text-100: theme('colors.gray.300');
 
-  --wp-code-100: theme('colors.int-wp-secondary.300'); /* #383c4a */
+  --wp-code-100: theme('colors.int-wp-secondary.700'); /* #383c4a */
   --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
-  --wp-code-300: theme('colors.int-wp-secondary.800');
+  --wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
 
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 3720e5e32..f6561ea2c 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />