feat: add new icons to replace structure details icons

src/app/models/structure.model.ts

@@ -75,6 +75,16 @@ export class Structure {
     }
   }
 
+  /**
+   * Check if a structure has equipments
+   */
+  public hasEquipments(): boolean {
+    if (this.wifi || this.ordinateurs) {
+      return true;
+    }
+    return false;
+  }
+
   /**
    * Return a range, according to the distance, between [1,3] to get a distance reference.
    * - [0,5km] => 1

src/app/shared/components/logo-card/logo-card.component.ts

@@ -18,7 +18,6 @@ export class LogoCardComponent implements OnInit {
   ngOnInit(): void {}
 
   public getLogoKey(demarche: string): string {
-    // return Demarches[demerche];
     switch (demarche) {
       case Demarches.caf:
         return 'caf';
@@ -44,7 +43,6 @@ export class LogoCardComponent implements OnInit {
   }
 
   private getLabelKey(demarche: string): string {
-    console.log('other !');
     switch (demarche) {
       case Labels.aidants_connect:
         return 'aidants';
@@ -53,7 +51,7 @@ export class LogoCardComponent implements OnInit {
       case Labels.pass_numerique:
         return 'pass';
       default:
-        return 'null';
+        throw new Error(`${demarche} is not handled by getLabelKey and getLogoKey`);
     }
   }
 }

src/app/shared/components/svg-icon/svg-icon.component.html

-<svg aria-hidden="true" class="icon" [ngClass]="icon">
+<svg aria-hidden="true" class="icon" [ngClass]="iconClass">
   <use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
 </svg>

src/app/shared/components/svg-icon/svg-icon.component.scss

 .icon {
-  color: inherit;
   display: inline-block;
+  height: 24px;
+  width: 24px;
+  &.icon-32 {
+    height: 32px;
+    width: 32px;
+  }
 }
 
 svg {

src/app/shared/components/svg-icon/svg-icon.component.ts

@@ -7,6 +7,7 @@ import { Component, Input } from '@angular/core';
 })
 export class SvgIconComponent {
   @Input() icon: string;
+  @Input() iconClass: string;
   @Input() type: string;
   constructor() {}
 }

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -10,30 +10,30 @@
       <app-structure-opening-status [structure]="structure"></app-structure-opening-status>
       <div fxLayout="row">
         <div fxLayout="column" fxFlex="60%">
-          <div *ngIf="structure.voie" fxLayout="row" fxLayoutAlign="none center">
-            <em class="ico-marker-pin-sm absolute"></em>
+          <div *ngIf="structure.voie" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'adress'"></app-svg-icon>
             <p>{{ structure.n }} {{ structure.address }}</p>
           </div>
-          <div *ngIf="structure.siteWeb" fxLayout="row" fxLayoutAlign="none center">
-            <em class="ic-globe-alt"></em>
+          <div *ngIf="structure.siteWeb" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'web'"></app-svg-icon>
             <a target="_blank" rel="noopener noreferrer" [href]="structure.siteWeb">{{ structure.siteWeb }}</a>
           </div>
-          <div *ngIf="structure.telephone" fxLayout="row" fxLayoutAlign="none center">
-            <em class="ic-phone"></em>
+          <div *ngIf="structure.telephone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'tel'"></app-svg-icon>
             <p>{{ structure.telephone }}</p>
           </div>
         </div>
         <div fxLayout="column" fxFlex="40%">
-          <div *ngIf="structure.courriel" fxLayout="row" fxLayoutAlign="none center">
-            <em class="ic-mail"></em>
+          <div *ngIf="structure.courriel" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'email'"></app-svg-icon>
             <a [href]="'mailto:' + structure.courriel">{{ structure.courriel }}</a>
           </div>
-          <div fxLayout="row" fxLayoutAlign="none center">
-            <em class="ic-mail"></em>
+          <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'pass'"></app-svg-icon>
             <p>TODO: PASS</p>
           </div>
-          <div fxLayout="row" fxLayoutAlign="none center">
-            <em class="ic-mail"></em>
+          <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'structure'"></app-svg-icon>
             <p>TODO: FABLAB</p>
           </div>
         </div>
@@ -42,14 +42,14 @@
   </div>
   <!-- Démarches -->
   <div
-    *ngIf="structure.accompagnementDesDemarches.length > 0"
+    *ngIf="structure.accompagnementDesDemarches[0] !== ''"
     fxLayout="column"
     class="structrue-details-block"
     fxLayoutAlign="baseline baseline"
     fxLayoutGap="20px"
   >
-    <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
-      <em class="ic-mouse"></em>
+    <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="20px">
+      <app-svg-icon [type]="'ico'" [icon]="'demarches'" [iconClass]="'icon-32'"></app-svg-icon>
       <h2>Démarches</h2>
     </div>
     <div fxLayout="row wrap" fxLayoutGap="24px">
@@ -60,8 +60,8 @@
   </div>
   <!-- Services -->
   <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
-    <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
-      <em class="ic-mouse"></em>
+    <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="20px">
+      <app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
       <h2>Services</h2>
     </div>
     <div fxLayout="row" class="w-100">
@@ -75,8 +75,8 @@
   </div>
   <!-- Accueil -->
   <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
-    <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
-      <em class="ic-mouse"></em>
+    <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="20px">
+      <app-svg-icon [type]="'ico'" [icon]="'accueil'" [iconClass]="'icon-32'"></app-svg-icon>
       <h2>Accueil</h2>
     </div>
     <!-- Openning Hours -->
@@ -87,7 +87,7 @@
           <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
             <div *ngIf="day.value.open">
               <h4>{{ day.key | day }}</h4>
-              <div class="openning-time" fxLayout="row" fxLayoutAlign="none center">
+              <div class="openning-time" fxLayout="row" fxLayoutAlign="none flex-end">
                 <div *ngFor="let timeRange of day.value.time; let isFirst = first">
                   <p *ngIf="isFirst">de {{ timeRange.formatOpenningDate() }} à {{ timeRange.formatClosingDate() }}</p>
                   <p *ngIf="!isFirst && timeRange.openning">
@@ -102,43 +102,47 @@
       <!-- modalitesDacces -->
       <div fxFlex="30%">
         <h3 class="subtitle">Accès</h3>
-        <div *ngFor="let acces of structure.modalitesDacces">
-          <em
-            [ngClass]="{
-              'ic-user': acces === accessModality.free,
-              'ic-calendar-today': acces === accessModality.meeting,
-              'ic-camera': acces === accessModality.numeric
-            }"
-          ></em>
+        <div
+          *ngFor="let acces of structure.modalitesDacces"
+          fxLayout="row"
+          fxLayoutAlign="none flex-end"
+          fxLayoutGap="20px"
+        >
+          <app-svg-icon [type]="'ico'" [icon]="getAccessIcon(acces)"></app-svg-icon>
           <p>{{ acces }}</p>
         </div>
       </div>
     </div>
   </div>
   <!-- Equipements -->
-  <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline">
-    <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
-      <em class="ic-toolbox"></em>
+  <div
+    *ngIf="structure.hasEquipments()"
+    fxLayout="column"
+    class="structrue-details-block"
+    fxLayoutAlign="baseline baseline"
+  >
+    <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="20px">
+      <app-svg-icon [type]="'ico'" [icon]="'equipement'" [iconClass]="'icon-32'"></app-svg-icon>
       <h2>Équipements</h2>
     </div>
-    <div *ngIf="structure.wifi" fxLayout="row" fxLayoutAlign="none center">
-      <em class="ic-wifi"></em>
+    <div *ngIf="structure.wifi" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+      <app-svg-icon [type]="'ico'" [icon]="'wifi'"></app-svg-icon>
       <p>Wifi en accès libre</p>
     </div>
-    <div *ngIf="structure.ordinateurs" fxLayout="row" fxLayoutAlign="none center">
-      <em class="ic-screen"></em>
+    <div *ngIf="structure.ordinateurs" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+      <app-svg-icon [type]="'ico'" [icon]="'computer'"></app-svg-icon>
       <p>Ordinateurs à disposition : {{ structure.nombre }}</p>
     </div>
   </div>
   <!-- Labels -->
   <div
-    *ngIf="structure.labelsEtQualifications"
+    *ngIf="structure.labelsEtQualifications[0] !== ''"
     fxLayout="column"
     class="structrue-details-block"
     fxLayoutAlign="baseline baseline"
     fxLayoutGap="20px"
   >
-    <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
+    <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="20px">
       <em class="ic-toolbox"></em>
       <h2>Labelisation</h2>
     </div>

src/app/structure-list/components/structure-details/structure-details.component.scss

@@ -55,7 +55,7 @@ h4 {
 p,
 a {
   @include cn-regular-16;
-  margin-left: 30px;
+  // margin-left: 30px;
   margin-top: 9px;
   margin-bottom: 9px;
 }

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -13,13 +13,24 @@ export class StructureDetailsComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit(): void {
-    console.log(this.structure);
-  }
+  ngOnInit(): void {}
 
   public close(): void {
     this.closeDetails.emit(true);
   }
 
+  public getAccessIcon(accessModality: AccessModality): string {
+    switch (accessModality) {
+      case AccessModality.free:
+        return 'group';
+      case AccessModality.meeting:
+        return 'calendar';
+      case AccessModality.numeric:
+        return 'tel';
+      default:
+        throw new Error(`${accessModality} is not handled by getAccessIcon`);
+    }
+  }
+
   public keepOriginalOrder = (a, b) => a.key;
 }

src/assets/ico/accueil.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.375 10.8789C19.724 11.194 21.6862 12.2539 23.2617 14.0586C24.8372 15.8633 25.625 17.9688 25.625 20.375H6.375C6.375 17.9688 7.16276 15.8633 8.73828 14.0586C10.3138 12.2539 12.276 11.194 14.625 10.8789V10.0625H13.9375C13.737 10.0625 13.5651 10.0052 13.4219 9.89062C13.3073 9.7474 13.25 9.57552 13.25 9.375V8.6875C13.25 8.48698 13.3073 8.32943 13.4219 8.21484C13.5651 8.07161 13.737 8 13.9375 8H18.0625C18.263 8 18.4206 8.07161 18.5352 8.21484C18.6784 8.32943 18.75 8.48698 18.75 8.6875V9.375C18.75 9.57552 18.6784 9.7474 18.5352 9.89062C18.4206 10.0052 18.263 10.0625 18.0625 10.0625H17.375V10.8789ZM26.3125 21.75C26.513 21.75 26.6706 21.8216 26.7852 21.9648C26.9284 22.0794 27 22.237 27 22.4375V23.8125C27 24.013 26.9284 24.1849 26.7852 24.3281C26.6706 24.4427 26.513 24.5 26.3125 24.5H5.6875C5.48698 24.5 5.3151 24.4427 5.17188 24.3281C5.05729 24.1849 5 24.013 5 23.8125V22.4375C5 22.237 5.05729 22.0794 5.17188 21.9648C5.3151 21.8216 5.48698 21.75 5.6875 21.75H26.3125Z" fill="black"/>
+</svg>

src/assets/ico/adress.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2C12.6055 2.0145 14.1397 2.68885 15.265 3.87463C16.3902 5.06042 17.0142 6.66048 16.9998 8.32269C16.9998 11.8208 12.1242 19 11 19C9.87584 19 5.00025 11.8208 5.00025 8.32269C4.98578 6.66048 5.60982 5.06042 6.73504 3.87463C7.86026 2.68885 9.39446 2.0145 11 2ZM10.9999 5.55695C12.0865 5.53677 13.0768 6.19906 13.5059 7.23274C13.9349 8.26643 13.7173 9.4661 12.9553 10.2683C12.1933 11.0704 11.0384 11.3157 10.0329 10.8888C9.02744 10.4619 8.37129 9.44779 8.37266 8.32272C8.36215 6.80858 9.53743 5.57133 10.9999 5.55695Z" fill="#333333"/>
+</svg>

src/assets/ico/calendar.svg

+<symbol id="calendar" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10H5V13H8V10Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H3C2.44772 4 2 4.44772 2 5V19C2 19.5523 2.44772 20 3 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H17V3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4H7V3C7 2.44772 6.55229 2 6 2ZM4 9V18H18V9H4Z" fill="#333333"/>
+</symbol>

src/assets/ico/computer.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="3.5" width="17" height="11" rx="0.5" stroke="#333333"/>
+<rect x="2" y="12" width="18" height="2" fill="#333333"/>
+<rect x="9" y="15" width="4" height="2" fill="#333333"/>
+<path d="M7 17.382C7 17.1479 7.13226 16.9339 7.34164 16.8292L8.78885 16.1056C8.92771 16.0361 9.08082 16 9.23607 16H12.7639C12.9192 16 13.0723 16.0361 13.2111 16.1056L14.6584 16.8292C14.8677 16.9339 15 17.1479 15 17.382C15 17.7233 14.7233 18 14.382 18H7.61803C7.2767 18 7 17.7233 7 17.382Z" fill="#333333"/>
+</svg>

src/assets/ico/date.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10H5V13H8V10Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H3C2.44771 4 2 4.44772 2 5V19C2 19.5523 2.44771 20 3 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H17V3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4H7V3C7 2.44772 6.55228 2 6 2ZM4 9V18H18V9H4Z" fill="#333333"/>
+</svg>

src/assets/ico/demarche.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="11" y="10" width="2" height="2" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11C8.23858 11 6 13.2386 6 16V23C6 26.3137 8.68629 29 12 29C15.3137 29 18 26.3137 18 23V16C18 13.2386 15.7614 11 13 11H11ZM12 14.5C11.4477 14.5 11 14.9477 11 15.5V18.5C11 19.0523 11.4477 19.5 12 19.5C12.5523 19.5 13 19.0523 13 18.5V15.5C13 14.9477 12.5523 14.5 12 14.5Z" fill="black"/>
+<path d="M12 10.5C12 9.33333 12 9.7 12 8.5C12 7 13 3 16.9999 3C20.9998 3 21.9999 7 21.9999 9.5C21.9999 12 21.9999 11 21.9999 12.5C21.9999 14 22.4999 17 24.9999 17C27.4999 17 27.9999 14.5 27.9999 12.5" stroke="black"/>
+</svg>

src/assets/ico/email.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 4H19.5C20.3284 4 21 4.67157 21 5.5V16.0714C21 16.8998 20.3284 17.5714 19.5 17.5714H3.5C2.67157 17.5714 2 16.8998 2 16.0714V5.5C2 4.67157 2.67157 4 3.5 4ZM2.91716 6.02444C3.04832 5.78143 3.35163 5.69075 3.59464 5.8219L11.2431 9.94966C11.5474 10.1138 11.9148 10.1093 12.2149 9.93753L19.3945 5.82797C19.6341 5.69079 19.9396 5.77387 20.0768 6.01353C20.214 6.25318 20.1309 6.55867 19.8913 6.69585L12.7116 10.8054C12.1116 11.1489 11.3767 11.1581 10.7682 10.8297L3.11971 6.70192C2.8767 6.57077 2.78602 6.26745 2.91716 6.02444Z" fill="#333333"/>
+</svg>

src/assets/ico/equipement.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.75 19.0625V17H27V23.1875C27 23.7318 26.7852 24.2044 26.3555 24.6055C25.9544 25.0352 25.4818 25.25 24.9375 25.25H7.0625C6.51823 25.25 6.03125 25.0352 5.60156 24.6055C5.20052 24.2044 5 23.7318 5 23.1875V17H13.25V19.0625C13.25 19.263 13.3073 19.4349 13.4219 19.5781C13.5651 19.6927 13.737 19.75 13.9375 19.75H18.0625C18.263 19.75 18.4206 19.6927 18.5352 19.5781C18.6784 19.4349 18.75 19.263 18.75 19.0625ZM24.9375 10.125C25.4818 10.125 25.9544 10.3398 26.3555 10.7695C26.7852 11.1706 27 11.6432 27 12.1875V15.625H5V12.1875C5 11.6432 5.20052 11.1706 5.60156 10.7695C6.03125 10.3398 6.51823 10.125 7.0625 10.125H10.5V8.0625C10.5 7.51823 10.7005 7.04557 11.1016 6.64453C11.5312 6.21484 12.0182 6 12.5625 6H19.4375C19.9818 6 20.4544 6.21484 20.8555 6.64453C21.2852 7.04557 21.5 7.51823 21.5 8.0625V10.125H24.9375ZM18.75 10.125V8.75H13.25V10.125H18.75Z" fill="black"/>
+</svg>

src/assets/ico/group.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0474 10.437C14.2168 9.73893 15 8.46093 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 8.46093 7.7832 9.73893 8.95263 10.437C7.21207 11.2192 6 12.9681 6 15V18H16V15C16 12.9681 14.7879 11.2192 13.0474 10.437Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.917 14H21V11.8C21 10.3099 20.1516 9.02743 18.9332 8.45382C19.7518 7.94188 20.3 7.00468 20.3 5.93333C20.3 4.3133 19.0464 3 17.5 3C16.542 3 15.6963 3.50407 15.1915 4.27286C15.7028 5.05718 16 5.99389 16 7C16 7.44599 15.9416 7.87827 15.832 8.28963C15.9075 8.34834 15.9858 8.40316 16.0668 8.45382C15.9493 8.50916 15.8352 8.57108 15.725 8.63916C15.5088 9.26223 15.173 9.82915 14.7453 10.3124C15.8722 11.214 16.6677 12.514 16.917 14ZM14.9929 7.24086C14.9976 7.16118 15 7.08087 15 7C15 6.48461 14.9025 5.99199 14.725 5.53957C14.7085 5.66836 14.7 5.79981 14.7 5.93333C14.7 6.40316 14.8054 6.84718 14.9929 7.24086ZM15.9 14H14V11.8C14 11.5447 14.0249 11.2955 14.0723 11.055C14.9949 11.7745 15.6585 12.8106 15.9 14Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.80852 4.27286C6.30371 3.50407 5.45804 3 4.5 3C2.9536 3 1.7 4.3133 1.7 5.93333C1.7 7.00468 2.24824 7.94188 3.06684 8.45382C1.84845 9.02743 1 10.3099 1 11.8V14H5.08296C5.33228 12.514 6.12778 11.214 7.25473 10.3124C6.82705 9.82915 6.49117 9.26223 6.27499 8.63916C6.16478 8.57108 6.05069 8.50916 5.93316 8.45382C6.01417 8.40316 6.09253 8.34834 6.16797 8.28963C6.05843 7.87827 6 7.44599 6 7C6 5.99389 6.29717 5.05718 6.80852 4.27286ZM7.9277 11.055C7.0051 11.7745 6.34145 12.8106 6.10002 14H8V11.8C8 11.5447 7.9751 11.2955 7.9277 11.055ZM7.27499 5.53957C7.29148 5.66836 7.3 5.79981 7.3 5.93333C7.3 6.40316 7.19457 6.84718 7.00713 7.24086C7.0024 7.16118 7 7.08087 7 7C7 6.48461 7.09747 5.99199 7.27499 5.53957Z" fill="#333333"/>
+</svg>

src/assets/ico/label.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.375 26.75V24H25.625V26.75H6.375ZM22.875 15.75C24.0208 15.75 24.9948 16.151 25.7969 16.9531C26.599 17.7552 27 18.7292 27 19.875V21.25C27 21.6224 26.8568 21.9518 26.5703 22.2383C26.3125 22.4961 25.9974 22.625 25.625 22.625H6.375C6.0026 22.625 5.67318 22.4961 5.38672 22.2383C5.12891 21.9518 5 21.6224 5 21.25V19.875C5 18.7292 5.40104 17.7552 6.20312 16.9531C7.00521 16.151 7.97917 15.75 9.125 15.75H12.0039C12.3477 15.75 12.6341 15.6354 12.8633 15.4062C13.1211 15.1484 13.25 14.8477 13.25 14.5039V14.4609C13.25 13.3151 12.9206 12.026 12.2617 10.5938C12.0039 10.0495 11.875 9.47656 11.875 8.875C11.875 7.61458 12.362 6.56901 13.3359 5.73828C14.3099 4.90755 15.4414 4.60677 16.7305 4.83594C17.5612 4.97917 18.2773 5.36589 18.8789 5.99609C19.5091 6.59766 19.9102 7.3138 20.082 8.14453C20.2253 9.0612 20.082 9.92057 19.6523 10.7227C19.0508 11.9258 18.75 13.043 18.75 14.0742V14.5039C18.75 14.8477 18.8646 15.1484 19.0938 15.4062C19.3516 15.6354 19.6523 15.75 19.9961 15.75H22.875Z" fill="black"/>
+</svg>

src/assets/ico/pass.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.55556 5C1.24873 5 1 5.24873 1 5.55556V14.4444C1 14.7513 1.24873 15 1.55556 15H20.4444C20.7513 15 21 14.7513 21 14.4444V5.55556C21 5.24873 20.7513 5 20.4444 5H1.55556ZM4.77222 8.76388C4.78333 8.77499 4.79722 8.78055 4.81389 8.78055H4.91667C4.93333 8.78055 4.94722 8.77499 4.95833 8.76388C4.96944 8.75277 4.97683 8.73888 4.98055 8.72221L5.03055 8.3861H5.43889L5.38889 8.72221C5.38705 8.73888 5.39167 8.75277 5.40278 8.76388C5.41389 8.77499 5.42778 8.78055 5.44444 8.78055H5.54722C5.56389 8.78055 5.57778 8.77499 5.58889 8.76388C5.6 8.75277 5.60739 8.73888 5.61111 8.72221L5.66111 8.3861H5.99444C6.01294 8.3861 6.02778 8.38055 6.03889 8.36943C6.05183 8.35832 6.05833 8.34349 6.05833 8.32499V8.23055C6.05833 8.21205 6.05183 8.19721 6.03889 8.1861C6.02778 8.17499 6.01294 8.16943 5.99444 8.16943H5.69444L5.76667 7.68055H6.06667C6.08517 7.68055 6.1 7.67499 6.11111 7.66388C6.12406 7.65277 6.13056 7.63793 6.13056 7.61943V7.52499C6.13056 7.50649 6.12406 7.49166 6.11111 7.48055C6.1 7.46943 6.08517 7.46388 6.06667 7.46388H5.79722L5.84722 7.12777C5.84905 7.1111 5.84444 7.09721 5.83333 7.0861C5.82222 7.07499 5.80833 7.06943 5.79167 7.06943H5.68889C5.67222 7.06943 5.65833 7.07499 5.64722 7.0861C5.63794 7.09721 5.6315 7.1111 5.62778 7.12777L5.57778 7.46388H5.16667L5.21667 7.12777C5.2185 7.1111 5.21389 7.09721 5.20278 7.0861C5.19167 7.07499 5.17778 7.06943 5.16111 7.06943H5.05833C5.04167 7.06943 5.02778 7.07499 5.01667 7.0861C5.00739 7.09721 5.00094 7.1111 4.99722 7.12777L4.94722 7.46388H4.60555C4.58705 7.46388 4.57222 7.46943 4.56111 7.48055C4.55 7.49166 4.54444 7.50649 4.54444 7.52499V7.61943C4.54444 7.63793 4.55 7.65277 4.56111 7.66388C4.57222 7.67499 4.58705 7.68055 4.60555 7.68055H4.91389L4.84167 8.16943H4.53333C4.51483 8.16943 4.5 8.17499 4.48889 8.1861C4.47778 8.19721 4.47222 8.21205 4.47222 8.23055V8.32499C4.47222 8.34349 4.47778 8.35832 4.48889 8.36943C4.5 8.38055 4.51483 8.3861 4.53333 8.3861H4.80833L4.75833 8.72221C4.7565 8.73888 4.76111 8.75277 4.77222 8.76388ZM6.34239 8.87221C6.3535 8.88332 6.3665 8.88888 6.38128 8.88888H6.52294C6.5415 8.88888 6.55628 8.88427 6.56739 8.87499C6.58039 8.86388 6.58872 8.85277 6.59239 8.84166L6.74517 8.44721H7.65628L7.80905 8.84166C7.81278 8.85277 7.82017 8.86388 7.83128 8.87499C7.84239 8.88427 7.85817 8.88888 7.8785 8.88888H8.02017C8.035 8.88888 8.04794 8.88332 8.05906 8.87221C8.07017 8.8611 8.07572 8.84816 8.07572 8.83332L8.07017 8.80277L7.38406 7.00555C7.36928 6.96482 7.33961 6.94443 7.29517 6.94443H7.10628C7.06183 6.94443 7.03222 6.96482 7.01739 7.00555L6.3285 8.80277C6.32667 8.80832 6.32572 8.81849 6.32572 8.83332C6.32572 8.84816 6.33128 8.8611 6.34239 8.87221ZM8.38939 8.87221C8.40239 8.88332 8.41811 8.88888 8.43661 8.88888H8.58383C8.60239 8.88888 8.61811 8.88332 8.63106 8.87221C8.64406 8.85927 8.6505 8.84349 8.6505 8.82499V8.13055H9.14217C9.35328 8.13055 9.51811 8.08054 9.63661 7.98054C9.757 7.87871 9.81717 7.73149 9.81717 7.53888C9.81717 7.34627 9.757 7.19904 9.63661 7.09721C9.51628 6.99538 9.35144 6.94443 9.14217 6.94443H8.43661C8.41811 6.94443 8.40239 6.95093 8.38939 6.96388C8.37828 6.97499 8.37272 6.99071 8.37272 7.0111V8.82499C8.37272 8.84349 8.37828 8.85927 8.38939 8.87221ZM10.5966 8.87221C10.6096 8.88332 10.6253 8.88888 10.6438 8.88888H10.7883C10.8068 8.88888 10.8226 8.88332 10.8355 8.87221C10.8485 8.85927 10.8549 8.84349 10.8549 8.82499V7.19166H11.3855C11.4041 7.19166 11.4198 7.1861 11.4327 7.17499C11.4457 7.16205 11.4522 7.14627 11.4522 7.12777V7.0111C11.4522 6.99071 11.4457 6.97499 11.4327 6.96388C11.4216 6.95093 11.4059 6.94443 11.3855 6.94443H10.0466C10.0281 6.94443 10.0124 6.95093 9.99939 6.96388C9.98828 6.97682 9.98272 6.9926 9.98272 7.0111V7.12777C9.98272 7.14627 9.98828 7.16205 9.99939 7.17499C10.0124 7.1861 10.0281 7.19166 10.0466 7.19166H10.5799V8.82499C10.5799 8.84349 10.5855 8.85927 10.5966 8.87221ZM11.7803 8.87221C11.7932 8.88332 11.8089 8.88888 11.8275 8.88888H11.9747C11.9932 8.88888 12.0081 8.88332 12.0192 8.87221C12.0321 8.85927 12.0386 8.84349 12.0386 8.82499V7.00832C12.0386 6.98982 12.0321 6.97499 12.0192 6.96388C12.0081 6.95093 11.9932 6.94443 11.9747 6.94443H11.8275C11.8089 6.94443 11.7932 6.95093 11.7803 6.96388C11.7692 6.97499 11.7636 6.98982 11.7636 7.00832V8.82499C11.7636 8.84349 11.7692 8.85927 11.7803 8.87221ZM12.6564 8.71666C12.7861 8.84999 12.975 8.91666 13.2231 8.91666C13.3879 8.91666 13.5278 8.88793 13.6426 8.83055C13.7574 8.77127 13.8444 8.69443 13.9037 8.59999C13.9629 8.50554 13.9953 8.40371 14.0009 8.29443C14.0028 8.27777 13.9972 8.26482 13.9842 8.25555C13.9731 8.24443 13.9592 8.23888 13.9426 8.23888H13.7898C13.7713 8.23888 13.7564 8.24349 13.7453 8.25277C13.7342 8.26204 13.7259 8.27871 13.7203 8.30277C13.6907 8.44166 13.6342 8.53982 13.5509 8.59721C13.4694 8.65277 13.3602 8.68055 13.2231 8.68055C12.9046 8.68055 12.7398 8.50371 12.7287 8.14999C12.7268 8.09627 12.7259 8.0176 12.7259 7.91388C12.7259 7.81016 12.7268 7.73332 12.7287 7.68332C12.7398 7.3296 12.9046 7.15277 13.2231 7.15277C13.3602 7.15277 13.4694 7.18149 13.5509 7.23888C13.6324 7.29443 13.6889 7.39166 13.7203 7.53055C13.7296 7.57316 13.7528 7.59443 13.7898 7.59443H13.9426C13.9574 7.59443 13.9703 7.58982 13.9814 7.58055C13.9944 7.56943 14.0009 7.55649 14.0009 7.54166V7.5361C13.9953 7.42871 13.9629 7.32777 13.9037 7.23332C13.8444 7.13888 13.7574 7.06293 13.6426 7.00555C13.5278 6.94627 13.3879 6.91666 13.2231 6.91666C12.9768 6.91666 12.7889 6.98427 12.6592 7.11943C12.5296 7.25277 12.4602 7.4361 12.4509 7.66943C12.4491 7.72127 12.4481 7.8046 12.4481 7.91943C12.4481 8.03238 12.4491 8.11388 12.4509 8.16388C12.4602 8.39904 12.5287 8.58332 12.6564 8.71666ZM4.25 11C4.11193 11 4 11.1119 4 11.25C4 11.3881 4.11193 11.5 4.25 11.5H12.7259C12.864 11.5 12.9759 11.3881 12.9759 11.25C12.9759 11.1119 12.864 11 12.7259 11H4.25ZM16.6144 11.9418H16.0068C16.0133 12.1185 16.0594 12.249 16.1451 12.3333C16.2321 12.4177 16.3749 12.4598 16.5735 12.4598C16.702 12.4598 16.8163 12.4398 16.9163 12.3996L17 12.9398C16.8273 12.9799 16.6566 13 16.4878 13C16.1373 13 15.8575 12.9063 15.6485 12.7189C15.4408 12.5315 15.3317 12.2724 15.3213 11.9418H15V11.6205H15.3213V11.3755H15V11.0562H15.3272C15.3518 10.7242 15.4726 10.4652 15.6894 10.2791C15.9062 10.093 16.1925 10 16.5482 10C16.6858 10 16.8364 10.0207 17 10.0622L16.9163 10.6044C16.815 10.5629 16.7066 10.5422 16.591 10.5422C16.4119 10.5422 16.2749 10.5843 16.1801 10.6687C16.0854 10.7517 16.0295 10.8809 16.0127 11.0562H16.6144V11.3755H16.0068V11.6205H16.6144V11.9418ZM9.12828 7.89721C9.2635 7.89721 9.36533 7.86666 9.43383 7.80554C9.50422 7.74443 9.53939 7.65554 9.53939 7.53888C9.53939 7.42221 9.50517 7.33332 9.43661 7.27221C9.36811 7.20927 9.26533 7.17777 9.12828 7.17777H8.64772V7.89721H9.12828ZM7.20072 7.22221L7.57572 8.20832H6.82572L7.20072 7.22221ZM5.54444 7.68055L5.47222 8.16943H5.06389L5.13611 7.68055H5.54444ZM19.75 6C19.6119 6 19.5 6.11193 19.5 6.25V6.75C19.5 6.88807 19.6119 7 19.75 7C19.8881 7 20 6.88807 20 6.75V6.25C20 6.11193 19.8881 6 19.75 6ZM19.5 8.25C19.5 8.11193 19.6119 8 19.75 8C19.8881 8 20 8.11193 20 8.25V10.75C20 10.8881 19.8881 11 19.75 11C19.6119 11 19.5 10.8881 19.5 10.75V8.25ZM19.75 12C19.6119 12 19.5 12.1119 19.5 12.25V13.75C19.5 13.8881 19.6119 14 19.75 14C19.8881 14 20 13.8881 20 13.75V12.25C20 12.1119 19.8881 12 19.75 12Z" fill="#333333"/>
+</svg>