From 6e857ac572788c3d016060e6bf97ccde5c7cbeaf Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Mon, 14 Mar 2022 16:04:59 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20le=20style=20de=20la=20page=20s?=
 =?UTF-8?q?imulateur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ShareSimulationBanner/index.tsx           | 39 +++++++------------
 site/source/components/Simulation/index.tsx   |  2 +-
 .../conversation/SeeAnswersButton.tsx         |  2 +-
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/site/source/components/ShareSimulationBanner/index.tsx b/site/source/components/ShareSimulationBanner/index.tsx
index c3d480dbe..f947864ec 100644
--- a/site/source/components/ShareSimulationBanner/index.tsx
+++ b/site/source/components/ShareSimulationBanner/index.tsx
@@ -16,6 +16,7 @@ import { TrackingContext } from '../../ATInternetTracking'
 import { useParamsFromSituation } from '../utils/useSearchParamsSimulationSharing'
 import { ShareSimulationPopup } from './ShareSimulationPopup'
 import { PlacesDesEntreprisesButton } from '../PlaceDesEntreprises'
+import { Link } from '@/design-system/typography/link'
 
 export function useUrl() {
 	const language = useTranslation().i18n.language
@@ -37,10 +38,6 @@ export function useUrl() {
 	return siteUrl + path + '?' + searchParams.toString()
 }
 
-const ButtonLabel = styled.span`
-	margin-left: 1rem;
-`
-
 export default function ShareOrSaveSimulationBanner() {
 	const { t } = useTranslation()
 	const tracker = useContext(TrackingContext)
@@ -65,17 +62,15 @@ export default function ShareOrSaveSimulationBanner() {
 			<Grid
 				container
 				className=" print-hidden"
-				spacing={3}
-				justifyContent="center"
+				gap={4}
+				justifyContent="space-evenly"
 			>
 				<Grid item xs={12} sm="auto">
 					<PopoverWithTrigger
 						title={t('shareSimulation.modal.title', 'Votre lien de partage')}
 						trigger={(buttonProps) => (
-							<Button
+							<Link
 								{...buttonProps}
-								light
-								size="XS"
 								onPress={(e) => {
 									tracker.click.set({
 										chapter1: 'feature:partage',
@@ -88,13 +83,11 @@ export default function ShareOrSaveSimulationBanner() {
 									buttonProps?.onPress?.(e)
 								}}
 							>
-								<Emoji emoji="🔗" />
-								<ButtonLabel>
-									<Trans i18nKey="shareSimulation.banner">
-										Générer un lien de partage
-									</Trans>
-								</ButtonLabel>
-							</Button>
+								<Emoji emoji="🔗" />{' '}
+								<Trans i18nKey="shareSimulation.banner">
+									Générer un lien de partage
+								</Trans>
+							</Link>
 						)}
 						small
 					>
@@ -104,14 +97,12 @@ export default function ShareOrSaveSimulationBanner() {
 
 				{typeof window.print === 'function' && (
 					<Grid item xs={12} sm="auto">
-						<Button light size="XS" onPress={() => window.print()}>
-							<Emoji emoji="🖨" />
-							<ButtonLabel>
-								<Trans i18nKey="ExportSimulation.Banner">
-									Imprimer ou sauvegarder en PDF
-								</Trans>
-							</ButtonLabel>
-						</Button>
+						<Link onPress={() => window.print()}>
+							<Emoji emoji="🖨" />{' '}
+							<Trans i18nKey="ExportSimulation.Banner">
+								Imprimer ou sauvegarder en PDF
+							</Trans>
+						</Link>
 					</Grid>
 				)}
 
diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx
index 695fa6e62..047920afc 100644
--- a/site/source/components/Simulation/index.tsx
+++ b/site/source/components/Simulation/index.tsx
@@ -1,7 +1,7 @@
 import { ConversationProps } from '@/components/conversation/Conversation'
 import PageFeedback from '@/components/Feedback'
 import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
-import { PopoverWithTrigger } from '@/design-system'
+import { Message, PopoverWithTrigger } from '@/design-system'
 import { Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import {
diff --git a/site/source/components/conversation/SeeAnswersButton.tsx b/site/source/components/conversation/SeeAnswersButton.tsx
index 51f6b157f..f048886b7 100644
--- a/site/source/components/conversation/SeeAnswersButton.tsx
+++ b/site/source/components/conversation/SeeAnswersButton.tsx
@@ -8,7 +8,7 @@ export default function SeeAnswersButton() {
 	return (
 		<PopoverWithTrigger
 			trigger={(buttonProps) => (
-				<Button {...buttonProps} light size="XS">
+				<Button {...buttonProps} size="XS" color="secondary" light>
 					<Trans>Voir ma situation</Trans>
 				</Button>
 			)}