From a2ca657631533a4183713afa181e7203c81d2a5c Mon Sep 17 00:00:00 2001
From: Egor Tensin <Egor.Tensin@gmail.com>
Date: Wed, 1 Jun 2022 04:16:26 +0200
Subject: [PATCH] Improve UI colors to have more contrast  (#943)

* web: improve contrast in BuildProcList component
* White text on gray instead of gray on gray.
* web: improve contrast in Panel component
* White header text on dark gray instead of gray on gray.
* Gray body text on white instead of gray on gray.
* Align header padding with the body.
---
 web/src/components/layout/Panel.vue             |  6 +++---
 web/src/components/repo/build/BuildProcList.vue | 15 +--------------
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 61e36a644..42f20e0ef 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="rounded-md w-full shadow overflow-hidden text-gray-500 bg-gray-300 dark:bg-dark-gray-700">
-    <div v-if="title" class="font-bold bg-gray-400 dark:bg-dark-gray-800 p-2">{{ title }}</div>
-    <div class="w-full p-4 bg-gray-300 dark:bg-dark-gray-700">
+  <div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
+    <div v-if="title" class="font-bold text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2">{{ title }}</div>
+    <div class="w-full p-4 bg-white dark:bg-dark-gray-700">
       <slot />
     </div>
   </div>
diff --git a/web/src/components/repo/build/BuildProcList.vue b/web/src/components/repo/build/BuildProcList.vue
index 00662e0cd..3f53f2278 100644
--- a/web/src/components/repo/build/BuildProcList.vue
+++ b/web/src/components/repo/build/BuildProcList.vue
@@ -1,19 +1,6 @@
 <template>
   <div class="flex flex-col w-full md:w-3/12 text-gray-200 dark:text-gray-400 bg-gray-600 dark:bg-dark-gray-800">
-    <div
-      class="
-        flex
-        py-4
-        px-2
-        mx-2
-        space-x-1
-        justify-between
-        flex-shrink-0
-        text-gray-500
-        border-b-1
-        dark:border-dark-gray-600
-      "
-    >
+    <div class="flex py-4 px-2 mx-2 space-x-1 justify-between flex-shrink-0 border-b-1 dark:border-dark-gray-600">
       <div class="flex space-x-1 items-center flex-shrink-0">
         <div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
         <span>{{ build.author }}</span>