From 763dd47d53879be5af6fae293013f47e39e7ad80 Mon Sep 17 00:00:00 2001
From: Clement G <clement@garrot.org>
Date: Sun, 3 May 2020 20:44:51 +0200
Subject: [PATCH] feat(create-election-success) : try new layout

---
 src/components/CopyField.jsx           |  8 +++----
 src/components/views/CreateSuccess.jsx | 33 ++++++++++++++++++--------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/CopyField.jsx b/src/components/CopyField.jsx
index 0baf445..8009343 100644
--- a/src/components/CopyField.jsx
+++ b/src/components/CopyField.jsx
@@ -16,7 +16,7 @@ const CopyField = props => {
     document.execCommand("copy");
   };
 
-  const { t, value, iconCopy, iconOpen } = props;
+  const { t, value, iconCopy } = props;
 
   return (
     <div className="input-group  ">
@@ -31,7 +31,7 @@ const CopyField = props => {
 
       <div className="input-group-append">
         <Button
-          className="btn btn-success"
+          className="btn btn-secondary"
           onClick={handleClickOnButton}
           type="button"
         >
@@ -39,7 +39,7 @@ const CopyField = props => {
           {t("Copy")}
         </Button>
       </div>
-      <div className="input-group-append">
+        {/*<div className="input-group-append">
         <a
           className="btn btn-secondary"
           href={value}
@@ -49,7 +49,7 @@ const CopyField = props => {
           <FontAwesomeIcon icon={iconOpen} className="mr-2" />
           {t("Open")}
         </a>
-      </div>
+      </div>*/}
     </div>
   );
 };
diff --git a/src/components/views/CreateSuccess.jsx b/src/components/views/CreateSuccess.jsx
index 90a8114..81ac1e0 100644
--- a/src/components/views/CreateSuccess.jsx
+++ b/src/components/views/CreateSuccess.jsx
@@ -1,9 +1,11 @@
 /* eslint react/prop-types: 0 */
 import React, { Component } from "react";
 import { Col, Container, Row } from "reactstrap";
+import { Link } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import {
   faCopy,
+    faUsers,
   faExclamationTriangle,
   faExternalLinkAlt
 } from "@fortawesome/free-solid-svg-icons";
@@ -36,7 +38,7 @@ class CreateSuccess extends Component {
     const { t } = this.props;
     const electionLink = this.props.invitationOnly ? (
       <>
-        <p className="mt-4 mb-1">
+        <p className="mb-1">
           {t(
             "Voters received a link to vote by email. Each link can be used only once!"
           )}
@@ -44,7 +46,7 @@ class CreateSuccess extends Component {
       </>
     ) : (
       <>
-        <p className="mt-4 mb-1">{t("Voting address")}</p>
+        <p className="mb-1">{t("Voting address")}</p>
         <CopyField
           value={this.state.urlOfVote}
           iconCopy={faCopy}
@@ -68,8 +70,13 @@ class CreateSuccess extends Component {
             )}
           </Col>
         </Row>
-        <Row className="mt-4 mb-4">
+        <Row className="mt-5 mb-4">
           <Col className="offset-lg-3" lg="6">
+              <h5 className="mb-3 text-center">
+                  <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
+                  {t("Keep these links carefully")}
+              </h5>
+              <div className="border rounded p-4 pb-5">
             {electionLink}
 
             <p className="mt-4 mb-1">{t("Results address")}</p>
@@ -79,10 +86,8 @@ class CreateSuccess extends Component {
               iconOpen={faExternalLinkAlt}
               t={t}
             />
-            <h5 className="mt-5 mb-3 text-center">
-              <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
-              {t("Keep these links carefully")}
-            </h5>
+              </div>
+
               {/*<div className="input-group  ">
               <input
                 type="text"
@@ -116,9 +121,17 @@ class CreateSuccess extends Component {
               </div>*/}
           </Col>
         </Row>
-        <Row className="mt-4 mb-4">
-          <Col className="offset-lg-3 text-center" lg="6"></Col>
-        </Row>
+          <Row className="mt-4 mb-4">
+              <Col className="text-center">
+                  <Link
+                      to={"/vote/" + this.props.match.params.slug}
+                      className="btn btn-secondary"
+                  >
+                      <FontAwesomeIcon icon={faUsers} className="mr-2" />
+                      {t("Participate now!")}
+                  </Link>
+              </Col>
+          </Row>
       </Container>
     );
   }