Updated the structure and profile cards for orientation

src/app/annuaire/result-list/result-list.component.html

@@ -13,30 +13,14 @@
       </div>
       <div class="resultsInfo">
         <div *ngIf="userList.length" class="users">
-          <div
+          <app-member-card
             *ngFor="let user of userList"
-            class="singleUser"
-            tabindex="0"
-            role="link"
-            (click)="goToUser(user._id)"
-            (keyup.enter)="goToUser(user._id)"
-          >
-            <div class="left">
-              <app-svg-icon [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-48'" />
-              <div class="identity">
-                <p class="name">{{ user.name | userName }} {{ user.surname | uppercase }}</p>
-                <p *ngIf="user.job" class="job">{{ user.job.name }}</p>
-                <div *ngIf="user.withAppointment" class="appointment">
-                  <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'rdv'" />
-                  <span>Rendez-vous</span>
-                </div>
-              </div>
-            </div>
-            <div class="right">
-              <div *ngIf="user.employer" class="employer">{{ user.employer.name }}</div>
-              <app-svg-icon [iconClass]="'icon-32'" [type]="'ico'" [icon]="'chevronRight'" />
-            </div>
-          </div>
+            [member]="user"
+            [showAppointment]="true"
+            [showContactInfo]="false"
+            [showEmployer]="true"
+            [isClickable]="true"
+          />
           <div *ngIf="showPagination" class="pagination">
             <p>{{ userList.length }} membres affichés sur {{ totalUserResult }}</p>
             <app-v3-button

src/app/annuaire/result-list/result-list.component.scss

@@ -45,58 +45,6 @@
       flex-direction: column;
       gap: 16px;
       padding-right: 8px;
-      .singleUser {
-        display: flex;
-        align-items: center;
-        min-height: 100px;
-        padding: 1rem;
-        box-sizing: border-box;
-        cursor: pointer;
-        border-radius: 8px;
-        border: 1px solid $grey-7;
-        justify-content: space-between;
-        gap: 1rem;
-        transition: all 0.2s ease-in-out;
-
-        &:hover {
-          border-color: $grey-4;
-        }
-
-        .left {
-          display: flex;
-          align-items: center;
-          gap: 1.5rem;
-          .identity {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-            max-width: 330px;
-            .name {
-              font-weight: bold;
-            }
-            .job {
-              color: $grey-3;
-            }
-            .appointment {
-              display: flex;
-              align-items: center;
-              gap: 0.5rem;
-              span {
-                @include font-bold-14;
-              }
-            }
-          }
-        }
-        .right {
-          display: flex;
-          align-items: center;
-          gap: 1.5rem;
-          color: $grey-4;
-          .employer {
-            color: $grey-3;
-          }
-        }
-      }
     }
 
     .noResult {

src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html

@@ -14,23 +14,23 @@
       <div class="content">
         <div fxLayout="row">
           <div class="label">Nom</div>
-          <div class="info">{{ beneficiary.name | userName }} {{ beneficiary.surname | uppercase }}</div>
+          <div class="text-info">{{ beneficiary.name | userName }} {{ beneficiary.surname | uppercase }}</div>
         </div>
         <div fxLayout="row">
           <div class="label">Besoin(s) d'aide</div>
-          <div class="info">
+          <div class="text-info">
             <div *ngFor="let need of needs">{{ need.displayText }}</div>
           </div>
         </div>
         <div *ngIf="recap?.language" fxLayout="row">
           <div class="label">Langue souhaitée</div>
-          <div class="info">
+          <div class="text-info">
             <div>{{ recap.language }}</div>
           </div>
         </div>
         <div *ngIf="comment" fxLayout="row">
           <div class="label">Précisions</div>
-          <div class="info">
+          <div class="text-info">
             <div>{{ comment }}</div>
           </div>
         </div>

src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss

@@ -73,7 +73,7 @@
         flex: 1 1 100%;
         max-width: 20%;
       }
-      .info {
+      .text-info {
         @include font-bold-14;
         margin-bottom: 1rem;
         max-width: 80%;

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html

 <div class="orientationForm">
-  <h2>Quelle structure oriente la personne&nbsp;?</h2>
-  <div *ngIf="hasStructures && structuresLinked.length >= 2" class="select-structure border">
-    <div class="number">{{ structuresLinked.length }} structures sont associées à votre compte</div>
-    <div
-      *ngFor="let structure of structuresLinked"
-      class="structure-item"
-      tabindex="0"
-      [ngClass]="{ 'item-selected': structure.structureName === selected?.structureName }"
-      (click)="select(structure)"
-      (keyup.enter)="select(structure)"
-    >
-      <div class="item-frame">
-        <div class="name">{{ structure.structureName }}</div>
-        <div class="commune">{{ structure.address.commune }}</div>
-      </div>
-      <app-svg-icon
-        *ngIf="structure.structureName === selected?.structureName"
-        class="form-icon"
-        [iconClass]="'icon-26'"
-        [type]="'form'"
-        [icon]="'validate'"
-      />
+  <div class="orientation-header">
+    <h2>Quelle structure oriente la personne&nbsp;?</h2>
+    <div *ngIf="hasStructures && structuresLinked.length >= 2" class="number">
+      {{ structuresLinked.length }} structures sont associées à votre compte
     </div>
   </div>
-  <div *ngIf="!hasStructures" class="select-structure">
+
+  <section *ngIf="hasStructures && structuresLinked.length >= 2">
+    <app-member-card [member]="profile" [showContactInfo]="false" [showEmployer]="false" [isClickable]="false" />
+
+    <div class="structures-section">
+      <p>Sélectionnez la structure de votre choix</p>
+
+      <div class="list-structures">
+        <app-card
+          *ngFor="let structure of structuresLinked"
+          role="listitem"
+          [structure]="structure"
+          [showRadioButton]="true"
+          [noDetails]="true"
+          [isOrientation]="false"
+          [isOrientationRdv]="false"
+          [isInteractive]="false"
+          [isChecked]="structure._id === selected?._id"
+          (selectedStructure)="select(structure)"
+        />
+      </div>
+    </div>
+  </section>
+
+  <div *ngIf="!hasStructures">
     <form [formGroup]="form">
       <div>
         <div class="form-group" fxLayout="column">

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss

@@ -3,34 +3,39 @@
 @import 'inputs';
 @import 'breakpoint';
 
-.select-structure {
-  width: 380px;
+.orientation-header {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   .number {
-    padding: 1rem;
     color: $grey-3;
-    @include font-regular-13;
+    @include font-regular-18;
+  }
+}
+
+section {
+  border: 1px solid $grey-6;
+  border-radius: 8px;
+
+  ::ng-deep .structureMember {
+    border-radius: 8px 8px 0px 0px;
   }
-  &.border {
-    border: solid 2px $grey-9;
+}
+
+.structures-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+
+  p {
+    @include font-bold-16;
   }
-  .structure-item {
-    cursor: pointer;
-    padding-left: 1rem;
-    height: 76px;
+
+  .list-structures {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: solid 2px transparent;
-    border-top-color: $grey-9;
-
-    &:hover {
-      .name {
-        text-decoration: underline;
-      }
-    }
-    &.item-selected {
-      border: solid 2px $green-1;
-    }
+    flex-direction: column;
+    gap: 24px;
   }
 }
 

src/app/shared/components/member-card/member-card.component.html

-<div class="structureMember">
-  <app-svg-icon class="avatar hide-on-mobile" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'" />
-  <div class="infoDetails">
-    <p class="name underline" tabindex="0" (click)="goToProfile()" (keyup.enter)="goToProfile()">
-      {{ member.name | userName }} {{ member.surname | uppercase }}
-    </p>
+<div
+  class="structureMember"
+  [ngClass]="{ clickable: isInteractive() }"
+  [tabindex]="isInteractive() ? '0' : '-1'"
+  (click)="clickedCard()"
+  (keyup.enter)="clickedCard()"
+>
+  <input *ngIf="showRadioButton" type="radio" tabindex="-1" id="{{ member._id }}" />
+  <app-svg-icon class="hide-on-mobile" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-48'" />
+  <div class="infoDetails" [ngClass]="{ largeCard: showAppointment }">
+    <p class="name">{{ member.name | userName }} {{ member.surname | uppercase }}</p>
     <p>{{ getJob() }}</p>
+    <div *ngIf="showAppointment && member.withAppointment" class="appointment">
+      <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'rdv'" />
+      <span>Rendez-vous</span>
+    </div>
   </div>
-  <div *ngIf="getPhone()" class="infoDetails">
-    <p>{{ getPhone() }}</p>
-    <p class="mail">{{ member.email }}</p>
+  <div *ngIf="showContactInfo" class="infoDetails">
+    <p *ngIf="getPhone()">{{ getPhone() }}</p>
+    <p *ngIf="getEmail()" class="mail">{{ getEmail() }}</p>
   </div>
+  <div *ngIf="showEmployer && member.employer" class="right employer">{{ member.employer.name }}</div>
+  <app-svg-icon *ngIf="isClickable" [iconClass]="'icon-32'" [type]="'ico'" [icon]="'chevronRight'" />
 </div>

src/app/shared/components/member-card/member-card.component.scss

@@ -6,20 +6,27 @@
 .structureMember {
   @include font-regular-14;
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: 24px;
-
   padding: 1rem;
   border: 1px solid $grey-7;
   border-radius: 4px;
   color: $grey-3;
   transition: all 0.2s ease-in-out;
 
-  .avatar {
-    display: flex;
-    align-items: center;
-    background-color: $grey-9;
-    border-radius: 4px;
+  &.clickable {
+    &:hover {
+      border-color: $grey-4;
+    }
+  }
+
+  input {
+    accent-color: $grey-1;
+    width: 18px;
+    height: 18px;
+    margin: 6px;
+    cursor: pointer;
   }
 
   p {
@@ -27,8 +34,6 @@
   }
   .name {
     @include font-bold-16;
-    text-decoration: underline;
-    cursor: pointer;
     color: $grey-1;
   }
 
@@ -36,12 +41,41 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     gap: 8px;
     flex-grow: 1;
     flex-basis: 0;
+
+    &.largeCard {
+      height: 71px;
+    }
+
+    .appointment {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      span {
+        @include font-bold-14;
+      }
+    }
   }
 
   .mail {
     text-decoration: underline;
   }
+
+  .right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    color: $grey-4;
+    .employer {
+      color: $grey-3;
+    }
+  }
+
+  ::ng-deep svg {
+    top: 0px;
+    position: unset;
+  }
 }

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

-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { get } from 'lodash';
 import { Owner } from '../../../models/owner.model';
-import { User } from '../../../models/user.model';
+import { User, UserAnnuary } from '../../../models/user.model';
 
 @Component({
   selector: 'app-member-card',
   templateUrl: './member-card.component.html',
   styleUrls: ['./member-card.component.scss'],
 })
-export class MemberCardComponent {
-  @Input() public member: User | Owner;
+export class MemberCardComponent implements OnInit {
+  // The user info to display
+  @Input({ required: true }) public member: User | Owner | UserAnnuary;
+
+  // If true, shows a radio button to select the card. Makes the card unclickable
+  @Input() public showRadioButton = false;
+
+  // If true, shows the RDV icon if available
+  @Input() public showAppointment = false;
+
+  // If true, shows the contact info (phone + email), if provided
+  @Input() public showContactInfo = true;
+
+  // If true, shows the employer
+  @Input() public showEmployer = true;
+
+  // If true, makes the card clickable (redirects to profile) + shows the 'chevronRight' icon
+  @Input() public isClickable = true;
+
+  @Output() public selectedCard = new EventEmitter<string>();
+
+  public selectedId: string;
 
   constructor(private router: Router) {}
 
+  ngOnInit(): void {
+    if (this.showRadioButton && this.isClickable) {
+      console.warn("Can't make a card selectable (with radio button) and clickable.");
+      this.isClickable = false;
+    }
+  }
+
+  isInteractive(): boolean {
+    return this.showRadioButton || this.isClickable;
+  }
+
   getJob(): string {
     return this.member.job?.name ?? '';
   }
@@ -23,7 +54,20 @@ export class MemberCardComponent {
     return get(this.member, 'phone') ?? false;
   }
 
+  /** Depending on User or UserAnnuary return the email of false */
+  getEmail(): string | false {
+    return get(this.member, 'email') ?? false;
+  }
+
   goToProfile(): void {
     this.router.navigateByUrl(`/profile/${this.member._id}`);
   }
+
+  clickedCard(): void {
+    if (this.isClickable) {
+      this.goToProfile();
+    } else if (this.showRadioButton) {
+      this.selectedCard.emit(this.member._id);
+    }
+  }
 }

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

 <div
   class="structure"
   tabindex="0"
-  [ngClass]="{ orientation: isOrientation, interactive: isInteractive }"
+  [ngClass]="{ orientation: isOrientation, interactive: isInteractive, isChecked: isChecked }"
   (click)="cardClicked()"
   (keyup.enter)="cardClicked()"
   (mouseenter)="cardHover()"
 >
   <div class="left">
+    <input *ngIf="showRadioButton" type="radio" tabindex="-1" id="{{ structure._id }}" [checked]="isChecked" />
+
     <img alt [src]="'../../../../assets/ico/' + structure?.getTypeStructureIcon() + '.svg'" />
 
     <div class="structureDetails">
@@ -38,7 +40,12 @@
   </div>
 
   <div class="right">
-    <app-svg-icon *ngIf="!isOrientation" [type]="'ico'" [icon]="'chevronRight'" [iconClass]="'icon-24'" />
+    <app-svg-icon
+      *ngIf="!isOrientation && !showRadioButton"
+      [type]="'ico'"
+      [icon]="'chevronRight'"
+      [iconClass]="'icon-24'"
+    />
     <div *ngIf="isOrientation && !isOrientationRdv">
       <div
         *ngIf="!isSelected"

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

@@ -21,11 +21,24 @@
   &.interactive {
     cursor: pointer;
   }
+  &.isChecked {
+    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+    border-color: $red;
+  }
 
   .left {
     display: flex;
+    align-items: center;
     gap: 24px;
 
+    input {
+      accent-color: $grey-1;
+      width: 18px;
+      height: 18px;
+      margin: 6px;
+      cursor: pointer;
+    }
+
     .structureDetails {
       display: flex;
       flex-direction: column;

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

@@ -11,14 +11,17 @@ import { ProfileService } from '../../../profile/services/profile.service';
 export class CardComponent {
   @Input() public structure: Structure;
   @Input() public isSelected: boolean;
+  @Input() public showRadioButton = false;
   @Input() public isOrientation = false;
   @Input() public isOrientationRdv = false;
   @Input() public noDetails = false;
   @Input() public isInteractive = true;
-  @Output() public showDetails: EventEmitter<Structure> = new EventEmitter<Structure>();
-  @Output() public addToList: EventEmitter<Structure> = new EventEmitter<Structure>();
-  @Output() public selectRDV: EventEmitter<Structure> = new EventEmitter<Structure>();
-  @Output() public hover: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Input() public isChecked = false;
+  @Output() public showDetails = new EventEmitter<Structure>();
+  @Output() public addToList = new EventEmitter<Structure>();
+  @Output() public selectRDV = new EventEmitter<Structure>();
+  @Output() public hover = new EventEmitter<Structure>();
+  @Output() public selectedStructure = new EventEmitter<Structure>();
 
   constructor(
     private route: ActivatedRoute,
@@ -52,6 +55,8 @@ export class CardComponent {
               id: this.structure._id,
             },
       });
+    } else {
+      this.selectedStructure.emit(this.structure);
     }
   }
 

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

@@ -268,7 +268,13 @@
     <section *ngIf="userIsLoggedIn() && membersWithJobWithPO.length" class="members">
       <h2>Accompagnant·es numériques</h2>
       <div class="members">
-        <app-member-card *ngFor="let member of membersWithJobWithPO" [member]="member" />
+        <app-member-card
+          *ngFor="let member of membersWithJobWithPO"
+          [member]="member"
+          [showContactInfo]="false"
+          [showEmployer]="false"
+          [isClickable]="true"
+        />
       </div>
     </section>
 

src/assets/avatar/sprite.svg

 <svg xmlns="http://www.w3.org/2000/svg">
 
   <symbol id="defaultAvatar" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle r="3.33333" transform="matrix(-1 0 0 1 10.0002 24.6673)" fill="#B1B0B0"/>
-    <circle r="3.33333" transform="matrix(-1 0 0 1 30.0002 24.6673)" fill="#B1B0B0"/>
-    <rect width="8" height="12" rx="4" transform="matrix(-1 0 0 1 24 28.0225)" fill="#D4D4D4"/>
-    <rect width="8" height="12" rx="4" transform="matrix(-1 0 0 1 24 25.334)" fill="#B1B0B0"/>
-    <circle r="10.6667" transform="matrix(-1 0 0 1 20.0003 24.0007)" fill="#D4D4D4"/>
-    <path d="M22.4594 28.1165C21.1149 29.7394 18.8854 29.7394 17.5409 28.1165C17.0912 27.5737 17.4209 26.667 18.0679 26.667L21.9324 26.667C22.5794 26.667 22.9091 27.5737 22.4594 28.1165Z" fill="white"/>
-    <circle cx="28.0003" cy="26.6673" r="1.33333" fill="#DA3635"/>
-    <circle cx="12.0003" cy="26.6673" r="1.33333" fill="#DA3635"/>
-    <path d="M27.0007 20.001H22.6148C21.9642 20.001 21.4868 20.6124 21.6446 21.2435L22.1002 23.0657C22.4335 24.399 23.6314 25.3343 25.0057 25.3343C26.6598 25.3343 28.0007 23.9934 28.0007 22.3394V21.001C28.0007 20.4487 27.5529 20.001 27.0007 20.001Z" fill="black"/>
-    <path d="M13.0003 20.001H17.3862C18.0368 20.001 18.5141 20.6124 18.3564 21.2435L17.9008 23.0657C17.5675 24.399 16.3696 25.3343 14.9953 25.3343C13.3412 25.3343 12.0003 23.9934 12.0003 22.3394V21.001C12.0003 20.4487 12.448 20.001 13.0003 20.001Z" fill="black"/>
-    <path d="M17.3335 21.3343L19.1057 20.4482C19.6688 20.1667 20.3315 20.1667 20.8946 20.4482L22.6668 21.3343" stroke="black" stroke-width="1.33333"/>
-    <line x1="0.666667" y1="-0.666667" x2="3.30647" y2="-0.666667" transform="matrix(0.942009 -0.335587 0.409703 0.912219 13.334 21.334)" stroke="black" stroke-width="1.33333" stroke-linecap="round"/>
-    <line x1="0.666667" y1="-0.666667" x2="3.30647" y2="-0.666667" transform="matrix(-0.942009 -0.335587 -0.409703 0.912219 26.6675 21.334)" stroke="black" stroke-width="1.33333" stroke-linecap="round"/>
-    <path d="M15.6069 14.863C15.6069 18.7159 18.9168 17.3337 22.9998 17.3337C24.7581 17.3337 26.286 18.5419 26.6912 20.2529L30.2094 35.1075C30.4575 36.1553 31.9998 35.9752 31.9998 34.8984V19.2788C31.9998 15.8305 30.2574 12.6156 27.3683 10.7331C24.5175 8.87561 20.8129 7.43023 18.1739 9.57797C16.602 10.8573 15.6069 12.7505 15.6069 14.863Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.3333 29.1677C28.1546 31.2919 26.2718 32.9714 24 33.891V35.9997C24 37.3808 23.3 38.5984 22.2355 39.3172C22.9436 39.7502 23.776 39.9997 24.6667 39.9997C27.244 39.9997 29.3333 37.9103 29.3333 35.333V29.1677ZM29.959 28.1375C29.8479 28.3034 29.7328 28.4663 29.6138 28.6262C29.6919 28.4643 29.766 28.3001 29.836 28.1338C29.8768 28.1358 29.9178 28.137 29.959 28.1375ZM31.979 22.1219C31.9929 21.8837 32 21.6438 32 21.4021C32 14.7365 26.6274 9.33301 20 9.33301C13.3726 9.33301 8 14.7365 8 21.4021C8 21.6438 8.00706 21.8837 8.02099 22.1219C8.48102 21.7819 9.03162 21.5575 9.62993 21.4914C10.7581 16.8107 14.9729 13.3331 20 13.3331C25.0271 13.3331 29.2419 16.8107 30.3701 21.4914C30.9684 21.5575 31.519 21.7819 31.979 22.1219ZM10.041 28.1375C10.0822 28.137 10.1232 28.1358 10.164 28.1338C10.234 28.3001 10.3081 28.4643 10.3862 28.6262C10.2672 28.4663 10.1521 28.3034 10.041 28.1375Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9993 25.6367C19.6823 25.3202 19.1766 25.2358 18.7704 25.4604L16.4965 26.7179C16.017 26.9831 15.8576 27.5784 16.1404 28.0477C16.4233 28.5169 17.0413 28.6824 17.5207 28.4172L19.7946 27.1597C19.8712 27.1174 19.9396 27.0666 19.9993 27.0093C20.0591 27.0666 20.1275 27.1174 20.2041 27.1597L22.478 28.4172C22.9574 28.6824 23.5754 28.5169 23.8582 28.0477C24.1411 27.5784 23.9817 26.9831 23.5022 26.7179L21.2283 25.4604C20.8221 25.2357 20.3164 25.3202 19.9993 25.6367Z" fill="black"/>
+    <circle r="3.33333" transform="matrix(-1 0 0 1 10.0002 24.6673)" fill="#B1B0B0" />
+    <circle r="3.33333" transform="matrix(-1 0 0 1 30.0002 24.6673)" fill="#B1B0B0" />
+    <rect width="8" height="12" rx="4" transform="matrix(-1 0 0 1 24 28.0225)" fill="#D4D4D4" />
+    <rect width="8" height="12" rx="4" transform="matrix(-1 0 0 1 24 25.334)" fill="#B1B0B0" />
+    <circle r="10.6667" transform="matrix(-1 0 0 1 20.0003 24.0007)" fill="#D4D4D4" />
+    <path
+      d="M22.4594 28.1165C21.1149 29.7394 18.8854 29.7394 17.5409 28.1165C17.0912 27.5737 17.4209 26.667 18.0679 26.667L21.9324 26.667C22.5794 26.667 22.9091 27.5737 22.4594 28.1165Z"
+      fill="white" />
+    <circle cx="28.0003" cy="26.6673" r="1.33333" fill="#DA3635" />
+    <circle cx="12.0003" cy="26.6673" r="1.33333" fill="#DA3635" />
+    <path
+      d="M27.0007 20.001H22.6148C21.9642 20.001 21.4868 20.6124 21.6446 21.2435L22.1002 23.0657C22.4335 24.399 23.6314 25.3343 25.0057 25.3343C26.6598 25.3343 28.0007 23.9934 28.0007 22.3394V21.001C28.0007 20.4487 27.5529 20.001 27.0007 20.001Z"
+      fill="black" />
+    <path
+      d="M13.0003 20.001H17.3862C18.0368 20.001 18.5141 20.6124 18.3564 21.2435L17.9008 23.0657C17.5675 24.399 16.3696 25.3343 14.9953 25.3343C13.3412 25.3343 12.0003 23.9934 12.0003 22.3394V21.001C12.0003 20.4487 12.448 20.001 13.0003 20.001Z"
+      fill="black" />
+    <path d="M17.3335 21.3343L19.1057 20.4482C19.6688 20.1667 20.3315 20.1667 20.8946 20.4482L22.6668 21.3343"
+      stroke="black" stroke-width="1.33333" />
+    <line x1="0.666667" y1="-0.666667" x2="3.30647" y2="-0.666667"
+      transform="matrix(0.942009 -0.335587 0.409703 0.912219 13.334 21.334)" stroke="black" stroke-width="1.33333"
+      stroke-linecap="round" />
+    <line x1="0.666667" y1="-0.666667" x2="3.30647" y2="-0.666667"
+      transform="matrix(-0.942009 -0.335587 -0.409703 0.912219 26.6675 21.334)" stroke="black" stroke-width="1.33333"
+      stroke-linecap="round" />
+    <path
+      d="M15.6069 14.863C15.6069 18.7159 18.9168 17.3337 22.9998 17.3337C24.7581 17.3337 26.286 18.5419 26.6912 20.2529L30.2094 35.1075C30.4575 36.1553 31.9998 35.9752 31.9998 34.8984V19.2788C31.9998 15.8305 30.2574 12.6156 27.3683 10.7331C24.5175 8.87561 20.8129 7.43023 18.1739 9.57797C16.602 10.8573 15.6069 12.7505 15.6069 14.863Z"
+      fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M29.3333 29.1677C28.1546 31.2919 26.2718 32.9714 24 33.891V35.9997C24 37.3808 23.3 38.5984 22.2355 39.3172C22.9436 39.7502 23.776 39.9997 24.6667 39.9997C27.244 39.9997 29.3333 37.9103 29.3333 35.333V29.1677ZM29.959 28.1375C29.8479 28.3034 29.7328 28.4663 29.6138 28.6262C29.6919 28.4643 29.766 28.3001 29.836 28.1338C29.8768 28.1358 29.9178 28.137 29.959 28.1375ZM31.979 22.1219C31.9929 21.8837 32 21.6438 32 21.4021C32 14.7365 26.6274 9.33301 20 9.33301C13.3726 9.33301 8 14.7365 8 21.4021C8 21.6438 8.00706 21.8837 8.02099 22.1219C8.48102 21.7819 9.03162 21.5575 9.62993 21.4914C10.7581 16.8107 14.9729 13.3331 20 13.3331C25.0271 13.3331 29.2419 16.8107 30.3701 21.4914C30.9684 21.5575 31.519 21.7819 31.979 22.1219ZM10.041 28.1375C10.0822 28.137 10.1232 28.1358 10.164 28.1338C10.234 28.3001 10.3081 28.4643 10.3862 28.6262C10.2672 28.4663 10.1521 28.3034 10.041 28.1375Z"
+      fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M19.9993 25.6367C19.6823 25.3202 19.1766 25.2358 18.7704 25.4604L16.4965 26.7179C16.017 26.9831 15.8576 27.5784 16.1404 28.0477C16.4233 28.5169 17.0413 28.6824 17.5207 28.4172L19.7946 27.1597C19.8712 27.1174 19.9396 27.0666 19.9993 27.0093C20.0591 27.0666 20.1275 27.1174 20.2041 27.1597L22.478 28.4172C22.9574 28.6824 23.5754 28.5169 23.8582 28.0477C24.1411 27.5784 23.9817 26.9831 23.5022 26.7179L21.2283 25.4604C20.8221 25.2357 20.3164 25.3202 19.9993 25.6367Z"
+      fill="black" />
   </symbol>
 
-</svg>
-
+</svg>
\ No newline at end of file