diff --git a/src/app/annuaire/result-list/result-list.component.html b/src/app/annuaire/result-list/result-list.component.html
index 9f5db7053a0cf9104863348ce7b8c28a2e883b97..2da617077e687b4a56d5bad347a018a0a00ee793 100644
--- a/src/app/annuaire/result-list/result-list.component.html
+++ b/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
diff --git a/src/app/annuaire/result-list/result-list.component.scss b/src/app/annuaire/result-list/result-list.component.scss
index 565fd658bd5e96002efd5af0296f0acdd1abd9a1..79527a574a9d799e4deadabe2471aede1c26cf0c 100644
--- a/src/app/annuaire/result-list/result-list.component.scss
+++ b/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 {
diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html
index 3d06e820204d7b38eed5eb587a947c5d81014dea..35ef7c28ed42d2d65b1cc9d52c47068065763508 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html
+++ b/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>
diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
index c636410a9c65b4dfbd49ff587b242ef97958192d..159b9f910031ca0f6b6bc0a9cb6a36d8eae488ac 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
+++ b/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%;
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
index 41a5db1a2f0855e72ee0b77461bca624bdaf6a9b..120ba127f5b718f397e9dfe17556f740468b96a7 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
+++ b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
@@ -1,29 +1,35 @@
<div class="orientationForm">
- <h2>Quelle structure oriente la personne ?</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 ?</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">
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
index 6bfd7b13eafef7e446cf6b03f515a3fdc6f8dd7e..5372f858bd70d1cb93bc4090009d2482b06a6529 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
+++ b/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;
}
}
diff --git a/src/app/shared/components/member-card/member-card.component.html b/src/app/shared/components/member-card/member-card.component.html
index efeb1c9360dacaaab85565c0343f54cc3451796a..b65d3d40ab2413724f417cbc20133aa8a1a86ac7 100644
--- a/src/app/shared/components/member-card/member-card.component.html
+++ b/src/app/shared/components/member-card/member-card.component.html
@@ -1,13 +1,24 @@
-<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>
diff --git a/src/app/shared/components/member-card/member-card.component.scss b/src/app/shared/components/member-card/member-card.component.scss
index 91979734f1f4b12fa2ff010f2d3a9100bf6e2c64..b0be8eca1614269875006332246660fa835c4f1d 100644
--- a/src/app/shared/components/member-card/member-card.component.scss
+++ b/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;
+ }
}
diff --git a/src/app/shared/components/member-card/member-card.component.ts b/src/app/shared/components/member-card/member-card.component.ts
index a11dc0a9230c9d7556b9fc0f263a30215f8fb718..94cb133475bf3a454be614617e43a376f0bc0058 100644
--- a/src/app/shared/components/member-card/member-card.component.ts
+++ b/src/app/shared/components/member-card/member-card.component.ts
@@ -1,19 +1,50 @@
-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);
+ }
+ }
}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index fc6caaf081f1ba5af8d18cb18c2b1c4495eeaa91..9b92371077ddde1f9a0905b9b7ac8657de4eb65b 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,12 +1,14 @@
<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"
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index c7c6c5e5872e74e7282868fb9a136391949cfd2a..9b059b0c6ee887e7634585d310db16d77b0e2138 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/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;
diff --git a/src/app/structure-list/components/card/card.component.ts b/src/app/structure-list/components/card/card.component.ts
index f6a1164105c243afbe6ce541aa0b3b31ad8216cd..e24c258ad601626b366b791558bc2cc7c17fb8cb 100644
--- a/src/app/structure-list/components/card/card.component.ts
+++ b/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);
}
}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 91d64640fa187bd582ebf051832ce6316e244d33..1bc104d418c0b2bf84f743ed48c3eedb8ed51874 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/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>
diff --git a/src/assets/avatar/sprite.svg b/src/assets/avatar/sprite.svg
index 422f307d3f21dcef0d03d9773a0dc0da8ebc4758..3229544918a661b026ba7eb5ab4086533c63c232 100644
--- a/src/assets/avatar/sprite.svg
+++ b/src/assets/avatar/sprite.svg
@@ -1,23 +1,39 @@
<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