From 9442e9c6b559d6bd4f8f13ddd1b5463eeb6a9f0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Tue, 7 Jan 2025 15:59:52 +0100
Subject: [PATCH] ux: adjust icon size, margins

---
 frontend/src/components/Header/SmallHeader.tsx          | 2 +-
 frontend/src/components/Header/small-header.module.scss | 7 +++++++
 frontend/src/dsfr-fix.scss                              | 4 ++++
 frontend/src/models/UserNavItem.tsx                     | 2 +-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Header/SmallHeader.tsx b/frontend/src/components/Header/SmallHeader.tsx
index 00427fc86..5694e3001 100644
--- a/frontend/src/components/Header/SmallHeader.tsx
+++ b/frontend/src/components/Header/SmallHeader.tsx
@@ -42,7 +42,7 @@ function SmallHeader() {
       linkProps: {
         to: link.url
       },
-      text: <><span className={link.icon} aria-hidden="true"></span> {link.label} {link.showNewBadge && <Badge small={true} severity='success' noIcon={true} className="fr-ml-1w">Nouveau</Badge>}</>,
+      text: <><span className={`${link.icon} ${styles.icon}`} aria-hidden="true"></span>{link.label}{link.showNewBadge && <Badge small={true} severity='success' noIcon={true} className="fr-ml-1w fr-mr-0w">Nouveau</Badge>}</>,
       isActive: location.pathname.startsWith(link.url),
     };
   }
diff --git a/frontend/src/components/Header/small-header.module.scss b/frontend/src/components/Header/small-header.module.scss
index b32820fc1..44e113369 100644
--- a/frontend/src/components/Header/small-header.module.scss
+++ b/frontend/src/components/Header/small-header.module.scss
@@ -19,3 +19,10 @@
   height: 2px;
   z-index: 1000;
 }
+
+.icon::before {
+  --icon-size: 1.25rem;
+  margin-right: 0.5rem;
+  position: relative;
+  top: -2px;
+}
diff --git a/frontend/src/dsfr-fix.scss b/frontend/src/dsfr-fix.scss
index b72c239a5..7d7802edc 100644
--- a/frontend/src/dsfr-fix.scss
+++ b/frontend/src/dsfr-fix.scss
@@ -110,3 +110,7 @@ span.fr-icon-checkbox-circle-line.ds-fr-tag-icon {
     }
   }
 }
+
+.fr-nav__list > :first-child:nth-last-child(4) ~ * {
+  margin-left: 0px;
+}
diff --git a/frontend/src/models/UserNavItem.tsx b/frontend/src/models/UserNavItem.tsx
index 6b71ad431..28ac04de4 100644
--- a/frontend/src/models/UserNavItem.tsx
+++ b/frontend/src/models/UserNavItem.tsx
@@ -21,7 +21,7 @@ export const getUserNavItem = (userNavItem: UserNavItems): UserNavItem => {
     case UserNavItems.Resources:
       return { url: '/ressources', label: 'Ressources', icon: 'fr-icon-information-line' };
     case UserNavItems.Analysis:
-      return { url: '/analyses', label: 'Analyses', showNewBadge: true, icon: 'fr-icon-bar-chart-box-line' };
+      return { url: '/analyses', label: 'Analyses', showNewBadge: true, icon: 'ri-bar-chart-2-line' };
     default:
       return { url: '/', label: 'Accueil', icon: 'fr-icon-building-line' };
   }