From 2e19bdb964759917ad7e3dffedf623ef3dae562d Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Wed, 2 Nov 2022 13:30:42 +0100
Subject: [PATCH] fix: clean up buttons

---
 components/Button.jsx                  | 23 ++++++++++++++++
 components/admin/CandidateField.jsx    |  2 +-
 components/admin/CandidateModalDel.jsx | 24 ++++-------------
 components/admin/CandidateModalSet.jsx | 24 ++++-------------
 components/admin/CandidatesField.jsx   | 36 ++++++++++++++++----------
 components/layouts/Footer.jsx          |  2 +-
 pages/_app.jsx                         |  4 +--
 pages/index.jsx                        |  3 ++-
 public/back.svg                        |  3 +--
 styles/scss/_app.scss                  | 31 ++++------------------
 styles/scss/_buttons.scss              | 34 +++++++++++-------------
 11 files changed, 82 insertions(+), 104 deletions(-)
 create mode 100644 components/Button.jsx

diff --git a/components/Button.jsx b/components/Button.jsx
new file mode 100644
index 0000000..f39aa6f
--- /dev/null
+++ b/components/Button.jsx
@@ -0,0 +1,23 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {Row, Col, Button} from "reactstrap";
+
+const ButtonWithIcon = ({icon, children, ...props}) => {
+  if (icon) {
+    return <Button {...props}>
+      <Row className='gx-2 align-items-end'>
+        <Col className='col-auto'>
+          <FontAwesomeIcon icon={icon} />
+        </Col>
+        <Col className='col-auto'>
+          {children}
+        </Col>
+      </Row>
+    </Button>
+  }
+
+  else {
+    return (<Button {...props}>{children}</Button>)
+  }
+}
+
+export default ButtonWithIcon
diff --git a/components/admin/CandidateField.jsx b/components/admin/CandidateField.jsx
index aa3a2b9..d697218 100644
--- a/components/admin/CandidateField.jsx
+++ b/components/admin/CandidateField.jsx
@@ -37,7 +37,7 @@ const CandidateField = ({position, className, ...inputProps}) => {
 
   return (
     <Row
-      className={`${className || ""} p-2 my-3 border border-dashed border-dark border-opacity-50 align-items-center ${active ? "active" : ""}`}
+      className={`${className || ""} p-2 my-3 border border-dashed border-2 border-light border-opacity-25 align-items-center ${active ? "active" : ""}`}
       {...inputProps}
     >
       <Col onClick={toggleSet} className='cursor-pointer col-auto me-auto'>
diff --git a/components/admin/CandidateModalDel.jsx b/components/admin/CandidateModalDel.jsx
index 0433024..6629a24 100644
--- a/components/admin/CandidateModalDel.jsx
+++ b/components/admin/CandidateModalDel.jsx
@@ -3,7 +3,6 @@ import {
   Col,
   Label,
   Input,
-  Button,
   Modal,
   ModalBody,
   Form
@@ -17,6 +16,7 @@ import {
 import {useTranslation} from "next-i18next";
 import Image from 'next/image';
 import {useElection, useElectionDispatch} from './ElectionContext';
+import Button from '@components/Button'
 import {upload} from '@services/imgpush';
 import {IMGPUSH_URL} from '@services/constants';
 import defaultAvatar from '../../public/default-avatar.svg'
@@ -54,27 +54,13 @@ const CandidateModal = ({isOpen, position, toggle}) => {
         {candidate.name ? <h4 className='text-center'>{candidate.name}</h4> : null}
         <Row className='mt-5 mb-3'>
           <Col className='col-auto me-auto'>
-            <Button onClick={toggle} color='dark' outline={true}>
-              <Row className='gx-2 align-items-end'>
-                <Col className='col-auto'>
-                  <FontAwesomeIcon icon={faArrowLeft} />
-                </Col>
-                <Col className='col-auto'>
-                  {t('admin.candidate-confirm-back')}
-                </Col>
-              </Row>
+            <Button onClick={toggle} color='dark' icon={faArrowLeft} outline={true}>
+              {t('admin.candidate-confirm-back')}
             </Button>
           </Col>
           <Col className='col-auto '>
-            <Button outline={true} color="primary" onClick={removeCandidate}>
-              <Row className='gx-2 align-items-end'>
-                <Col className='col-auto'>
-                  <FontAwesomeIcon icon={faTrashAlt} />
-                </Col>
-                <Col className='col-auto'>
-                  {t('admin.candidate-confirm-ok')}
-                </Col>
-              </Row>
+            <Button icon={faTrashAlt} outline={true} color="primary" onClick={removeCandidate}>
+              {t('admin.candidate-confirm-ok')}
             </Button>
           </Col>
 
diff --git a/components/admin/CandidateModalSet.jsx b/components/admin/CandidateModalSet.jsx
index fef671f..54dd652 100644
--- a/components/admin/CandidateModalSet.jsx
+++ b/components/admin/CandidateModalSet.jsx
@@ -4,7 +4,6 @@ import {
   Col,
   Label,
   Input,
-  Button,
   Modal,
   ModalBody,
   Form
@@ -17,6 +16,7 @@ import {
 import {useTranslation} from "next-i18next";
 import Image from 'next/image';
 import {useElection, useElectionDispatch} from './ElectionContext';
+import Button from '@components/Button'
 import {upload} from '@services/imgpush';
 import {IMGPUSH_URL} from '@services/constants';
 import defaultAvatar from '../../public/default-avatar.svg'
@@ -146,27 +146,13 @@ const CandidateModal = ({isOpen, position, toggle}) => {
             </div>
             <Row className='mt-5 mb-3'>
               <Col className='col-auto me-auto'>
-                <Button onClick={toggle} color='dark' outline={true}>
-                  <Row className='gx-2 align-items-end'>
-                    <Col>
-                      <FontAwesomeIcon icon={faArrowLeft} />
-                    </Col>
-                    <Col>
-                      {t('common.cancel')}
-                    </Col>
-                  </Row>
+                <Button onClick={toggle} color='dark' outline={true} icon={faArrowLeft} >
+                  {t('common.cancel')}
                 </Button>
               </Col>
               <Col className='col-auto '>
-                <Button outline={true} color="primary" onClick={save}>
-                  <Row className='gx-2 align-items-end'>
-                    <Col>
-                      <FontAwesomeIcon icon={faPlus} />
-                    </Col>
-                    <Col>
-                      {t('common.save')}
-                    </Col>
-                  </Row>
+                <Button outline={true} color="primary" onClick={save} icon={faPlus}>
+                  {t('common.save')}
                 </Button>
               </Col>
 
diff --git a/components/admin/CandidatesField.jsx b/components/admin/CandidatesField.jsx
index e04d11c..a006527 100644
--- a/components/admin/CandidatesField.jsx
+++ b/components/admin/CandidatesField.jsx
@@ -3,17 +3,18 @@ import {useTranslation} from "next-i18next";
 import CandidateField from './CandidateField'
 import Alert from '@components/Alert'
 import {MAX_NUM_CANDIDATES} from '@services/constants';
-import {Container} from 'reactstrap';
+import {Container, Button} from 'reactstrap';
 import {useElection, useElectionDispatch} from './ElectionContext';
 
 
-const CandidatesField = () => {
+const CandidatesField = ({onSubmit}) => {
   const {t} = useTranslation();
 
   const election = useElection();
   const dispatch = useElectionDispatch();
   const candidates = election.candidates;
   const [error, setError] = useState(null)
+  const disabled = candidates.filter(c => c.name !== "").length < 2;
 
   // What to do when we change the candidates
   useEffect(() => {
@@ -27,18 +28,25 @@ const CandidatesField = () => {
   }, [candidates])
 
   return (
-    <Container className="candidate mt-5">
-      <h4 className='mb-4'>{t('admin.add-candidates')}</h4>
-      <Alert msg={error} />
-      {candidates.map((candidate, index) => {
-        return (
-          <CandidateField
-            key={index}
-            position={index}
-          />
-        )
-      })}
-    </Container>
+    <Container className="candidate flex-grow-1 mt-5 flex-column d-flex justify-content-between">
+      <div className="d-flex flex-column">
+        <h4 className='mb-4'>{t('admin.add-candidates')}</h4>
+        <Alert msg={error} />
+        {candidates.map((candidate, index) => {
+          return (
+            <CandidateField
+              key={index}
+              position={index}
+            />
+          )
+        })}
+      </div>
+      <div className="mb-5 d-flex justify-content-center">
+        <Button outline={true} color="secondary" onClick={onSubmit} disabled={disabled}>
+          {t('Valider les candidats')}
+        </Button>
+      </div>
+    </Container >
   );
 }
 
diff --git a/components/layouts/Footer.jsx b/components/layouts/Footer.jsx
index 0bb71e1..cbce8aa 100644
--- a/components/layouts/Footer.jsx
+++ b/components/layouts/Footer.jsx
@@ -80,7 +80,7 @@ const Footer = () => {
           </Row>
         </Col>
         <Col className="col-auto">
-          <Button className="btn-info">
+          <Button outline={false} color="info" className='noshadow'>
             <a href="/">
               {t('common.support-us')}
             </a>
diff --git a/pages/_app.jsx b/pages/_app.jsx
index 4176066..97431a5 100644
--- a/pages/_app.jsx
+++ b/pages/_app.jsx
@@ -25,9 +25,9 @@ function Application({Component, pageProps}) {
     />
   </Head>
     <main className='d-flex flex-column justify-content-between'>
-      <div>
+      <div className='d-flex flex-grow-1 justify-content-center'>
         <Header />
-        <div className="d-flex flex-column justify-content-center">
+        <div className="d-flex flex-column align-items-start">
           <Component {...pageProps} />
         </div>
       </div>
diff --git a/pages/index.jsx b/pages/index.jsx
index ad95ef3..5c957ea 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -56,7 +56,7 @@ const StartForm = () => {
           </Row>
           <Row>
             <Link href={{pathname: CREATE_ELECTION, query: {title: title}}}>
-              <Button type="submit">
+              <Button color="secondary" outline={true} type="submit">
                 <Row className="justify-content-md-center  p-2">
                   <Col className='col-auto'>
                     {t("home.start")}
@@ -152,6 +152,7 @@ const ExperienceRow = () => {
         <Col>
           <Button
             color="primary"
+            className="p-4 fs-5"
           >
             {t('home.experience-call-to-action')}
             <Image src={arrowRight} width={22} height={22} className="mr-2" />
diff --git a/public/back.svg b/public/back.svg
index ce35a8c..668bf8c 100644
--- a/public/back.svg
+++ b/public/back.svg
@@ -1,6 +1,5 @@
-<svg width="1440" height="900" viewBox="0 0 1440 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1440" height="1001" viewBox="0 0 1440 1001" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g opacity="0.64" clip-path="url(#clip0_78_1977)">
-<rect width="1440" height="1001" fill="#0A004C"/>
 <g opacity="0.08" filter="url(#filter0_f_78_1977)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M1440 450.639V705.259L507.34 1637.92L0.000501283 1130.58L0.000488281 875.959L507.34 1383.3L1440 450.639Z" fill="white"/>
 </g>
diff --git a/styles/scss/_app.scss b/styles/scss/_app.scss
index b1c819a..0c9fd57 100644
--- a/styles/scss/_app.scss
+++ b/styles/scss/_app.scss
@@ -1,5 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap");
 
+body{
+	background-color: $mv-blue-color;
+}
 h1,
 h2,
 h3 {
@@ -19,27 +22,6 @@ button {
   margin-left: 0px !important;
   margin-right: 0px !important;
 }
-// mieux voter vars
-$mv-blue-color: #2400fd !default;
-$mv-dark-blue-color: #0a004c !default;
-$mv-light-color: #efefff !default;
-$mv-dark-color: #333 !default;
-
-// Override default variables before the import bootstrap
-$body-bg: #000000 !default;
-$body-color: $mv-light-color !default;
-
-$theme-colors: (
-  "primary": $mv-blue-color,
-  "secondary": $mv-dark-blue-color,
-  "light": $mv-light-color,
-  "dark": $mv-dark-color,
-  "danger": #990000,
-  "success": #009900,
-  "info": #2b8299,
-  "warning": #ff6e11,
-) !default;
-
 .logo-text > h1 {
   font-size: 16px;
   font-weight: bold;
@@ -69,11 +51,7 @@ main > .div {
 }
 
 main {
-  background-size: 100%;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-color: $mv-dark-blue-color;
-  overflow: hidden;
+  background: url('../../public/back.svg'), rgb(10, 0, 76, 0.64);
 }
 
 header {
@@ -409,3 +387,4 @@ ol.result > li {
 .hide {
 	display: none;
 }
+.noshadow{ box-shadow: unset!important;}
diff --git a/styles/scss/_buttons.scss b/styles/scss/_buttons.scss
index 260d66a..0cfe3ca 100644
--- a/styles/scss/_buttons.scss
+++ b/styles/scss/_buttons.scss
@@ -2,11 +2,7 @@
   //width: 165px;
   padding: 8px 24px;
   // background: $mv-blue-color;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 0px;
   box-sizing: border-box;
-  box-shadow: 0px 4px 0px;
   font-family: DM Sans;
   font-style: normal;
   font-weight: bold;
@@ -16,6 +12,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  border-style: solid;
+  border-radius: 0px;
+}
+*[class*="btn-outline-"] {
+  box-shadow: 0px 4px 0px;
+  border-width: 2px;
 }
 .btn-opacity:hover {
   background-color: transparent;
@@ -38,28 +40,22 @@
   transition: 0.5s;
   margin: auto;
 }
-.btn-secondary {
-  width: fit-content;
+*.btn[class*="-secondary"] {
+  /* width: fit-content;*/
   background-color: transparent;
   border-color: white;
   color: white;
 }
-.btn-primary {
-  box-sizing: border-box;
-
-  /* Auto layout */
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16px 24px;
-  gap: 16px;
-
-  /* primary */
-  border: 2px solid #2400fd;
+*.btn[class*="-primary"] {
+  border: 2px solid $mv-blue-color;
   box-shadow: 0px 5px 0px #7a64f9;
 }
+*.btn[class*="-info"] {
+  background-color: #4A2FEF;
+  border: 2px solid #4A2FEF;
+}
 .btn:not([class*="btn-outline-"]):hover {
   background-color: rgb(255, 255, 255, 0.2);
   border-color: white;
+  box-shadow: unset;
 }