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 d2cdd0295..37a76aec1 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 e8f530c36..3b774f3a9 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 0ef345fa9..5fa9fe858 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 dba477656..43384a8dc 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 906082014..8fce1b2ba 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 e9ac69d05..012052595 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 234f392cd..82a7d690a 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 46a268357..349e52812 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 e34bfcee0..4f367a17b 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