From 07a1c535c01051cad574be579152cbcaf984119a Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Fri, 15 Sep 2023 16:14:02 +0200
Subject: [PATCH] wip
---
src/App.tsx | 5 +-
src/components/Popups/Popups.tsx | 173 +++++++++++++++++-------------
src/components/Popups/popups.scss | 71 +-----------
src/components/UI/theme.ts | 48 +++++++++
4 files changed, 154 insertions(+), 143 deletions(-)
create mode 100644 src/components/UI/theme.ts
diff --git a/src/App.tsx b/src/App.tsx
index 9f8df6e4..b012960f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,13 @@
-import { ThemeProvider, createTheme } from '@mui/material'
+import { ThemeProvider } from '@mui/material'
import { BrowserRouter } from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import Layout from './components/Layout/Layout'
import Router from './components/Routes/Router'
+import { theme } from './components/UI/theme'
import useFindUser from './hooks/useFindUser'
import { UserContext } from './hooks/userContext'
-const theme = createTheme()
-
function App() {
const { user, setUser, isLoading } = useFindUser()
diff --git a/src/components/Popups/Popups.tsx b/src/components/Popups/Popups.tsx
index f5a8a2eb..0b7ceece 100644
--- a/src/components/Popups/Popups.tsx
+++ b/src/components/Popups/Popups.tsx
@@ -1,3 +1,11 @@
+import {
+ Button,
+ FormControl,
+ FormControlLabel,
+ FormGroup,
+ NativeSelect,
+ Switch,
+} from '@mui/material'
import { DateTime } from 'luxon'
import React, { useCallback, useContext, useEffect, useState } from 'react'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
@@ -238,82 +246,83 @@ const Popups: React.FC = () => {
<h2 className="title">Affichage des pop-up de panne</h2>
<div className={customPopup.popupEnabled ? 'disabled' : ''}>
<p>Services concernés</p>
- <div className="switch_div">
- <span>Panne Enedis</span>
- <input
- type="checkbox"
- id="switch_enedis"
- disabled={customPopup.popupEnabled}
- checked={partnersInfo.enedis_failure}
- onChange={event => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.ENEDIS
- )
- }}
+ <FormGroup style={{ flexDirection: 'row' }}>
+ <FormControlLabel
+ label="Panne Enedis"
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={customPopup.popupEnabled}
+ checked={partnersInfo.enedis_failure}
+ onChange={event => {
+ handleCheckboxChange(
+ event.target.checked,
+ CheckboxType.ENEDIS
+ )
+ }}
+ />
+ }
/>
- <label htmlFor="switch_enedis" />
- </div>
- <div className="switch_div">
- <span>Panne EGL</span>
- <input
- type="checkbox"
- id="switch_egl"
- disabled={customPopup.popupEnabled}
- checked={partnersInfo.egl_failure}
- onChange={event => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.EGL
- )
- }}
+ <FormControlLabel
+ label="Panne EGL"
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={customPopup.popupEnabled}
+ checked={partnersInfo.egl_failure}
+ onChange={event => {
+ handleCheckboxChange(
+ event.target.checked,
+ CheckboxType.EGL
+ )
+ }}
+ />
+ }
/>
- <label htmlFor="switch_egl" />
- </div>
- <div className="switch_div">
- <span>Panne GRDF</span>
- <input
- type="checkbox"
- id="switch_grdf"
- disabled={customPopup.popupEnabled}
- checked={partnersInfo.grdf_failure}
- onChange={event => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.GRDF
- )
- }}
+ <FormControlLabel
+ label="Panne GRDF"
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={customPopup.popupEnabled}
+ checked={partnersInfo.grdf_failure}
+ onChange={event => {
+ handleCheckboxChange(
+ event.target.checked,
+ CheckboxType.GRDF
+ )
+ }}
+ />
+ }
/>
- <label htmlFor="switch_grdf" />
- </div>
+ </FormGroup>
</div>
</div>
<div className="customPopup">
<h2 className="title">Affichage de pop-up personnalisée</h2>
<div className={isPartnerNotificationOn() ? 'disabled' : ''}>
- <div className="currentPopup">
- <div className="switch_div">
- <span>Pop-up active</span>
- <input
- type="checkbox"
- id="switch_popup"
- disabled={isPartnerNotificationOn()}
- checked={customPopup.popupEnabled}
- onChange={event => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.CUSTOM
- )
- }}
- />
- <label htmlFor="switch_popup" />
- </div>
-
+ <FormGroup style={{ flexDirection: 'row' }}>
+ <FormControlLabel
+ label="Pop-up active"
+ labelPlacement="top"
+ control={
+ <Switch
+ disabled={isPartnerNotificationOn()}
+ checked={customPopup.popupEnabled}
+ onChange={event => {
+ handleCheckboxChange(
+ event.target.checked,
+ CheckboxType.CUSTOM
+ )
+ }}
+ />
+ }
+ />
{customPopup.popupEnabled &&
previousEndDate &&
getRemainingDuration(previousEndDate)}
- </div>
+ </FormGroup>
<div className="popupTitle">
<label htmlFor="title">Titre</label>
@@ -345,7 +354,26 @@ const Popups: React.FC = () => {
<div className="popupEndDate">
<label htmlFor="title">Nouvelle Durée</label>
<div className="durationInput">
- <select
+ <FormControl>
+ <NativeSelect
+ defaultValue={30}
+ inputProps={{
+ name: 'age',
+ id: 'uncontrolled-native',
+ }}
+ >
+ {OPTIONS.map(option => (
+ <option
+ key={option.value}
+ value={option.value}
+ selected={popupDuration.type === option.value}
+ >
+ {option.label}
+ </option>
+ ))}
+ </NativeSelect>
+ </FormControl>
+ {/* <select
value={popupDuration.type}
onChange={event => handleSelectChange(event)}
>
@@ -358,7 +386,7 @@ const Popups: React.FC = () => {
{option.label}
</option>
))}
- </select>
+ </select> */}
{popupDuration.type !== 'infinite' && (
<input
type="number"
@@ -378,17 +406,16 @@ const Popups: React.FC = () => {
</div>
<div className="buttons">
- <button className="btnCancel" onClick={handleCancel}>
+ <Button variant="outlined" onClick={handleCancel}>
Annuler
- </button>
- <button
- className="btnValid"
- onClick={handleSave}
+ </Button>
+ <Button
+ variant="contained"
disabled={!isPageValid()}
- title="Un seul type de popup peut être activé"
+ onClick={handleSave}
>
Sauvegarder
- </button>
+ </Button>
</div>
</>
)}
diff --git a/src/components/Popups/popups.scss b/src/components/Popups/popups.scss
index 7f93c690..6ef92804 100644
--- a/src/components/Popups/popups.scss
+++ b/src/components/Popups/popups.scss
@@ -23,19 +23,9 @@
}
}
- .customPopup {
- .currentPopup {
- display: flex;
- margin-bottom: 1rem;
- .switch_div {
- padding-top: 0;
- }
-
- p.endDate {
- color: $gold-dark;
- font-weight: bold;
- }
- }
+ p.endDate {
+ color: $gold-dark;
+ font-weight: bold;
}
.popupTitle {
@@ -105,6 +95,7 @@
}
.buttons {
+ margin-top: 1rem;
display: flex;
justify-content: center;
gap: 1rem;
@@ -112,58 +103,4 @@
margin: 0;
}
}
-
- .switch_div {
- display: inline-block;
- padding: 1rem 1rem;
- min-width: 135px;
-
- span {
- color: $text-dark;
- }
-
- input[type='checkbox'] {
- width: 0;
- height: 0;
- visibility: hidden;
- margin-bottom: 15px;
- }
-
- label {
- display: block;
- width: 50px;
- height: 20px;
- background-color: grey;
- border-radius: 15px;
- position: relative;
- cursor: pointer;
- transition: 0.5s;
- box-shadow: 0 0 20px #80808050;
- }
-
- label::after {
- content: '';
- width: 17px;
- height: 17px;
- background-color: #e8f5f7;
- position: absolute;
- border-radius: 13px;
- top: 2px;
- left: 2px;
- transition: 0.5s;
- }
-
- input:checked + label:after {
- left: calc(100% - 3px);
- transform: translateX(-100%);
- }
-
- input:checked + label {
- background-color: #e3b82a;
- }
-
- label:active:after {
- width: 34px;
- }
- }
}
diff --git a/src/components/UI/theme.ts b/src/components/UI/theme.ts
new file mode 100644
index 00000000..1df1758d
--- /dev/null
+++ b/src/components/UI/theme.ts
@@ -0,0 +1,48 @@
+import { createTheme } from '@mui/material'
+
+const primary = {
+ main: '#1976d2',
+ light: '#42a5f5',
+ dark: '#1565c0',
+ contrastText: '#fff',
+}
+
+export const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#F1C017',
+ contrastText: '#000',
+ },
+ },
+ components: {
+ MuiFormGroup: {},
+ MuiFormControlLabel: {
+ styleOverrides: {
+ root: {
+ color: '#fff !important',
+ },
+ disabled: {
+ color: '#0f0 !important',
+ },
+ },
+ },
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ fontWeight: 700,
+ },
+ },
+ },
+ MuiSwitch: {
+ styleOverrides: {
+ track: {
+ backgroundColor: '#7B7B7B',
+ '.Mui-checked.Mui-checked + &': {
+ backgroundColor: '#DCBA4A',
+ opacity: 1,
+ },
+ },
+ },
+ },
+ },
+})
--
GitLab