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 + + + + + + {children} + + + + } + + else { + return ({children}) + } +} + +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 ( 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 ? {candidate.name} : null} - - - - - - - {t('admin.candidate-confirm-back')} - - + + {t('admin.candidate-confirm-back')} - - - - - - - {t('admin.candidate-confirm-ok')} - - + + {t('admin.candidate-confirm-ok')} 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}) => { - - - - - - - {t('common.cancel')} - - + + {t('common.cancel')} - - - - - - - {t('common.save')} - - + + {t('common.save')} 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 ( - - {t('admin.add-candidates')} - - {candidates.map((candidate, index) => { - return ( - - ) - })} - + + + {t('admin.add-candidates')} + + {candidates.map((candidate, index) => { + return ( + + ) + })} + + + + {t('Valider les candidats')} + + + ); } 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 = () => { - + {t('common.support-us')} 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}) { /> - + - + 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 = () => { - + {t("home.start")} @@ -152,6 +152,7 @@ const ExperienceRow = () => { {t('home.experience-call-to-action')} 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 @@ - + - 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; }