feat: update icon usage and styling in project menu components (#2097)

Author: yvalentin

apps/nuxt/src/assets/scss/dsfr/_icon.scss

@@ -20,8 +20,8 @@ $icons-list: (
     // Business icons
   mail-line,
   briefcase-line,
+  links-line,
     // Editor icons
-  link,
     // Finance icons
   money-euro-circle-line,
     // user icons

apps/nuxt/src/components/element/TeeCopyLinkButton.vue

@@ -4,24 +4,24 @@
     :size="size"
     :tertiary="tertiary"
     :no-outline="noOutline"
-    class="fr-radius-a--2v"
+    class="fr-radius-a--2v fr-px-4v"
     :class="`${linkCopied ? copyClass : ''} ${textClass}`"
-    icon="fr-icon-link"
+    icon="fr-icon-links-line"
     @click="copyUrl"
   />
 </template>
 <script setup lang="ts">
 interface Props {
   size?: 'sm' | 'md' | 'lg'
-  noOutline?: boolean
+  noOutline: boolean
   tertiary?: boolean
   copyClass?: string
   textClass?: string
 }
 withDefaults(defineProps<Props>(), {
   size: 'sm',
   noOutline: false,
-  tertiary: false,
+  tertiary: true,
   copyClass: 'fr-bg--green',
   textClass: ''
 })

apps/nuxt/src/components/project/details/ProjectDetail.vue

@@ -11,7 +11,13 @@
       />
     </template>
     <template #sidemenu>
-      <TeeCopyLinkButton class="fr-mt-6v" />
+      <TeeCopyLinkButton
+        class="fr-mt-6v"
+        tertiary
+        no-outline
+        copy-class="fr-text--green"
+        text-class="fr-text--black"
+      />
       <ProjectSideNav :project="project" />
     </template>
     <div id="externalLinksTracking">

apps/nuxt/src/components/project/details/ProjectPrograms.vue

@@ -60,7 +60,6 @@
           <p class="fr-mt-n3v fr-mb-0">{{ Translation.t('project.noPrograms.subtitle') }}</p>
         </TeeDsfrHighlight>
         <div
-          v-if="isDataFull"
           id="project-contact"
           ref="teeProjectFormContainer"
           class="fr-bg--blue--lightness fr-grid-row fr-p-2w"

apps/nuxt/src/components/project/details/ProjectSideNav.vue

@@ -7,7 +7,8 @@
       v-for="item in menuItems"
       :key="item.id"
       :href="`#${item.to}`"
-      class="fr-sidemenu__link"
+      class="fr-pl-4v"
+      :class="[item.class ? item.class : 'fr-sidemenu__link', item.icon ? 'fr-btn--icon-left ' + item.icon : '']"
       @click.prevent="scrollTo(item.to)"
     >
       {{ item.text }}
@@ -58,7 +59,14 @@ const allMenuItems = computed(() => [
     condition: props.project.moreDescription.length > 0
   },
   { id: 'aids', to: `project-aids-title`, text: 'Mes aides', condition: props.project.programs.length > 0 || isDataFull.value },
-  { id: 'contact', to: `form-title`, text: 'Contact', condition: props.project.programs.length > 0 || isDataFull.value },
+  {
+    id: 'contact',
+    to: `form-title`,
+    text: 'Contact',
+    condition: props.project.programs.length > 0 || isDataFull.value,
+    class: 'fr-btn fr-radius-a--2v fr-text--white',
+    icon: 'fr-icon-mail-line'
+  },
   {
     id: 'linked-testimonies',
     to: `project-testimonies-title`,