Skip to content
Snippets Groups Projects
Commit fa4fc0eb authored by Bastien DUMONT's avatar Bastien DUMONT :angel: Committed by Hugo SUBTIL
Browse files

Feat/us848 consents page css

parent a9f9bc6d
Branches
No related tags found
6 merge requests!96Deploy OpenShift v2,!95MEP fix liens undefined,!91MEP: removed Meilisearch,!79Fix: nginx unprivileged image,!77Back-office SGE before canary release,!67Feat/us848 consents page css
......@@ -254,10 +254,10 @@ const Consents: React.FC = () => {
return (
<>
<div className={styles.header + ' header'}>
<div className="header">
<p className="title pagetitle">Gestion des consentements Enedis</p>
</div>
<div className={styles.content + ' content'}>
<div className={styles.content}>
<div className={styles.searchField}>
<div className={styles.inputGroup}>
<label htmlFor="search">Recherche</label>
......@@ -276,7 +276,7 @@ const Consents: React.FC = () => {
</div>
<div
className="ag-theme-alpine-dark"
style={{ width: '100%', height: '65vh' }}
style={{ width: '100%', height: '80vh' }}
>
<AgGridReact
onGridReady={onGridReady}
......@@ -305,31 +305,6 @@ const Consents: React.FC = () => {
rowsPerPageOptions={[10, 25, 50, 100]}
/>
)}
<div className={styles.footerButtons}>
<button
className="btnDelete"
onClick={isShowingSelection ? continueSelection : resetSelection}
disabled={
!isShowingSelection &&
selectedNodes &&
selectedNodes.length === 0
}
>
{isShowingSelection
? 'Continuer ma sélection'
: 'Tout déselectionner'}
</button>
<button
className={styles.btnSelection + ' btnValid'}
onClick={
!isShowingSelection ? showCurrentSelection : toggleOpenModal
}
disabled={selectedNodes && selectedNodes.length <= 0}
>
{!isShowingSelection ? 'Voir mes sélections' : 'Télécharger'}
<span>{selectedNodes?.length}</span>
</button>
</div>
</div>
{openDowloadModal && (
<DowloadModal
......@@ -338,6 +313,27 @@ const Consents: React.FC = () => {
/>
)}
</div>
<div className={styles.footerButtons}>
<button
className="btnDelete"
onClick={isShowingSelection ? continueSelection : resetSelection}
disabled={
!isShowingSelection && selectedNodes && selectedNodes.length === 0
}
>
{isShowingSelection
? 'Continuer ma sélection'
: 'Tout déselectionner'}
</button>
<button
className={styles.btnSelection + ' btnValid'}
onClick={!isShowingSelection ? showCurrentSelection : toggleOpenModal}
disabled={selectedNodes && selectedNodes.length <= 0}
>
{!isShowingSelection ? 'Voir mes sélections' : 'Télécharger'}
<span>{selectedNodes?.length}</span>
</button>
</div>
</>
)
}
......
/* eslint-disable react/no-unescaped-entities */
import React from 'react'
import styles from './consents.module.scss'
import Modal from '../Modal/Modal'
import dowloadIcon from '../../assets/icons/ico-download.svg'
import styles from './DownloadModal.module.scss'
interface DowloadModalProps {
toggleOpenModal: () => void
......@@ -28,10 +27,10 @@ const DowloadModal: React.FC<DowloadModalProps> = ({
</div>
<div className={styles.text2}>
Attention ce fichier contient des données personnelles. Veillez à ne
l'utiliser qu'en cas de contrôle de la part d'Enedis et à supprimer ce
fichier ensuite de tout ordinateur.
l&apos;utiliser qu&apos;en cas de contrôle de la part d&apos;Enedis et
à supprimer ce fichier ensuite de tout ordinateur.
</div>
<div className="buttons">
<div className={styles.buttons}>
<button className="btnCancel2" onClick={toggleOpenModal}>
Annuler
</button>
......
@import '../../styles/config/colors';
.modalContent {
padding: 0 1rem;
text-align: center;
font-size: 0.875rem;
div {
margin: 0.875rem 0;
}
.modalTitle {
font-size: 1rem;
font-weight: 700;
color: $gold;
}
.text1 {
color: $text-grey;
}
.text2 {
color: $text-dark;
}
.buttons {
margin-top: 1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
button {
margin: 0;
}
}
}
......@@ -3,12 +3,10 @@
@import '../../styles/config/breakpoints';
@import '../../styles/config/typography';
.header {
height: $small-nav-height !important;
}
.content {
background: $dark-bg;
padding: 1rem;
}
.searchField {
max-width: 750px;
width: 100%;
......@@ -39,13 +37,19 @@
}
}
@include customCheckBox(1.45rem);
.footerButtons {
margin: auto;
padding: 1.5rem 0;
width: fit-content;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-25%);
button {
margin: 0;
}
.btnSelection {
position: relative;
span {
......@@ -63,22 +67,3 @@
}
}
}
.modalContent {
padding: 0 1rem;
text-align: center;
font-size: 0.875rem;
div {
margin: 0.875rem 0;
}
.modalTitle {
font-size: 1rem;
font-weight: 700;
color: $gold;
}
.text1 {
color: $text-grey;
}
.text2 {
color: $text-dark;
}
}
......@@ -113,3 +113,10 @@ h2.title {
width: 34px;
}
}
.customInfo {
.switch_div {
padding-top: 0;
margin-bottom: 1rem;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment