Layout create ballot form with help tooltip

src/components/form/HelpButton.js

@@ -0,0 +1,35 @@
+import React, {Component} from "react";
+import {Tooltip} from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+
+
+class HelpButton extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggle = this.toggle.bind(this);
+        this.state = {
+            tooltipOpen: false
+        };
+    }
+
+    toggle() {
+        this.setState({
+            tooltipOpen: !this.state.tooltipOpen
+        });
+    }
+
+
+    render() {
+        return (
+            <div>
+                <FontAwesomeIcon icon={faQuestionCircle} id={this.props.id} />
+                <Tooltip placement="right" isOpen={this.state.tooltipOpen} target={this.props.id} toggle={this.toggle}>
+                    {this.props.children}
+                </Tooltip>
+            </div>
+        );
+    }
+}
+export default HelpButton;

src/components/views/CreateBallot.js

@@ -1,5 +1,7 @@
 import React, {Component} from "react";
-import { Container, Row, Col, Input  } from 'reactstrap';
+import { Container, Row, Col, Input, Label  } from 'reactstrap';
+import HelpButton from "../form/HelpButton";
+
 
 
 class CreateBallot extends Component {
@@ -8,6 +10,7 @@ class CreateBallot extends Component {
         super(props);
         this.state = {
         }
+        this.focusInput= React.createRef();
     }
 
     render(){
@@ -16,14 +19,28 @@ class CreateBallot extends Component {
 
         return(
             <Container>
-                <Row>
-                    <Col ><h3>Formulaire :</h3></Col>
-                </Row>
-                <Row className="mt-2">
-                    <Col xs="12" >
-                        <Input placeholder="Saisissez ici la question de votre vote" name="title" autoFocus defaultValue={params.get("title")?params.get("title"):""} />
-                    </Col>
-                </Row>
+                <form onSubmit={this.handleSubmit} autoComplete="off">
+                    <Row>
+                        <Col ><h3>Démarrer un vote</h3></Col>
+                    </Row>
+                    <Row>
+                        <hr />
+                    </Row>
+                    <Row className="mt-2">
+                        <Col xs="12" >
+                            <Label for="title">Question du vote :</Label>
+                        </Col>
+                        <Col   >
+                            <Input placeholder="Saisissez ici la question de votre vote" name="title" id="title" innerRef={this.focusInput} autoFocus defaultValue={params.get("title")?params.get("title"):""} maxlength="250" />
+                        </Col>
+                        <Col xs="auto" className="align-self-center pl-0">
+                            <HelpButton id="helpTitle">
+                                Posez ici votre question ou introduisez simplement votre vote.
+                                <br /><u>Par exemple :</u> <em>Pour être mon représentant, je juge ce candidat ...</em>
+                            </HelpButton>
+                        </Col>
+                    </Row>
+                </form>
             </Container>
         )
     }

src/components/views/Home.js

@@ -13,6 +13,7 @@ class Home extends Component {
             title:null,
             redirect:false,
         };
+        this.focusInput= React.createRef();
     }
 
     handleSubmit = (event) => {
@@ -32,24 +33,24 @@ class Home extends Component {
         }
         return(
             <Container>
-                <form ref="form" onSubmit={this.handleSubmit}>
+                <form onSubmit={this.handleSubmit} autoComplete="off">
                     <Row>
                         <img src={logoLine} alt="logo" height="128" className="d-block ml-auto mr-auto mb-4"/>
                     </Row>
-                <Row>
-                    <Col className="text-center"><h3>Simple et gratuit : organisez un vote à l'aide du Jugement Majoritaire.</h3></Col>
-                </Row>
-                <Row className="mt-2">
-                    <Col xs="12" md="9" xl="6" className="offset-xl-2">
-                            <Input placeholder="Saisissez ici la question de votre vote" autoFocus required className="mt-2" name="title" value={this.state.title?this.state.title:""} onChange={this.handleChangeTitle} />
-                    </Col>
-                    <Col xs="12" md="3" xl="2">
-                        <Button type="submit" className="btn btn-block btn-secondary mt-2" ><FontAwesomeIcon icon={faRocket} className="mr-2"/>Lancer</Button>
-                    </Col>
-                </Row>
-                <Row className="mt-4">
-                    <Col className="text-center"><p>Pas de publicité et pas de cookie publicitaire.</p></Col>
-                </Row>
+                    <Row>
+                        <Col className="text-center"><h3>Simple et gratuit : organisez un vote à l'aide du Jugement Majoritaire.</h3></Col>
+                    </Row>
+                    <Row className="mt-2">
+                        <Col xs="12" md="9" xl="6" className="offset-xl-2">
+                                <Input placeholder="Saisissez ici la question de votre vote"  innerRef={this.focusInput} autoFocus required className="mt-2" name="title" value={this.state.title?this.state.title:""} onChange={this.handleChangeTitle} maxlength="250" />
+                        </Col>
+                        <Col xs="12" md="3" xl="2">
+                            <Button type="submit" className="btn btn-block btn-secondary mt-2" ><FontAwesomeIcon icon={faRocket} className="mr-2"/>Lancer</Button>
+                        </Col>
+                    </Row>
+                    <Row className="mt-4">
+                        <Col className="text-center"><p>Pas de publicité et pas de cookie publicitaire.</p></Col>
+                    </Row>
                 </form>
             </Container>
         )

src/scss/_app.scss

@@ -65,4 +65,6 @@ hr{
   border:none;
   border-top:1px solid $mv-light-color;
   width:100%;
-}
+  margin:auto;
+}
+