ux: adjust icon size, margins

MTES-MCT · Jan 9, 2025 · c2ad80e · c2ad80e
1 parent cc5cf48
commit c2ad80e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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' };
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
+    }