Refactor icons: harmonize contextually, use filled status icons

web/src/components/atomic/Button.vue

@@ -15,7 +15,7 @@
     :disabled="disabled"
   >
     <slot>
-      <Icon v-if="startIcon" :name="startIcon" class="!w-6 !h-6" :class="{ invisible: isLoading, 'mr-1': text }" />
+      <Icon v-if="startIcon" :name="startIcon" class="!w-5 !h-5" :class="{ invisible: isLoading, 'mr-1': text }" />
       <span :class="{ invisible: isLoading }">{{ text }}</span>
       <Icon v-if="endIcon" :name="endIcon" class="ml-2 w-6 h-6" :class="{ invisible: isLoading }" />
       <div

web/src/components/atomic/Error.vue

@@ -2,7 +2,7 @@
   <div
     class="flex items-center gap-2 border-wp-error-300 dark:border-wp-error-300 bg-wp-error-100 dark:bg-wp-error-200 p-2 border border-l-6 border-solid rounded-md text-white"
   >
-    <Icon v-if="!textOnly" name="error" />
+    <Icon v-if="!textOnly" name="alert" />
     <slot>
       <span class="whitespace-pre">{{ text }}</span>
     </slot>

web/src/components/atomic/Icon.vue

@@ -1,6 +1,6 @@
 <!-- cSpell:ignore radiobox timelapse -->
 <template>
-  <SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="1.3rem" />
+  <SvgIcon v-if="name === 'duration'" :path="mdiTimerOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="1.3rem" />
   <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="1.3rem" />
@@ -10,16 +10,17 @@
   <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="1.3rem" />
   <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="1.3rem" />
   <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="32" />
-  <SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="32" />
-  <SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="32" />
+  <SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'settings-outline'" :path="mdiCogOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircle" size="1.3rem" />
   <SvgIcon
     v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
     type="mdi"
-    :path="mdiCloseCircleOutline"
+    :path="mdiCloseCircle"
     size="1.3rem"
   />
   <SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="1.3rem" />
@@ -29,34 +30,32 @@
     :path="mdiRadioboxIndeterminateVariant"
     size="1.3rem"
   />
-  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'gitlab'" :path="mdiGitlab" size="32" />
-  <SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="32" />
-  <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'alert'" :path="mdiAlertCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircle" size="1.3rem" />
   <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="1.3rem" />
   <SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'heal'" :path="mdiWrenchCogOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="1.3rem" />
   <SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencilOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiEyeOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiEyeOffOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="1.3rem" />
   <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'play-outline'" :path="mdiPlayOutline" size="1.3rem" />
 
   <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="1.3rem" />
 
-  <SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
-  <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
+  <SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'gitlab'" :path="mdiGitlab" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="1.3" />
 
   <svg v-else-if="name === 'spinner'" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path
@@ -84,35 +83,33 @@
 <script lang="ts" setup>
 import {
   mdiAlarm,
-  mdiAlert,
   mdiAlertCircle,
-  mdiAlertOutline,
   mdiArrowLeft,
-  mdiBandage,
   mdiBitbucket,
-  mdiCheckCircleOutline,
+  mdiCheckCircle,
   mdiChevronRight,
   mdiClockTimeEightOutline,
-  mdiClose,
-  mdiCloseCircleOutline,
+  mdiCloseCircle,
   mdiCog,
-  mdiDownload,
-  mdiDownloadCircle,
-  mdiDownloadOff,
+  mdiCogOutline,
+  mdiDownloadOutline,
+  mdiEyeOffOutline,
+  mdiEyeOutline,
   mdiFormatListBulleted,
   mdiGestureTap,
   mdiGit,
   mdiGithub,
   mdiGitlab,
-  mdiHelpCircleOutline,
+  mdiHelpCircle,
   mdiLockOpenOutline,
   mdiLockOutline,
-  mdiMinusCircleOutline,
+  mdiMinusCircle,
   mdiPackageVariant,
   mdiPause,
-  mdiPencil,
+  mdiPencilOutline,
   mdiPlay,
-  mdiPlayCircleOutline,
+  mdiPlayCircle,
+  mdiPlayOutline,
   mdiPlus,
   mdiPower,
   mdiRadioboxBlank,
@@ -121,10 +118,11 @@ import {
   mdiSourceCommit,
   mdiSourceMerge,
   mdiSourcePull,
-  mdiStopCircleOutline,
+  mdiStopCircle,
   mdiTagOutline,
-  mdiTimelapse,
+  mdiTimerOutline,
   mdiTrashCanOutline,
+  mdiWrenchCogOutline,
 } from '@mdi/js';
 import { siForgejo, siGitea } from 'simple-icons';
 
@@ -144,6 +142,7 @@ export type IconNames =
   | 'github'
   | 'repo'
   | 'settings'
+  | 'settings-outline'
   | 'trash'
   | 'status-blocked'
   | 'status-declined'
@@ -174,14 +173,11 @@ export type IconNames =
   | 'download'
   | 'auto-scroll'
   | 'auto-scroll-off'
-  | 'refresh'
   | 'play'
+  | 'play-outline'
   | 'pause'
-  | 'warning'
-  | 'attention'
+  | 'alert'
   | 'spinner'
-  | 'error'
-  | 'remove'
   | 'visibility-private'
   | 'visibility-internal';
 

web/src/components/atomic/Warning.vue

@@ -2,7 +2,7 @@
   <div
     class="flex gap-4 items-center text-gray-700 font-bold rounded-md p-4 border border-solid border-l-6 border-wp-hint-warn-200 bg-wp-hint-warn-100"
   >
-    <Icon v-if="!textOnly" name="warning" class="flex-shrink-0" />
+    <Icon v-if="!textOnly" name="alert" class="flex-shrink-0" />
     <slot>
       <span class="whitespace-pre-wrap">{{ text }}</span>
     </slot>

web/src/components/form/KeyValueEditor.vue

@@ -26,7 +26,7 @@
           :title="deleteTitle"
           @click="deleteItem(index)"
         >
-          <Icon name="remove" />
+          <Icon name="close" />
         </Button>
       </div>
     </div>

web/src/components/layout/scaffold/Header.vue

@@ -1,10 +1,10 @@
 <template>
   <header
-    class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-300 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
-      <div class="flex w-full md:items-center flex-col py-3 gap-2 md:gap-10 md:flex-row md:justify-between">
+      <div class="flex md:flex-row flex-col md:justify-between md:items-center gap-2 md:gap-10 py-3 w-full">
         <div
           class="flex items-center content-start min-h-10"
           :class="{
@@ -18,7 +18,7 @@
             class="flex-shrink-0 mr-2 <md:hidden md:justify-between w-8 h-8"
             @click="goBack"
           />
-          <h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
+          <h1 class="flex items-center gap-x-2 min-w-0 text-wp-text-100 text-xl">
             <slot name="title" />
           </h1>
         </div>
@@ -32,7 +32,7 @@
         />
         <div
           v-if="$slots.headerActions"
-          class="flex items-center md:justify-end gap-x-2 min-w-0"
+          class="flex md:justify-end items-center gap-x-2 min-w-0"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
@@ -41,9 +41,9 @@
         </div>
       </div>
 
-      <div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
+      <div v-if="enableTabs" class="flex md:flex-row flex-col md:justify-between md:items-center py-2 md:py-0">
         <Tabs class="<md:order-2" />
-        <div v-if="$slots.headerActions" class="flex content-start md:justify-end">
+        <div v-if="$slots.headerActions" class="flex md:justify-end content-start">
           <slot name="tabActions" />
         </div>
       </div>

web/src/views/admin/AdminOrgs.vue

@@ -14,7 +14,7 @@
           :to="{ name: 'org', params: { orgId: org.id } }"
         />
         <IconButton
-          icon="settings"
+          icon="settings-outline"
           :title="$t('admin.settings.orgs.org_settings')"
           class="w-8 h-8"
           :to="{ name: 'org-settings', params: { orgId: org.id } }"

web/src/views/admin/AdminQueue.vue

@@ -12,9 +12,10 @@
           <Button v-else :text="$t('admin.settings.queue.pause')" start-icon="pause" @click="pauseQueue" />
           <Icon
             :name="queueInfo.paused ? 'pause' : 'play'"
+            class="w-6 h-6"
             :class="{
               'text-wp-error-100': queueInfo.paused,
-              'text-wp-state-ok-100': !queueInfo.paused,
+              'text-wp-text-100': !queueInfo.paused,
             }"
           />
         </div>

web/src/views/admin/AdminRepos.vue

@@ -16,7 +16,7 @@
         class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
       >
         <span>{{ repo.full_name }}</span>
-        <div class="ml-auto flex items-center">
+        <div class="flex items-center ml-auto">
           <Badge v-if="!repo.active" class="<md:hidden mr-2" :label="$t('admin.settings.repos.disabled')" />
           <IconButton
             icon="chevron-right"
@@ -25,7 +25,7 @@
             :to="{ name: 'repo', params: { repoId: repo.id } }"
           />
           <IconButton
-            icon="settings"
+            icon="settings-outline"
             :title="$t('admin.settings.repos.settings')"
             class="w-8 h-8"
             :to="{ name: 'repo-settings', params: { repoId: repo.id } }"

web/src/views/repo/pipeline/PipelineErrors.vue

@@ -6,7 +6,7 @@
           <div class="grid grid-cols-[minmax(10rem,auto),3fr]">
             <span class="flex items-center gap-x-2">
               <Icon
-                name="attention"
+                name="alert"
                 class="flex-shrink-0 my-1"
                 :class="{
                   'text-wp-state-warn-100': error.is_warning,

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -77,7 +77,7 @@
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
       :to="{ name: 'repo-pipeline-errors' }"
-      icon="attention"
+      icon="alert"
       :title="pipeline.errors.some((e) => !e.is_warning) ? $t('repo.pipeline.errors') : $t('repo.pipeline.warnings')"
       :count="pipeline.errors?.length"
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-error-100' : 'text-wp-state-warn-100'"

web/src/views/repo/settings/Crons.vue

@@ -28,7 +28,12 @@
           </span>
           <span v-else class="col-span-2 <md:hidden">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
         </span>
-        <IconButton icon="play" class="ml-auto w-8 h-8" :title="$t('repo.settings.crons.run')" @click="runCron(cron)" />
+        <IconButton
+          icon="play-outline"
+          class="ml-auto w-8 h-8"
+          :title="$t('repo.settings.crons.run')"
+          @click="runCron(cron)"
+        />
         <IconButton icon="edit" class="w-8 h-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
         <IconButton
           icon="trash"