From 7109f3c6d1c558e858c5672b4156d38a79753b4b Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Tue, 26 Nov 2024 20:02:29 +0100
Subject: [PATCH] Change default icon size to 20 (#4458)

Co-authored-by: Patrick Schratz <patrick.schratz@gmail.com>
---
 web/src/components/atomic/Icon.vue            | 68 +++++++++----------
 web/src/components/layout/scaffold/Header.vue |  2 +-
 web/src/components/layout/scaffold/Tabs.vue   |  3 +-
 web/src/components/repo/RepoItem.vue          |  2 +-
 .../repo/pipeline/PipelineStatusIcon.vue      |  1 +
 web/src/views/repo/pipeline/Pipeline.vue      |  6 +-
 6 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index b4aa185cd..2c43236aa 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -1,56 +1,56 @@
 <!-- cSpell:ignore radiobox timelapse -->
 <template>
-  <SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="24" />
-  <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="24" />
-  <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="24" />
-  <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="24" />
-  <SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="24" />
-  <SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="24" />
-  <SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="24" />
-  <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="24" />
-  <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="24" />
-  <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="24" />
+  <SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="20" />
+  <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="20" />
+  <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="20" />
+  <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="20" />
+  <SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="20" />
+  <SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="20" />
+  <SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="20" />
+  <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="20" />
+  <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="20" />
+  <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="20" />
   <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 === 'trash'" :path="mdiTrashCanOutline" size="24" />
-  <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="24" />
-  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="24" />
+  <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="20" />
+  <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="20" />
+  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="20" />
   <SvgIcon
     v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
     type="mdi"
     :path="mdiCloseCircleOutline"
-    size="24"
+    size="20"
   />
-  <SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="24" />
+  <SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="20" />
   <SvgIcon
     v-else-if="name === 'status-running' || name === 'status-started'"
     type="mdi"
     :path="mdiRadioboxIndeterminateVariant"
-    size="24"
+    size="20"
   />
-  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="24" />
-  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="24" />
-  <SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="24" />
+  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="20" />
+  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="20" />
+  <SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="20" />
   <SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="20" />
   <SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="20" />
   <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="24" />
-  <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="24" />
-  <SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="24" />
-  <SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="24" />
-  <SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="24" />
-  <SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="24" />
-  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="24" />
-  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="24" />
-  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="24" />
-  <SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="24" />
-  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="24" />
-  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="24" />
-  <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="24" />
-  <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="24" />
-  <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="24" />
+  <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="20" />
+  <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="20" />
+  <SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="20" />
+  <SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="20" />
+  <SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="20" />
+  <SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="20" />
+  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="20" />
+  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="20" />
+  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="20" />
+  <SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="20" />
+  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="20" />
+  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="20" />
+  <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="20" />
+  <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="20" />
+  <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="20" />
 
   <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="24" />
   <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="24" />
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index aa9b7209a..0ef303579 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -6,7 +6,7 @@
     <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 items-center content-start"
+          class="flex items-center content-start min-h-10"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index f6b99de46..8ac61e538 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -13,13 +13,12 @@
         v-if="isExactActive || (isActive && tab.matchChildren)"
         name="chevron-right"
         class="md:hidden flex-shrink-0"
-        size="20"
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
         class="flex gap-2 items-center md:justify-center flex-row py-1 px-2 w-full min-w-20 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 rounded-md"
       >
-        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" size="20" />
+        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>
         <CountBadge v-if="tab.count" :value="tab.count" />
       </span>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 5557077a7..3085ea197 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -29,7 +29,7 @@
           </div>
 
           <div class="flex flex-shrink-0 gap-x-1 items-center ml-auto">
-            <Icon name="since" size="20" />
+            <Icon name="since" />
             <span>{{ since }}</span>
           </div>
         </template>
diff --git a/web/src/components/repo/pipeline/PipelineStatusIcon.vue b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
index 8b4bd283e..eec6d1b73 100644
--- a/web/src/components/repo/pipeline/PipelineStatusIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
@@ -5,6 +5,7 @@
   >
     <Icon
       :name="service ? 'settings' : `status-${status}`"
+      size="24"
       :class="{
         'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
         'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index c7e734a3e..1d640e15d 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -11,7 +11,7 @@
         <Container v-if="pipeline!.errors?.some((e) => !e.is_warning)" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center text-center gap-4">
-              <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" />
+              <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" size="24" />
               <span class="text-xl">{{ $t('repo.pipeline.we_got_some_errors') }}</span>
               <Button color="red" :text="$t('repo.pipeline.show_errors')" :to="{ name: 'repo-pipeline-errors' }" />
             </div>
@@ -21,7 +21,7 @@
         <Container v-else-if="pipeline!.status === 'blocked'" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
-              <Icon name="status-blocked" class="w-16 h-16" />
+              <Icon name="status-blocked" size="24" class="w-16 h-16" />
               <span class="text-xl">{{ $t('repo.pipeline.protected.awaits') }}</span>
               <div v-if="repoPermissions!.push" class="flex gap-2 flex-wrap items-center justify-center">
                 <Button
@@ -44,7 +44,7 @@
         <Container v-else-if="pipeline!.status === 'declined'" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
-              <Icon name="status-declined" class="w-16 h-16 text-wp-state-error-100" />
+              <Icon name="status-declined" size="24" class="w-16 h-16 text-wp-state-error-100" />
               <p class="text-xl">{{ $t('repo.pipeline.protected.declined') }}</p>
             </div>
           </Panel>