From fa4fc0eb8280d9568695cb607d237011f354401d Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Fri, 30 Sep 2022 15:11:18 +0000
Subject: [PATCH] Feat/us848 consents page css
---
src/components/Consents/Consents.tsx | 52 +++++++++----------
src/components/Consents/DowloadModal.tsx | 9 ++--
.../Consents/DownloadModal.module.scss | 33 ++++++++++++
src/components/Consents/consents.module.scss | 41 +++++----------
src/components/Settings/settings.scss | 7 +++
5 files changed, 81 insertions(+), 61 deletions(-)
create mode 100644 src/components/Consents/DownloadModal.module.scss
diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx
index 4b7eb3cb..ce454453 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 a34aebd0..47307482 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 00000000..f207b0a8
--- /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 2a5ef405..3d40ea62 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 1d4a66f9..d54bc71d 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;
+ }
+}
--
GitLab