🎨 uniformise le style des suggestions

source/components/QuickLinks.js

@@ -34,15 +34,15 @@ const QuickLinks = ({ goToQuestion, quickLinks, quickLinksToHide }: Props) => {
 			<span>
 				<small>
 					<T k="quicklinks.autres">Autres questions :</T>
-				</small>{' '}
+				</small>
 				{links.map(([label, dottedName]) => (
 					<Fragment key={dottedName}>
 						<button
 							className="ui__ link-button"
+							css="margin: 0 0.4rem !important"
 							onClick={() => goToQuestion(dottedName)}>
 							<T k={'quicklinks.' + label}>{label}</T>
-						</button>{' '}
-						/{' '}
+						</button>
 					</Fragment>
 				))}{' '}
 				{/* <button className="ui__ link-button">Voir la liste</button> */}

source/components/conversation/Conversation.js

@@ -78,8 +78,8 @@ export default compose(
 						</div>
 					</React.Fragment>
 				)}
-				<QuickLinks />
 			</div>
+			<QuickLinks />
 		</>
 	) : (
 		<div style={{ textAlign: 'center' }}>

source/components/conversation/FormDecorator.js

@@ -59,13 +59,10 @@ export var FormDecorator = formType => RenderField =>
 				return (
 					<div className={classNames('step', formType)}>
 						<div className="unfoldedHeader">
-							<div className="step-question">
-								<h3>
-									{' '}
-									{this.props.question}{' '}
-									{!inversion && <Explicable dottedName={fieldName} />}
-								</h3>
-							</div>
+							<h3>
+								{this.props.question}{' '}
+								{!inversion && <Explicable dottedName={fieldName} />}
+							</h3>
 						</div>
 
 						<fieldset>

source/components/conversation/Input.js

@@ -36,7 +36,16 @@ export default compose(
 				inputError = dirty && error,
 				submitDisabled = !dirty || inputError
 			return (
-				<span>
+				<>
+					<div css="width: 100%">
+						<InputSuggestions
+							suggestions={this.props.suggestions}
+							onFirstClick={value => this.props.setFormValue('' + value)}
+							onSecondClick={() => this.props.submit('suggestion')}
+							rulePeriod={this.props.rulePeriod}
+						/>
+					</div>
+
 					<div className="answer">
 						<input
 							type="text"
@@ -50,7 +59,6 @@ export default compose(
 							className={classnames({ suffixed })}
 							id={'step-' + dottedName}
 							inputMode="numeric"
-							placeholder={t('votre réponse')}
 							style={{ border: `1px solid ${colours.textColourOnWhite}` }}
 						/>
 						{suffixed && (
@@ -73,14 +81,9 @@ export default compose(
 						)}
 						<SendButton {...{ disabled: submitDisabled, error, submit }} />
 					</div>
-					<InputSuggestions
-						suggestions={this.props.suggestions}
-						onFirstClick={value => this.props.setFormValue('' + value)}
-						onSecondClick={() => this.props.submit('suggestion')}
-						rulePeriod={this.props.rulePeriod}
-					/>
+
 					{inputError && <span className="step-input-error">{error}</span>}
-				</span>
+				</>
 			)
 		}
 	}

source/components/conversation/InputSuggestions.css

@@ -1,25 +0,0 @@
-.step .inputSuggestions {
-	margin: 1em;
-}
-.inputSuggestions {
-	text-align: right;
-}
-.inputSuggestions ul {
-	margin: 0.3em 0;
-	padding-left: 0;
-	list-style: none;
-	display: inline-flex;
-	align-items: flex-end;
-	font-weight: 500;
-}
-.inputSuggestions li {
-	text-align: center;
-	margin: 0;
-	padding: 0;
-	line-height: 1.3em;
-	margin-left: 1rem;
-	min-width: 2em;
-	border-bottom-width: 1px;
-	border-bottom-style: solid;
-	cursor: pointer;
-}

source/components/conversation/InputSuggestions.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react'
 import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { formValueSelector } from 'redux-form'
-import './InputSuggestions.css'
 
 export default compose(
 	withColours,
@@ -20,8 +19,6 @@ export default compose(
 				suggestions,
 				onSecondClick,
 				onFirstClick,
-				colouredBackground,
-				colours,
 				t,
 				rulePeriod,
 				period
@@ -30,36 +27,31 @@ export default compose(
 			if (!suggestions) return null
 
 			return (
-				<div className="inputSuggestions">
-					suggestions:
-					<ul>
-						{toPairs(suggestions).map(([text, value]) => {
-							// TODO : ce serait mieux de déplacer cette logique dans le moteur
-							const adjustedValue =
-								rulePeriod === 'flexible' && period === 'année'
-									? value * 12
-									: value
-							return (
-								<li
-									key={value}
-									onClick={() => {
-										onFirstClick(adjustedValue)
-										if (this.state.suggestion !== adjustedValue)
-											this.setState({ suggestion: adjustedValue })
-										else onSecondClick && onSecondClick(adjustedValue)
-									}}
-									style={{
-										color: colouredBackground
-											? colours.textColour
-											: colours.textColourOnWhite
-									}}>
-									<span title={t('cliquez pour insérer cette suggestion')}>
-										{text}
-									</span>
-								</li>
-							)
-						})}
-					</ul>
+				<div css="display: flex; align-items: baseline; justify-content: flex-end;">
+					<small>Suggestions :</small>
+
+					{toPairs(suggestions).map(([text, value]) => {
+						// TODO : ce serait mieux de déplacer cette logique dans le moteur
+						const adjustedValue =
+							rulePeriod === 'flexible' && period === 'année'
+								? value * 12
+								: value
+						return (
+							<button
+								className="ui__ link-button"
+								key={value}
+								css="margin: 0 0.4rem !important"
+								onClick={() => {
+									onFirstClick(adjustedValue)
+									if (this.state.suggestion !== adjustedValue)
+										this.setState({ suggestion: adjustedValue })
+									else onSecondClick && onSecondClick(adjustedValue)
+								}}
+								title={t('cliquez pour insérer cette suggestion')}>
+								{text}
+							</button>
+						)
+					})}
 				</div>
 			)
 		}

source/components/conversation/Question.css

@@ -3,4 +3,3 @@
 	align-items: center;
 	justify-content: flex-end;
 }
-

source/components/conversation/Question.js

@@ -1,3 +1,4 @@
+import classnames from 'classnames'
 import withColours from 'Components/utils/withColours'
 import { compose, is } from 'ramda'
 import React, { Component } from 'react'
@@ -6,7 +7,6 @@ import Explicable from './Explicable'
 import { FormDecorator } from './FormDecorator'
 import './Question.css'
 import SendButton from './SendButton'
-import classnames from 'classnames'
 
 /* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans une liste, ou une liste de listes.
 	Les données @choices sont un arbre de type:
@@ -43,7 +43,7 @@ export default compose(
 				? this.renderBinaryQuestion()
 				: this.renderChildren(choices)
 			return (
-				<>
+				<div css="margin-top: 0.6rem; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end">
 					{choiceElements}
 					<SendButton
 						{...{
@@ -53,7 +53,7 @@ export default compose(
 							submit
 						}}
 					/>
-				</>
+				</div>
 			)
 		}
 		renderBinaryQuestion() {
@@ -66,14 +66,14 @@ export default compose(
 			} = this.props
 
 			return (
-				<ul className="binaryQuestionList">
+				<div className="binaryQuestionList">
 					{choices.map(({ value, label }) => (
 						<RadioLabel
 							key={value}
 							{...{ value, label, input, submit, colours, setFormValue }}
 						/>
 					))}
-				</ul>
+				</div>
 			)
 		}
 		renderChildren(choices) {
@@ -90,7 +90,7 @@ export default compose(
 					radioDottedName.split(name + ' . ')[1]
 
 			return (
-				<ul>
+				<ul css="width: 100%">
 					{choices.canGiveUp && (
 						<li key="aucun" className="variantLeaf aucun">
 							<RadioLabel

source/components/conversation/conversation.css

@@ -48,21 +48,6 @@
 	opacity: 1;
 }
 
-.step-question h1::before {
-	content: '›';
-}
-@media (min-width: 500px) {
-	.step-question h1::before {
-		position: absolute;
-		left: -1.1rem;
-	}
-}
-
-.step-question h1 {
-	font-size: 1.3rem;
-	line-height: 2.2rem;
-}
-
 .unfoldedHeader {
 	display: flex;
 	justify-content: space-between;
@@ -97,7 +82,6 @@
 }
 
 .step fieldset {
-	margin: 0.8em 0;
 	display: flex;
 	justify-content: flex-end;
 	flex-wrap: wrap;
@@ -130,12 +114,6 @@
 	text-align: right;
 }
 
-.step.question fieldset > div {
-	display: flex;
-	justify-content: flex-end;
-	flex-wrap: wrap;
-}
-
 .step.question fieldset span {
 	white-space: nowrap;
 }
@@ -208,10 +186,10 @@
 }
 
 .step input.suffixed {
-	padding: 0.1em 1em 0;
+	width: 5rem;
+	color: var(--colour);
 	margin: 0.6rem 0;
 	border-radius: 0.2em;
-	font-size: 120%;
 }
 
 .step input:not(.suffixed) {
@@ -219,11 +197,9 @@
 }
 
 .step label.suffix {
-	font-size: 110%;
 	vertical-align: baseline;
 	transition: color 0.1s;
-	margin: 0 0.6em;
-	color: rgba(0, 0, 0, 0.8);
+	margin-left: 0.6rem;
 }
 .step input .step input[type='text']:focus,
 .step input[type='number']:focus {
@@ -287,6 +263,7 @@
 }
 
 .answer {
+	margin-top: 0.6rem;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: flex-end;

source/components/ui/Card.css

@@ -44,9 +44,9 @@
 	opacity: 0.7;
 }
 
-.ui__.card.plain a {
+.ui__.card.plain a,
+.ui__.card.plain .link-button {
 	color: white !important;
-	text-decoration: none;
 }
 .ui__.card.plain a:hover {
 	text-decoration: underline;
@@ -54,3 +54,7 @@
 .ui__.card.coloured {
 	box-shadow: 0 1px 3px 0 var(--colour), 0 0 0 1px var(--colour);
 }
+.ui__.card.plain small,
+.ui__.card.plain .notice {
+	color: rgba(255, 255, 255, 0.8);
+}