feat(109): Change tutorial link with icon

Author: Maubry94

libs/design-system/src/components/ui/icon/index.ts

@@ -60,6 +60,7 @@ import {
 	mdiLightbulb,
 	mdiHelp,
 	mdiPuzzle,
+	mdiHelpCircleOutline,
 } from "@mdi/js";
 
 export const iconsMapper = {
@@ -124,6 +125,7 @@ export const iconsMapper = {
 	lightbulb: mdiLightbulb,
 	help: mdiHelp,
 	puzzle: mdiPuzzle,
+	helpCircleOutline: mdiHelpCircleOutline,
 };
 
 export const iconSizeMapper = {

services/spotter/src/domains/search/components/AdvancedSearchInput.vue

@@ -42,7 +42,7 @@ function onSubmit() {
 		class="flex flex-col gap-4 pt-1"
 		@submit.prevent="onSubmit"
 	>
-		<div class="flex flex-wrap gap-4 items-center">
+		<div class="flex gap-4 items-center">
 			<DSPrimaryButton type="submit">
 				{{ $t("cta.search") }}
 			</DSPrimaryButton>
@@ -62,9 +62,12 @@ function onSubmit() {
 
 			<RouterLink
 				:to="scratchTutorialPage"
-				class="text-blue-seaence hover:underline"
+				class="text-blue-seaence"
 			>
-				{{ $t("cta.howItWorks") }}
+				<DSIcon
+					name="helpCircleOutline"
+					square
+				/>
 			</RouterLink>
 		</div>
 

services/spotter/src/i18n/languages/FR-fr.ts

@@ -504,7 +504,6 @@ export const FRfr = {
 		validate: "Valider",
 		refuse: "Refuser",
 		add: "Ajouter",
-		howItWorks: "Comment ça marche ?",
 	},
 	languages: {
 		"fr-FR": "Français",