From 9f9127b0937c21ecd148e35f8bf6f2b6cb3e0d2f Mon Sep 17 00:00:00 2001
From: Lauris BH <lauris@nix.lv>
Date: Thu, 9 Nov 2023 23:00:52 +0200
Subject: [PATCH] Revert to previous red colors but do not use red color for
 text (#2786)

Revert red colors back introduced by #2778

But do not use red color for text on dark background anywhere

example:

![attels](https://github.com/woodpecker-ci/woodpecker/assets/165205/39f008fe-3d43-495f-b956-ea5bf4a5fa16)
---
 web/components.d.ts                           |  6 +++---
 .../admin/settings/AdminInfoTab.vue           | 20 ++++++++++---------
 web/src/components/atomic/Button.vue          |  3 +--
 web/src/components/atomic/Error.vue           | 17 ++++++++++++++++
 web/src/components/atomic/Icon.vue            |  4 +++-
 web/src/components/atomic/Warning.vue         |  9 ++++++---
 web/src/components/layout/Container.vue       |  3 ++-
 web/src/components/layout/Settings.vue        |  2 +-
 .../components/repo/settings/ActionsTab.vue   |  2 ++
 web/src/views/Login.vue                       |  7 +------
 web/src/views/repo/pipeline/Pipeline.vue      |  8 ++++----
 web/windi.config.ts                           |  8 ++++----
 12 files changed, 55 insertions(+), 34 deletions(-)
 create mode 100644 web/src/components/atomic/Error.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index 37a76aec1..778ecc8cf 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -26,17 +26,16 @@ declare module 'vue' {
     CronTab: typeof import('./src/components/repo/settings/CronTab.vue')['default']
     DeployPipelinePopup: typeof import('./src/components/layout/popups/DeployPipelinePopup.vue')['default']
     DocsLink: typeof import('./src/components/atomic/DocsLink.vue')['default']
+    Error: typeof import('./src/components/atomic/Error.vue')['default']
     GeneralTab: typeof import('./src/components/repo/settings/GeneralTab.vue')['default']
     Header: typeof import('./src/components/layout/scaffold/Header.vue')['default']
     IBiCheckCircleFill: typeof import('~icons/bi/check-circle-fill')['default']
     IBiCircle: typeof import('~icons/bi/circle')['default']
-    IBiExclamationCircleFill: typeof import('~icons/bi/exclamation-circle-fill')['default']
     IBiExclamationTriangle: typeof import('~icons/bi/exclamation-triangle')['default']
     IBiExclamationTriangleFill: typeof import('~icons/bi/exclamation-triangle-fill')['default']
     IBiPlayCircleFill: typeof import('~icons/bi/play-circle-fill')['default']
     IBiSlashCircleFill: typeof import('~icons/bi/slash-circle-fill')['default']
     IBiStopCircleFill: typeof import('~icons/bi/stop-circle-fill')['default']
-    IBiX: typeof import('~icons/bi/x')['default']
     IBiXCircleFill: typeof import('~icons/bi/x-circle-fill')['default']
     IBxBxPowerOff: typeof import('~icons/bx/bx-power-off')['default']
     ICarbonCloseOutline: typeof import('~icons/carbon/close-outline')['default']
@@ -63,14 +62,15 @@ declare module 'vue' {
     IMdiBitbucket: typeof import('~icons/mdi/bitbucket')['default']
     IMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IMdiClockTimeEightOutline: typeof import('~icons/mdi/clock-time-eight-outline')['default']
+    IMdiErrorOutline: typeof import('~icons/mdi/error-outline')['default']
     IMdiFormatListBulleted: typeof import('~icons/mdi/format-list-bulleted')['default']
     IMdiGestureTap: typeof import('~icons/mdi/gesture-tap')['default']
     IMdiGithub: typeof import('~icons/mdi/github')['default']
     IMdiLoading: typeof import('~icons/mdi/loading')['default']
+    IMdiSync: typeof import('~icons/mdi/sync')['default']
     IMdiSourceBranch: typeof import('~icons/mdi/source-branch')['default']
     IMdisourceCommit: typeof import('~icons/mdi/source-commit')['default']
     IMdiSourcePull: typeof import('~icons/mdi/source-pull')['default']
-    IMdiSync: typeof import('~icons/mdi/sync')['default']
     IMdiTagOutline: typeof import('~icons/mdi/tag-outline')['default']
     InputField: typeof import('./src/components/form/InputField.vue')['default']
     IPhGitlabLogoSimpleFill: typeof import('~icons/ph/gitlab-logo-simple-fill')['default']
diff --git a/web/src/components/admin/settings/AdminInfoTab.vue b/web/src/components/admin/settings/AdminInfoTab.vue
index 3b774f3a9..22dd6b48b 100644
--- a/web/src/components/admin/settings/AdminInfoTab.vue
+++ b/web/src/components/admin/settings/AdminInfoTab.vue
@@ -7,15 +7,17 @@
         <span class="font-bold">{{ version?.current }}</span>
       </i18n-t>
 
-      <i18n-t v-if="version?.needsUpdate" keypath="update_woodpecker" tag="span" class="text-int-wp-state-error-100">
-        <a
-          :href="`https://github.com/woodpecker-ci/woodpecker/releases/tag/${version.latest}`"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="underline"
-          >{{ version.latest }}</a
-        >
-      </i18n-t>
+      <Error v-if="version?.needsUpdate">
+        <i18n-t keypath="update_woodpecker" tag="span">
+          <a
+            :href="`https://github.com/woodpecker-ci/woodpecker/releases/tag/${version.latest}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="underline"
+            >{{ version.latest }}</a
+          >
+        </i18n-t>
+      </Error>
     </div>
   </Settings>
 </template>
diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index dd11dd1ea..db656554d 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -8,8 +8,7 @@
         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 dark:text-dark-300':
-        color === 'red',
+      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
       ...passedClasses,
     }"
     :title="title"
diff --git a/web/src/components/atomic/Error.vue b/web/src/components/atomic/Error.vue
new file mode 100644
index 000000000..396168f4d
--- /dev/null
+++ b/web/src/components/atomic/Error.vue
@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="flex gap-2 items-center bg-wp-control-error-100 border-l-6 border border-solid border-wp-control-error-300 text-white p-2 rounded-md"
+  >
+    <Icon v-if="!textOnly" name="error" />
+    <slot>
+      <span>{{ text }}</span>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  textOnly?: boolean;
+  text: string;
+}>();
+</script>
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index 5fa9fe858..d1b9ba300 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -24,6 +24,7 @@
   <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
   <i-bi-exclamation-triangle-fill v-else-if="name === 'attention'" class="h-5 w-5" />
   <i-bi-exclamation-triangle v-else-if="name === 'warning'" class="h-5 w-5" />
+  <i-mdi-error-outline v-else-if="name === 'error'" class="h-5 w-5" />
   <i-simple-icons-gitea v-else-if="name === 'gitea'" class="h-8 w-8" />
   <i-ph-gitlab-logo-simple-fill v-else-if="name === 'gitlab'" class="h-8 w-8" />
   <i-mdi-bitbucket v-else-if="name === 'bitbucket'" class="h-8 w-8" />
@@ -98,7 +99,8 @@ export type IconNames =
   | 'play'
   | 'pause'
   | 'warning'
-  | 'attention';
+  | 'attention'
+  | 'error';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/atomic/Warning.vue b/web/src/components/atomic/Warning.vue
index 43384a8dc..418d8b525 100644
--- a/web/src/components/atomic/Warning.vue
+++ b/web/src/components/atomic/Warning.vue
@@ -1,14 +1,17 @@
 <template>
   <div
-    class="flex gap-2 items-center text-sm text-gray-700 font-bold rounded-md border border-solid p-2 border-wp-hint-warn-200 bg-wp-hint-warn-100"
+    class="flex gap-2 items-center text-gray-700 font-bold rounded-md p-2 border border-solid border-l-6 border-wp-hint-warn-200 bg-wp-hint-warn-100"
   >
-    <Icon name="warning" />
-    <span>{{ text }}</span>
+    <Icon v-if="!textOnly" name="warning" />
+    <slot>
+      <span>{{ text }}</span>
+    </slot>
   </div>
 </template>
 
 <script lang="ts" setup>
 defineProps<{
+  textOnly?: boolean;
   text: string;
 }>();
 </script>
diff --git a/web/src/components/layout/Container.vue b/web/src/components/layout/Container.vue
index fb03ab262..d2fb4e7cf 100644
--- a/web/src/components/layout/Container.vue
+++ b/web/src/components/layout/Container.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full p-4 mx-auto" :class="{ 'max-w-5xl': !fullWidth, 'md:px-0': fullWidth }">
+  <div class="w-full p-4 mx-auto" :class="{ 'max-w-5xl': !fullWidth && !fillWidth, 'md:px-0': fullWidth }">
     <slot />
   </div>
 </template>
@@ -7,5 +7,6 @@
 <script setup lang="ts">
 defineProps<{
   fullWidth?: boolean;
+  fillWidth?: boolean;
 }>();
 </script>
diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
index 9dbc89ff3..2d187fd9b 100644
--- a/web/src/components/layout/Settings.vue
+++ b/web/src/components/layout/Settings.vue
@@ -7,7 +7,7 @@
           {{ desc }}
           <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
         </p>
-        <Warning v-if="warning" class="mt-1" :text="warning" />
+        <Warning v-if="warning" class="text-sm mt-1" :text="warning" />
       </div>
 
       <div class="ml-auto">
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/components/repo/settings/ActionsTab.vue
index 443d84a1f..26b586fb1 100644
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@@ -3,6 +3,7 @@
     <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')"
@@ -11,6 +12,7 @@
 
       <Button
         v-if="isActive"
+        color="blue"
         class="mr-4 my-1"
         start-icon="turn-off"
         :is-loading="isDeactivatingRepo"
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 93d728362..d6fcec0b9 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,12 +1,7 @@
 <template>
   <main class="flex flex-col w-full h-full justify-center items-center">
     <!-- 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 dark:text-dark-300 p-4 rounded-md"
-    >
-      {{ errorMessage }}
-    </div>
+    <Error v-if="errorMessage" text-only :text="errorMessage" class="w-full md:w-3xl" />
 
     <div
       class="flex flex-col w-full overflow-hidden bg-wp-background-100 shadow border border-wp-background-400 dark:bg-wp-background-200 md:m-8 md:rounded-md md:flex-row md:w-3xl md:h-sm"
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index f5d643889..8b1c7e0d8 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -9,7 +9,7 @@
       />
 
       <div class="flex items-start justify-center flex-grow relative">
-        <Container v-if="selectedStep?.error" class="py-0">
+        <Container v-if="selectedStep?.error" fill-width class="py-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
               <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" />
@@ -19,7 +19,7 @@
           </Panel>
         </Container>
 
-        <Container v-else-if="pipeline.errors?.some((e) => !e.is_warning)" class="py-0">
+        <Container v-else-if="pipeline.errors?.some((e) => !e.is_warning)" fill-width class="py-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
               <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" />
@@ -29,7 +29,7 @@
           </Panel>
         </Container>
 
-        <Container v-else-if="pipeline.status === 'blocked'" class="py-0">
+        <Container v-else-if="pipeline.status === 'blocked'" fill-width class="py-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
               <Icon name="status-blocked" class="w-16 h-16" />
@@ -59,7 +59,7 @@
           </Panel>
         </Container>
 
-        <Container v-else-if="pipeline.status === 'declined'" class="py-0">
+        <Container v-else-if="pipeline.status === 'declined'" fill-width class="py-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
               <Icon name="status-declined" class="w-16 h-16 text-wp-state-error-100" />
diff --git a/web/windi.config.ts b/web/windi.config.ts
index fb9dea707..cdcfc551d 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]).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(),
+          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+          200: tinycolor(colors.red[800]).desaturate(25).toString(),
+          300: tinycolor(colors.red[900]).desaturate(25).toString(),
         },
 
         'int-wp-state-error': {
           100: colors.red[700],
         },
         'int-wp-state-error-dark': {
-          100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
+          100: tinycolor(colors.red[700]).desaturate(25).toString(),
         },
         'int-wp-state-neutral': {
           100: colors.gray[600],