FIx design

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

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;
   }