From a1c1d47a0e4636ca6ee114d29d95a65d7eba4d79 Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Sun, 6 Nov 2022 17:09:55 +0100
Subject: [PATCH] fix: clean up responsive

---
 components/Button.tsx                      |  11 +-
 components/CopyField.tsx                   |   4 +-
 components/CreationSteps.tsx               |  64 +++++---
 components/DatePicker.tsx                  |  39 ++---
 components/Error.tsx                       |   2 +-
 components/ListInput.tsx                   |   6 +-
 components/Switch.tsx                      |   4 +-
 components/admin/AccessResults.tsx         |  27 ++--
 components/admin/ButtonWithConfirm.tsx     |   6 +-
 components/admin/CandidateField.tsx        |  13 +-
 components/admin/CandidateModalDel.tsx     |  36 ++---
 components/admin/CandidateModalSet.tsx     |  36 ++---
 components/admin/CandidatesField.tsx       |  22 ++-
 components/admin/ConfirmField.tsx          |  22 ++-
 components/admin/GradeField.tsx            |   2 +-
 components/admin/Grades.tsx                |  26 ++-
 components/admin/LimitDate.tsx             |  27 ++--
 components/admin/ParamsField.tsx           |  40 +++--
 components/admin/Private.tsx               |  57 ++++---
 components/admin/TrashButton.tsx           |   8 +-
 components/admin/VoteButtonWithConfirm.tsx |   2 +-
 components/banner/Facebook.tsx             |   8 +-
 components/banner/Twitter.tsx              |   8 +-
 components/layouts/Footer.tsx              |   6 +-
 components/layouts/Header.tsx              | 180 +++++++++++----------
 components/layouts/HeaderMobile.tsx        |  10 +-
 components/layouts/LanguageSelector.tsx    |   4 +-
 pages/admin/confirm/[pid].tsx              |   6 +-
 pages/admin/settings/index.tsx             |   4 +-
 pages/faq.tsx                              |   2 +-
 pages/index.tsx                            |   3 +-
 pages/legal-notices.tsx                    |   2 +-
 pages/privacy-policy.tsx                   |   2 +-
 pages/result/[pid]/[[...tid]].tsx          |  10 +-
 pages/settings/index.tsx                   |   8 +-
 pages/vote/[pid]/[[...tid]].tsx            |  18 +--
 pages/vote/[pid]/confirm.tsx               |   8 +-
 public/locales/en/resource.json            |   4 +-
 public/locales/fr/resource.json            |   4 +-
 styles/scss/_admin.scss                    |  22 ++-
 styles/scss/_app.scss                      |  12 +-
 styles/scss/_bootstrap.scss                |   8 +-
 styles/scss/_button.scss                   |  19 ++-
 styles/scss/_datepicker.scss               |   3 +-
 styles/scss/_switch.scss                   |   6 +-
 45 files changed, 443 insertions(+), 368 deletions(-)

diff --git a/components/Button.tsx b/components/Button.tsx
index f34a144..93ea9f7 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,3 +1,4 @@
+import { isValidElement } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Row, Col, Button } from 'reactstrap';
@@ -5,33 +6,35 @@ import { Row, Col, Button } from 'reactstrap';
 interface ButtonProps {
   children?: React.ReactNode;
   icon?: IconProp;
+  customIcon?: JSX.Element;
   position?: 'left' | 'right';
   [props: string]: any;
 }
 const ButtonWithIcon = ({
   icon,
+  customIcon,
   children,
   position = 'left',
   ...props
 }: ButtonProps) => {
-  if (icon && position === 'left') {
+  if ((icon || customIcon) && position === 'left') {
     return (
       <Button {...props}>
         <Row className="gx-2 align-items-end">
           <Col className="col-auto">
-            <FontAwesomeIcon icon={icon} />
+            {customIcon ? customIcon : <FontAwesomeIcon icon={icon} />}
           </Col>
           <Col className="col-auto">{children}</Col>
         </Row>
       </Button>
     );
-  } else if (icon && position === 'right') {
+  } else if ((icon || customIcon) && position === 'right') {
     return (
       <Button {...props}>
         <Row className="gx-2 align-items-end">
           <Col className="col-auto">{children}</Col>
           <Col className="col-auto">
-            <FontAwesomeIcon icon={icon} />
+            {customIcon ? customIcon : <FontAwesomeIcon icon={icon} />}
           </Col>
         </Row>
       </Button>
diff --git a/components/CopyField.tsx b/components/CopyField.tsx
index 924bab2..e55bcbb 100644
--- a/components/CopyField.tsx
+++ b/components/CopyField.tsx
@@ -41,7 +41,7 @@ const CopyField = (props) => {
           className="btn btn-success"
           type="button"
         >
-          <FontAwesomeIcon icon={iconOpen} className="mr-2" />
+          <FontAwesomeIcon icon={iconOpen}  />
           {t("Go")}
         </Button> */}
 
@@ -54,7 +54,7 @@ const CopyField = (props) => {
           type="button"
         >
           {text}
-          <FontAwesomeIcon icon={iconCopy} className="ml-2" />
+          <FontAwesomeIcon icon={iconCopy} />
         </Button>
       </div>
       <UncontrolledTooltip placement="top" target="tooltip" trigger="click">
diff --git a/components/CreationSteps.tsx b/components/CreationSteps.tsx
index 3fe38e6..b6e7754 100644
--- a/components/CreationSteps.tsx
+++ b/components/CreationSteps.tsx
@@ -6,18 +6,17 @@ import { faArrowLeft, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const { Row, Col, Container } = require('reactstrap');
 
-const Step = ({ name, position, active, check, onClick }) => {
+const DesktopStep = ({ name, position, active, checked, onClick }) => {
   const { t } = useTranslation();
-  const disabled = !active && !check;
+  const disabled = !active && !checked ? ' disabled' : '';
+  const activeClass = active ? 'bg-white text-primary' : 'bg-secondary';
   return (
     <Col className="col-auto" role={onClick ? 'button' : ''} onClick={onClick}>
-      <Row
-        className={`align-items-center creation-step ${
-          active ? 'active' : ''
-        } ${disabled ? 'disabled' : ''}`}
-      >
-        <Col className="col-auto badge align-items-center justify-content-center d-flex">
-          <div>{check ? <FontAwesomeIcon icon={faCheck} /> : position}</div>
+      <Row className={`align-items-center creation-step ${disabled} `}>
+        <Col
+          className={`${activeClass} creation-step-icon desktop_step col-auto align-items-center justify-content-center d-flex`}
+        >
+          {checked ? <FontAwesomeIcon icon={faCheck} /> : position}
         </Col>
         <Col className="col-auto name">{t(`admin.step-${name}`)}</Col>
       </Row>
@@ -25,6 +24,20 @@ const Step = ({ name, position, active, check, onClick }) => {
   );
 };
 
+const MobileStep = ({ position, active, checked, onClick }) => {
+  const disabled = !active && !checked ? ' bg-secondary disabled' : '';
+  const activeClass = active ? 'bg-white text-primary' : 'bg-secondary';
+  return (
+    <div
+      className={`${disabled} ${activeClass} mobile_step align-items-center justify-content-center d-flex me-2 fw-bold`}
+      role={onClick ? 'button' : ''}
+      onClick={onClick}
+    >
+      {checked ? <FontAwesomeIcon icon={faCheck} /> : position}
+    </div>
+  );
+};
+
 export const creationSteps = ['candidate', 'params', 'confirm'];
 
 interface GoToStep {
@@ -56,26 +69,28 @@ export const ProgressSteps = ({
   const gotosteps = [goToCandidates, goToParams];
 
   return (
-    <Row className={`w-100 m-5 d-flex ${className}`} {...props}>
-      <Col className="col-lg-3 col-6 mb-3">
+    <Row className={`w-100 ms-2 mt-4 m-md-5 d-flex ${className}`} {...props}>
+      <Col className="col-lg-3 col-8 mb-3 d-none d-md-block">
         {step === 'candidate' ? null : (
-          <Row className="gx-2 align-items-end">
+          <Row
+            role="button"
+            onClick={goToCandidates}
+            className="gx-2 align-items-end"
+          >
             <Col className="col-auto">
               <FontAwesomeIcon icon={faArrowLeft} />
             </Col>
-            <Col role="button" onClick={goToCandidates} className="col-auto">
-              {t('admin.candidates-back-step')}
-            </Col>
+            <Col className="col-auto">{t('admin.candidates-back-step')}</Col>
           </Row>
         )}
       </Col>
-      <Col className="col-lg-6 col-12">
-        <Row className="w-100 gx-5 justify-content-center">
+      <Col className="d-none d-md-block col-lg-6 col-12">
+        <Row className="w-100 gx-4 gx-md-5 justify-content-center">
           {creationSteps.map((name, i) => (
-            <Step
+            <DesktopStep
               name={name}
               active={step === name}
-              check={i < stepId}
+              checked={i < stepId}
               key={i}
               position={i + 1}
               onClick={gotosteps[i]}
@@ -83,6 +98,17 @@ export const ProgressSteps = ({
           ))}
         </Row>
       </Col>
+      <Col className="d-block d-md-none col-lg-6 col-12 d-flex">
+        {creationSteps.map((name, i) => (
+          <MobileStep
+            active={step === name}
+            checked={i < stepId}
+            key={i}
+            position={i + 1}
+            onClick={gotosteps[i]}
+          />
+        ))}
+      </Col>
       <Col className="col-3"></Col>
     </Row>
   );
diff --git a/components/DatePicker.tsx b/components/DatePicker.tsx
index 119de60..51dd6b7 100644
--- a/components/DatePicker.tsx
+++ b/components/DatePicker.tsx
@@ -15,34 +15,37 @@ interface InputProps {
 }
 export type ButtonRef = HTMLButtonElement;
 
-const CustomDatePicker = ({ date, setDate }) => {
+const CustomDatePicker = ({ date, setDate, className = '', ...props }) => {
   const { t } = useTranslation();
 
   const ExampleCustomInput = forwardRef<ButtonRef, InputProps>(
     ({ value, onClick }, ref) => (
-      <button onClick={onClick} ref={ref}>
-        <Row className="p-2 align-items-end">
-          <Col className="col-auto me-auto">
-            <Row className="gx-3 align-items-end">
-              <Col className="col-auto">
-                <FontAwesomeIcon icon={faCalendarDays} />
-              </Col>
-              <Col className="col-auto">
-                {t('admin.until')} {new Date(value).toDateString()}
-              </Col>
-            </Row>
-          </Col>
-          <Col className="col-auto">
-            <FontAwesomeIcon className="text-muted" icon={faChevronDown} />
-          </Col>
-        </Row>
-      </button>
+      <div className="d-grid">
+        <button onClick={onClick} ref={ref}>
+          <Row className="p-2 align-items-end">
+            <Col className="col-auto me-auto">
+              <Row className="gx-3 align-items-end">
+                <Col className="col-auto">
+                  <FontAwesomeIcon icon={faCalendarDays} />
+                </Col>
+                <Col className="col-auto">
+                  {t('admin.until')} {new Date(value).toDateString()}
+                </Col>
+              </Row>
+            </Col>
+            <Col className="col-auto">
+              <FontAwesomeIcon className="text-muted" icon={faChevronDown} />
+            </Col>
+          </Row>
+        </button>
+      </div>
     )
   );
 
   return (
     <DatePicker
       selected={date}
+      className={className}
       customInput={<ExampleCustomInput value={null} onClick={null} />}
       onChange={(date) => setDate(date)}
     />
diff --git a/components/Error.tsx b/components/Error.tsx
index d3bb8a8..d0ca17d 100644
--- a/components/Error.tsx
+++ b/components/Error.tsx
@@ -9,7 +9,7 @@ const Error = ({ msg }) => {
     <Container className="full-height-container">
       <Row>
         <Link href="/">
-          <a className="d-block ml-auto mr-auto mb-4">
+          <a className="d-block mx-auto mb-4">
             <img src="/logos/logo.svg" alt="logo" height="128" />
           </a>
         </Link>
diff --git a/components/ListInput.tsx b/components/ListInput.tsx
index 280edd0..f3f4792 100644
--- a/components/ListInput.tsx
+++ b/components/ListInput.tsx
@@ -8,7 +8,7 @@ import Button from '@components/Button';
 const InputField = ({ value, onDelete }) => {
   return (
     <Button
-      icon={faXmark}
+      customIcon={<FontAwesomeIcon icon={faXmark} onClick={onDelete} />}
       className="bg-light text-primary border-0"
       outline={true}
       style={{ boxShadow: 'unset' }}
@@ -24,7 +24,9 @@ const ListInput = ({ onEdit, inputs, validator }) => {
   const { t } = useTranslation();
 
   const handleDelete = (position: number) => {
-    onEdit({ ...inputs }.splice(position));
+    const inputCopy = [...inputs];
+    inputCopy.splice(position, 1);
+    onEdit(inputCopy);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
diff --git a/components/Switch.tsx b/components/Switch.tsx
index 718604a..ac119a2 100644
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@@ -1,6 +1,6 @@
-const Switch = ({ toggle, state }) => {
+const Switch = ({ toggle, state, className = '' }) => {
   return (
-    <div className="form-check form-switch">
+    <div className={`${className} form-check form-switch`}>
       <input
         onChange={toggle}
         className="form-check-input"
diff --git a/components/admin/AccessResults.tsx b/components/admin/AccessResults.tsx
index f44f2e1..d1e1069 100644
--- a/components/admin/AccessResults.tsx
+++ b/components/admin/AccessResults.tsx
@@ -18,17 +18,24 @@ const AccessResults = () => {
   };
 
   return (
-    <Container className="bg-white container-fluid p-4">
-      <Row>
-        <Col className="col-auto me-auto">
-          <h4 className="text-dark">{t('admin.access-results')}</h4>
-          <p className="text-muted">{t('admin.access-results-desc')}</p>
-        </Col>
-        <Col className="col-auto d-flex align-items-center">
+    <>
+      <Container className="bg-white p-3 p-md-4">
+        <div className="d-flex">
+          <div className="me-auto">
+            <h4 className="text-dark mb-0">{t('admin.access-results')}</h4>
+            <p className="text-muted d-none d-md-block">
+              {t('admin.access-results-desc')}
+            </p>
+          </div>
           <Switch toggle={toggle} state={election.restrictResult} />
-        </Col>
-      </Row>
-    </Container>
+        </div>
+      </Container>
+      {election.restrictResult ? (
+        <Container className="text-white d-md-none p-3">
+          {t('admin.access-results-desc')}
+        </Container>
+      ) : null}
+    </>
   );
 };
 
diff --git a/components/admin/ButtonWithConfirm.tsx b/components/admin/ButtonWithConfirm.tsx
index 0012080..e7ac33f 100644
--- a/components/admin/ButtonWithConfirm.tsx
+++ b/components/admin/ButtonWithConfirm.tsx
@@ -14,8 +14,8 @@ const ButtonWithConfirm = ({ className, label, onDelete }) => {
     <div className="input-group-append cancelButton">
       <button type="button" className={'btn ' + className} onClick={toggle}>
         <div className="annuler">
-          <img className="ml-0" src="/arrow-dark-left.svg" />
-          <p className="ml-0">Annuler</p>
+          <img src="/arrow-dark-left.svg" />
+          <p>Annuler</p>
         </div>
       </button>
       <Modal
@@ -44,7 +44,7 @@ const ButtonWithConfirm = ({ className, label, onDelete }) => {
               onDelete();
             }}
           >
-            <FontAwesomeIcon icon={faTrashAlt} className="mr-2" />
+            <FontAwesomeIcon icon={faTrashAlt} />
             {t('Yes')}
           </Button>
         </ModalFooter>
diff --git a/components/admin/CandidateField.tsx b/components/admin/CandidateField.tsx
index 3bad202..67bc68c 100644
--- a/components/admin/CandidateField.tsx
+++ b/components/admin/CandidateField.tsx
@@ -43,16 +43,16 @@ const CandidateField = ({
   const toggleSet = () => setModalSet((m) => !m);
   const toggleDel = () => setModalDel((m) => !m);
 
+  const activeClass = active
+    ? 'bg-white text-secondary'
+    : 'border border-dashed border-2 border-light border-opacity-25';
+
   return (
     <Row
-      className={`${
-        className || ''
-      } p-2 my-3 border border-dashed border-2 border-light border-opacity-25 align-items-center ${
-        active ? 'active' : ''
-      }`}
+      className={`${activeClass} align-items-center ${className}`}
       {...props}
     >
-      <Col onClick={toggleSet} className="cursor-pointer col-10 me-auto">
+      <Col onClick={toggleSet} role="button" className="col-10 me-auto">
         <Row className="gx-3">
           <Col className="col-2 justify-content-start align-items-center d-flex">
             <Image
@@ -74,6 +74,7 @@ const CandidateField = ({
         {active ? (
           <FontAwesomeIcon
             icon={faTrashCan}
+            className="text-warning"
             onClick={() => setModalDel((m) => !m)}
           />
         ) : (
diff --git a/components/admin/CandidateModalDel.tsx b/components/admin/CandidateModalDel.tsx
index bef79e2..e49afcd 100644
--- a/components/admin/CandidateModalDel.tsx
+++ b/components/admin/CandidateModalDel.tsx
@@ -44,28 +44,20 @@ 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"
-              icon={faArrowLeft}
-              outline={true}
-            >
-              {t('admin.candidate-confirm-back')}
-            </Button>
-          </Col>
-          <Col className="col-auto ">
-            <Button
-              icon={faTrashAlt}
-              outline={true}
-              color="primary"
-              onClick={removeCandidate}
-            >
-              {t('admin.candidate-confirm-ok')}
-            </Button>
-          </Col>
-        </Row>
+        <div className="mt-5 gap-2 d-grid mb-3 d-md-flex">
+          <Button
+            onClick={toggle}
+            color="dark"
+            icon={faArrowLeft}
+            outline={true}
+            className="me-md-auto"
+          >
+            {t('admin.candidate-confirm-back')}
+          </Button>
+          <Button icon={faTrashAlt} color="danger" onClick={removeCandidate}>
+            {t('admin.candidate-confirm-ok')}
+          </Button>
+        </div>
       </ModalBody>
     </Modal>
   );
diff --git a/components/admin/CandidateModalSet.tsx b/components/admin/CandidateModalSet.tsx
index caed759..250ef00 100644
--- a/components/admin/CandidateModalSet.tsx
+++ b/components/admin/CandidateModalSet.tsx
@@ -141,28 +141,20 @@ const CandidateModal = ({ isOpen, position, toggle }) => {
                 // maxLength="250"
               />
             </div>
-            <Row className="mt-5 mb-3">
-              <Col className="col-auto me-auto">
-                <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}
-                  icon={faPlus}
-                >
-                  {t('common.save')}
-                </Button>
-              </Col>
-            </Row>
+            <div className="mt-5 gap-2 d-grid mb-3 d-md-flex">
+              <Button
+                onClick={toggle}
+                color="dark"
+                className="me-md-auto"
+                outline={true}
+                icon={faArrowLeft}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button color="primary" onClick={save} icon={faPlus}>
+                {t('common.save')}
+              </Button>
+            </div>
           </Form>
         </Col>
       </ModalBody>
diff --git a/components/admin/CandidatesField.tsx b/components/admin/CandidatesField.tsx
index 0d2acb7..2287b88 100644
--- a/components/admin/CandidatesField.tsx
+++ b/components/admin/CandidatesField.tsx
@@ -29,18 +29,28 @@ const CandidatesField = ({ onSubmit }) => {
   }, [candidates]);
 
   return (
-    <Container className="candidate flex-grow-1 mt-5 flex-column d-flex justify-content-between">
+    <Container className="candidate flex-grow-1 my-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 className="d-flex flex-column mx-2 mx-md-0">
+          {candidates.map((candidate, index) => {
+            return (
+              <CandidateField
+                key={index}
+                position={index}
+                className="px-1 py-3  my-3"
+              />
+            );
+          })}
+        </div>
       </div>
-      <div className="mb-5 d-flex justify-content-center">
+
+      <Container className="my-5 d-md-flex d-grid justify-content-md-center">
         <Button
           outline={true}
           color="secondary"
+          className="bg-blue"
           onClick={onSubmit}
           disabled={disabled}
           icon={faArrowRight}
@@ -48,7 +58,7 @@ const CandidatesField = ({ onSubmit }) => {
         >
           {t('admin.candidates-submit')}
         </Button>
-      </div>
+      </Container>
     </Container>
   );
 };
diff --git a/components/admin/ConfirmField.tsx b/components/admin/ConfirmField.tsx
index 4db5ee7..7568208 100644
--- a/components/admin/ConfirmField.tsx
+++ b/components/admin/ConfirmField.tsx
@@ -46,7 +46,7 @@ const CandidatesField = () => {
   const { t } = useTranslation();
   const election = useElection();
   return (
-    <Container className="bg-white p-4">
+    <Container className="bg-white p-4 mt-3 mt-md-0">
       <Row>
         <Col className="col-auto me-auto">
           <h5 className="text-dark">{t('admin.confirm-candidates')}</h5>
@@ -56,7 +56,11 @@ const CandidatesField = () => {
         </Col>
       </Row>
       {election.candidates.map((_, i) => (
-        <CandidateField position={i} key={i} className="text-primary" />
+        <CandidateField
+          position={i}
+          key={i}
+          className="text-primary m-0 py-2"
+        />
       ))}
     </Container>
   );
@@ -71,16 +75,19 @@ const ConfirmField = ({ onSubmit, goToCandidates, goToParams }) => {
       fluid="xl"
       className="my-5 flex-column d-flex justify-content-center"
     >
+      <Container className="px-0 d-md-none mb-5">
+        <h4>{t('admin.confirm-title')}</h4>
+      </Container>
       <Row>
         <Col className="col-lg-3 col-12">
-          <Container className="py-4">
+          <Container className="py-4 d-none d-md-block">
             <h4>{t('common.the-vote')}</h4>
           </Container>
           <TitleField />
           <CandidatesField />
         </Col>
-        <Col className="col-lg-9 col-12">
-          <Container className="py-4">
+        <Col className="col-lg-9 col-12 mt-3 mt-md-0">
+          <Container className="py-4 d-none d-md-block">
             <h4>{t('common.the-params')}</h4>
           </Container>
           <AccessResults />
@@ -89,17 +96,18 @@ const ConfirmField = ({ onSubmit, goToCandidates, goToParams }) => {
           <Private />
         </Col>
       </Row>
-      <div className="my-5 d-flex justify-content-center">
+      <Container className="my-5 d-md-flex d-grid justify-content-md-center">
         <Button
           outline={true}
           color="secondary"
+          className="bg-blue"
           onClick={onSubmit}
           icon={faArrowRight}
           position="right"
         >
           {t('admin.confirm-submit')}
         </Button>
-      </div>
+      </Container>
     </Container>
   );
 };
diff --git a/components/admin/GradeField.tsx b/components/admin/GradeField.tsx
index 572698b..9c8e74f 100644
--- a/components/admin/GradeField.tsx
+++ b/components/admin/GradeField.tsx
@@ -45,7 +45,7 @@ const GradeField = ({ value }) => {
     <div
       style={style}
       onClick={toggle}
-      className="p-2 m-1 fw-bold rounded-1 d-flex justify-content-between gap-3"
+      className="py-2 px-3 m-1 fw-bold rounded-1 d-flex justify-content-between gap-3"
     >
       <div className={grade.active ? '' : 'text-decoration-line-through'}>
         {grade.name}
diff --git a/components/admin/Grades.tsx b/components/admin/Grades.tsx
index 4682dce..5adaa5c 100644
--- a/components/admin/Grades.tsx
+++ b/components/admin/Grades.tsx
@@ -59,22 +59,16 @@ const Grades = () => {
   const dispatch = useElectionDispatch();
 
   return (
-    <Container className="bg-white container-fluid p-4 mt-1">
-      <Row>
-        <Col className="col-auto me-auto">
-          <h4 className="text-dark">{t('common.grades')}</h4>
-          <p className="text-muted">{t('admin.grades-desc')}</p>
-        </Col>
-        <Col className="col-auto d-flex align-items-center">
-          <Row className="gx-1">
-            {grades.map((_, i) => (
-              <Col className="col-auto">
-                <GradeField value={i} key={i} />
-              </Col>
-            ))}
-            {/* <AddField /> */}
-          </Row>
-        </Col>
+    <Container className="bg-white p-3 p-md-4 mt-1">
+      <h4 className="text-dark mb-0">{t('common.grades')}</h4>
+      <p className="text-muted">{t('admin.grades-desc')}</p>
+      <Row className="gx-1">
+        {grades.map((_, i) => (
+          <Col className="col-auto">
+            <GradeField value={i} key={i} />
+          </Col>
+        ))}
+        {/* <AddField /> */}
       </Row>
     </Container>
   );
diff --git a/components/admin/LimitDate.tsx b/components/admin/LimitDate.tsx
index da26091..57ad318 100644
--- a/components/admin/LimitDate.tsx
+++ b/components/admin/LimitDate.tsx
@@ -30,15 +30,15 @@ const LimitDate = () => {
   const remainingDays = Math.ceil((endDate.getTime() - now.getTime()) / oneDay);
 
   return (
-    <Container className="bg-white container-fluid p-4 mt-1">
-      <Row>
-        <Col className="col-auto me-auto">
-          <h4 className="text-dark">
+    <Container className="bg-white p-3 p-md-4 mt-1">
+      <div className="d-flex">
+        <div className="me-auto">
+          <h4 className="text-dark mb-0">
             {t('admin.limit-duration')}
             {hasDate ? (
               <>
                 {' '}
-                <div className="badge ml-3 text-bg-light text-black-50">
+                <div className="badge text-bg-light text-black-50">
                   {`${t('admin.ending-in')} ${remainingDays} ${t(
                     'common.days'
                   )}`}
@@ -47,18 +47,15 @@ const LimitDate = () => {
             ) : null}
           </h4>
           {desc === '' ? null : <p className="text-muted">{desc}</p>}
-        </Col>
-        <Col className="col-auto d-flex align-items-center">
+        </div>
+        <div className="col-auto d-flex align-items-center">
           <Switch toggle={toggle} state={hasDate} />
-        </Col>
-      </Row>
+        </div>
+      </div>
       {hasDate ? (
-        <Row>
-          <Col className="col-auto">
-            <DatePicker date={endDate} setDate={setEndDate} />
-          </Col>
-          <Col className="col-auto"></Col>
-        </Row>
+        <div className="mt-3">
+          <DatePicker date={endDate} setDate={setEndDate} />
+        </div>
       ) : null}
     </Container>
   );
diff --git a/components/admin/ParamsField.tsx b/components/admin/ParamsField.tsx
index 619dda8..f3adcf9 100644
--- a/components/admin/ParamsField.tsx
+++ b/components/admin/ParamsField.tsx
@@ -11,23 +11,29 @@ const ParamsField = ({ onSubmit }) => {
   const { t } = useTranslation();
 
   return (
-    <Container className="params flex-grow-1 my-5 flex-column d-flex justify-content-between">
-      <div className="d-flex flex-column">
-        <AccessResults />
-        <LimitDate />
-        <Grades />
-        <Private />
-      </div>
-      <div className="my-4 d-flex justify-content-center">
-        <Button
-          outline={true}
-          color="secondary"
-          onClick={onSubmit}
-          icon={faArrowRight}
-          position="right"
-        >
-          {t('admin.params-submit')}
-        </Button>
+    <Container className="params d-flex flex-column flex-grow-1 my-5">
+      <Container className="px-0 d-md-none mb-5">
+        <h4>{t('admin.params-title')}</h4>
+      </Container>
+      <div className="d-flex flex-grow-1 flex-column justify-content-between">
+        <div className="d-flex flex-column">
+          <AccessResults />
+          <LimitDate />
+          <Grades />
+          <Private />
+        </div>
+        <Container className="my-5 d-md-flex d-grid justify-content-md-center">
+          <Button
+            outline={true}
+            color="secondary"
+            className="bg-blue"
+            onClick={onSubmit}
+            icon={faArrowRight}
+            position="right"
+          >
+            {t('admin.params-submit')}
+          </Button>
+        </Container>
       </div>
     </Container>
   );
diff --git a/components/admin/Private.tsx b/components/admin/Private.tsx
index 25be3ff..7c33fce 100644
--- a/components/admin/Private.tsx
+++ b/components/admin/Private.tsx
@@ -44,34 +44,41 @@ const Private = () => {
   };
 
   return (
-    <Container className="bg-white container-fluid p-4 mt-1">
-      <Row>
-        <Col className="col-auto me-auto">
-          <h4 className="text-dark">{t('admin.private-title')}</h4>
-          <p className="text-muted">{t('admin.private-desc')}</p>
-        </Col>
-        <Col className="col-auto d-flex align-items-center">
+    <>
+      <Container className="bg-white  p-3 p-md-4 mt-1">
+        <div className="d-flex">
+          <div className="me-auto">
+            <h4 className="mb-0 text-dark">{t('admin.private-title')}</h4>
+            <p className="text-muted d-none d-md-block">
+              {t('admin.private-desc')}
+            </p>
+          </div>
           <Switch toggle={toggle} state={election.restrictVote} />
-        </Col>
-      </Row>
+        </div>
+        {election.restrictVote ? (
+          <>
+            <ListInput
+              onEdit={handleEmails}
+              inputs={election.emails}
+              validator={validateEmail}
+            />
+            <Row className="text-bg-light bt-3 p-2 text-muted fw-bold  d-none d-md-block">
+              <Col className="col-auto">
+                <FontAwesomeIcon icon={faCircleInfo} />
+              </Col>
+              <Col className="col-auto d-flex align-items-center">
+                {t('admin.private-tip')}
+              </Col>
+            </Row>
+          </>
+        ) : null}
+      </Container>
       {election.restrictVote ? (
-        <>
-          <ListInput
-            onEdit={handleEmails}
-            inputs={election.emails}
-            validator={validateEmail}
-          />
-          <Row className="text-bg-light bt-3 p-2 text-muted fw-bold">
-            <Col className="col-auto">
-              <FontAwesomeIcon icon={faCircleInfo} />
-            </Col>
-            <Col className="col-auto d-flex align-items-center">
-              {t('admin.private-tip')}
-            </Col>
-          </Row>
-        </>
+        <Container className="text-white d-md-none p-3">
+          {t('admin.access-results-desc')}
+        </Container>
       ) : null}
-    </Container>
+    </>
   );
 };
 
diff --git a/components/admin/TrashButton.tsx b/components/admin/TrashButton.tsx
index 361d91c..09182ef 100644
--- a/components/admin/TrashButton.tsx
+++ b/components/admin/TrashButton.tsx
@@ -12,11 +12,7 @@ const TrashButton = ({ className, label, onClick }) => {
 
   return (
     <div className="input-group-append cancelButton">
-      <FontAwesomeIcon
-        onClick={toggle}
-        icon={faTrashAlt}
-        className="mr-2 cursorPointer"
-      />
+      <FontAwesomeIcon onClick={toggle} icon={faTrashAlt} role="button" />
       <Modal
         isOpen={visibled}
         toggle={toggle}
@@ -43,7 +39,7 @@ const TrashButton = ({ className, label, onClick }) => {
               onClick();
             }}
           >
-            <FontAwesomeIcon icon={faTrashAlt} className="mr-2" />
+            <FontAwesomeIcon icon={faTrashAlt} />
             {t('Yes')}
           </Button>
         </ModalFooter>
diff --git a/components/admin/VoteButtonWithConfirm.tsx b/components/admin/VoteButtonWithConfirm.tsx
index 3012ead..0d5407b 100644
--- a/components/admin/VoteButtonWithConfirm.tsx
+++ b/components/admin/VoteButtonWithConfirm.tsx
@@ -18,7 +18,7 @@ const VoteButtonWithConfirm = ({ action }) => {
         onClick={toggle}
       >
         <div className="annuler">
-          <FontAwesomeIcon icon={faCheck} className="mr-2 my-auto" />
+          <FontAwesomeIcon icon={faCheck} className="my-auto" />
           {t('Submit my vote')}
         </div>
       </button>
diff --git a/components/banner/Facebook.tsx b/components/banner/Facebook.tsx
index c8c5ce4..5396cee 100644
--- a/components/banner/Facebook.tsx
+++ b/components/banner/Facebook.tsx
@@ -16,13 +16,7 @@ const Facebook = (props) => {
       'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700'
     );
   };
-  return (
-    <img
-      src="/facebook.svg"
-      onClick={handleClick}
-      className="cursorPointer mr-2"
-    />
-  );
+  return <img src="/facebook.svg" onClick={handleClick} role="button" />;
 };
 
 export default Facebook;
diff --git a/components/banner/Twitter.tsx b/components/banner/Twitter.tsx
index 92ca66a..2505d73 100644
--- a/components/banner/Twitter.tsx
+++ b/components/banner/Twitter.tsx
@@ -16,13 +16,7 @@ const Twitter = (props) => {
       'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700'
     );
   };
-  return (
-    <img
-      src="/twitter.svg"
-      onClick={handleClick}
-      className="cursorPointer mr-2"
-    />
-  );
+  return <img src="/twitter.svg" onClick={handleClick} role="button" />;
 };
 
 export default Twitter;
diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx
index a16f29b..42b38d1 100644
--- a/components/layouts/Footer.tsx
+++ b/components/layouts/Footer.tsx
@@ -39,11 +39,7 @@ const Footer = () => {
       ),
     },
     {
-      component: (
-        <div>
-          <LanguageSelector />
-        </div>
-      ),
+      component: <LanguageSelector selectedSize={14} />,
     },
   ];
 
diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
index 1235317..36ebe7d 100644
--- a/components/layouts/Header.tsx
+++ b/components/layouts/Header.tsx
@@ -1,9 +1,11 @@
 /* eslint react/prop-types: 0 */
 import { useState } from 'react';
-import { Collapse, Navbar, Nav, NavItem, Button } from 'reactstrap';
+import { Collapse, Nav, NavItem, Button } from 'reactstrap';
 import Link from 'next/link';
+import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
 import LanguageSelector from './LanguageSelector';
+import openMenuIcon from '../../public/open-menu-icon.svg';
 
 const Header = () => {
   const [isOpen, setOpen] = useState(false);
@@ -13,104 +15,106 @@ const Header = () => {
   const { t } = useTranslation('resource');
 
   return (
-    <header className="mobile-header">
-      <Navbar light className="nav-mobile" expand="lg">
-        <div className="navbar-header">
-          <Button onClick={toggle} className="navbar-toggle pt-0 mt-0">
-            <img src="/open-menu-icon.svg" alt="" height="50" />
-          </Button>
-        </div>
+    <>
+      <Image
+        onClick={toggle}
+        role="button"
+        className="btn_menu"
+        src={openMenuIcon}
+        alt="open menu icon"
+        height="50"
+        width="50"
+      />
 
-        <Collapse isOpen={isOpen} navbar>
-          <Nav className="ml-auto navbar-nav-scroll" navbar>
-            <div className="d-flex flex-row justify-content-between nav-logo">
-              <Link href="/" className="navbar-brand navbar-brand-mobile">
-                <img src="/logos/logo.svg" alt="logo" height="80" />
-              </Link>
+      <Collapse isOpen={isOpen} navbar>
+        <Nav className="navbar-nav-scroll" navbar>
+          <div className="d-flex flex-row justify-content-between nav-logo">
+            <Link href="/" className="navbar-brand navbar-brand-mobile">
+              <img src="/logos/logo.svg" alt="logo" height="80" />
+            </Link>
 
-              <Button
+            <Button
+              onClick={toggle}
+              className="navbar-toggle navbar-close-button"
+            >
+              <img height="20" src="/close-menu-icon.svg" alt="logo" />
+            </Button>
+          </div>
+          <div>
+            <NavItem>
+              <Link
+                href="/"
                 onClick={toggle}
-                className="navbar-toggle navbar-close-button"
+                className="navbar-my-link nav-link"
               >
-                <img height="20" src="/close-menu-icon.svg" alt="logo" />
-              </Button>
-            </div>
-            <div>
-              <NavItem>
-                <Link
-                  href="/"
-                  onClick={toggle}
-                  className="navbar-my-link nav-link"
-                >
-                  Le jugement majoritaire
-                </Link>
-              </NavItem>
+                Le jugement majoritaire
+              </Link>
+            </NavItem>
 
-              <NavItem>
-                <Link
-                  href="/"
-                  onClick={toggle}
-                  className="navbar-my-link nav-link"
-                >
-                  Qui sommes-nous ?
-                </Link>
-              </NavItem>
+            <NavItem>
+              <Link
+                href="/"
+                onClick={toggle}
+                className="navbar-my-link nav-link"
+              >
+                Qui sommes-nous ?
+              </Link>
+            </NavItem>
 
-              <NavItem>
-                <Link
-                  href="/"
-                  onClick={toggle}
-                  className="navbar-my-link nav-link"
-                >
-                  Foire aux questions
-                </Link>
-              </NavItem>
+            <NavItem>
+              <Link
+                href="/"
+                onClick={toggle}
+                className="navbar-my-link nav-link"
+              >
+                Foire aux questions
+              </Link>
+            </NavItem>
 
-              <NavItem>
-                <Link
-                  href="/"
-                  onClick={toggle}
-                  className="navbar-my-link nav-link"
-                >
-                  On parle de nous
-                </Link>
-              </NavItem>
+            <NavItem>
+              <Link
+                href="/"
+                onClick={toggle}
+                className="navbar-my-link nav-link"
+              >
+                On parle de nous
+              </Link>
+            </NavItem>
 
-              <NavItem>
-                <Link
-                  href="/"
-                  onClick={toggle}
-                  className="navbar-my-link nav-link"
-                >
-                  Nous contactez
-                </Link>
-              </NavItem>
+            <NavItem>
+              <Link
+                href="/"
+                onClick={toggle}
+                className="navbar-my-link nav-link"
+              >
+                Nous contactez
+              </Link>
+            </NavItem>
 
-              <NavItem>
-                <LanguageSelector />
-              </NavItem>
-            </div>
+            <NavItem>
+              <LanguageSelector selectedSize={24} />
+            </NavItem>
+          </div>
 
-            <NavItem className="navbar-credits-container">
-              <Button className="btn-primary btn-nav">
-                <a href="/">Soutenez-nous</a>
-              </Button>
+          <NavItem className="navbar-credits-container">
+            <Button className="btn-primary btn-nav">
+              <a href="/">Soutenez-nous</a>
+            </Button>
 
-              <hr />
-              <div className="navbar-credits sharing sharing-mobile">
-                <p>Partagez l’application Mieux voter</p>
-                <Link href="https://www.facebook.com/mieuxvoter.fr/">
-                  <img src="/facebook.svg" className="mr-2" />
-                </Link>
-                <Link href="https://twitter.com/mieux_voter">
-                  <img src="/twitter.svg" className="mr-2" />
-                </Link>
-              </div>
-            </NavItem>
-          </Nav>
-        </Collapse>
-      </Navbar>
-    </header>
+            <hr />
+            <div className="navbar-credits sharing sharing-mobile">
+              <p>Partagez l’application Mieux voter</p>
+              <Link href="https://www.facebook.com/mieuxvoter.fr/">
+                <img src="/facebook.svg" />
+              </Link>
+              <Link href="https://twitter.com/mieux_voter">
+                <img src="/twitter.svg" />
+              </Link>
+            </div>
+          </NavItem>
+        </Nav>
+      </Collapse>
+    </>
   );
 };
 
diff --git a/components/layouts/HeaderMobile.tsx b/components/layouts/HeaderMobile.tsx
index 765f916..a0be675 100644
--- a/components/layouts/HeaderMobile.tsx
+++ b/components/layouts/HeaderMobile.tsx
@@ -2,11 +2,13 @@
 import { useState } from 'react';
 import { Collapse, Navbar, NavbarToggler, Nav, NavItem } from 'reactstrap';
 import Link from 'next/link';
+import Image from 'next/image';
 import Head from 'next/head';
 import { useTranslation } from 'next-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRocket } from '@fortawesome/free-solid-svg-icons';
 import LanguageSelector from './LanguageSelector';
+import logoColor from '../public/logos/logo-color.svg';
 
 const Header = () => {
   const [isOpen, setOpen] = useState(false);
@@ -24,9 +26,9 @@ const Header = () => {
           <Link href="/" className="navbar-brand">
             <div className="d-flex flex-row">
               <div className="align-self-center">
-                <img src="/logos/logo-color.svg" alt="logo" height="32" />
+                <Image src={logoColor} alt="logo" height="32" />
               </div>
-              <div className="align-self-center ml-2">
+              <div className="align-self-center">
                 <div className="logo-text">
                   <h1>
                     {t('Voting platform')}
@@ -38,11 +40,11 @@ const Header = () => {
           </Link>
           <NavbarToggler onClick={toggle} />
           <Collapse isOpen={isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="me-auto" navbar>
               <NavItem>
                 <Link href="/new/" className="text-primary nav-link">
                   {' '}
-                  <FontAwesomeIcon icon={faRocket} className="mr-2" />
+                  <FontAwesomeIcon icon={faRocket} />
                   {t('Start an election')}
                 </Link>
               </NavItem>
diff --git a/components/layouts/LanguageSelector.tsx b/components/layouts/LanguageSelector.tsx
index e2147be..777d14c 100644
--- a/components/layouts/LanguageSelector.tsx
+++ b/components/layouts/LanguageSelector.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import ReactFlagsSelect from 'react-flags-select';
 
-const LanguageSelector = () => {
+const LanguageSelector = (props) => {
   const router = useRouter();
   let localeShort = router.locale.substring(0, 2).toUpperCase();
   if (localeShort === 'EN') localeShort = 'GB';
@@ -20,8 +20,8 @@ const LanguageSelector = () => {
       }
       selected={localeShort}
       customLabels={{ GB: 'English', FR: 'Francais' }}
+      {...props}
       className="menu-flags"
-      selectedSize={14}
     />
   );
 };
diff --git a/pages/admin/confirm/[pid].tsx b/pages/admin/confirm/[pid].tsx
index 6eea963..4d2e618 100644
--- a/pages/admin/confirm/[pid].tsx
+++ b/pages/admin/confirm/[pid].tsx
@@ -109,10 +109,10 @@ const ConfirmElection = ({
   );
   const participate = invitationOnly ? null : (
     <>
-      <Col className="col-lg-3 text-center mr-10">
+      <Col className="col-lg-3 text-center">
         <Link href={`/vote/${pid}`}>
           <a target="_blank" rel="noreferrer" className="btn btn-success">
-            <FontAwesomeIcon icon={faVoteYea} className="mr-2" />
+            <FontAwesomeIcon icon={faVoteYea} />
             {t('resource.participateBtn')}
           </a>
         </Link>
@@ -222,7 +222,7 @@ const ConfirmElection = ({
         <Col className="text-center col-lg-3">
           <Link href={`/result/${pid}`}>
             <a target="_blank" rel="noreferrer" className="btn btn-secondary">
-              <FontAwesomeIcon icon={faPollH} className="mr-2" />
+              <FontAwesomeIcon icon={faPollH}  />
               {t("resource.resultsBtn")}
             </a>
           </Link>
diff --git a/pages/admin/settings/index.tsx b/pages/admin/settings/index.tsx
index dade81a..474d37d 100644
--- a/pages/admin/settings/index.tsx
+++ b/pages/admin/settings/index.tsx
@@ -387,7 +387,7 @@ const CreateElection = (props) => {
 //                 return (
 //                   <span
 //                     key={i}
-//                     className="badge badge-light mr-2 mt-2 "
+//                     className="badge badge-light mt-2 "
 //                     style={{
 //                       backgroundColor: mention.color,
 //                       color: "#fff",
@@ -442,7 +442,7 @@ const CreateElection = (props) => {
 //               />
 //               <div className="mt-2 mailMutedText">
 //                 <small className="text-muted">
-//                   <FontAwesomeIcon icon={faExclamationCircle} className="mr-2" />
+//                   <FontAwesomeIcon icon={faExclamationCircle}  />
 //                   {t("Copier-coller les emails des participants depuis un fichier Excel")}
 //                 </small>
 //               </div>
diff --git a/pages/faq.tsx b/pages/faq.tsx
index 4f2561b..a7032dd 100644
--- a/pages/faq.tsx
+++ b/pages/faq.tsx
@@ -16,7 +16,7 @@ const FAQ = () => {
   return (
     <Container>
       <Row>
-        <Link href="/" className="d-block ml-auto mr-auto mb-4">
+        <Link href="/" className="d-block mb-4">
           <img src="/logos/logo-line-white.svg" alt="logo" height="128" />
         </Link>
       </Row>
diff --git a/pages/index.tsx b/pages/index.tsx
index f0da194..f6bdeab 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -47,7 +47,7 @@ const StartForm = () => {
               onChange={(e) => setTitle(e.target.value)}
             />
 
-            <p className="pt-0 mt-0 mr-0 maxLength">250</p>
+            <p className="pt-0 mt-0 maxLength">250</p>
           </Row>
           <Row>
             <Link href={{ pathname: CREATE_ELECTION, query: { title: title } }}>
@@ -146,7 +146,6 @@ const ExperienceRow = () => {
               src={arrowRight}
               width={22}
               height={22}
-              className="mr-2"
               alt="icon arrow right"
             />
           </Button>
diff --git a/pages/legal-notices.tsx b/pages/legal-notices.tsx
index f837c48..9e11363 100644
--- a/pages/legal-notices.tsx
+++ b/pages/legal-notices.tsx
@@ -16,7 +16,7 @@ const LegalNotices = (props) => {
   return (
     <Container>
       <Row>
-        <Link href="/" className="d-block ml-auto mr-auto mb-4">
+        <Link href="/" className="d-block  mb-4">
           <img src="/logos/logo-line-white.svg" alt="logo" height="128" />
         </Link>
       </Row>
diff --git a/pages/privacy-policy.tsx b/pages/privacy-policy.tsx
index 6fd0d5f..d03330b 100644
--- a/pages/privacy-policy.tsx
+++ b/pages/privacy-policy.tsx
@@ -16,7 +16,7 @@ const PrivacyPolicy = (props) => {
   return (
     <Container>
       <Row>
-        <Link href="/" className="d-block ml-auto mr-auto mb-4">
+        <Link href="/" className="d-block mb-4">
           <img src="/logos/logo-line-white.svg" alt="logo" height="128" />
         </Link>
       </Row>
diff --git a/pages/result/[pid]/[[...tid]].tsx b/pages/result/[pid]/[[...tid]].tsx
index 0f40aea..d44b8d7 100644
--- a/pages/result/[pid]/[[...tid]].tsx
+++ b/pages/result/[pid]/[[...tid]].tsx
@@ -211,9 +211,7 @@ const Result = ({ candidates, numGrades, title, pid, err, finish }) => {
                         className="d-flex panel-title justify-content-between"
                       >
                         <div className="d-flex">
-                          <span className="resultPositionCard mr-2">
-                            {i + 1}
-                          </span>
+                          <span className="resultPositionCard ">{i + 1}</span>
                           <span className="candidateName">
                             {candidate.name}
                           </span>
@@ -232,11 +230,11 @@ const Result = ({ candidates, numGrades, title, pid, err, finish }) => {
                           </span>
                           <FontAwesomeIcon
                             icon={faChevronDown}
-                            className="ml-2 openIcon"
+                            className="openIcon"
                           />
                           <FontAwesomeIcon
                             icon={faChevronUp}
-                            className="ml-2 closeIcon"
+                            className="closeIcon"
                           />
                         </div>
                       </span>
@@ -298,7 +296,7 @@ const Result = ({ candidates, numGrades, title, pid, err, finish }) => {
                           {t('Comment interpréter les résultats')}
                           <FontAwesomeIcon
                             icon={faChevronRight}
-                            className="ml-2 closeIcon"
+                            className="closeIcon"
                           />
                         </Link>
                       </Row>
diff --git a/pages/settings/index.tsx b/pages/settings/index.tsx
index ae02004..4133946 100644
--- a/pages/settings/index.tsx
+++ b/pages/settings/index.tsx
@@ -318,7 +318,7 @@ const CreateElection = (props) => {
 //             className="text-white mt-3 mb-1"
 //             onClick={toggleAdvancedOptions}
 //           >
-//             <FontAwesomeIcon icon={faCogs} className="mr-2" />
+//             <FontAwesomeIcon icon={faCogs}  />
 //             {t("resource.advancedOptions")}
 //           </Button>
 //         </Col>
@@ -351,7 +351,7 @@ const CreateElection = (props) => {
 //                     <span className="text-dark">
 //                       {t("At the end of the election")}
 //                     </span>
-//                     <HelpButton className="ml-2">
+//                     <HelpButton >
 //                       {t(
 //                         "No one will be able to see the result until the end date is reached or until all participants have voted."
 //                       )}
@@ -529,7 +529,7 @@ const CreateElection = (props) => {
 //                   return (
 //                     <span
 //                       key={i}
-//                       className="badge badge-light mr-2 mt-2 "
+//                       className="badge badge-light mt-2 "
 //                       style={{
 //                         backgroundColor: mention.color,
 //                         color: "#fff",
@@ -605,7 +605,7 @@ const CreateElection = (props) => {
 //               className="btn btn-dark float-right btn-block"
 //               onClick={handleSendNotReady}
 //             >
-//               <FontAwesomeIcon icon={faCheck} className="mr-2" />
+//               <FontAwesomeIcon icon={faCheck}  />
 //               {t("Confirm")}
 //             </Button>
 //           )}
diff --git a/pages/vote/[pid]/[[...tid]].tsx b/pages/vote/[pid]/[[...tid]].tsx
index 24d411d..44f524a 100644
--- a/pages/vote/[pid]/[[...tid]].tsx
+++ b/pages/vote/[pid]/[[...tid]].tsx
@@ -200,7 +200,7 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
                     onClick={toggleDesktop}
                   >
                     {t('Je participe au vote')}
-                    <img src="/arrow-white.svg" className="mr-2" />
+                    <img src="/arrow-white.svg" />
                   </Button>
                   <Button
                     type="submit"
@@ -208,7 +208,7 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
                     onClick={toggleMobile}
                   >
                     {t('Je participe au vote')}
-                    <img src="/arrow-white.svg" className="mr-2" />
+                    <img src="/arrow-white.svg" />
                   </Button>
                 </Row>
                 <Row className="noAds my-0">
@@ -290,17 +290,17 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
             <Row className="sectionTwoRowThreeCol">
               <Button className="btn btn-block btn-secondary btn-sectionTwoHome">
                 Découvrez le jugement majoritaire
-                <img src="/arrow-white.svg" className="mr-2" />
+                <img src="/arrow-white.svg" />
               </Button>
             </Row>
           </Row>
           <Row className="sharing">
             <p>Partagez l’application Mieux voter</p>
             <Link href="https://www.facebook.com/mieuxvoter.fr/">
-              <img src="/facebook.svg" className="mr-2" />
+              <img src="/facebook.svg" />
             </Link>
             <Link href="https://twitter.com/mieux_voter">
-              <img src="/twitter.svg" className="mr-2" />
+              <img src="/twitter.svg" />
             </Link>
           </Row>
         </section>
@@ -341,7 +341,7 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
                               className="check"
                             >
                               <small
-                                className="nowrap d-lg-none ml-2 bold badge"
+                                className="nowrap d-lg-none bold badge"
                                 style={
                                   judgments.find((judgment) => {
                                     return (
@@ -436,7 +436,7 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
                     />
                   ) : (
                     <Button type="submit" className="mt-5 btn btn-transparent">
-                      <FontAwesomeIcon icon={faCheck} className="mr-2" />
+                      <FontAwesomeIcon icon={faCheck} />
                       {t('Submit my vote')}
                     </Button>
                   )}
@@ -486,7 +486,7 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
                                     className="check"
                                   >
                                     <small
-                                      className="nowrap d-lg-none ml-2 bold badge"
+                                      className="nowrap d-lg-none bold badge"
                                       style={
                                         judgments.find((judgment) => {
                                           return (
@@ -610,7 +610,7 @@ const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => {
               <VoteButtonWithConfirm action={handleSubmitWithoutAllRate} />
             ) : (
               <Button type="submit" className="my-3 btn btn-transparent">
-                <FontAwesomeIcon icon={faCheck} className="mr-2" />
+                <FontAwesomeIcon icon={faCheck} />
                 {t('Submit my vote')}
               </Button>
             )}
diff --git a/pages/vote/[pid]/confirm.tsx b/pages/vote/[pid]/confirm.tsx
index 3e8aac8..d8eb7d1 100644
--- a/pages/vote/[pid]/confirm.tsx
+++ b/pages/vote/[pid]/confirm.tsx
@@ -123,11 +123,11 @@ const VoteSuccess = ({ title, invitationOnly, pid, err }) => {
             <h2 className="confirmH2">{t('resource.voteSuccess')}</h2>
             <Button className="voteDesktop mx-auto mt-4 mb-5">
               {t('Voir les résultats')}
-              <img src="/arrow-white.svg" className="mr-2" />
+              <img src="/arrow-white.svg" />
             </Button>
             <Button className="voteMobile mx-auto mt-4 mb-5">
               {t('Voir les résultats')}
-              <img src="/arrow-white.svg" className="mr-2" />
+              <img src="/arrow-white.svg" />
             </Button>
           </Col>
         </Row>
@@ -144,7 +144,7 @@ const VoteSuccess = ({ title, invitationOnly, pid, err }) => {
             <Link href="/">
               <div>
                 {t('En savoir plus')}
-                <FontAwesomeIcon icon={faChevronRight} className="ml-2" />
+                <FontAwesomeIcon icon={faChevronRight} />
               </div>
             </Link>
           </Col>
@@ -178,7 +178,7 @@ const VoteSuccess = ({ title, invitationOnly, pid, err }) => {
         <div className="mx-auto my-5">
           <Row className="justify-content-center">
             <Link href="https://www.facebook.com/mieuxvoter.fr/">
-              <img src="/facebook.svg" className="mr-2" />
+              <img src="/facebook.svg" />
             </Link>
             <p className="m-0">
               {t('Faites découvrir l’application a vos amis')}
diff --git a/public/locales/en/resource.json b/public/locales/en/resource.json
index 83e43eb..fb25f1e 100644
--- a/public/locales/en/resource.json
+++ b/public/locales/en/resource.json
@@ -61,6 +61,7 @@
   "admin.candidates-submit": "Validate the candidates",
   "admin.candidates-back-step": "Back to candidates",
   "admin.params-submit": "Validate the parameters",
+  "admin.params-title": "Your parameters",
   "admin.access-results": "Immediate access to the results",
   "admin.access-results-desc": "No one can access to the results as long as the vote is not closed.",
   "admin.limit-duration": "Limit the length of the vote",
@@ -78,5 +79,6 @@
   "admin.private-placeholder": "Add here the emails of the participants.",
   "admin.confirm-question": "Question of your vote",
   "admin.confirm-candidates": "Candidates",
-  "admin.confirm-submit": "Start the vote"
+  "admin.confirm-submit": "Start the vote",
+  "admin.confirm-title": "Confirm your vote"
 }
diff --git a/public/locales/fr/resource.json b/public/locales/fr/resource.json
index c2e65cc..81d7548 100644
--- a/public/locales/fr/resource.json
+++ b/public/locales/fr/resource.json
@@ -61,6 +61,7 @@
   "admin.candidates-submit": "Valider les candidats",
   "admin.candidates-back-step": "Retour aux candidats",
   "admin.params-submit": "Valider les paramètres",
+  "admin.params-title": "Vos paramètres",
   "admin.access-results": "Accès immédiat aux résultats",
   "admin.access-results-desc": "Personne ne pourra accéder aux résultats tant que le vote n'est pas clôturé.",
   "admin.limit-duration": "Limiter la durée du vote",
@@ -78,5 +79,6 @@
   "admin.private-placeholder": "Ajoutez ici les emails des participants.",
   "admin.confirm-question": "Question de votre vote",
   "admin.confirm-candidates": "Candidats",
-  "admin.confirm-submit": "Démarrer le vote"
+  "admin.confirm-submit": "Démarrer le vote",
+  "admin.confirm-title": "Confirmer votre vote"
 }
diff --git a/styles/scss/_admin.scss b/styles/scss/_admin.scss
index 8727490..a2429bd 100644
--- a/styles/scss/_admin.scss
+++ b/styles/scss/_admin.scss
@@ -8,11 +8,12 @@
     font-size: 16px;
   }
 
-  .badge {
-    width: 24px;
-    height: 24px;
-    background-color: black; // , 0.2);
-  }
+}
+
+.creation-step-icon {
+width: 24px;
+height: 24px;
+background-color: black; // , 0.2);
 }
 
 .creation-step.active {
@@ -71,3 +72,14 @@
 .params {
   max-width: 1070px;
 }
+
+.desktop_step {
+	width: 24px;
+height: 24px;}
+.mobile_step {
+	width: 32px;
+height: 32px;}
+
+.disabled {
+	opacity: 0.6;
+}
diff --git a/styles/scss/_app.scss b/styles/scss/_app.scss
index 958073b..8ec1090 100644
--- a/styles/scss/_app.scss
+++ b/styles/scss/_app.scss
@@ -2,6 +2,7 @@
 
 body {
   background-color: $mv-blue-color;
+  font-weight: 500;
 }
 h1,
 h2,
@@ -384,9 +385,6 @@ ol.result > li {
   background: #F2F0FF!important;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
 
 .hide {
   display: none;
@@ -399,3 +397,11 @@ ol.result > li {
 	outline: none;
 }
 
+
+a, a:hover {
+	text-decoration: none;
+}
+
+.bg-blue {
+	background-color: $mv-blue-color!important;
+}
diff --git a/styles/scss/_bootstrap.scss b/styles/scss/_bootstrap.scss
index 018dd64..494acf4 100644
--- a/styles/scss/_bootstrap.scss
+++ b/styles/scss/_bootstrap.scss
@@ -20,11 +20,11 @@
 // @import '../../node_modules/bootstrap/scss/tables';
 @import '../../node_modules/bootstrap/scss/forms';
 @import '../../node_modules/bootstrap/scss/buttons';
-// @import '../../node_modules/bootstrap/scss/transitions';
+@import '../../node_modules/bootstrap/scss/transitions';
 // @import '../../node_modules/bootstrap/scss/dropdown';
 // @import '../../node_modules/bootstrap/scss/button-group';
-// @import '../../node_modules/bootstrap/scss/nav';
-// @import '../../node_modules/bootstrap/scss/navbar';
+@import '../../node_modules/bootstrap/scss/nav';
+@import '../../node_modules/bootstrap/scss/navbar';
 // @import '../../node_modules/bootstrap/scss/card';
 // @import '../../node_modules/bootstrap/scss/accordion';
 // @import '../../node_modules/bootstrap/scss/breadcrumb';
@@ -33,7 +33,7 @@
 // @import '../../node_modules/bootstrap/scss/alert';
 // @import '../../node_modules/bootstrap/scss/progress';
 // @import '../../node_modules/bootstrap/scss/list-group';
-// @import '../../node_modules/bootstrap/scss/close';
+@import '../../node_modules/bootstrap/scss/close';
 // @import '../../node_modules/bootstrap/scss/toasts';
 @import '../../node_modules/bootstrap/scss/modal';
 // @import '../../node_modules/bootstrap/scss/tooltip';
diff --git a/styles/scss/_button.scss b/styles/scss/_button.scss
index ef4c99a..cd37c4c 100644
--- a/styles/scss/_button.scss
+++ b/styles/scss/_button.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .btn {
   //width: 165px;
   padding: 8px 24px;
@@ -56,6 +58,21 @@
 }
 .btn:not([class*="btn-outline-"]):hover {
   background-color: rgb(255, 255, 255, 0.2);
-  border-color: white;
+  color: inherit;
+  border-color: inherit;
+  border-width: 2px;
+  box-shadow: unset;
+}
+.btn.btn-danger:hover {
+  color: map.get($theme-colors, "danger");
+  border-color: map.get($theme-colors, "danger");
+  border-width: 2px;
   box-shadow: unset;
 }
+
+
+.btn_menu {
+   position: absolute;
+   top: 20px;
+   right: 20px;
+}
diff --git a/styles/scss/_datepicker.scss b/styles/scss/_datepicker.scss
index dd9c00b..3287c7f 100644
--- a/styles/scss/_datepicker.scss
+++ b/styles/scss/_datepicker.scss
@@ -14,7 +14,7 @@
   background-color: #fff;
   color: $datepicker__text-color;
   border: 2px solid $datepicker__border-color;
-  box-shadow: 0px 8px 8px rgba(143, 136, 186, 0.11);
+  box-shadow: $box-shadow-lg; // 0px 8px 8px rgba(143, 136, 186, 0.11);
   border-radius: $datepicker__border-radius;
   display: inline-block;
   position: relative;
@@ -409,6 +409,7 @@
 }
 
 .react-datepicker__input-container {
+  width: 100%;
   position: relative;
   display: inline-block;
   /* Inside auto layout */
diff --git a/styles/scss/_switch.scss b/styles/scss/_switch.scss
index e1307c2..7416eb1 100644
--- a/styles/scss/_switch.scss
+++ b/styles/scss/_switch.scss
@@ -3,10 +3,14 @@
   width: 40px;
   background-color: #c3bfd8;
   border: unset;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
 }
 
 .form-switch .form-check-input:checked {
   background-color: #0d6efd;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
 }
+.form-switch input {
+	outline: none;
+}
+