Merge pull request #1498 from cloud-pi-native/refactor/uniform-icons

refactor: 💄 uniformize icons
cloud-pi-native · Jan 9, 2025 · 2bd65af · 2bd65af
2 parents f5bbb9f + 8dd1f8a
commit 2bd65af
Show file tree

Hide file tree

Showing 17 changed files with 47 additions and 55 deletions.
diff --git a/apps/client/scripts/icons.js b/apps/client/scripts/icons.js
@@ -6,63 +6,61 @@ import { icons as riCollection } from '@iconify-json/ri'
  */
 const riIconNames = [
   'account-circle-line',
-  'add-fill',
   'add-line',
   'admin-line',
-  'alert-fill',
-  'archive-fill',
+  'alert-line',
+  'archive-line',
   'arrow-drop-left-line',
   'arrow-drop-right-line',
   'arrow-go-back-line',
-  'arrow-left-double-fill',
-  'arrow-right-double-fill',
+  'arrow-left-double-line',
   'arrow-right-double-line',
   'arrow-right-s-line',
   'arrow-up-s-line',
   'award-line',
   'building-line',
-  'check-fill',
+  'check-line',
   'checkbox-blank-circle-fill',
   'checkbox-circle-line',
   'clipboard-line',
   'close-line',
   'dashboard-line',
   'delete-bin-7-line',
   'exchange-line',
-  'eye-fill',
   'eye-line',
-  'eye-off-fill',
   'eye-off-line',
-  'filter-fill',
   'file-download-line',
-  'filter-off-fill',
+  'filter-line',
+  'filter-off-line',
   'flow-chart',
   'focus-3-line',
   'folder-user-line',
   'folders-line',
   'git-branch-line',
-  'github-fill',
+  'git-merge-line',
+  'github-line',
   'heart-pulse-line',
   'key-2-line',
   'key-2-line',
   'loader-4-line',
-  'lock-fill',
-  'lock-unlock-fill',
+  'lock-line',
+  'lock-unlock-line',
   'mail-line',
   'microsoft-line',
   'moon-clear-line',
   'newspaper-line',
-  'pencil-fill',
-  'refresh-fill',
+  'pencil-line',
+  'refresh-line',
   'restart-line',
   'send-plane-line',
   'server-line',
   'settings-3-line',
+  'shield-check-line',
   'sound-module-line',
   'stock-line',
   'sun-line',
   'team-line',
-  'tools-fill',
+  'tools-line',
   'upload-cloud-line',
   'user-add-line',
   'user-shared-2-line',

diff --git a/apps/client/src/components/ClusterForm.vue b/apps/client/src/components/ClusterForm.vue
@@ -231,14 +231,8 @@ const isConnectionDetailsShown = ref(true)
         Informations de connexion (kubeconfig)
       </h4>
       <v-icon
-        v-if="isConnectionDetailsShown"
         name="ri:arrow-right-s-line"
-        class="shrink ml-4 rotate-90"
-      />
-      <v-icon
-        v-else
-        name="ri:arrow-right-s-line"
-        class="shrink ml-4"
+        :class="`shrink ml-4 ${isConnectionDetailsShown ? 'rotate-90' : ''}`"
       />
     </div>
     <template

diff --git a/apps/client/src/components/LogsViewer.vue b/apps/client/src/components/LogsViewer.vue
@@ -77,7 +77,7 @@ async function showLogs(index: number) {
         :title="hideLogDetails ? 'Afficher les logs en entier' : 'Masquer les clés non essentielles des logs'"
         secondary
         icon-only
-        :icon="hideLogDetails ? 'ri:filter-off-fill' : 'ri:filter-fill'"
+        :icon="hideLogDetails ? 'ri:filter-off-line' : 'ri:filter-line'"
         @click="hideLogDetails = !hideLogDetails"
       />
       <DsfrButton
@@ -86,7 +86,7 @@ async function showLogs(index: number) {
         :title="hideLogs ? 'Afficher les logs' : 'Masquer les logs'"
         secondary
         icon-only
-        :icon="hideLogs ? 'ri:eye-off-fill' : 'ri:eye-fill'"
+        :icon="hideLogs ? 'ri:eye-off-line' : 'ri:eye-line'"
         @click="hideLogs = !hideLogs"
       />
       <DsfrButton
@@ -96,7 +96,7 @@ async function showLogs(index: number) {
         secondary
         icon-only
         :disabled="isUpdating"
-        :icon="{ name: 'ri:refresh-fill', animation: isUpdating ? 'spin' : '' }"
+        :icon="{ name: 'ri:refresh-line', animation: isUpdating ? 'spin' : '' }"
         @click="showLogs(page)"
       />
     </div>

diff --git a/apps/client/src/components/PaginationCt.vue b/apps/client/src/components/PaginationCt.vue
@@ -25,7 +25,7 @@ const currentStart = computed(() => Math.floor(props.page * props.step))
       class="flex gap-2"
     >
       <DsfrButton
-        icon="ri:arrow-left-double-fill"
+        icon="ri:arrow-left-double-line"
         :icon-only="true"
         title="Voir la première page"
         :disabled="page <= 0"

diff --git a/apps/client/src/components/ProjectBanner.vue b/apps/client/src/components/ProjectBanner.vue
@@ -64,7 +64,7 @@ function saveDescription() {
           label="Enregistrer la description"
           secondary
           :icon="project.operationsInProgress.includes('update')
-            ? { name: 'ri:refresh-fill', animation: 'spin' }
+            ? { name: 'ri:refresh-line', animation: 'spin' }
             : 'ri:send-plane-line'"
           :disabled="project.operationsInProgress.includes('update')"
           @click="saveDescription"
@@ -96,7 +96,7 @@ function saveDescription() {
       <DsfrButton
         v-if="canEditDescription"
         class="fr-mt-0"
-        icon="ri:pencil-fill"
+        icon="ri:pencil-line"
         data-testid="setDescriptionBtn"
         :title="getDynamicTitle(project.locked, project.description)"
         icon-only

diff --git a/apps/client/src/components/ReplayButton.vue b/apps/client/src/components/ReplayButton.vue
@@ -40,7 +40,7 @@ async function replayHooks() {
     <DsfrButton
       data-testid="replayHooksBtn"
       label="Reprovisionner le projet"
-      :icon="{ name: 'ri:refresh-fill', animation: operationsInProgress.includes('replay') ? 'spin' : '' }"
+      :icon="{ name: 'ri:refresh-line', animation: operationsInProgress.includes('replay') ? 'spin' : '' }"
       secondary
       :disabled="project.locked || operationsInProgress.includes('replay')"
       @click="replayHooks"

diff --git a/apps/client/src/components/SelectProject.vue b/apps/client/src/components/SelectProject.vue
@@ -85,7 +85,7 @@ function selectProject(id: string) {
       :class="`create-project ${projectStore.myProjects.length ? 'w-15' : ''}`"
       type="buttonType"
       secondary
-      icon="ri:add-fill"
+      icon="ri:add-line"
       :icon-only="!!projectStore.myProjects.length"
       :label="!projectStore.myProjects.length ? 'Créer un nouveau projet' : ''"
       small

diff --git a/apps/client/src/components/SideMenu.vue b/apps/client/src/components/SideMenu.vue
@@ -377,7 +377,7 @@ onMounted(() => {
               :active="routeName === 'SystemSettings'"
               to="/admin/system-settings"
             >
-              <v-icon name="ri:tools-fill" />
+              <v-icon name="ri:tools-line" />
               Réglages console
             </DsfrSideMenuLink>
           </DsfrSideMenuListItem>

diff --git a/apps/client/src/components/TokenForm.vue b/apps/client/src/components/TokenForm.vue
@@ -148,7 +148,7 @@ const schema = computed(() => {
         label="Enregistrer"
         secondary
         :icon="isCreatingToken
-          ? { name: 'ri:refresh-fill', animation: 'spin' }
+          ? { name: 'ri:refresh-line', animation: 'spin' }
           : 'ri:send-plane-line'"
         :disabled="!schema.success || !!invalidExpirationDate || isCreatingToken || (mandatoryExpiration && !newToken.expirationDate)"
         class="mr-5"

diff --git a/apps/client/src/icon-collections.ts b/apps/client/src/icon-collections.ts
diff --git a/apps/client/src/views/CreateProject.vue b/apps/client/src/views/CreateProject.vue
@@ -164,7 +164,7 @@ onMounted(async () => {
       class="fr-mt-2w"
       :disabled="!project.organizationId || !!errorSchema || buttonState.isCreating"
       :icon="buttonState.isCreating
-        ? { name: 'ri:refresh-fill', animation: 'spin' }
+        ? { name: 'ri:refresh-line', animation: 'spin' }
         : 'ri:send-plane-line'"
       @click="createProject()"
     />

diff --git a/apps/client/src/views/DsoHome.vue b/apps/client/src/views/DsoHome.vue
@@ -26,15 +26,15 @@ const tabListName: string = 'benefitsTab'
 const tabTitles: Array<TabTitle> = [
   {
     title: 'Qualité',
-    icon: 'ri:award-fill',
+    icon: 'ri:award-line',
   },
   {
     title: 'Déploiement continu',
-    icon: 'ri:git-merge-fill',
+    icon: 'ri:git-merge-line',
   },
   {
     title: 'Sécurité',
-    icon: 'ri:shield-check-fill',
+    icon: 'ri:shield-check-line',
   },
 ]
 const tabContents: Array<string> = [
@@ -122,7 +122,7 @@ function setWindowLocation(to: string) {
           class="w-full justify-center"
           secondary
           :title="ghFormationUrl"
-          icon="ri:github-fill"
+          icon="ri:github-line"
           @click="setWindowLocation(ghFormationUrl)"
         />
       </div>

diff --git a/apps/client/src/views/DsoMaintenance.vue b/apps/client/src/views/DsoMaintenance.vue
@@ -20,7 +20,7 @@ function setWindowLocation(to: string) {
   <DsfrCallout
     title="Maintenance"
     content="La console Cloud π Native est actuellement en maintenance. À très vite !"
-    icon="ri:tools-fill"
+    icon="ri:tools-line"
   />
 
   <DsfrButton

diff --git a/apps/client/src/views/ServicesHealth.vue b/apps/client/src/views/ServicesHealth.vue
@@ -34,9 +34,9 @@ onBeforeMount(async () => {
       title="Renouveler l'appel"
       secondary
       icon-only
-      icon="ri:refresh-fill"
+      icon="ri:refresh-line"
       :disabled="!!isUpdating"
-      @click="checkServicesHealth()"
+      @click="checkServicesHealth"
     />
   </div>
   <div

diff --git a/apps/client/src/views/admin/AdminProject.vue b/apps/client/src/views/admin/AdminProject.vue
@@ -182,7 +182,7 @@ async function getProjectLogs({ offset, limit }: { offset: number, limit: number
         title="Rafraîchir la liste des projets"
         secondary
         icon-only
-        icon="ri:refresh-fill"
+        icon="ri:refresh-line"
         :disabled="snackbarStore.isWaitingForResponse"
         @click="async() => {
           await getProjectDetails()
@@ -228,7 +228,7 @@ async function getProjectLogs({ offset, limit }: { offset: number, limit: number
           <DsfrButton
             data-testid="replayHooksBtn"
             label="Reprovisionner le projet"
-            :icon="{ name: 'ri:refresh-fill', animation: project.operationsInProgress.includes('replay') ? 'spin' : undefined }"
+            :icon="{ name: 'ri:refresh-line', animation: project.operationsInProgress.includes('replay') ? 'spin' : undefined }"
             :disabled="project.operationsInProgress.includes('replay') || project.locked"
             secondary
             @click="replayHooks()"
@@ -237,8 +237,8 @@ async function getProjectLogs({ offset, limit }: { offset: number, limit: number
             data-testid="handleProjectLockingBtn"
             :label="`${project.locked ? 'Déverrouiller' : 'Verrouiller'} le projet`"
             :icon="project.operationsInProgress.includes('lockHandling')
-              ? { name: 'ri:refresh-fill', animation: 'spin' }
-              : project.locked ? 'ri:lock-unlock-fill' : 'ri:lock-fill'"
+              ? { name: 'ri:refresh-line', animation: 'spin' }
+              : project.locked ? 'ri:lock-unlock-line' : 'ri:lock-line'"
             :disabled="project.operationsInProgress.includes('lockHandling') || project.status === 'archived'"
             secondary
             @click="handleProjectLocking"
@@ -250,7 +250,7 @@ async function getProjectLogs({ offset, limit }: { offset: number, limit: number
             secondary
             :disabled="project.operationsInProgress.includes('delete') || project.locked"
             :icon="project.operationsInProgress.includes('delete')
-              ? { name: 'ri:refresh-fill', animation: 'spin' }
+              ? { name: 'ri:refresh-line', animation: 'spin' }
               : 'ri:delete-bin-7-line'"
             @click="isArchivingProject = true"
           />
@@ -276,7 +276,7 @@ async function getProjectLogs({ offset, limit }: { offset: number, limit: number
               secondary
               :disabled="project.operationsInProgress.includes('delete') || projectToArchive !== project.name"
               :icon="project.operationsInProgress.includes('delete')
-                ? { name: 'ri:refresh-fill', animation: 'spin' }
+                ? { name: 'ri:refresh-line', animation: 'spin' }
                 : 'ri:delete-bin-7-line'"
               @click="archiveProject"
             />

diff --git a/apps/client/src/views/projects/DsoDashboard.vue b/apps/client/src/views/projects/DsoDashboard.vue
@@ -120,7 +120,7 @@ onMounted(() => {
         :label="`${isSecretShown ? 'Cacher' : 'Afficher'} les secrets des services`"
         secondary
         :icon="project.operationsInProgress.includes('searchSecret')
-          ? { name: 'ri:refresh-fill', animation: 'spin' }
+          ? { name: 'ri:refresh-line', animation: 'spin' }
           : isSecretShown ? 'ri:eye-off-line' : 'ri:eye-line'"
         :disabled="project.operationsInProgress.includes('searchSecret')"
         @click="handleSecretDisplay"
@@ -200,7 +200,7 @@ onMounted(() => {
             :disabled="projectToArchive !== project.name || project.operationsInProgress.includes('delete')"
             secondary
             :icon="project.operationsInProgress.includes('delete')
-              ? { name: 'ri:refresh-fill', animation: 'spin' }
+              ? { name: 'ri:refresh-line', animation: 'spin' }
               : 'ri:delete-bin-7-line'"
             @click="archiveProject"
           />

diff --git a/packages/shared/src/utils/const.ts b/packages/shared/src/utils/const.ts
@@ -88,15 +88,15 @@ export const statusDict = {
     false: {
       testId: 'unlocked-badge',
       type: 'success',
-      icon: 'ri:lock-unlock-fill',
+      icon: 'ri:lock-unlock-line',
       wording: 'déverrouillé',
       animation: '',
       color: 'var(--success-425-625)',
     },
     true: {
       testId: 'locked-badge',
       type: 'warning',
-      icon: 'ri:lock-fill',
+      icon: 'ri:lock-line',
       wording: 'verrouillé',
       animation: '',
       color: 'var(--warning-425-625)',
@@ -106,7 +106,7 @@ export const statusDict = {
     created: {
       testId: 'created-badge',
       type: 'success',
-      icon: 'ri:check-fill',
+      icon: 'ri:check-line',
       wording: 'opérations réussies',
       animation: '',
       color: 'var(--success-425-625)',
@@ -130,15 +130,15 @@ export const statusDict = {
     archived: {
       testId: 'archived-badge',
       type: 'info',
-      icon: 'ri:archive-fill',
+      icon: 'ri:archive-line',
       wording: 'archivé',
       animation: '',
       color: 'var(--text-mention-grey)',
     },
     warning: {
       testId: 'warning-badge',
       type: 'warning',
-      icon: 'ri:alert-fill',
+      icon: 'ri:alert-line',
       wording: 'partiellement dégradé',
       animation: '',
       color: 'var(--warning-425-625)',