From 16016654fa8340d386d53c98f5c2dbb1e50d6eaa Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 6 Nov 2023 16:24:56 +0100
Subject: [PATCH 1/5] Replace linter icons to match theme

---
 web/components.d.ts                           |  3 +-
 web/src/components/atomic/Icon.vue            |  4 ++-
 web/src/components/layout/scaffold/Tab.vue    |  5 +++
 web/src/components/layout/scaffold/Tabs.vue   |  1 +
 web/src/compositions/useTabs.ts               |  2 ++
 .../views/repo/pipeline/PipelineErrors.vue    | 35 ++++++++++++-------
 .../views/repo/pipeline/PipelineWrapper.vue   | 13 +++----
 7 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index d2cdd02957..642ebe71a2 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -23,7 +23,6 @@ declare module 'vue' {
     Checkbox: typeof import('./src/components/form/Checkbox.vue')['default']
     CheckboxesField: typeof import('./src/components/form/CheckboxesField.vue')['default']
     Container: typeof import('./src/components/layout/Container.vue')['default']
-    copy: typeof import('./src/components/admin/settings/AdminAgentsTab copy.vue')['default']
     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']
@@ -34,6 +33,7 @@ declare module 'vue' {
     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']
@@ -83,7 +83,6 @@ declare module 'vue' {
     Panel: typeof import('./src/components/layout/Panel.vue')['default']
     PipelineFeedItem: typeof import('./src/components/pipeline-feed/PipelineFeedItem.vue')['default']
     PipelineFeedSidebar: typeof import('./src/components/pipeline-feed/PipelineFeedSidebar.vue')['default']
-    PipelineInfo: typeof import('./src/components/repo/pipeline/PipelineInfo.vue')['default']
     PipelineItem: typeof import('./src/components/repo/pipeline/PipelineItem.vue')['default']
     PipelineList: typeof import('./src/components/repo/pipeline/PipelineList.vue')['default']
     PipelineLog: typeof import('./src/components/repo/pipeline/PipelineLog.vue')['default']
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index 0ef345fa99..a172d90a93 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -22,6 +22,7 @@
   <i-carbon-in-progress v-else-if="name === 'status-running' || name === 'status-started'" class="h-6 w-6" />
   <i-bi-slash-circle-fill v-else-if="name === 'status-skipped'" class="h-6 w-6" />
   <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
+  <i-bi-x v-else-if="name === 'linter-error'" class="h-6 w-6" />
   <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" />
@@ -94,7 +95,8 @@ export type IconNames =
   | 'auto-scroll-off'
   | 'refresh'
   | 'play'
-  | 'pause';
+  | 'pause'
+  | 'linter-error';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/layout/scaffold/Tab.vue b/web/src/components/layout/scaffold/Tab.vue
index 9060820144..8fce1b2ba0 100644
--- a/web/src/components/layout/scaffold/Tab.vue
+++ b/web/src/components/layout/scaffold/Tab.vue
@@ -7,11 +7,14 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
+import { IconNames } from '~/components/atomic/Icon.vue';
 import { Tab, useTabsClient } from '~/compositions/useTabs';
 
 const props = defineProps<{
   id?: string;
   title: string;
+  icon?: IconNames;
+  iconClass?: string;
 }>();
 
 const { tabs, activeTab } = useTabsClient();
@@ -21,6 +24,8 @@ onMounted(() => {
   tab.value = {
     id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
     title: props.title,
+    icon: props.icon,
+    iconClass: props.iconClass,
   };
 
   // don't add tab if tab id is already present
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index e9ac69d056..242b5640d5 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -14,6 +14,7 @@
       <Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
       <span>{{ tab.title }}</span>
+      <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
     </button>
   </div>
 </template>
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index 234f392cda..82a7d690ad 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -4,6 +4,8 @@ import { useRoute } from 'vue-router';
 export type Tab = {
   id: string;
   title: string;
+  icon?: string;
+  iconClass?: string;
 };
 
 export function useTabsProvider({
diff --git a/web/src/views/repo/pipeline/PipelineErrors.vue b/web/src/views/repo/pipeline/PipelineErrors.vue
index 46a268357b..ecb74e2492 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -2,19 +2,28 @@
   <Panel>
     <div class="grid justify-center gap-2 text-left grid-3-1">
       <template v-for="(error, i) in pipeline.errors" :key="i">
-        <span>{{ error.is_warning ? '⚠️' : '❌' }}</span>
-        <span>[{{ error.type }}]</span>
-        <span v-if="isLinterError(error) || isDeprecationError(error)">
-          <span v-if="error.data?.file" class="font-bold">{{ error.data?.file }}: </span>
-          <span>{{ error.data?.field }}</span>
-        </span>
-        <span v-else />
-        <a v-if="isDeprecationError(error)" :href="error.data?.docs" target="_blank" class="underline ml-4">
-          {{ error.message }}
-        </a>
-        <span v-else class="ml-4">
-          {{ error.message }}
-        </span>
+        <div class="flex items-center gap-4">
+          <Icon
+            :name="error.is_warning ? 'linter-warn' : 'linter-error'"
+            class="flex-shrink-0"
+            :class="{
+              'text-wp-state-warn-100': error.is_warning,
+              'text-wp-state-error-100': !error.is_warning,
+            }"
+          />
+          <span>[{{ error.type }}]</span>
+          <span v-if="isLinterError(error) || isDeprecationError(error)">
+            <span v-if="error.data?.file" class="font-bold">{{ error.data?.file }}: </span>
+            <span>{{ error.data?.field }}</span>
+          </span>
+          <span v-else />
+          <a v-if="isDeprecationError(error)" :href="error.data?.docs" target="_blank" class="underline">
+            {{ error.message }}
+          </a>
+          <span v-else>
+            {{ error.message }}
+          </span>
+        </div>
       </template>
     </div>
   </Panel>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index e34bfcee02..b2f1194e08 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -79,15 +79,12 @@
       id="errors"
       :title="
         pipeline.errors.some((e) => !e.is_warning)
-          ? '❌ ' +
-            $t('repo.pipeline.errors', {
-              count: pipeline.errors?.length,
-            })
-          : '⚠️ ' +
-            $t('repo.pipeline.warnings', {
-              count: pipeline.errors?.length,
-            })
+          ? $t('repo.pipeline.errors', { count: pipeline.errors?.length })
+          : $t('repo.pipeline.warnings', { count: pipeline.errors?.length })
       "
+      :icon="pipeline.errors.some((e) => !e.is_warning) ? 'linter-error' : 'linter-warn'"
+      :icon-clas="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
+      icon-class="text-wp-state-error-100"
     />
     <Tab id="config" :title="$t('repo.pipeline.config')" />
     <Tab

From 3a1e255bb0400217839eea6fe9f6af6f84609349 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 6 Nov 2023 16:54:58 +0100
Subject: [PATCH 2/5] add linter-warn

---
 web/components.d.ts                           |  1 +
 web/src/components/atomic/Icon.vue            |  4 +-
 web/src/components/layout/scaffold/Tabs.vue   |  2 +-
 .../views/repo/pipeline/PipelineErrors.vue    | 42 +++++++++----------
 .../views/repo/pipeline/PipelineWrapper.vue   |  3 +-
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index 642ebe71a2..c2416bf489 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
     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']
+    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']
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index a172d90a93..9f98fe194c 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -23,6 +23,7 @@
   <i-bi-slash-circle-fill v-else-if="name === 'status-skipped'" class="h-6 w-6" />
   <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
   <i-bi-x v-else-if="name === 'linter-error'" class="h-6 w-6" />
+  <i-bi-exclamation-triangle-fill v-else-if="name === 'linter-warn'" 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" />
@@ -96,7 +97,8 @@ export type IconNames =
   | 'refresh'
   | 'play'
   | 'pause'
-  | 'linter-error';
+  | 'linter-error'
+  | 'linter-warn';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 242b5640d5..4027b71caf 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -3,7 +3,7 @@
     <button
       v-for="tab in tabs"
       :key="tab.id"
-      class="w-full py-1 md:py-2 md:w-auto md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
+      class="gap-2 w-full py-1 md:py-2 md:w-auto md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :class="{
         'border-wp-text-100': activeTab === tab.id,
         'border-transparent': activeTab !== tab.id,
diff --git a/web/src/views/repo/pipeline/PipelineErrors.vue b/web/src/views/repo/pipeline/PipelineErrors.vue
index ecb74e2492..f67c3c6ab1 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -2,28 +2,26 @@
   <Panel>
     <div class="grid justify-center gap-2 text-left grid-3-1">
       <template v-for="(error, i) in pipeline.errors" :key="i">
-        <div class="flex items-center gap-4">
-          <Icon
-            :name="error.is_warning ? 'linter-warn' : 'linter-error'"
-            class="flex-shrink-0"
-            :class="{
-              'text-wp-state-warn-100': error.is_warning,
-              'text-wp-state-error-100': !error.is_warning,
-            }"
-          />
-          <span>[{{ error.type }}]</span>
-          <span v-if="isLinterError(error) || isDeprecationError(error)">
-            <span v-if="error.data?.file" class="font-bold">{{ error.data?.file }}: </span>
-            <span>{{ error.data?.field }}</span>
-          </span>
-          <span v-else />
-          <a v-if="isDeprecationError(error)" :href="error.data?.docs" target="_blank" class="underline">
-            {{ error.message }}
-          </a>
-          <span v-else>
-            {{ error.message }}
-          </span>
-        </div>
+        <Icon
+          :name="error.is_warning ? 'linter-warn' : 'linter-error'"
+          class="flex-shrink-0"
+          :class="{
+            'text-wp-state-warn-100': error.is_warning,
+            'text-wp-state-error-100': !error.is_warning,
+          }"
+        />
+        <span>[{{ error.type }}]</span>
+        <span v-if="isLinterError(error) || isDeprecationError(error)">
+          <span v-if="error.data?.file" class="font-bold">{{ error.data?.file }}: </span>
+          <span>{{ error.data?.field }}</span>
+        </span>
+        <span v-else />
+        <a v-if="isDeprecationError(error)" :href="error.data?.docs" target="_blank" class="underline">
+          {{ error.message }}
+        </a>
+        <span v-else>
+          {{ error.message }}
+        </span>
       </template>
     </div>
   </Panel>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index b2f1194e08..108b13ed82 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -83,8 +83,7 @@
           : $t('repo.pipeline.warnings', { count: pipeline.errors?.length })
       "
       :icon="pipeline.errors.some((e) => !e.is_warning) ? 'linter-error' : 'linter-warn'"
-      :icon-clas="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
-      icon-class="text-wp-state-error-100"
+      :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
     />
     <Tab id="config" :title="$t('repo.pipeline.config')" />
     <Tab

From dd711a2892a228c07036099d581fd5105df5ca53 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 6 Nov 2023 21:19:57 +0100
Subject: [PATCH 3/5] use same icon just change color

---
 web/components.d.ts                             |  1 +
 web/src/components/atomic/Icon.vue              |  6 ++----
 web/src/views/repo/pipeline/PipelineErrors.vue  | 17 +++++++++++------
 web/src/views/repo/pipeline/PipelineWrapper.vue |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index c2416bf489..015978f765 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
     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']
     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']
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index 9f98fe194c..a4c6b22a23 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -22,8 +22,7 @@
   <i-carbon-in-progress v-else-if="name === 'status-running' || name === 'status-started'" class="h-6 w-6" />
   <i-bi-slash-circle-fill v-else-if="name === 'status-skipped'" class="h-6 w-6" />
   <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
-  <i-bi-x v-else-if="name === 'linter-error'" class="h-6 w-6" />
-  <i-bi-exclamation-triangle-fill v-else-if="name === 'linter-warn'" class="h-5 w-5" />
+  <i-bi-exclamation-circle-fill v-else-if="name === 'linter-issue'" 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" />
@@ -97,8 +96,7 @@ export type IconNames =
   | 'refresh'
   | 'play'
   | 'pause'
-  | 'linter-error'
-  | 'linter-warn';
+  | 'linter-issue';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/views/repo/pipeline/PipelineErrors.vue b/web/src/views/repo/pipeline/PipelineErrors.vue
index f67c3c6ab1..13775b28e9 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -1,25 +1,30 @@
 <template>
   <Panel>
-    <div class="grid justify-center gap-2 text-left grid-3-1">
+    <div class="grid justify-center gap-x-4 text-left grid-3-1">
       <template v-for="(error, i) in pipeline.errors" :key="i">
         <Icon
-          :name="error.is_warning ? 'linter-warn' : 'linter-error'"
-          class="flex-shrink-0"
+          name="linter-issue"
+          class="flex-shrink-0 my-1"
           :class="{
             'text-wp-state-warn-100': error.is_warning,
             'text-wp-state-error-100': !error.is_warning,
           }"
         />
         <span>[{{ error.type }}]</span>
-        <span v-if="isLinterError(error) || isDeprecationError(error)">
+        <span v-if="isLinterError(error) || isDeprecationError(error)" class="whitespace-nowrap">
           <span v-if="error.data?.file" class="font-bold">{{ error.data?.file }}: </span>
           <span>{{ error.data?.field }}</span>
         </span>
         <span v-else />
-        <a v-if="isDeprecationError(error)" :href="error.data?.docs" target="_blank" class="underline">
+        <a
+          v-if="isDeprecationError(error)"
+          :href="error.data?.docs"
+          target="_blank"
+          class="underline col-span-full col-start-2 md:col-span-auto md:col-start-auto"
+        >
           {{ error.message }}
         </a>
-        <span v-else>
+        <span v-else class="col-span-full col-start-2 md:col-span-auto md:col-start-auto">
           {{ error.message }}
         </span>
       </template>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 108b13ed82..3cb0e50220 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -77,12 +77,12 @@
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
       id="errors"
+      icon="linter-issue"
       :title="
         pipeline.errors.some((e) => !e.is_warning)
           ? $t('repo.pipeline.errors', { count: pipeline.errors?.length })
           : $t('repo.pipeline.warnings', { count: pipeline.errors?.length })
       "
-      :icon="pipeline.errors.some((e) => !e.is_warning) ? 'linter-error' : 'linter-warn'"
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
     />
     <Tab id="config" :title="$t('repo.pipeline.config')" />

From 0011bddc33749c9b0e9e99e75b896d029eba2a04 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 6 Nov 2023 21:40:21 +0100
Subject: [PATCH 4/5] replace warning icon and fix wp icon on info page

---
 web/components.d.ts                                | 1 +
 web/src/components/admin/settings/AdminInfoTab.vue | 2 +-
 web/src/components/atomic/Icon.vue                 | 6 ++++--
 web/src/components/atomic/Warning.vue              | 5 +++--
 web/src/views/repo/pipeline/PipelineErrors.vue     | 2 +-
 web/src/views/repo/pipeline/PipelineWrapper.vue    | 2 +-
 6 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index 015978f765..37a76aec1a 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -31,6 +31,7 @@ declare module 'vue' {
     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']
diff --git a/web/src/components/admin/settings/AdminInfoTab.vue b/web/src/components/admin/settings/AdminInfoTab.vue
index e8f530c368..3b774f3a96 100644
--- a/web/src/components/admin/settings/AdminInfoTab.vue
+++ b/web/src/components/admin/settings/AdminInfoTab.vue
@@ -1,7 +1,7 @@
 <template>
   <Settings :title="$t('info')">
     <div class="flex flex-col items-center gap-4">
-      <WoodpeckerLogo class="w-48 h-48" />
+      <WoodpeckerLogo class="w-32 h-32 fill-wp-text-200" />
 
       <i18n-t keypath="running_version" tag="p" class="text-xl">
         <span class="font-bold">{{ version?.current }}</span>
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index a4c6b22a23..91d4d1656e 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -22,7 +22,8 @@
   <i-carbon-in-progress v-else-if="name === 'status-running' || name === 'status-started'" class="h-6 w-6" />
   <i-bi-slash-circle-fill v-else-if="name === 'status-skipped'" class="h-6 w-6" />
   <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
-  <i-bi-exclamation-circle-fill v-else-if="name === 'linter-issue'" class="h-5 w-5" />
+  <i-bi-exclamation-circle-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-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" />
@@ -96,7 +97,8 @@ export type IconNames =
   | 'refresh'
   | 'play'
   | 'pause'
-  | 'linter-issue';
+  | 'warning'
+  | 'attention';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/atomic/Warning.vue b/web/src/components/atomic/Warning.vue
index dba4776564..43384a8dcb 100644
--- a/web/src/components/atomic/Warning.vue
+++ b/web/src/components/atomic/Warning.vue
@@ -1,8 +1,9 @@
 <template>
   <div
-    class="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-sm text-gray-700 font-bold rounded-md border border-solid p-2 border-wp-hint-warn-200 bg-wp-hint-warn-100"
   >
-    ⚠ {{ text }}
+    <Icon name="warning" />
+    <span>{{ text }}</span>
   </div>
 </template>
 
diff --git a/web/src/views/repo/pipeline/PipelineErrors.vue b/web/src/views/repo/pipeline/PipelineErrors.vue
index 13775b28e9..349e528121 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -3,7 +3,7 @@
     <div class="grid justify-center gap-x-4 text-left grid-3-1">
       <template v-for="(error, i) in pipeline.errors" :key="i">
         <Icon
-          name="linter-issue"
+          name="attention"
           class="flex-shrink-0 my-1"
           :class="{
             'text-wp-state-warn-100': error.is_warning,
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 3cb0e50220..4f367a17ba 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -77,7 +77,7 @@
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
       id="errors"
-      icon="linter-issue"
+      icon="attention"
       :title="
         pipeline.errors.some((e) => !e.is_warning)
           ? $t('repo.pipeline.errors', { count: pipeline.errors?.length })

From 75178ae44d5d066dc43a6b07f0feeed8ace13f86 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Tue, 7 Nov 2023 14:59:00 +0100
Subject: [PATCH 5/5] switch back to triangle and use dynamic order

---
 web/src/components/atomic/Icon.vue          | 2 +-
 web/src/components/layout/scaffold/Tabs.vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index 91d4d1656e..5fa9fe8580 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -22,7 +22,7 @@
   <i-carbon-in-progress v-else-if="name === 'status-running' || name === 'status-started'" class="h-6 w-6" />
   <i-bi-slash-circle-fill v-else-if="name === 'status-skipped'" class="h-6 w-6" />
   <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
-  <i-bi-exclamation-circle-fill v-else-if="name === 'attention'" class="h-5 w-5" />
+  <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-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" />
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 4027b71caf..0120525951 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -3,7 +3,7 @@
     <button
       v-for="tab in tabs"
       :key="tab.id"
-      class="gap-2 w-full py-1 md:py-2 md:w-auto md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
+      class="w-full py-1 md:py-2 md:w-auto md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :class="{
         'border-wp-text-100': activeTab === tab.id,
         'border-transparent': activeTab !== tab.id,
@@ -13,8 +13,10 @@
     >
       <Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
-      <span>{{ tab.title }}</span>
-      <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
+      <span class="flex gap-2 items-center flex-row-reverse md:flex-row">
+        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
+        <span>{{ tab.title }}</span>
+      </span>
     </button>
   </div>
 </template>