diff --git a/src/components/PartnersInfo/PartnersInfo.tsx b/src/components/PartnersInfo/PartnersInfo.tsx index 02ede5fadf5e469732cf8bebdddcaa0d9ce168c5..0988b3d7f27f1e8e3f2f68ad3b4dad51540e7c6d 100644 --- a/src/components/PartnersInfo/PartnersInfo.tsx +++ b/src/components/PartnersInfo/PartnersInfo.tsx @@ -107,6 +107,7 @@ const PartnersInfo: React.FC = () => { <div className="partnersInfo"> <h2>État des services des partenaires</h2> <div> + <p className="title">Affichage de la pop-up dans Ecolyo</p> <div className="switch_div"> Pop-up active <input @@ -122,57 +123,52 @@ const PartnersInfo: React.FC = () => { /> <label htmlFor="switch_notification"></label> </div> - <p className="title">État des services</p> - <div> - <div className="switch_div"> - Panne GRDF - <input - type="checkbox" - id="switch_grdf" - onChange={(event) => { - handleCheckboxChange( - event.currentTarget.checked, - CheckboxType.GRDF - ) - }} - checked={partnersInfo.grdf_failure} - /> - <label htmlFor="switch_grdf"></label> - </div> - - <div className="switch_div"> - Panne Enedis - <input - type="checkbox" - id="switch_enedis" - onChange={(event) => { - handleCheckboxChange( - event.currentTarget.checked, - CheckboxType.ENEDIS - ) - }} - checked={partnersInfo.enedis_failure} - /> - <label htmlFor="switch_enedis"></label> - </div> - - <div className="switch_div"> - Panne EGL - <input - type="checkbox" - id="switch_egl" - onChange={(event) => { - handleCheckboxChange( - event.currentTarget.checked, - CheckboxType.EGL - ) - }} - checked={partnersInfo.egl_failure} - /> - <label htmlFor="switch_egl"></label> - </div> + <p className="title">Services concernés</p> + <div className="switch_div"> + Panne Enedis + <input + type="checkbox" + id="switch_enedis" + onChange={(event) => { + handleCheckboxChange( + event.currentTarget.checked, + CheckboxType.ENEDIS + ) + }} + checked={partnersInfo.enedis_failure} + /> + <label htmlFor="switch_enedis"></label> + </div> + <div className="switch_div"> + Panne EGL + <input + type="checkbox" + id="switch_egl" + onChange={(event) => { + handleCheckboxChange( + event.currentTarget.checked, + CheckboxType.EGL + ) + }} + checked={partnersInfo.egl_failure} + /> + <label htmlFor="switch_egl"></label> + </div> + <div className="switch_div"> + Panne GRDF + <input + type="checkbox" + id="switch_grdf" + onChange={(event) => { + handleCheckboxChange( + event.currentTarget.checked, + CheckboxType.GRDF + ) + }} + checked={partnersInfo.grdf_failure} + /> + <label htmlFor="switch_grdf"></label> </div> - <div className="buttons"> <button className="btnCancel" onClick={handleCancel}> Annuler diff --git a/src/components/PartnersInfo/partnersInfo.scss b/src/components/PartnersInfo/partnersInfo.scss index c6cdb63f3aee7c159278f94976dfd504e5fb83b2..27de6e115e2ddca455b1fe3003e36429588a5e3f 100644 --- a/src/components/PartnersInfo/partnersInfo.scss +++ b/src/components/PartnersInfo/partnersInfo.scss @@ -10,6 +10,7 @@ .switch_div { display: inline-block; padding: 1rem 1rem; + min-width: 135px; } input[type='checkbox'] { @@ -21,8 +22,8 @@ label { display: block; - width: 80px; - height: 30px; + width: 50px; + height: 20px; background-color: grey; border-radius: 15px; position: relative; @@ -33,13 +34,13 @@ label::after { content: ''; - width: 24px; - height: 24px; + width: 17px; + height: 17px; background-color: #e8f5f7; position: absolute; border-radius: 13px; - top: 3px; - left: 3px; + top: 2px; + left: 2px; transition: 0.5s; }