Merge branch '577-fix-checkboxes' into 'dev'

fix (styles): correct padding for checkboxes in the carto

See merge request !861

src/app/shared/components/collapse/collapse-header/collapse-header.component.scss

@@ -3,12 +3,14 @@
 .collapse-header {
   cursor: pointer;
   width: 100%;
-  border: 0px solid transparent;
+  border: 0 solid transparent;
+  align-items: center;
   display: flex;
   justify-content: space-between;
   background-color: $white;
   padding: 0;
   text-align: left;
+  min-height: 40px;
 
   // SIZES
   &.small {
@@ -28,7 +30,7 @@
   }
 
   &:focus-visible {
-    outline-offset: 0px;
+    outline-offset: 0;
     outline: 2px solid $blue-focus;
   }
 }

src/app/shared/components/collapse/collapse-header/collapse-header.component.ts

@@ -19,3 +19,4 @@ export class CollapseHeaderComponent {
   expanded = false;
   size: 'small' | 'medium' = 'small';
 }
+

src/app/structure-list/components/more-filters/more-filters.component.html

@@ -20,7 +20,7 @@
         [label]="module.name"
         [for]="module.id"
         [checked]="searchService.getIndex(checkedModules, module.id, categories[0].id) > -1"
-        [size]="'medium'"
+        [size]="'small'"
         (action)="onCheckboxChange($event, categories[0].id, module.id, module.name)"
       />
     </div>
@@ -28,15 +28,17 @@
     <div *ngIf="categories.length > 1" class="modalContent multipleCollapse">
       <app-collapse *ngFor="let c of categories">
         <app-collapse-header>
+
           <div class="collapseHeader">
             <app-checkbox
-              [size]="'medium'"
+              [size]="'small'"
               [id]="c.id"
               [checked]="getCategoryCheckboxStatus(c) === 'checked'"
               [indeterminate]="getCategoryCheckboxStatus(c) === 'halfChecked'"
               (action)="handleCategoryCheckBox($event, c); $event.stopPropagation()"
-            />
-            <span [attr.aria-label]="">{{ c.name }}</span>
+              [ngStyle]="{'padding': '4px 4px'}"
+            ></app-checkbox>
+            <span [attr.aria-label]="" id="categoryName">{{ c.name }}</span>
             <!-- label only for screen reader to avoid selecting all the elements when clicking the label -->
             <label class="visually-hidden" for="{{ c.id }}">{{ c.name }}. Cocher pour tout sélectionner</label>
           </div>
@@ -62,7 +64,7 @@
         [ariaLabel]="'Effacer et fermer'"
         (action)="clearFilters()"
       />
-      <app-button [variant]="'primary'" [label]="'Appliquer'" (action)="emitModules(checkedModules)" />
+      <app-button [variant]="'primary'" [label]="'Appliquer'" (action)="emitModules(checkedModules)"/>
     </div>
   </div>
 </div>

src/app/structure-list/components/more-filters/more-filters.component.scss

@@ -11,7 +11,7 @@
   z-index: $modal-z-index;
   margin-top: 132px;
   .filterModalContainer {
-    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.35);
     background-color: $white;
     border-radius: 8px;
   }
@@ -46,7 +46,7 @@
     .moreFiltersHeader {
       display: flex;
       align-items: center;
-      padding: 16px 16px 0px 40px;
+      padding: 16px 16px 0 40px;
       h3 {
         @include font-bold-18;
         width: 100%;
@@ -76,6 +76,11 @@
         align-items: center;
         gap: 8px;
         padding: 4px 8px;
+
+        #categoryName {
+          padding: 0 0;
+        }
+
       }
       .collapseContent {
         display: flex;
@@ -84,6 +89,7 @@
         padding-block: 16px;
         padding-left: 24px;
         border-top: 1px solid $grey-4;
+
       }
     }
   }
@@ -94,3 +100,4 @@
     padding-block: 16px;
   }
 }
+