Replace linter icons to match theme

web/components.d.ts

@@ -23,17 +23,20 @@ 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']
     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']
@@ -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']

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>

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;

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>
 

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

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>

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({

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>

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