💄 Improve filters UI

Author: juliendemoutiez

client/src/steps/BoardMembershipsStep/BoardMembershipsStep.jsx

@@ -85,8 +85,8 @@ const BoardMembershipsStep = React.memo(
                 }}
                 label={
                   <div className={styles.filterLabel}>
-                    <div className={styles.userAvatar}>
-                      <Icon name="person_off" type="outlined" aria-hidden="true" />
+                    <div className={styles.noMember}>
+                      <Icon name="person_off" type="outlined" size="small" aria-hidden="true" />
                     </div>
                     <span className={styles.userName}>Aucun membre</span>
                   </div>

client/src/steps/BoardMembershipsStep/BoardMembershipsStep.module.scss

@@ -64,6 +64,17 @@
       justify-content: center;
     }
 
+    .noMember {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--c--theme--colors--greyscale-800);
+      border-radius: 100%;
+    }
+
     span {
       text-overflow: ellipsis;
       overflow: hidden;

client/src/steps/LabelsStep/LabelsStep.jsx

@@ -210,8 +210,8 @@ const LabelsStep = React.memo(
                 }}
                 label={
                   <div className={styles.filterLabel}>
-                    <div className={styles.labelIcon}>
-                      <Icon name="label_off" type="outlined" aria-hidden="true" />
+                    <div className={styles.noLabel}>
+                      <Icon name="label_off" type="outlined" size="small" aria-hidden="true" />
                     </div>
                     <span className={styles.labelName}>Aucune étiquette</span>
                   </div>

client/src/steps/LabelsStep/LabelsStep.module.scss

@@ -88,6 +88,17 @@
       align-items: center;
       justify-content: center;
     }
+
+    .noLabel {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--c--theme--colors--greyscale-800);
+      border-radius: 100%;
+    }
   }
 
   .itemActions {