🎨 améliore l'usabilité du guide

- Enleve l'autoscroll
- Place tous les boutons à gauche
- Change le style du bouton recommencer

source/components/ui/Button/button.css

@@ -139,9 +139,8 @@
 .ui__.skip-button {
 	opacity: 0.6;
 	border: none;
-	padding: 0.6rem 0;
-	margin-top: 0;
-	margin-bottom: 0;
+	padding: 0;
+
 	color: inherit;
 }
 

source/components/ui/Typography.css

@@ -34,7 +34,8 @@ h1 {
 	font-size: 2.8rem;
 }
 h2 {
-	margin-top: 2rem;
+	margin-top: 1rem;
+
 	margin-bottom: 1rem;
 	font-size: 1.7rem;
 }

source/components/ui/index.css

@@ -20,7 +20,6 @@ button {
 
 .ui__.answer-group {
 	display: flex;
-	justify-content: flex-end;
 	align-items: center;
 }
 @media (max-width: 500px) {

source/sites/mycompanyinfrance.fr/pages/Company/Liability.js

@@ -90,6 +90,13 @@ const Liability = ({
 			</li>
 		</ul>
 		<div className="ui__ answer-group">
+			<button
+				onClick={() => {
+					chooseCompanyLiability('LIMITED_LIABILITY')
+				}}
+				className="ui__ button">
+				<T k="responsabilité.bouton3">Responsabilité limitée</T>
+			</button>
 			<button
 				onClick={() => {
 					chooseCompanyLiability('UNLIMITED_LIABILITY')
@@ -101,13 +108,6 @@ const Liability = ({
 					<T k="responsabilité.bouton2">Responsabilité illimitée</T>
 				)}
 			</button>
-			<button
-				onClick={() => {
-					chooseCompanyLiability('LIMITED_LIABILITY')
-				}}
-				className="ui__ button">
-				<T k="responsabilité.bouton3">Responsabilité limitée</T>
-			</button>
 		</div>
 		<CompanyStatusNavigation onSkip={() => chooseCompanyLiability(null)} />
 		{/* this is an economic activity conducted by a single natural person, in his own name ; */}

source/sites/mycompanyinfrance.fr/pages/Company/PreviousAnswers.js

@@ -43,15 +43,14 @@ const PreviousAnswers = ({
 	return (
 		<>
 			{!!Object.keys(legalStatus).length && (
-				<button onClick={goToCompanyStatusChoice} className="ui__ link-button">
-					<T>Recommencer</T>
+				<button
+					onClick={goToCompanyStatusChoice}
+					className="ui__ skip-button left">
+					⟲ <T>Recommencer</T>
 				</button>
 			)}
 			{Object.values(legalStatus).some(answer => answer !== null) && (
 				<>
-					<h2>
-						<T>Vos choix : </T>
-					</h2>
 					<ul>
 						<Animate.fromBottom>
 							{Object.entries(legalStatus).map(

source/sites/mycompanyinfrance.fr/pages/Company/index.js

@@ -3,7 +3,6 @@ import { withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Redirect, Route, Switch } from 'react-router'
 import * as Animate from 'Ui/animate'
-import { ScrollToElement } from '../../../../components/utils/Scroll'
 import sitePaths from '../../sitePaths'
 import AfterRegistration from './AfterRegistration'
 import CreationChecklist from './CreationChecklist'
@@ -18,11 +17,9 @@ import PickLegalStatus from './PickLegalStatus'
 import YourCompany from './YourCompany'
 const withAnimation = Component => {
 	const AnimateRouteComponent = (...props) => (
-		<ScrollToElement onlyIfNotVisible>
-			<Animate.fromBottom>
-				<Component {...props} />
-			</Animate.fromBottom>
-		</ScrollToElement>
+		<Animate.fromBottom>
+			<Component {...props} />
+		</Animate.fromBottom>
 	)
 	return AnimateRouteComponent
 }