From 4c2dbca2e9d6be4d89e9dc840f1c560586c9276f Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Wed, 8 Nov 2023 23:03:36 +0100
Subject: [PATCH] Replace linter icons to match theme (#2765)

@qwerty287 @anbraten What do you think about this approach? This way the
icons fit more into the existing design. I've also moved the icon in the
tab to the end as this looks IMO a bit better on mobile view, but open
for discussions.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/f56a9688-4ca2-4b7b-a053-3e74effe6976)
<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/93cd4dd6-4e22-4210-9fee-f8d134d3df42"
width=350> <img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/6128fec9-3dc5-4483-abde-5a911b236138"
width=350>

Alternative idea for errors:

<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/bee8b1ea-8d27-43cc-9fb1-2df0031d3551"
width=350>

Or just use one symbol and only change the color for errors/warnings?
---
 web/components.d.ts                           |  6 +++--
 .../admin/settings/AdminInfoTab.vue           |  2 +-
 web/src/components/atomic/Icon.vue            |  6 ++++-
 web/src/components/atomic/Warning.vue         |  5 +++--
 web/src/components/layout/scaffold/Tab.vue    |  5 +++++
 web/src/components/layout/scaffold/Tabs.vue   |  5 ++++-
 web/src/compositions/useTabs.ts               |  2 ++
 .../views/repo/pipeline/PipelineErrors.vue    | 22 ++++++++++++++-----
 .../views/repo/pipeline/PipelineWrapper.vue   | 12 ++++------
 9 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index d2cdd02957..37a76aec1a 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']
@@ -31,9 +30,13 @@ 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']
+    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']
@@ -83,7 +86,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/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 0ef345fa99..5fa9fe8580 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -22,6 +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-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" />
   <i-mdi-bitbucket v-else-if="name === 'bitbucket'" class="h-8 w-8" />
@@ -94,7 +96,9 @@ export type IconNames =
   | 'auto-scroll-off'
   | 'refresh'
   | 'play'
-  | 'pause';
+  | 'pause'
+  | '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/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..0120525951 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -13,7 +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>
+      <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>
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..349e528121 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -1,18 +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">
-        <span>{{ error.is_warning ? '⚠️' : '❌' }}</span>
+        <Icon
+          name="attention"
+          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 ml-4">
+        <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 class="ml-4">
+        <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 e34bfcee02..4f367a17ba 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -77,17 +77,13 @@
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
       id="errors"
+      icon="attention"
       :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-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