MieuxVoter
/
mvfront-react
mirror of https://github.com/MieuxVoter/mvfront-react
4
1
Fork 0
Code Issues Releases Wiki Polls Activity

fix: clean up buttons

Browse Source
pull/89/head
Pierre-Louis Guhur 1 year ago
parent 35a66d55d6
commit 2e19bdb964
11 changed files with 82 additions and 104 deletions
Show Stats Download Patch File Download Diff File

23
components/Button.jsx
Unescape View File

@ -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

2
components/admin/CandidateField.jsx
Unescape View File

@ -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'>

24
components/admin/CandidateModalDel.jsx
Unescape View File

@ -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>

24
components/admin/CandidateModalSet.jsx
Unescape View File

@ -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>

36
components/admin/CandidatesField.jsx
Unescape View File

@ -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 >
);
}

2
components/layouts/Footer.jsx
Unescape View File

@ -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>

4
pages/_app.jsx
Unescape View File

@ -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>

3
pages/index.jsx
Unescape View File

@ -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" />

3
public/back.svg
Unescape View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

31
styles/scss/_app.scss
Unescape View File

@ -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;}

34
styles/scss/_buttons.scss
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save