diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx index 4b7eb3cbb54a4cae8d1c8003fe0ac8e001eb5b51..ce454453d98d7aceed8dd1ea97585f2d2c024734 100644 --- a/src/components/Consents/Consents.tsx +++ b/src/components/Consents/Consents.tsx @@ -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> </> ) } diff --git a/src/components/Consents/DowloadModal.tsx b/src/components/Consents/DowloadModal.tsx index a34aebd0cbf1ee7084d6fc32f2cbf4f117bdce2e..4730748274479250964c0504bbb4d3d26541ab87 100644 --- a/src/components/Consents/DowloadModal.tsx +++ b/src/components/Consents/DowloadModal.tsx @@ -1,8 +1,7 @@ -/* 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'utiliser qu'en cas de contrôle de la part d'Enedis et + à supprimer ce fichier ensuite de tout ordinateur. </div> - <div className="buttons"> + <div className={styles.buttons}> <button className="btnCancel2" onClick={toggleOpenModal}> Annuler </button> diff --git a/src/components/Consents/DownloadModal.module.scss b/src/components/Consents/DownloadModal.module.scss new file mode 100644 index 0000000000000000000000000000000000000000..f207b0a861db492e471315eb770464532f882866 --- /dev/null +++ b/src/components/Consents/DownloadModal.module.scss @@ -0,0 +1,33 @@ +@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; + } + } +} diff --git a/src/components/Consents/consents.module.scss b/src/components/Consents/consents.module.scss index 2a5ef40504b1e9a05f7ab5decf7292ee2c548b29..3d40ea62df56e6c19bad85801f4eac5bbe35be8f 100644 --- a/src/components/Consents/consents.module.scss +++ b/src/components/Consents/consents.module.scss @@ -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; - } -} diff --git a/src/components/Settings/settings.scss b/src/components/Settings/settings.scss index 1d4a66f96fb9de7d94787998e7baa0e30e0fac26..d54bc71d4bf42623d2da33a816bf1a341007cb84 100644 --- a/src/components/Settings/settings.scss +++ b/src/components/Settings/settings.scss @@ -113,3 +113,10 @@ h2.title { width: 34px; } } + +.customInfo { + .switch_div { + padding-top: 0; + margin-bottom: 1rem; + } +}