diff --git a/source/components/QuickLinks.js b/source/components/QuickLinks.js index 5a748bbe1..e54ea586b 100644 --- a/source/components/QuickLinks.js +++ b/source/components/QuickLinks.js @@ -34,15 +34,15 @@ const QuickLinks = ({ goToQuestion, quickLinks, quickLinksToHide }: Props) => { Autres questions : - {' '} + {links.map(([label, dottedName]) => ( {' '} - /{' '} + ))}{' '} {/* */} diff --git a/source/components/conversation/Conversation.js b/source/components/conversation/Conversation.js index ef5c5c364..a9fbb1d83 100644 --- a/source/components/conversation/Conversation.js +++ b/source/components/conversation/Conversation.js @@ -78,8 +78,8 @@ export default compose( )} - + ) : (
diff --git a/source/components/conversation/FormDecorator.js b/source/components/conversation/FormDecorator.js index d3653a19f..dca5bd62d 100644 --- a/source/components/conversation/FormDecorator.js +++ b/source/components/conversation/FormDecorator.js @@ -59,13 +59,10 @@ export var FormDecorator = formType => RenderField => return (
-
-

- {' '} - {this.props.question}{' '} - {!inversion && } -

-
+

+ {this.props.question}{' '} + {!inversion && } +

diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js index 7319ff83a..08563cf8e 100644 --- a/source/components/conversation/Input.js +++ b/source/components/conversation/Input.js @@ -36,7 +36,16 @@ export default compose( inputError = dirty && error, submitDisabled = !dirty || inputError return ( - + <> +
+ this.props.setFormValue('' + value)} + onSecondClick={() => this.props.submit('suggestion')} + rulePeriod={this.props.rulePeriod} + /> +
+
{suffixed && ( @@ -73,14 +81,9 @@ export default compose( )}
- this.props.setFormValue('' + value)} - onSecondClick={() => this.props.submit('suggestion')} - rulePeriod={this.props.rulePeriod} - /> + {inputError && {error}} -
+ ) } } diff --git a/source/components/conversation/InputSuggestions.css b/source/components/conversation/InputSuggestions.css deleted file mode 100644 index 9429971e7..000000000 --- a/source/components/conversation/InputSuggestions.css +++ /dev/null @@ -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; -} diff --git a/source/components/conversation/InputSuggestions.js b/source/components/conversation/InputSuggestions.js index 723b1382e..a5a27716d 100644 --- a/source/components/conversation/InputSuggestions.js +++ b/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 ( -
- suggestions: -
    - {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 ( -
  • { - onFirstClick(adjustedValue) - if (this.state.suggestion !== adjustedValue) - this.setState({ suggestion: adjustedValue }) - else onSecondClick && onSecondClick(adjustedValue) - }} - style={{ - color: colouredBackground - ? colours.textColour - : colours.textColourOnWhite - }}> - - {text} - -
  • - ) - })} -
+
+ Suggestions : + + {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 ( + + ) + })}
) } diff --git a/source/components/conversation/Question.css b/source/components/conversation/Question.css index cd9ad3498..e4fc34dcb 100644 --- a/source/components/conversation/Question.css +++ b/source/components/conversation/Question.css @@ -3,4 +3,3 @@ align-items: center; justify-content: flex-end; } - diff --git a/source/components/conversation/Question.js b/source/components/conversation/Question.js index eedd5af47..7cf9143d8 100644 --- a/source/components/conversation/Question.js +++ b/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 ( - <> +
{choiceElements} - +
) } renderBinaryQuestion() { @@ -66,14 +66,14 @@ export default compose( } = this.props return ( -
    +
    {choices.map(({ value, label }) => ( ))} -
+
) } renderChildren(choices) { @@ -90,7 +90,7 @@ export default compose( radioDottedName.split(name + ' . ')[1] return ( -
    +
      {choices.canGiveUp && (
    • 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; diff --git a/source/components/ui/Card.css b/source/components/ui/Card.css index 33eecaefd..7c8ba568b 100644 --- a/source/components/ui/Card.css +++ b/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); +}