From 1dffda14e34d2c41d7fe87e88da94099b799b2ba Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Wed, 31 Jan 2024 17:41:49 +0100
Subject: [PATCH] Updated the structure and profile cards for orientation
---
.../result-list/result-list.component.html | 30 +++--------
.../result-list/result-list.component.scss | 52 -------------------
.../orientation-recap.component.html | 8 +--
.../orientation-recap.component.scss | 2 +-
.../structure-orientator.component.html | 52 +++++++++++--------
.../structure-orientator.component.scss | 51 ++++++++++--------
.../member-card/member-card.component.html | 29 +++++++----
.../member-card/member-card.component.scss | 50 +++++++++++++++---
.../member-card/member-card.component.ts | 52 +++++++++++++++++--
.../components/card/card.component.html | 11 +++-
.../components/card/card.component.scss | 13 +++++
.../components/card/card.component.ts | 13 +++--
.../structure-details.component.html | 8 ++-
src/assets/avatar/sprite.svg | 52 ++++++++++++-------
14 files changed, 251 insertions(+), 172 deletions(-)
diff --git a/src/app/annuaire/result-list/result-list.component.html b/src/app/annuaire/result-list/result-list.component.html
index 9f5db7053..2da617077 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 565fd658b..79527a574 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 3d06e8202..35ef7c28e 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 c636410a9..159b9f910 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 41a5db1a2..120ba127f 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 6bfd7b13e..5372f858b 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 efeb1c936..b65d3d40a 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 91979734f..b0be8eca1 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 a11dc0a92..94cb13347 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 fc6caaf08..9b9237107 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 c7c6c5e58..9b059b0c6 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 f6a116410..e24c258ad 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 91d64640f..1bc104d41 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 422f307d3..322954491 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
--
GitLab