Merge branch 'fix/css' into 'dev'

fix: consents & popups

See merge request web-et-numerique/llle_project/backoffice-client!69

src/components/Consents/Consents.tsx

@@ -61,6 +61,7 @@ const Consents: React.FC = () => {
     {
       field: 'pointID',
       headerName: 'N° PDL',
+      initialWidth: 150,
       filter: true,
       checkboxSelection: true,
     },
@@ -283,7 +284,7 @@ const Consents: React.FC = () => {
         </div>
         <div
           className="ag-theme-alpine-dark"
-          style={{ width: '100%', height: '80vh' }}
+          style={{ width: '100%', height: '75vh' }}
         >
           <AgGridReact
             onGridReady={onGridReady}

src/components/Editing/Editing.tsx

@@ -290,9 +290,8 @@ const Editing: React.FC = () => {
         <p className="title pagetitle">Édition de la newsletter</p>
         <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
       </div>
-      {isLoading ? (
-        <Loader />
-      ) : (
+      {isLoading && <Loader />}
+      {!isLoading && (
         <div className="content">
           <MailSubject
             onSave={handleSaveSubject}
@@ -335,7 +334,7 @@ const Editing: React.FC = () => {
           <>
             <div className="modal-text">
               Etes-vous sûr de vouloir supprimer{' '}
-              {getContentItemString(toDelete)} ?
+              {getContentItemString(toDelete)}&nbsp;?
             </div>
             <div className="buttons">
               <button

src/components/Settings/Settings.tsx

@@ -146,7 +146,7 @@ const Settings: React.FC = () => {
         <p className="title pagetitle">Paramètres de l&apos;appli</p>
       </div>
 
-      <div className="content">
+      <div className="content settings">
         {isLoading && <Loader />}
         {!isLoading && (
           <>

src/components/Settings/settings.scss

 @import '../../styles/config/colors';
 
-h2.title {
-  margin: 1rem 0;
-}
-
-.partnersInfo {
-  margin: 2rem 0;
-  h1 {
-    margin-bottom: 1rem;
-  }
-
-  p {
-    color: $text-grey;
+.settings {
+  .partnersInfo,
+  .customInfo {
+    h2.title {
+      margin: 1rem 0;
+    }
   }
-}
-
-.popupTitle {
-  margin-bottom: 1.5rem;
-}
 
-.popupTitle,
-.popupDescription {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  .partnersInfo {
+    margin: 2rem 0;
+    h1 {
+      margin-bottom: 1rem;
+    }
 
-  label {
-    text-transform: uppercase;
-    font-weight: 700;
+    p {
+      color: $text-grey;
+    }
   }
 
-  input,
-  textarea {
-    background: inherit;
-    border-radius: 4px;
-    border: 1px solid $text-chart;
-    max-width: 600px;
-    padding: 1rem;
-    color: $text-grey;
-    font-size: 1rem;
+  .popupTitle {
+    margin-bottom: 1.5rem;
   }
 
-  .count {
-    color: $text-dark;
-    max-width: 600px;
-    height: 19px;
-    font-weight: 400;
-    font-size: 0.8rem;
+  .popupTitle,
+  .popupDescription {
     display: flex;
-    justify-content: flex-end;
-  }
-}
-
-.buttons {
-  position: fixed;
-  bottom: 1rem;
-  display: flex;
-  transform: translate(-25%);
-  left: 50%;
-}
-
-.switch_div {
-  display: inline-block;
-  padding: 1rem 1rem;
-  min-width: 135px;
-
-  span {
-    color: $text-dark;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    label {
+      text-transform: uppercase;
+      font-weight: 700;
+    }
+
+    input,
+    textarea {
+      background: inherit;
+      border-radius: 4px;
+      border: 1px solid $text-chart;
+      max-width: 600px;
+      padding: 1rem;
+      color: $text-grey;
+      font-size: 1rem;
+    }
+
+    .count {
+      color: $text-dark;
+      max-width: 600px;
+      height: 19px;
+      font-weight: 400;
+      font-size: 0.8rem;
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 
-  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;
+  .buttons {
+    position: fixed;
+    bottom: 1rem;
+    display: flex;
+    transform: translate(-25%);
+    left: 50%;
+    gap: 1rem;
+    button {
+      margin: 0;
+    }
   }
 
-  label:active:after {
-    width: 34px;
+  .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;
+    }
   }
-}
 
-.customInfo {
-  .switch_div {
-    padding-top: 0;
-    margin-bottom: 1rem;
+  .customInfo {
+    .switch_div {
+      padding-top: 0;
+      margin-bottom: 1rem;
+    }
   }
 }