diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c556eb9830a54fac021fff586a5785e2715b3546..9b73cfd85f01f04bc87d09c3997418138f8d127e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -68,7 +68,6 @@ const routes: Routes = [
path: '',
component: LoginComponent,
},
- footerOutletRoute,
],
},
{
@@ -121,7 +120,6 @@ const routes: Routes = [
path: '',
component: LoginComponent,
},
- footerOutletRoute,
],
},
{
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index b8f8ca4339457ca14a36e8b497ed8d82f2f57613..98409b4f227b40ae0e001caa79e6d9c4466ce6be 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -85,7 +85,7 @@
</div>
</div>
- <div class="form-group" fx-layout="column">
+ <div class="form-group">
<label for="message">Message</label>
<div class="textareaBlock" fxLayout="row" fxLayoutGap="15px">
<textarea
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index be7b0a9819207d7b08f4604d23488d80fe7f8382..63e1650f573450673ad62dd4d6e57c9784692b16 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -5,10 +5,13 @@
.footerForm {
display: flex;
justify-content: center;
- gap: 2rem;
- padding-top: 32px;
- padding-bottom: 40px;
+ gap: 1rem;
+ padding: 32px 0 40px 0;
+ margin: 0 96px;
border-top: 1px solid $grey-7;
+ @media #{$tablet} {
+ margin: 0 2%;
+ }
}
.print {
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index bf32b98b2b0633c2b2b872ed2d28609844e2e5f3..a89620c125655f8cece338e9e85607d8aaf6f9ca 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -226,6 +226,6 @@ export class FooterFormComponent implements OnChanges {
return this.currentForm === formType.personaloffer && this.currentStep === lastStep;
}
public isPersonalOfferFirstPage(): boolean {
- return this.currentStep === personalOfferFormStep.personalOfferAccompaniment;
+ return this.currentStep === personalOfferFormStep.personalOfferBeginningInfo;
}
}
diff --git a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html
index 31e8a362fbd77053e53c68b7ee8b5f738a934910..772ca38d143a19323d4b56786e2e5f914fbb9fe3 100644
--- a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html
+++ b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html
@@ -2,217 +2,84 @@
<div class="title">
<h3>Quels identifiants utiliserez-vous pour vous connecter ?</h3>
</div>
- <div class="form-group" fxLayout="column">
- <label for="email">Email du compte</label>
- <p *ngIf="this.accountForm.get('email').hasError('alreadyExist')" class="special invalid">
- L'email est déja utilisé.
- </p>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- formControlName="email"
- placeholder="exemple: prenom.nom@grandlyon.com"
- class="form-input email-placeholder"
- [readonly]="isAccountMode"
- [ngClass]="{ disabled: isAccountMode }"
- (input)="setValidationsForm()"
- (keyup)="verifyUserExist($event.target)"
- />
- <app-svg-icon
- *ngIf="accountForm.get('email').valid"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="accountForm.get('email').invalid && accountForm.get('email').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <p
- class="special"
- [ngClass]="{ invalid: accountForm.get('password').invalid && accountForm.get('password').value }"
- >
- Le mot de passe doit contenir au minimum
- </p>
- <ul>
- <li
- fxLayout="row"
- fxLayoutAlign="start center"
- fxLayoutGap="10px"
- class=""
- [ngClass]="{
- invalid: accountForm.get('password').value.length < 8,
- valid: accountForm.get('password').value.length >= 8
- }"
- >
- <app-svg-icon
- *ngIf="accountForm.get('password').value.length >= 8"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="accountForm.get('password').value.length < 8"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- <p>8 caractères</p>
- </li>
- <li
- fxLayout="row"
- fxLayoutAlign="start center"
- fxLayoutGap="10px"
- [ngClass]="{
- invalid: !checkIfPasswordHasSpecialChar(accountForm.get('password').value),
- valid: checkIfPasswordHasSpecialChar(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- <p>un caractère spécial</p>
- </li>
- <li
- fxLayout="row"
- fxLayoutAlign="start center"
- fxLayoutGap="10px"
- [ngClass]="{
- invalid: !checkIfPasswordHasLowerCase(accountForm.get('password').value),
- valid: checkIfPasswordHasLowerCase(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasLowerCase(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!checkIfPasswordHasLowerCase(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- <p>un caractère en minuscule</p>
- </li>
- <li
- fxLayout="row"
- fxLayoutAlign="start center"
- fxLayoutGap="10px"
- [ngClass]="{
- invalid: !checkIfPasswordHasUpperCase(accountForm.get('password').value),
- valid: checkIfPasswordHasUpperCase(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasUpperCase(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!checkIfPasswordHasUpperCase(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- <p>un caractère en majuscule</p>
- </li>
- <li
- fxLayout="row"
- fxLayoutAlign="start center"
- fxLayoutGap="10px"
- [ngClass]="{
- invalid: !checkIfPasswordHasDigit(accountForm.get('password').value),
- valid: checkIfPasswordHasDigit(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasDigit(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!checkIfPasswordHasDigit(accountForm.get('password').value)"
- [iconClass]="'icon-16'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- <p>un chiffre</p>
- </li>
- </ul>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- formControlName="password"
- class="form-input password"
- autocomplete="on"
- [type]="isShowPassword ? 'text' : 'password'"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- [iconClass]="'icon-26 grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showPassword()"
- />
- <app-svg-icon
- *ngIf="accountForm.get('password').valid"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="accountForm.get('password').invalid && accountForm.get('password').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="confirmPassword">Vérification du mot de passe</label>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- formControlName="confirmPassword"
- class="form-input password"
- autocomplete="on"
- [type]="isShowConfirmPassword ? 'text' : 'password'"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- [iconClass]="'icon-26 grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showConfirmPassword()"
- />
- <app-svg-icon
- *ngIf="accountForm.get('confirmPassword').valid && accountForm.get('confirmPassword').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="accountForm.get('confirmPassword').invalid && accountForm.get('confirmPassword').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
+
+ <div class="formGroup">
+ <app-input
+ id="email"
+ label="Email du compte"
+ autocomplete="on"
+ size="large"
+ [disabled]="isAccountMode"
+ [status]="accountForm.get('email').value ? (accountForm.get('email').invalid ? 'error' : 'success') : null"
+ [statusText]="accountForm.get('email').hasError('alreadyExist') ? 'Cet email est déjà utilisé' : null"
+ [value]="accountForm.get('email').value"
+ (valueChange)="accountForm.get('email').setValue($event); setValidationsForm(); verifyUserExist($event)"
+ />
+
+ <div class="passwordField">
+ <app-input
+ id="password"
+ label="Création du mot de passe"
+ size="large"
+ type="password"
+ [value]="accountForm.get('password').value"
+ (valueChange)="accountForm.get('password').setValue($event)"
/>
+ <div class="special">
+ <p>Le mot de passe doit obligatoirement contenir :</p>
+ <ul>
+ <li [ngClass]="accountForm.get('password').value.length >= 8 ? 'valid' : 'invalid'">
+ <app-svg-icon
+ [iconClass]="'icon-16'"
+ [type]="'form'"
+ [icon]="accountForm.get('password').value.length >= 8 ? 'validate' : 'notValidate'"
+ />
+ <p>8 caractères</p>
+ </li>
+ <li [ngClass]="checkIfPasswordHasSpecialChar(accountForm.get('password').value) ? 'valid' : 'invalid'">
+ <app-svg-icon
+ [iconClass]="'icon-16'"
+ [type]="'form'"
+ [icon]="checkIfPasswordHasSpecialChar(accountForm.get('password').value) ? 'validate' : 'notValidate'"
+ />
+ <p>1 caractère spécial</p>
+ </li>
+ <li [ngClass]="checkIfPasswordHasLowerCase(accountForm.get('password').value) ? 'valid' : 'invalid'">
+ <app-svg-icon
+ [iconClass]="'icon-16'"
+ [type]="'form'"
+ [icon]="checkIfPasswordHasLowerCase(accountForm.get('password').value) ? 'validate' : 'notValidate'"
+ />
+ <p>1 caractère en minuscule</p>
+ </li>
+ <li [ngClass]="checkIfPasswordHasUpperCase(accountForm.get('password').value) ? 'valid' : 'invalid'">
+ <app-svg-icon
+ [iconClass]="'icon-16'"
+ [type]="'form'"
+ [icon]="checkIfPasswordHasUpperCase(accountForm.get('password').value) ? 'validate' : 'notValidate'"
+ />
+ <p>1 caractère en majuscule</p>
+ </li>
+ <li [ngClass]="checkIfPasswordHasDigit(accountForm.get('password').value) ? 'valid' : 'invalid'">
+ <app-svg-icon
+ [iconClass]="'icon-16'"
+ [type]="'form'"
+ [icon]="checkIfPasswordHasDigit(accountForm.get('password').value) ? 'validate' : 'notValidate'"
+ />
+ <p>1 chiffre</p>
+ </li>
+ </ul>
+ </div>
</div>
+
+ <app-input
+ id="confirmPassword"
+ label="Vérification du mot de passe"
+ size="large"
+ type="password"
+ [status]="getStatus(accountForm.get('confirmPassword'))"
+ [value]="accountForm.get('confirmPassword').value"
+ (valueChange)="accountForm.get('confirmPassword').setValue($event); setValidationsForm()"
+ />
</div>
</form>
diff --git a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
index 10798e640e45ac75105877263c21c2f596a162d5..32ac755b06b3e3cdf6ce40d2a2e5cccea0264204 100644
--- a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
+++ b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
@@ -6,33 +6,29 @@
cursor: not-allowed;
}
-p.special {
- @include font-regular-14;
- color: $grey-3;
- margin: 4px 0;
- width: 280px;
- &.invalid {
- color: $orange-warning;
- }
-}
+.special {
+ @include font-regular-12;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin-top: 4px;
-ul {
- padding-left: 0;
- margin: 0 0 8px 8px;
- li {
+ ul {
display: flex;
- margin: 4px 0 0 0;
- font-size: $font-size-xsmall;
- align-items: center;
- p {
- margin-top: unset;
- margin-bottom: 0;
- }
- &.valid {
- color: $green;
- }
- &.invalid {
- color: $orange-warning;
+ flex-direction: column;
+ gap: 4px;
+ padding-left: 12px;
+ margin: 0;
+ li {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ &.valid {
+ color: $info-success;
+ }
+ &.invalid {
+ color: $red-error;
+ }
}
}
}
diff --git a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.ts b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.ts
index fa2b963a6bffa275549bc41075331c93b8d381d1..b719f270acf1a928069a0bfe89db7248a51d9e4e 100644
--- a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.ts
+++ b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { AbstractControl, UntypedFormGroup } from '@angular/forms';
import { User } from '../../../../models/user.model';
import { CustomRegExp } from '../../../../utils/CustomRegExp';
@@ -15,16 +15,6 @@ export class AccountCredentialsComponent {
@Output() validateForm = new EventEmitter<any>();
@Output() userExists = new EventEmitter<any>();
- public isShowConfirmPassword = false;
- public isShowPassword = false;
-
- public showPassword(): void {
- this.isShowPassword = !this.isShowPassword;
- }
- public showConfirmPassword(): void {
- this.isShowConfirmPassword = !this.isShowConfirmPassword;
- }
-
public checkIfPasswordHasSpecialChar(password: string): boolean {
if (password.match(CustomRegExp.SPECHAR)) return true;
return false;
@@ -47,8 +37,25 @@ export class AccountCredentialsComponent {
public setValidationsForm(): void {
this.validateForm.emit();
}
- public verifyUserExist(target: EventTarget): void {
- const value = (target as HTMLInputElement).value;
+
+ /** Type guard function to check if the input is an EventTarget */
+ private isEventTarget(target: EventTarget | string): target is EventTarget {
+ return typeof target !== 'string';
+ }
+
+ public verifyUserExist(target: EventTarget | string): void {
+ const value = this.isEventTarget(target) ? (target as HTMLInputElement).value : target;
this.userExists.emit(value);
}
+
+ public getStatus(control: AbstractControl): 'error' | 'success' | null {
+ if (!control.value) {
+ return null;
+ }
+ if (control.invalid) {
+ return 'error';
+ } else {
+ return 'success';
+ }
+ }
}
diff --git a/src/app/form/form-view/account-form/account-info/account-info.component.html b/src/app/form/form-view/account-form/account-info/account-info.component.html
index efca16e6a4bafb0fb95dac2de3962c2071c22ec2..c54f8283e79e77f676e616f3841e7cdc09c99a1c 100644
--- a/src/app/form/form-view/account-form/account-info/account-info.component.html
+++ b/src/app/form/form-view/account-form/account-info/account-info.component.html
@@ -1,63 +1,37 @@
<form *ngIf="accountForm && !profile" [formGroup]="accountForm">
<div class="title">
- <h3>Informations personnelles</h3>
- <p>
- Vos informations seront référencées en tant que professionnel·le dans l'annuaire Rés'in, accessible aux membres
- connectés.
- </p>
+ <h3>Qui êtes-vous ?</h3>
+ <p>Ces informations seront visibles dans l’annuaire des acteurs, accessible uniquement en version connectée</p>
</div>
- <div class="form-group" fxLayout="column">
- <label for="name">Votre prénom</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input type="text" formControlName="name" class="form-input" (input)="setValidationsForm()" />
- <app-svg-icon *ngIf="accountForm.get('name').valid" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
- <app-svg-icon
- *ngIf="accountForm.get('name').invalid && accountForm.get('name').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="surname">Votre nom</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input type="text" formControlName="surname" class="form-input" (input)="setValidationsForm()" />
- <app-svg-icon
- *ngIf="accountForm.get('surname').valid"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="accountForm.get('surname').invalid && accountForm.get('surname').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="phone">Votre téléphone</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- formControlName="phone"
- class="form-input phone"
- (input)="utils.modifyPhoneInput(accountForm, 'phone', $event.target); setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="accountForm.get('phone').valid"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="accountForm.get('phone').invalid && accountForm.get('phone').value"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
+
+ <div class="formGroup">
+ <app-input
+ id="name"
+ label="Prénom"
+ size="large"
+ [status]="accountForm.get('name').value ? (accountForm.get('name').invalid ? 'error' : 'success') : null"
+ [value]="accountForm.get('name').value"
+ (valueChange)="accountForm.get('name').setValue($event); setValidationsForm()"
+ />
+ <app-input
+ id="surname"
+ label="Nom"
+ size="large"
+ [status]="accountForm.get('surname').value ? (accountForm.get('surname').invalid ? 'error' : 'success') : null"
+ [value]="accountForm.get('surname').value"
+ (valueChange)="accountForm.get('surname').setValue($event); setValidationsForm()"
+ />
+ <app-input
+ id="phone"
+ label="Téléphone"
+ size="large"
+ [status]="accountForm.get('phone').value ? (accountForm.get('phone').invalid ? 'error' : 'success') : null"
+ [value]="accountForm.get('phone').value"
+ (valueChange)="
+ accountForm.get('phone').setValue($event);
+ utils.modifyPhoneInput(accountForm, 'phone', $event);
+ setValidationsForm()
+ "
+ />
</div>
</form>
diff --git a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html
index a6e88c82a32b1aeb13d91aac249201859238252d..25656d5750eb5f2f829abc49ff06147b8860c183 100644
--- a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html
+++ b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html
@@ -1,11 +1,22 @@
<form *ngIf="accountForm && !profile" [formGroup]="accountForm">
<div class="title">
<h3>Souhaitez-vous vous abonner à la lettre d’information de Rés'in ?</h3>
- <p>Facultatif</p>
+ <p>Facultatif - Un seul choix possible</p>
+ </div>
+ <div class="formGroup">
+ <app-radio-option
+ [id]="'yes'"
+ [label]="'Oui'"
+ [value]="true"
+ [selected]="userAcceptNewsletter"
+ (click)="acceptReceiveNewsletter(true)"
+ />
+ <app-radio-option
+ [id]="'no'"
+ [label]="'Non'"
+ [value]="false"
+ [selected]="!userAcceptNewsletter"
+ (click)="acceptReceiveNewsletter(false)"
+ />
</div>
- <app-checkbox-form
- [isChecked]="userAcceptNewsletter"
- [text]="'J\'accepte'"
- (checkEvent)="acceptReceiveNewsletter($event)"
- />
</form>
diff --git a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts
index 0d79863566e2466cfa8add2fa801ce9b2a89e6fd..952d50bd8112cd4e819266599ec7a99929e4ff19 100644
--- a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts
+++ b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts
@@ -13,6 +13,7 @@ export class AccountNewsletterComponent {
public userAcceptNewsletter = false;
public acceptReceiveNewsletter(accepts: boolean): void {
+ this.userAcceptNewsletter = accepts;
this.acceptNewsletter.emit(accepts);
}
}
diff --git a/src/app/form/form-view/form-view.component.scss b/src/app/form/form-view/form-view.component.scss
index 046fe0b23b10f900c5e2eef9793217b72abdb7d7..b7cd4cd4ef66311bd32c3b701269a307ee79411e 100644
--- a/src/app/form/form-view/form-view.component.scss
+++ b/src/app/form/form-view/form-view.component.scss
@@ -5,11 +5,6 @@
:host {
height: 100%;
- ::ng-deep form {
- display: flex;
- flex-direction: column;
- gap: 40px;
- }
}
.formView {
@@ -20,23 +15,21 @@
}
::ng-deep.page {
- box-sizing: border-box;
- max-width: 980px;
- width: 100%;
+ display: flex;
+ place-content: center;
height: 100%;
- margin: 0 auto;
+ margin: 16px 96px;
overflow-y: auto;
- padding: 32px 48px;
- display: flex;
- justify-content: center;
- min-width: 600px;
-
+ scrollbar-gutter: stable;
@media #{$tablet} {
margin: 0px 0.5rem;
width: auto;
}
* {
max-width: 600px;
+ @media #{$phone} {
+ max-width: 90vw;
+ }
}
.no-max-width {
max-width: none;
@@ -57,15 +50,19 @@
}
}
-::ng-deep.title {
+:host ::ng-deep form {
display: flex;
flex-direction: column;
- gap: 16px;
+ gap: 40px;
+}
+:host ::ng-deep.title {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
.overtitle {
@include font-regular-18;
color: $grey-3;
- margin-bottom: 3px;
}
h3 {
@@ -94,5 +91,5 @@
:host ::ng-deep .form-details {
@include font-regular-18;
- color: $grey-3;
+ color: $grey-4-5-1;
}
diff --git a/src/app/form/form-view/form-view.component.ts b/src/app/form/form-view/form-view.component.ts
index ee90fb421ead59cb54b0d6221a163be6a7f303ed..0b3f715b160a51951365acc09c7cc211b49fc755 100644
--- a/src/app/form/form-view/form-view.component.ts
+++ b/src/app/form/form-view/form-view.component.ts
@@ -181,7 +181,7 @@ export class FormViewComponent implements OnInit, AfterViewInit {
}
if (formType[this.routeParam] === formType.personaloffer) {
this.nbSteps = totalFormSteps;
- this.currentPage = personalOfferFormStep.personalOfferAccompaniment;
+ this.currentPage = personalOfferFormStep.personalOfferBeginningInfo;
this.currentFormType = formType.personaloffer;
this.createPersonalOfferForm(new PersonalOffer());
this.currentForm = this.personalOfferForm;
@@ -267,7 +267,12 @@ export class FormViewComponent implements OnInit, AfterViewInit {
}
}
public displayFooterForm(): boolean {
- if (this.currentPage === profileFormStep.profileBeginningInfo && formType[this.routeParam] === formType.profile) {
+ if (
+ (this.currentPage === profileFormStep.profileEndInfo && formType[this.routeParam] === formType.profile) ||
+ (this.currentPage === profileFormStep.profileBeginningInfo && formType[this.routeParam] === formType.profile) ||
+ (this.currentPage === personalOfferFormStep.personalOfferFinishedInfo &&
+ formType[this.routeParam] === formType.personaloffer)
+ ) {
return false;
}
return true;
diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.html b/src/app/form/form-view/global-components/information-step/information-step.component.html
index 2f80b57bc8e831500c32a9cb9e311b0c5d2fb8ca..d6be72c6831878ff454f3ab0137706c77b21fecd 100644
--- a/src/app/form/form-view/global-components/information-step/information-step.component.html
+++ b/src/app/form/form-view/global-components/information-step/information-step.component.html
@@ -1,95 +1,115 @@
-<!-- After inscription, the user must confirm with a code received by email -->
-<ng-container *ngIf="formType === formTypeEnum.account && step === accountFormStepEnum.confirmEmailSentInfo">
- <div class="information-step-container no-max-width">
- <img src="../../assets/form/emailVerification.svg" alt="" />
- <h3>Un email vous a été envoyé afin de finaliser votre inscription</h3>
- </div>
-</ng-container>
-
-<!-- Email just got confirmed, request some info about the user -->
-<ng-container *ngIf="formType === formTypeEnum.profile && step === profileFormStepEnum.profileBeginningInfo">
- <div class="information-step-container">
- <img src="../../assets/form/profileQuestions.svg" alt="" />
- <h3>Pour compléter votre profil, nous aimerions vous poser quelques questions</h3>
- <div class="btnGroup">
- <app-v3-button [label]="'Plus tard'" [variant]="buttonTypeEnumV3.Secondary" (click)="goToHome()" />
- <app-v3-button [label]="'C\'est parti !'" [variant]="buttonTypeEnumV3.Primary" (click)="goToNextPage()" />
+<div class="information-step-container">
+ <!-- After inscription, the user must confirm with a code received by email -->
+ <ng-container *ngIf="formType === formTypeEnum.account && step === accountFormStepEnum.confirmEmailSentInfo">
+ <div class="information-step no-max-width">
+ <img src="../../assets/form/emailVerification.svg" alt="" />
+ <h3>Un email vous a été envoyé afin de finaliser votre inscription</h3>
+ <div class="btnContainer">
+ <app-v3-button [variant]="buttonTypeEnumV3.Primary" [wide]="true" [label]="'Terminer'" (click)="goToHome()" />
+ </div>
</div>
- </div>
-</ng-container>
+ </ng-container>
-<!-- A structure has just been selected, a request will be sent -->
-<ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.mailSentInfo">
- <div class="information-step-container">
- <img src="../../assets/form/emailVerification.svg" alt="" />
- <p *ngIf="isClaimed">Un message a été envoyé aux membres de la structure :</p>
- <p *ngIf="!isClaimed">
- Un message a été envoyé aux administrateurs Rés'in pour valider l'affectation de votre compte à la structure :
- </p>
- <span>{{ structureName }}</span>
- </div>
-</ng-container>
+ <!-- Email just got confirmed, request some info about the user -->
+ <ng-container *ngIf="formType === formTypeEnum.profile && step === profileFormStepEnum.profileBeginningInfo">
+ <div class="information-step">
+ <img src="../../assets/form/profileSkip.svg" alt="Image profil" />
+ <h3>Pour compléter votre profil, nous aimerions vous poser quelques questions</h3>
+ <div class="btnContainer">
+ <div class="btnGroup">
+ <app-v3-button [label]="'Plus tard'" [variant]="buttonTypeEnumV3.Secondary" (click)="goToHome()" />
+ <app-v3-button [label]="'C\'est parti !'" [variant]="buttonTypeEnumV3.Primary" (click)="goToNextPage()" />
+ </div>
+ </div>
+ </div>
+ </ng-container>
-<!-- An attempt to create a structure has been made, some info are needed -->
-<ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.structureFormTime">
- <div class="information-step-container no-max-width">
- <img src="../../assets/form/formTime.svg" alt="" />
- <h3>10 minutes sont nécessaires pour renseigner les informations et créer la structure</h3>
- <div class="list">
- <p>Informations dont il faut vous munir :</p>
- <ul>
- <li>les coordonnées de la structure</li>
- <li>les horaires d’ouverture</li>
- <li>la liste des formations dispensées dans la structure (optionnel)</li>
- </ul>
+ <!-- A structure has just been selected, a request will be sent -->
+ <ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.mailSentInfo">
+ <div class="information-step">
+ <img src="../../assets/form/emailVerification.svg" alt="" />
+ <p *ngIf="isClaimed">Un message a été envoyé aux membres de la structure :</p>
+ <p *ngIf="!isClaimed">
+ Un message a été envoyé aux administrateurs Rés'in pour valider l'affectation de votre compte à la structure :
+ </p>
+ <h3>{{ structureName }}</h3>
</div>
- </div>
-</ng-container>
+ </ng-container>
-<!-- A structure has successfully been created -->
-<ng-container
- *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.structureCreationFinishedInfo"
->
- <div class="information-step-container no-max-width">
- <img src="../../assets/form/structureCreated.svg" alt="" />
- <h3>La structure est désormais référencée sur la cartographie</h3>
- <p *ngIf="hasPersonalOffer">
- Les prochaines questions concernent les services que vous dispensez en tant qu’intervenant dans cette structure
- </p>
- </div>
-</ng-container>
+ <!-- An attempt to create a structure has been made, some info are needed -->
+ <ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.structureFormTime">
+ <div class="information-step no-max-width">
+ <img src="../../assets/form/formTime.svg" alt="" />
+ <h3>10 minutes sont nécessaires pour renseigner les informations et créer la structure</h3>
+ <div class="list">
+ <p>Informations dont il faut vous munir :</p>
+ <ul>
+ <li>les coordonnées de la structure</li>
+ <li>les horaires d’ouverture</li>
+ <li>la liste des accompagnements proposés dans la structure (optionnel)</li>
+ </ul>
+ </div>
+ </div>
+ </ng-container>
-<!-- The user tried to create a structure without reception place -->
-<ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.noStructure">
- <div class="information-step-container no-max-width">
- <img src="../../assets/form/profileSkip.svg" alt="" />
- <h3>La structure n'a pas vocation à être ajoutée à la cartographie</h3>
- <p class="light">
- La cartographie ne référence que les structures qui disposent d'un lieu d'accueil pour accompagner, former ou
- donner accès au numérique
- </p>
+ <!-- A structure has successfully been created -->
+ <ng-container
+ *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.structureCreationFinishedInfo"
+ >
+ <div class="information-step no-max-width">
+ <img src="../../assets/form/structureCreated.svg" alt="" />
+ <h3>La structure est désormais référencée sur la cartographie</h3>
+ <p *ngIf="hasPersonalOffer">
+ Les prochaines questions concernent les services que vous dispensez en tant qu’intervenant·e dans cette
+ structure
+ </p>
+ </div>
+ </ng-container>
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [wide]="true"
- [label]="'J\'ai compris'"
- (click)="goBackProfile()"
- />
- </div>
-</ng-container>
+ <!-- The user tried to create a structure without reception place -->
+ <ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.noStructure">
+ <div class="information-step no-max-width">
+ <img src="../../assets/form/structureNegatif.svg" alt="" />
+ <h3>La structure n'a pas vocation à être ajoutée à la cartographie</h3>
+ <p class="light">
+ La cartographie ne référence que les structures qui disposent d'un lieu d'accueil pour accompagner, former ou
+ donner accès au numérique
+ </p>
+ <div class="btnContainer">
+ <app-v3-button
+ [variant]="buttonTypeEnumV3.Primary"
+ [wide]="true"
+ [label]="'J\'ai compris'"
+ (click)="goBackProfile()"
+ />
+ </div>
+ </div>
+ </ng-container>
-<!-- After the creation of a structure -->
-<ng-container
- *ngIf="formType === formTypeEnum.personaloffer && step === personalOfferFormStep.personalOfferFinishedInfo"
->
- <div class="information-step-container no-max-width">
- <img src="../../assets/form/profileUpdated.svg" alt="" />
- <h3>Merci, les informations de votre profil ont été mises à jour</h3>
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [wide]="true"
- [label]="'Voir mon compte'"
- (click)="goBackProfile()"
- />
- </div>
-</ng-container>
+ <!-- After the creation of a structure -->
+ <ng-container
+ *ngIf="formType === formTypeEnum.personaloffer && step === personalOfferFormStep.personalOfferBeginningInfo"
+ >
+ <div class="information-step no-max-width">
+ <img src="../../assets/form/formTime.svg" alt="" />
+ <h3>C’est bientôt fini !</h3>
+ <p>Il ne reste plus qu’à renseigner votre offre de services personnelle</p>
+ </div>
+ </ng-container>
+ <ng-container
+ *ngIf="formType === formTypeEnum.personaloffer && step === personalOfferFormStep.personalOfferFinishedInfo"
+ >
+ <div class="information-step no-max-width">
+ <img src="../../assets/form/profileUpdated.svg" alt="" />
+ <h3>Merci, les informations de votre profil ont été mises à jour</h3>
+ <div class="btnContainer">
+ <app-v3-button
+ [variant]="buttonTypeEnumV3.Primary"
+ [wide]="true"
+ [label]="'Voir mon compte'"
+ (click)="goBackProfile()"
+ />
+ </div>
+ </div>
+ </ng-container>
+</div>
diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.scss b/src/app/form/form-view/global-components/information-step/information-step.component.scss
index 7aafdb53680b489e44c3d3222e079cfa931e6752..1c9e149efb74ceb1ab27dc43edac3b8decd025fb 100644
--- a/src/app/form/form-view/global-components/information-step/information-step.component.scss
+++ b/src/app/form/form-view/global-components/information-step/information-step.component.scss
@@ -1,58 +1,81 @@
@import 'typography';
@import 'color';
+@import 'breakpoint';
.information-step-container {
display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- min-height: inherit;
- gap: 16px;
-
- img {
- width: 200px;
- height: 200px;
- margin-bottom: 24px;
- }
-
- h3 {
- @include font-bold-24;
- text-align: center;
- }
+ height: 100%;
+ .information-step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: inherit;
+ gap: 40px;
- p {
- @include font-regular-18;
- text-align: center;
- }
+ img {
+ width: 200px;
+ height: 200px;
+ }
- .btnGroup {
- display: flex;
- gap: 32px;
- }
+ h3 {
+ @include font-bold-24;
+ text-align: center;
+ }
- .list {
- display: flex;
- flex-direction: column;
- gap: 8px;
p {
- width: 100%;
- margin-left: 0;
- text-align: left;
+ @include font-regular-18;
+ text-align: center;
}
- ul {
- width: 100%;
- list-style: none;
- padding: 0;
- margin: 0;
- li {
- @include font-regular-18;
- margin-bottom: 8px;
+ .btnContainer {
+ width: 100vw;
+ max-width: calc(100vw - 96px - 96px);
+ left: calc(-50vw + 50%);
+ display: flex;
+ place-content: center;
+ border-top: solid 1px $grey-7;
+ padding: 32px 0 40px;
+ margin: 0 96px;
+ overflow-x: hidden;
+ position: fixed;
+ bottom: 0;
+ background-color: $grey-10;
+ scrollbar-gutter: stable;
+ @media #{$tablet} {
+ max-width: calc(100vw - 4%);
+ margin: 0 2%;
+ }
+ }
+ .btnGroup {
+ display: flex;
+ gap: 32px;
+ }
+
+ .list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ p {
+ width: 100%;
+ margin-left: 0;
+ text-align: left;
+ }
+
+ ul {
+ width: 100%;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ li {
+ @include font-regular-18;
+ margin-bottom: 8px;
- &::before {
- content: '\2022';
- color: $red;
- margin-right: 12px;
+ &::before {
+ content: '\2022';
+ color: $red;
+ margin-right: 12px;
+ }
}
}
}
diff --git a/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html b/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html
index 12df8be521ebee05d90ae9d89396718fce92a286..e7b46ff2de4a238e6d2a0d6f82624f06a714e865 100644
--- a/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html
@@ -1,8 +1,8 @@
<form *ngIf="personalOfferForm" [formGroup]="personalOfferForm">
<div class="title">
<p class="overtitle">{{ structureName }}</p>
- <h3>Quelles aides aux démarches en ligne proposez-vous, en tant qu’intervenant dans cette structure ?</h3>
- <p>Facultatif</p>
+ <h3>Quelles aides aux démarches en ligne proposez-vous ?</h3>
+ <p>Facultatif - Plusieurs choix possibles</p>
</div>
<app-accompaniment-picker [personalOfferForm]="personalOfferForm" [onlineProcedures]="onlineProcedures" />
diff --git a/src/app/form/form-view/personal-offer-form/personal-offer-form.component.html b/src/app/form/form-view/personal-offer-form/personal-offer-form.component.html
index a05624f3d497b591926a7a7a3406bedb366bf8ea..9b97b739491adc8841e7379dacc1216bccb1eeca 100644
--- a/src/app/form/form-view/personal-offer-form/personal-offer-form.component.html
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-form.component.html
@@ -1,3 +1,9 @@
+<ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferBeginningInfo">
+ <app-information-step
+ [step]="personalOfferFormStep.personalOfferBeginningInfo"
+ [formType]="formTypeEnum.personaloffer"
+ />
+</ng-container>
<ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferAccompaniment">
<app-personal-offer-accompaniment
*ngIf="onlineProcedures"
diff --git a/src/app/form/form-view/personal-offer-form/personal-offer-form.component.ts b/src/app/form/form-view/personal-offer-form/personal-offer-form.component.ts
index 9ee1a9381a22c55ba051b174abf5f5f512ae99ab..42f6d88a79b41e7d5523e6c6a28f52c12072a55f 100644
--- a/src/app/form/form-view/personal-offer-form/personal-offer-form.component.ts
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-form.component.ts
@@ -38,6 +38,7 @@ export class PersonalOfferFormComponent implements OnChanges, OnInit {
ngOnChanges(changes: SimpleChanges): void {
if (changes.currentStep) {
if (
+ this.currentStep === personalOfferFormStep.personalOfferBeginningInfo ||
this.currentStep === personalOfferFormStep.personalOfferAccompaniment ||
this.currentStep === personalOfferFormStep.personalOfferTrainingType
) {
diff --git a/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.html b/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.html
index 2ce3326bb71038c89a394728f023547cf70bd3af..f6bede635032d73556a4e6b7de8e3931affae026 100644
--- a/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.html
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.html
@@ -6,6 +6,12 @@
<div class="formGroup">
<app-radio-option [id]="'yes'" [label]="'Oui'" [value]="true" [selected]="choice" (click)="onRadioChange(true)" />
- <app-radio-option [id]="'no'" [label]="'Non'" [value]="false" [selected]="!choice" (click)="onRadioChange(false)" />
+ <app-radio-option
+ [id]="'no'"
+ [label]="'Non'"
+ [value]="false"
+ [selected]="choice !== null && !choice"
+ (click)="onRadioChange(false)"
+ />
</div>
</form>
diff --git a/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.ts b/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.ts
index 559aedd9708194c34d1dae7f1751382a786fd299..f336e529c4f860c158dc6368f80f268e4ea72501 100644
--- a/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.ts
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.ts
@@ -11,7 +11,7 @@ export class PersonalOfferOtherStructureChoiceComponent {
@Output() setOtherOffer = new EventEmitter<boolean>();
@Output() pageValid = new EventEmitter();
- public choice: boolean;
+ public choice: boolean = null;
public onRadioChange(value: boolean): void {
this.choice = value;
diff --git a/src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.html b/src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.html
index 9a73e855eafd53b39573ebc75ab86b9bc08f8aba..fef2754c79c7d7d64248bbf2986e06a62993c102 100644
--- a/src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.html
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.html
@@ -1,7 +1,7 @@
<form *ngIf="personalOfferForm" [formGroup]="personalOfferForm">
<div class="title">
<p class="overtitle">{{ structureName }}</p>
- <h3>Quels accompagnements au numérique proposez-vous, en tant qu’intervenant dans cette structure ?</h3>
+ <h3>Quels accompagnements au numérique proposez-vous ?</h3>
<p>Facultatif</p>
</div>
<app-training-type-picker
diff --git a/src/app/form/form-view/personal-offer-form/personalOfferFormStep.enum.ts b/src/app/form/form-view/personal-offer-form/personalOfferFormStep.enum.ts
index 460ca81727f6c2014d9d63f695fcefe155bec814..0e48fe3db173489e99eb3a20cf4f73369982cbd8 100644
--- a/src/app/form/form-view/personal-offer-form/personalOfferFormStep.enum.ts
+++ b/src/app/form/form-view/personal-offer-form/personalOfferFormStep.enum.ts
@@ -1,4 +1,5 @@
export enum personalOfferFormStep {
+ personalOfferBeginningInfo,
personalOfferAccompaniment,
personalOfferTrainingType,
personalOfferStructureChoice,
diff --git a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html
index eb90eef729f08dd1f39197d245b9301a16d2179d..2863ff1d639c71c7ad76a80b5e49178e67617def 100644
--- a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html
+++ b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html
@@ -1,27 +1,24 @@
<form [formGroup]="profileForm">
<div class="title">
- <h3>Quel est votre employeur ?</h3>
+ <h3>Qui vous emploie ?</h3>
<p>L’employeur demandé est celui qui figure sur votre fiche de paie (ou fiche de poste)</p>
</div>
- <div class="search-structure">
- <div fxLayout="column" fxLayoutAlign="space-between" class="search">
- <label for="employer">Employeur</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- #searchEmployer
- id="search-employer"
- type="text"
- class="form-input"
- autocomplete="off"
- (input)="onSearchChange($event.target)"
- />
- </div>
- </div>
+ <div>
+ <app-input
+ id="search-employer"
+ label="Employeur"
+ description="Recherchez votre employeur dans la liste suivante"
+ placeholder="Exemple : employeur"
+ size="large"
+ [wide]="true"
+ [value]="profileForm.get('employer').value.name"
+ (valueChange)="onSearchChange($event)"
+ (click)="onSearchChange(profileForm.get('employer').value.name)"
+ />
<div class="scroll">
<div *ngIf="!isAlreadySearching" class="autocomplete-items">
<p
*ngFor="let employer of employers"
- class="autocomplete-item"
tabindex="0"
(click)="selectedResult(employer)"
(keyup.enter)="selectedResult(employer)"
diff --git a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss
deleted file mode 100644
index 07100a1830df924c21f5dcc9a96c98fa734a8e7b..0000000000000000000000000000000000000000
--- a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import 'color';
-@import 'typography';
-@import 'inputs';
-@import 'breakpoint';
-
-.search-structure {
- width: 380px;
-}
-
-.search {
- width: 380px;
- border-radius: 20px;
- margin: 4px 0px;
-}
-
-.form-list {
- cursor: pointer;
- height: 76px;
- border-width: 2px;
- border-style: solid;
- border-color: $white;
- &:hover {
- background: $primary-color-light;
- border-color: $primary-color-light;
- }
-
- &.item-selected {
- border-color: $green-1;
- &:hover {
- border-color: $green-1;
- background: $white;
- }
- }
-}
-
-.autocomplete-items {
- width: 296px;
-}
diff --git a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.ts b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.ts
index 4eb5c9f18cc09c696d05c69b262503e1499f92db..e305630b334efe73897ecd01593c8a59741c8145 100644
--- a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.ts
+++ b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.ts
@@ -1,27 +1,21 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { Employer } from '../../../../models/employer.model';
import { ProfileService } from '../../../../profile/services/profile.service';
-import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
@Component({
selector: 'app-profile-employer-selection',
templateUrl: './profile-employer-selection.component.html',
- styleUrls: ['./profile-employer-selection.component.scss'],
})
export class ProfileEmployerSelectionComponent {
@Input() profileForm: UntypedFormGroup;
@Output() validateForm = new EventEmitter<Employer>();
- @ViewChild('searchEmployer', { static: true }) searchEmployer: ElementRef;
- public buttonTypeEnum = ButtonType;
public employers: Employer[];
public isAlreadySearching = false;
constructor(private profileService: ProfileService) {}
- public onSearchChange(target: EventTarget): void {
- const searchString = (target as HTMLInputElement).value;
- if (searchString.length <= 2) this.getEmployers();
+ public onSearchChange(searchString: string): void {
this.getEmployers(searchString);
this.profileForm.get('employer').patchValue({
name: searchString,
@@ -31,7 +25,6 @@ export class ProfileEmployerSelectionComponent {
}
public selectedResult(employer: Employer): void {
- this.searchEmployer.nativeElement.value = employer.name;
this.profileForm.get('employer').patchValue({
name: employer.name,
validated: employer.validated,
diff --git a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html
index 2b2837ed6848fd43c71e312f2c9d41497649eb48..7c14db55dd6711406ce3bb0a0e1ad83d4a978ca5 100644
--- a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html
+++ b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html
@@ -1,19 +1,20 @@
<form [formGroup]="profileForm">
<div class="title">
<h3>Quelle est votre fonction ?</h3>
- <p>Cette information sera visible sur votre profil public</p>
+ <p>Cette information sera visible dans l’annuaire des acteurs, accessible uniquement en version connectée</p>
</div>
<div fxLayout="column" fxLayoutGap="32px">
<div class="btn-grid">
- <span *ngFor="let job of jobs">
- <app-button
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isSelectedJob(job) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="job.name"
- (action)="selectedResult(job)"
- />
- </span>
+ <app-v3-tag-item
+ *ngFor="let job of jobs"
+ [iconFolder]="'ico'"
+ [iconName]="isSelectedJob(job) ? 'check' : null"
+ [label]="job.name"
+ [color]="isSelectedJob(job) ? 'black' : 'white'"
+ [clickable]="true"
+ [size]="'medium'"
+ (action)="selectedResult(job)"
+ />
</div>
<div *ngIf="isUnexistingJob()" fxLayout="column" fxLayoutAlign="space-between" class="form-group search">
<label for="employer">Quelle fonction occupez-vous ?</label>
diff --git a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.scss b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.scss
deleted file mode 100644
index 46e81fc093176def48681a01e61f2bd8cd3435b4..0000000000000000000000000000000000000000
--- a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'buttons';
diff --git a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.ts b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.ts
index 59fc3edd253de0d079511a702e288581de6db077..dee2c6138b8284f7c7df70bb23ea9fdaf0f897ab 100644
--- a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.ts
+++ b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.ts
@@ -2,12 +2,10 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { Job } from '../../../../models/job.model';
import { ProfileService } from '../../../../profile/services/profile.service';
-import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
@Component({
selector: 'app-profile-job-selection',
templateUrl: './profile-job-selection.component.html',
- styleUrls: ['./profile-job-selection.component.scss'],
})
export class ProfileJobSelectionComponent implements OnInit {
@Input() profileForm: UntypedFormGroup;
@@ -16,7 +14,6 @@ export class ProfileJobSelectionComponent implements OnInit {
public jobs: Job[];
public selectedJob: Job;
public selectedRdvChoice: boolean;
- public buttonTypeEnum = ButtonType;
public hasPersonalOffer = false;
constructor(private profileService: ProfileService) {}
diff --git a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html
index 0083daa1413e81b554926a006a62ff1e120d60a6..ac1eb5d506ae9f803a69493b31a6cc6fe7c959fd 100644
--- a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html
+++ b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html
@@ -1,72 +1,70 @@
-<h2 class="title">Dans quelle structure travaillez-vous ?</h2>
-<div class="form-input search">
- <input
- type="text"
- id="structureName"
- placeholder="Rechercher une structure"
- class="form-input search-input"
- autocomplete="off"
- (input)="onSearchChange($event.target)"
- />
- <app-svg-icon [iconClass]="'searchIcon icon-32'" [type]="'ico'" [icon]="'search'" />
-</div>
-<div class="scroll">
- <div *ngIf="!isAlreadySearching">
- <div *ngIf="structures" class="nb">
- <div *ngIf="searchString.length === 0" class="nb-text">{{ structures.length }} structures existantes</div>
- <div *ngIf="searchString.length > 0" class="nb-text" [ngPlural]="structures.length">
- <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
- <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
- <ng-template ngPluralCase="other">{{ structures.length }} structures trouvées</ng-template>
- </div>
- </div>
+<form>
+ <h2 class="title">Dans quelle structure travaillez-vous ?</h2>
+ <div class="content">
+ <app-v3-search-bar
+ placeholder="Rechercher une structure"
+ [(value)]="searchString"
+ (valueChange)="onSearchChange($event)"
+ />
+ <div class="scroll">
+ <div *ngIf="!isAlreadySearching">
+ <div *ngIf="structures" class="nb">
+ <div *ngIf="searchString.length === 0" class="nb-text">{{ structures.length }} structures existantes</div>
+ <div *ngIf="searchString.length > 0" class="nb-text" [ngPlural]="structures.length">
+ <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
+ <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
+ <ng-template ngPluralCase="other">{{ structures.length }} structures trouvées</ng-template>
+ </div>
+ </div>
- <div class="structure-list">
- <div
- *ngFor="let structure of structures"
- class="filet"
- tabindex="0"
- (click)="selectedResult(structure)"
- (keyup.enter)="selectedResult(structure)"
- >
- <div
- fxLayout="column"
- fxLayoutAlign="space-around"
- class="form-list"
- [ngClass]="{
- 'already-selected': structure.alreadySelected,
- 'item-selected': isSelectedStructure(structure)
- }"
- >
- <div fxLayout="row" fxLayoutAlign="space-between center">
- <div class="item-frame">
- <div class="name">{{ structure.structureName }}</div>
- <div class="commune">{{ structure.address.commune }}</div>
+ <div class="structure-list">
+ <div
+ *ngFor="let structure of structures"
+ class="filet"
+ tabindex="0"
+ (click)="selectedResult(structure)"
+ (keyup.enter)="selectedResult(structure)"
+ >
+ <div
+ fxLayout="column"
+ fxLayoutAlign="space-around"
+ class="form-list"
+ [ngClass]="{
+ 'already-selected': structure.alreadySelected,
+ 'item-selected': isSelectedStructure(structure)
+ }"
+ >
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <div class="item-frame">
+ <div class="name">{{ structure.structureName }}</div>
+ <div class="commune">{{ structure.address.commune }}</div>
+ </div>
+ <app-svg-icon
+ *ngIf="isSelectedStructure(structure)"
+ class="form-icon"
+ [iconClass]="'icon-26'"
+ [type]="'form'"
+ [icon]="'validate'"
+ />
+ <div *ngIf="structure.alreadySelected" class="sticker">Déjà<br />sélectionnée</div>
+ </div>
</div>
- <app-svg-icon
- *ngIf="isSelectedStructure(structure)"
- class="form-icon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
+ </div>
+ <div class="item-frame">
+ <div class="create-text">
+ Cette structure n’existe pas encore sur Rés'in.<br />
+ <span class="question">Souhaitez-vous la référencer ?</span>
+ </div>
+ <app-v3-button
+ [label]="'Créer une structure'"
+ [variant]="buttonTypeEnumV3.PrimaryBlack"
+ [wide]="true"
+ [iconName]="'add'"
+ (action)="addStructure()"
/>
- <div *ngIf="structure.alreadySelected" class="sticker">Déjà<br />sélectionnée</div>
</div>
</div>
</div>
- <div class="item-frame">
- <div class="create-text">
- Cette structure n’existe pas encore sur Rés'in.<br />
- <span class="question">Souhaitez-vous la référencer ?</span>
- </div>
- <app-v3-button
- [label]="'Créer une structure'"
- [variant]="buttonTypeEnumV3.PrimaryBlack"
- [wide]="true"
- [iconName]="'add'"
- (action)="addStructure()"
- />
- </div>
</div>
</div>
-</div>
+</form>
diff --git a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.ts b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.ts
index c10cea63c0e28f9e2c0a3c3b74e9f74595fec490..0a3ee8ea0f6c4a7f756bbccab3cd649affad6713 100644
--- a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.ts
+++ b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.ts
@@ -42,12 +42,7 @@ export class ProfileStructureChoiceComponent implements OnInit {
this.validateForm.emit();
}
- public onSearchChange(target: EventTarget): void {
- const searchString = (target as HTMLInputElement).value;
- if (searchString.length < 3 && this.searchString === '') {
- return;
- }
- this.searchString = searchString;
+ public onSearchChange(searchString: string): void {
const filters: Filter[] = [];
if (searchString.length > 0) {
filters.push(new Filter('query', searchString));
diff --git a/src/app/form/form-view/profile-form/profileFormStep.enum.ts b/src/app/form/form-view/profile-form/profileFormStep.enum.ts
index 1f05ac3e887d339932d8a59a90a22dd8df9ae4b6..16f6bc321b1962d0b612f3548d185a33b644a251 100644
--- a/src/app/form/form-view/profile-form/profileFormStep.enum.ts
+++ b/src/app/form/form-view/profile-form/profileFormStep.enum.ts
@@ -2,4 +2,5 @@ export enum profileFormStep {
profileBeginningInfo,
profileEmployerSelection,
profileJobSelection,
+ profileEndInfo,
}
diff --git a/src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.html b/src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.html
index 546c40ec0b677fb01986e459c3de7abf470da9e2..388ee6e12427c0342fa61a0e4ac63e605b1a9b65 100644
--- a/src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.html
+++ b/src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.html
@@ -1,7 +1,7 @@
<form *ngIf="structureForm" [formGroup]="structureForm">
<div class="title">
- <h3>La structure dispose-t-elle d'un lieu d'accueil pour faire de l'accompagnement ou de la formation ?</h3>
- <p>Exemple : accompagnement aux démarches administratives...</p>
+ <h3>La structure dispose-t-elle d'un lieu d'accueil pour accompagner ou former au numérique ?</h3>
+ <p>Exemples : aide aux démarches en ligne, à la prise en main de l'ordinateur...</p>
</div>
<div class="formGroup">
<app-radio-option
diff --git a/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html b/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html
index a9d79f5d014eb1a43406c3df07ca9cc3fa8dd9d1..c79ef667094bd0d953488d231a83c5afada1ef96 100644
--- a/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html
+++ b/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html
@@ -6,14 +6,16 @@
?
</h3>
</div>
- <app-checkbox-form [text]="'J\'accepte'" (checkEvent)="acceptDataBeSaved($event)" />
+ <app-checkbox-form
+ text="J’accepte que mes informations soient enregistrées"
+ (checkEvent)="acceptDataBeSaved($event)"
+ />
</div>
<div class="section">
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
<h3>
- Acceptez-vous que les informations de votre structure soient mises à disposition sur la plateforme
- data.grandlyon.com
+ Acceptez-vous que les données de votre structure soient mises à disposition sur la plateforme data.grandlyon.com
<sup>{{ isEditMode ? '1' : '2' }}</sup>
?
</h3>
@@ -21,7 +23,7 @@
</div>
<app-checkbox-form
*ngIf="!isEditMode"
- [text]="'J\'accepte'"
+ text="J’accepte de partager les données de ma structure"
[isChecked]="false"
(checkEvent)="acceptOpenData($event)"
/>
diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html
index 71888e6edd9248392ef583cdb80c16898804d963..e20f7c48fbdbebfad101c34f52bdf3a8ea98486b 100644
--- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html
+++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html
@@ -2,31 +2,24 @@
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
<h3>Comment joindre votre structure ?</h3>
- <span class="label-optional">Veuillez renseigner au moins un des 2 champs</span>
+ <p>Veuillez renseigner au moins un des 2 champs</p>
</div>
- <div>
- <div class="form-group" fxLayout="column">
- <label for="structureName">Email de la structure</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input type="text" formControlName="contactMail" class="form-input" (input)="setValidationsForm()" />
- <app-svg-icon *ngIf="isContactMailValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
- <app-svg-icon *ngIf="isContactMailNotValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <div fxLayout="row" fxLayoutGap="8px">
- <label for="contactPhone">Téléphone de la structure</label>
- </div>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- formControlName="contactPhone"
- class="form-input"
- (input)="utils.modifyPhoneInput(structureForm, 'contactPhone', $event.target); setValidationsForm()"
- />
- <app-svg-icon *ngIf="isContactPhoneValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
- <app-svg-icon *ngIf="isContactPhoneNotValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
- </div>
- </div>
+ <div class="formGroup">
+ <app-input
+ id="email"
+ label="Email de la structure"
+ size="large"
+ [status]="getContactMailStatus()"
+ [value]="structureForm.get('contactMail').value"
+ (valueChange)="structureForm.get('contactMail').setValue($event); setValidationsForm()"
+ />
+ <app-input
+ id="phone"
+ label="Téléphone"
+ size="large"
+ [status]="getContactPhoneStatus()"
+ [value]="structureForm.get('contactPhone').value"
+ (valueChange)="utils.modifyPhoneInput(structureForm, 'contactPhone', $event); setValidationsForm()"
+ />
</div>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss
deleted file mode 100644
index 21d5e1dced258a877111dd055a88f1a44b449326..0000000000000000000000000000000000000000
--- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import 'color';
-@import 'typography';
-
-.label-optional {
- color: $grey-3;
- @include font-regular-14;
- font-style: italic;
- margin-top: 2px;
-}
diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts
index dd5416f41ec3e49de042bb0eaddd97c4cfcbac87..4f9d77b38d7bca278421d868bb347ac7cce5545d 100644
--- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts
+++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts
@@ -5,7 +5,6 @@ import { Utils } from '../../../../utils/utils';
@Component({
selector: 'app-structure-contact',
templateUrl: './structure-contact.component.html',
- styleUrls: ['./structure-contact.component.scss'],
})
export class StructureContactComponent implements OnInit {
@Input() structureForm: UntypedFormGroup;
@@ -56,6 +55,28 @@ export class StructureContactComponent implements OnInit {
);
}
+ public getContactMailStatus(): 'error' | 'success' | null {
+ if (this.isContactMailValid()) {
+ return 'success';
+ }
+ if (this.structureForm.get('contactMail').value && this.isContactMailNotValid()) {
+ return 'error';
+ } else {
+ return null;
+ }
+ }
+
+ public getContactPhoneStatus(): 'error' | 'success' | null {
+ if (this.isContactPhoneValid()) {
+ return 'success';
+ }
+ if (this.structureForm.get('contactPhone').value && this.isContactPhoneNotValid()) {
+ return 'error';
+ } else {
+ return null;
+ }
+ }
+
public goBack(): void {
history.back();
}
diff --git a/src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.html b/src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.html
index 47a16f41f742777d3a79174b73f75c01b5d4fd5a..090c68394e8cde087ac1a615a2ff5fd8fb8f722b 100644
--- a/src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.html
+++ b/src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.html
@@ -4,17 +4,11 @@
<h3>Y a-t-il des informations spécifiques à la période COVID ?</h3>
<p>Facultatif</p>
</div>
- <div class="textareaBlock" fxLayout="column">
- <textarea
- rows="8"
- placeholder="Exemple : nous ne sommes joignables que par visio"
- maxlength="500"
- formControlName="lockdownActivity"
- ></textarea>
- <p>
- {{
- getStructureControl('lockdownActivity').value ? getStructureControl('lockdownActivity').value.length : 0
- }} / 500
- </p>
- </div>
+ <app-textarea
+ id="covid"
+ label=""
+ placeholder="Exemple : nous ne sommes joignables que par visio"
+ [value]="getStructureControl('lockdownActivity').value || ''"
+ (valueChange)="getStructureControl('lockdownActivity').setValue($event)"
+ />
</form>
diff --git a/src/app/form/form-view/structure-form/structure-description/structure-description.component.html b/src/app/form/form-view/structure-form/structure-description/structure-description.component.html
index 31e30a761cdf5613c80d2a031bacb25f63348673..ec2dfc72aa8154b6d1b903b5089be872540030f8 100644
--- a/src/app/form/form-view/structure-form/structure-description/structure-description.component.html
+++ b/src/app/form/form-view/structure-form/structure-description/structure-description.component.html
@@ -4,17 +4,10 @@
<h3>Pouvez-vous présenter la structure en quelques mots ?</h3>
<p>Facultatif</p>
</div>
- <div class="textareaBlock introduceStructure" fxLayout="column">
- <textarea
- rows="8"
- placeholder="Exemple : nous sommes une équipe de 7 bénévoles qui orientons les personnes pour qui le numérique est une langue étrangère"
- maxlength="500"
- formControlName="description"
- ></textarea>
- <p>
- {{
- getStructureControl('description').value ? getStructureControl('description').value.length : 0
- }} / 500
- </p>
- </div>
+ <app-textarea
+ id="description"
+ label="Description"
+ [value]="getStructureControl('description').value || ''"
+ (valueChange)="getStructureControl('description').setValue($event)"
+ />
</form>
diff --git a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
index c2d42299affc4e76328ee0fa4fc4c0578726523c..2df72ffd04a050680743fbc87f59aaf3120dcc9c 100644
--- a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
+++ b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
@@ -1,23 +1,20 @@
<form *ngIf="structureForm && onlineProcedures" [formGroup]="structureForm">
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
- <h3>La structure propose-t-elle une aide gratuite<sup>1</sup> aux démarches en ligne ?</h3>
+ <h3>La structure propose-t-elle une aide gratuite<sup>*</sup> aux démarches en ligne ?</h3>
<p>Facultatif - Plusieurs choix possibles</p>
- <p class="info">L'offre des accompagnants numériques est éditable sur le profil de l'accompagnant numérique</p>
</div>
<div class="btn-grid">
- <span *ngFor="let accompaniment of onlineProcedures.modules">
- <app-button
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isInArray(accompaniment.id) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="accompaniment.name"
- (action)="updateChoiceAccompaniment(accompaniment.id)"
- />
- </span>
+ <app-v3-tag-item
+ *ngFor="let accompaniment of onlineProcedures.modules"
+ [iconName]="isInArray(accompaniment.id) ? 'check' : null"
+ [label]="accompaniment.name"
+ [color]="isInArray(accompaniment.id) ? 'black' : 'white'"
+ (action)="updateChoiceAccompaniment(accompaniment.id)"
+ />
</div>
<p class="form-details">
- <sup>1</sup> La plateforme Rés'in n'a pas vocation à référencer les structures qui proposent un accompagnement
+ <sup>*</sup> La plateforme Rés'in n'a pas vocation à référencer les structures qui proposent un accompagnement
payant aux démarches administratives
</p>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
index c90fd64f796eaf446a6a1f2a2937e1e859e551ac..cfe0f6d608e9ce02884feeff7a74611f694152e9 100644
--- a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
+++ b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
@@ -1,7 +1,7 @@
<form [formGroup]="structureForm">
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
- <h3>Quel matériel est mis à disposition par la structure ?</h3>
+ <h3>La structure propose-t-elle du matériel numérique en libre service ?</h3>
<p>Facultatif</p>
</div>
<div class="equipments">
diff --git a/src/app/form/form-view/structure-form/structure-form.component.ts b/src/app/form/form-view/structure-form/structure-form.component.ts
index df783cb064b19dd5beeb0c3dea5f1bc005b3c2aa..769824f364ebac0aa65daa18db9c501427148161 100644
--- a/src/app/form/form-view/structure-form/structure-form.component.ts
+++ b/src/app/form/form-view/structure-form/structure-form.component.ts
@@ -272,7 +272,6 @@ export class StructureFormComponent implements OnChanges, OnInit {
formControlName: string;
value: string;
}): void {
- console.log(event, formControlName, value);
const formArray: UntypedFormArray = this.structureForm.get(formControlName) as UntypedFormArray;
if (event) {
// Add a new control in the arrayForm
diff --git a/src/app/form/form-view/structure-form/structure-hours/structure-hours.component.html b/src/app/form/form-view/structure-form/structure-hours/structure-hours.component.html
index 2b19ccac67b55d5f011f537da97c7e6cb968eaac..b4eeeebe4b73ba99bfc1a89113916f8df9c0eb40 100644
--- a/src/app/form/form-view/structure-form/structure-hours/structure-hours.component.html
+++ b/src/app/form/form-view/structure-form/structure-hours/structure-hours.component.html
@@ -12,20 +12,13 @@
/>
<div class="title">
- <h3>Avez-vous des précisions à apporter sur les horaires ?</h3>
+ <h3>Souhaitez-vous apporter des précisions sur les horaires ?</h3>
<p>Facultatif</p>
</div>
- <div class="textareaBlock" fxLayout="column">
- <textarea
- rows="8"
- placeholder="Exemple : nous ne sommes ouverts que le 1er mercredi du mois."
- maxlength="500"
- formControlName="exceptionalClosures"
- ></textarea>
- <p>
- {{
- structureForm.get('exceptionalClosures').value ? structureForm.get('exceptionalClosures').value.length : 0
- }} / 500
- </p>
- </div>
+ <app-textarea
+ id="hoursDetails"
+ label="Informations supplémentaires"
+ [value]="structureForm.get('exceptionalClosures').value || ''"
+ (valueChange)="structureForm.get('exceptionalClosures').setValue($event)"
+ />
</form>
diff --git a/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.scss b/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.scss
index c7be889e81a2f84aa6216150b49063fec0636f8b..899cd5963025e81a3b70496c8fb08782bc76be53 100644
--- a/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.scss
+++ b/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.scss
@@ -4,6 +4,7 @@
flex-wrap: wrap;
app-checkbox-form {
- flex: 1;
+ flex-grow: 1;
+ flex-basis: 0;
}
}
diff --git a/src/app/form/form-view/structure-form/structure-name-and-address/structure-name-and-address.component.html b/src/app/form/form-view/structure-form/structure-name-and-address/structure-name-and-address.component.html
index 3c79f4fc862519c3a0183f2f7601e8bb41dcc8f5..44602a6f50c4d4fec7c5f81790a0ed5400fc27a1 100644
--- a/src/app/form/form-view/structure-form/structure-name-and-address/structure-name-and-address.component.html
+++ b/src/app/form/form-view/structure-form/structure-name-and-address/structure-name-and-address.component.html
@@ -1,42 +1,24 @@
<form *ngIf="structureForm" [formGroup]="structureForm">
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
- <h3>Quelle structure voulez-vous référencer ?</h3>
+ <h3>Quels sont le nom et l'adresse de cette structure ?</h3>
</div>
- <div>
- <div class="form-group" fxLayout="column">
- <label for="structureName">Nom de la structure</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- type="text"
- formControlName="structureName"
- class="form-input structureName"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="structureForm.get('structureName').valid"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="address">Adresse de la structure</label>
- <div class="addressRow" fxLayout="row" fxLayoutGap="13px">
- <app-address-autocomplete
- [address]="structureForm.get('address').valid ? structureForm.get('address').value : null"
- (inputAddress)="setAddressStructure()"
- (selectedAddress)="setAddressStructure($event)"
- />
- <app-svg-icon
- *ngIf="structureForm.get('address').valid"
- class="validateIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- </div>
+ <div class="formGroup">
+ <app-input
+ id="name"
+ label="Nom"
+ size="large"
+ [status]="structureForm.get('structureName').invalid ? null : 'success'"
+ [value]="structureForm.get('structureName').value"
+ (valueChange)="structureForm.get('structureName').setValue($event); setValidationsForm()"
+ />
+ <div class="addressRow">
+ <app-address-autocomplete
+ [form]="structureForm"
+ [address]="structureForm.get('address').valid ? structureForm.get('address').value : null"
+ (inputAddress)="setAddressStructure()"
+ (selectedAddress)="setAddressStructure($event)"
+ />
</div>
</div>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.html b/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.html
index 6f534a113bdafd7c3c075b3ffbd38ed9973835eb..a85a7354b8c798985861a65bcf9fe86ad519e951 100644
--- a/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.html
+++ b/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.html
@@ -3,17 +3,10 @@
<div class="title">
<h3>Quelles sont les autres démarches ?</h3>
</div>
- <div class="textareaBlock" fxLayout="column">
- <textarea
- rows="8"
- placeholder="Exemple : tout ce qui est en lien avec la création d'entreprise..."
- maxlength="500"
- formControlName="otherDescription"
- ></textarea>
- <p>
- {{
- getStructureControl('otherDescription').value ? getStructureControl('otherDescription').value.length : 0
- }} / 500
- </p>
- </div>
+ <app-textarea
+ id="otherTextarea"
+ label="Autres démarches"
+ [value]="structureForm.get('otherDescription').value || ''"
+ (valueChange)="structureForm.get('otherDescription').setValue($event)"
+ />
</form>
diff --git a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
index b6417158c3354fc600f1ac49c57015fb7db96a90..d8f79cf4179a97b091232ce9011bdb59f79eb781 100644
--- a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
+++ b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
@@ -15,41 +15,38 @@
<span>Il faut renseigner au moins un champ</span>
</p>
<ng-container *ngIf="!isMandatoryFields">
- <div *ngIf="languageAndIlliteracy" class="title">
+ <div *ngIf="languageAndIlliteracy" class="title" style="gap: 12px">
<h4>Langue et illettrisme</h4>
<div class="btn-grid">
- <app-button
+ <app-v3-tag-item
*ngFor="let choice of languageAndIlliteracy.modules"
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="choice.name"
+ [iconName]="isInArray(choice.id, 'languageAndIlliteracy') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'languageAndIlliteracy') ? 'black' : 'white'"
(action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
/>
</div>
</div>
- <div *ngIf="handicaps" class="title">
+ <div *ngIf="handicaps" class="title" style="gap: 12px">
<h4>Handicaps</h4>
<div class="btn-grid">
- <app-button
+ <app-v3-tag-item
*ngFor="let choice of handicaps.modules"
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="choice.name"
+ [iconName]="isInArray(choice.id, 'handicaps') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'handicaps') ? 'black' : 'white'"
(action)="updateChoicePublic(choice.id, 'handicaps')"
/>
</div>
</div>
- <div *ngIf="genre" class="title">
+ <div *ngIf="genre" class="title" style="gap: 12px">
<h4>Genre</h4>
<div class="btn-grid">
- <app-button
+ <app-v3-tag-item
*ngFor="let choice of genre.modules"
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isInArray(choice.id, 'genre') ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="choice.name"
+ [iconName]="isInArray(choice.id, 'genre') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'genre') ? 'black' : 'white'"
(action)="updateChoicePublic(choice.id, 'genre')"
/>
</div>
@@ -57,15 +54,14 @@
</ng-container>
<ng-container *ngIf="isMandatoryFields">
- <div *ngIf="age" class="title">
+ <div *ngIf="age" class="title" style="gap: 12px">
<h4>Âge</h4>
<div class="btn-grid">
- <app-button
+ <app-v3-tag-item
*ngFor="let choice of age.modules"
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="choice.name"
+ [iconName]="isInArray(choice.id, 'age') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'age') ? 'black' : 'white'"
(action)="updateChoicePublic(choice.id, 'age')"
/>
</div>
diff --git a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
index eb5884bb877307746252d1bf49329a1327dc1cae..a7c672ca8dbab882785480cce7dca7e7b7a41ff9 100644
--- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
+++ b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
@@ -1,19 +1,17 @@
<form *ngIf="structureForm && solidarityMaterial" [formGroup]="structureForm">
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
- <h3>Quel matériel numérique vendez-vous à tarif solidaire ?</h3>
- <p>Facultatif</p>
+ <h3>La structure vend-elle du matériel à tarif solidaire ?</h3>
+ <p>Facultatif - Plusieurs choix possibles</p>
</div>
<div class="btn-grid">
- <span *ngFor="let material of solidarityMaterial.modules">
- <app-button
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isInArray(material.id) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="material.name"
- (action)="updateChoiceSolidarityMaterial(material.id)"
- />
- </span>
+ <app-v3-tag-item
+ *ngFor="let material of solidarityMaterial.modules"
+ [iconName]="isInArray(material.id) ? 'check' : null"
+ [label]="material.name"
+ [color]="isInArray(material.id) ? 'black' : 'white'"
+ (action)="updateChoiceSolidarityMaterial(material.id)"
+ />
</div>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.scss b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.scss
deleted file mode 100644
index f53b48a3f0b83439c9280014d9767dd230b1832e..0000000000000000000000000000000000000000
--- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.btn-grid {
- max-width: 550px;
-}
diff --git a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts
index 75f31b4c5cb4898b46d9154302e4846719d8a77e..3a860cd0b42bfec7ef65402bcac5902f8a93442a 100644
--- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts
+++ b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts
@@ -6,7 +6,6 @@ import { Category } from '../../../../structure-list/models/category.model';
@Component({
selector: 'app-structure-solidarity-material',
templateUrl: './structure-solidarity-material.component.html',
- styleUrls: ['./structure-solidarity-material.component.scss'],
})
export class StructureSolidarityMaterialComponent implements OnInit {
@Input() structureForm: UntypedFormGroup;
diff --git a/src/app/form/form-view/structure-form/structure-type/structure-type.component.html b/src/app/form/form-view/structure-form/structure-type/structure-type.component.html
index ec5e8790b344d4e65148c3de347ec384b8b2d7c1..540cf100f90132249fba94c8a5789291a2a37bd0 100644
--- a/src/app/form/form-view/structure-form/structure-type/structure-type.component.html
+++ b/src/app/form/form-view/structure-form/structure-type/structure-type.component.html
@@ -4,14 +4,8 @@
<h3>De quel type de structure s'agit-il ?</h3>
<p>1 seul choix possible</p>
</div>
- <p *ngIf="isEditMode && !structureForm.get('structureType').valid" class="missing-information">
- <app-svg-icon class="validationIcon" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
- <span>Il faut renseigner un champ</span>
- </p>
- <div class="type-picker">
- <app-structure-type-picker
- [pickedTypeId]="structureForm.get('structureType').valid ? structureForm.get('structureType').value : null"
- (selectedType)="setTypeStructure($event)"
- />
- </div>
+ <app-structure-type-picker
+ [pickedTypeId]="structureForm.get('structureType').valid ? structureForm.get('structureType').value : null"
+ (selectedType)="setTypeStructure($event)"
+ />
</form>
diff --git a/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.html b/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.html
index b38d8cb66eadf3dd2920ffa1d734137f940a0245..28032a7974546cc161c677abbc2b3cf5cf08fa08 100644
--- a/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.html
+++ b/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.html
@@ -9,34 +9,27 @@
<div class="inputSection">
<div class="row">
- <app-svg-icon [type]="'tags'" [icon]="'website'" [iconClass]="'icon-36'" />
- <div>
- <!-- TODO update with v3 input -->
- <label for="website">Adresse du site web</label>
- <div fxLayout="row" fxLayoutGap="7px">
- <input
- type="text"
- placeholder="exemple : resin.grandlyon.com"
- formControlName="website"
- class="form-input"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="structureForm.get('website').valid && structureForm.get('website').value"
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="structureForm.get('website').invalid"
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <app-svg-icon
+ [type]="'tags'"
+ [icon]="'website'"
+ [iconClass]="'icon-36'"
+ [ngClass]="{
+ 'icon-centered':
+ (structureForm.get('website').value && structureForm.get('website').valid) ||
+ structureForm.get('website').invalid
+ }"
+ />
+ <app-input
+ id="url"
+ label="Adresse du site web"
+ placeholder="exemple : resin.grandlyon.com"
+ size="large"
+ [status]="
+ structureForm.get('website').value ? (structureForm.get('website').valid ? 'success' : 'error') : null
+ "
+ [value]="structureForm.get('website').value"
+ (valueChange)="structureForm.get('website').setValue($event); setValidationsForm()"
+ />
</div>
</div>
</div>
@@ -44,133 +37,95 @@
<h3>Réseaux sociaux</h3>
<div class="inputSection">
<div class="row">
- <app-svg-icon [type]="'tags'" [icon]="'facebook'" [iconClass]="'icon-36'" />
- <div class="form-group facebook">
- <div fxLayout="row" fxLayoutGap="7px">
- <input
- type="text"
- placeholder="exemple : facebook.com/resin"
- formControlName="facebook"
- class="form-input withIcon"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="
- structureForm.get('facebook').valid &&
- structureForm.get('facebook').value !== null &&
- structureForm.get('facebook').value !== ''
- "
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="structureForm.get('facebook').invalid"
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <app-svg-icon
+ [type]="'tags'"
+ [icon]="'x'"
+ [iconClass]="'icon-36'"
+ [class.icon-centered]="
+ (structureForm.get('twitter').value && structureForm.get('twitter').valid) ||
+ structureForm.get('twitter').invalid
+ "
+ />
+ <app-input
+ id="twitter"
+ label="Adresse du compte X/Twitter"
+ placeholder="exemple : twitter.com/resin"
+ size="large"
+ [status]="
+ structureForm.get('twitter').value ? (structureForm.get('twitter').valid ? 'success' : 'error') : null
+ "
+ [value]="structureForm.get('twitter').value"
+ (valueChange)="structureForm.get('twitter').setValue($event); setValidationsForm()"
+ />
</div>
- <div class="form-group twitter">
- <div class="row">
- <app-svg-icon [type]="'tags'" [icon]="'x'" [iconClass]="'icon-36'" />
- <div fxLayout="row" fxLayoutGap="7px">
- <input
- type="text"
- placeholder="exemple : twitter.com/resin"
- formControlName="twitter"
- class="form-input withIcon"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="
- structureForm.get('twitter').valid &&
- structureForm.get('twitter').value !== null &&
- structureForm.get('twitter').value !== ''
- "
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="structureForm.get('twitter').invalid"
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+
+ <div class="row">
+ <app-svg-icon
+ [type]="'tags'"
+ [icon]="'facebook'"
+ [iconClass]="'icon-36'"
+ [class.icon-centered]="
+ (structureForm.get('facebook').value && structureForm.get('facebook').valid) ||
+ structureForm.get('facebook').invalid
+ "
+ />
+ <app-input
+ id="facebook"
+ label="Adresse du compte Facebook"
+ placeholder="exemple : facebook.com/resin"
+ size="large"
+ [status]="
+ structureForm.get('facebook').value ? (structureForm.get('facebook').valid ? 'success' : 'error') : null
+ "
+ [value]="structureForm.get('facebook').value"
+ (valueChange)="structureForm.get('facebook').setValue($event); setValidationsForm()"
+ />
</div>
- <div class="form-group instagram">
- <div class="row">
- <app-svg-icon [type]="'tags'" [icon]="'instagram'" [iconClass]="'icon-36'" />
- <div fxLayout="row" fxLayoutGap="7px">
- <input
- type="text"
- formControlName="instagram"
- placeholder="exemple : instagram.com/resin"
- class="form-input withIcon"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="
- structureForm.get('instagram').valid &&
- structureForm.get('instagram').value !== null &&
- structureForm.get('instagram').value !== ''
- "
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="structureForm.get('instagram').invalid"
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+ <div class="row">
+ <app-svg-icon
+ [type]="'tags'"
+ [icon]="'linkedin'"
+ [iconClass]="'icon-36'"
+ [class.icon-centered]="
+ (structureForm.get('linkedin').value && structureForm.get('linkedin').valid) ||
+ structureForm.get('linkedin').invalid
+ "
+ />
+ <app-input
+ id="linkedin"
+ label="Adresse du compte Linkedin"
+ placeholder="exemple : linkedin.com/in/resin"
+ size="large"
+ [status]="
+ structureForm.get('linkedin').value ? (structureForm.get('linkedin').valid ? 'success' : 'error') : null
+ "
+ [value]="structureForm.get('linkedin').value"
+ (valueChange)="structureForm.get('linkedin').setValue($event); setValidationsForm()"
+ />
</div>
- <div class="form-group linkedin">
- <div class="row">
- <app-svg-icon [type]="'tags'" [icon]="'linkedin'" [iconClass]="'icon-36'" />
- <div fxLayout="row" fxLayoutGap="7px">
- <input
- type="text"
- formControlName="linkedin"
- placeholder="exemple : linkedin.com/in/resin"
- class="form-input withIcon"
- (input)="setValidationsForm()"
- />
- <app-svg-icon
- *ngIf="
- structureForm.get('linkedin').valid &&
- structureForm.get('linkedin').value !== null &&
- structureForm.get('linkedin').value !== ''
- "
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="structureForm.get('linkedin').invalid"
- class="validationIcon"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
+
+ <div class="row">
+ <app-svg-icon
+ [type]="'tags'"
+ [icon]="'instagram'"
+ [iconClass]="'icon-36'"
+ [class.icon-centered]="
+ (structureForm.get('instagram').value && structureForm.get('instagram').valid) ||
+ structureForm.get('instagram').invalid
+ "
+ />
+ <app-input
+ id="instagram"
+ label="Adresse du compte Instagram"
+ placeholder="exemple : instagram.com/resin"
+ size="large"
+ [status]="
+ structureForm.get('instagram').value ? (structureForm.get('instagram').valid ? 'success' : 'error') : null
+ "
+ [value]="structureForm.get('instagram').value"
+ (valueChange)="structureForm.get('instagram').setValue($event); setValidationsForm()"
+ />
</div>
</div>
</div>
diff --git a/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss b/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss
index 281831befe0853c8f1070112b10d620964b099c7..fc9ef80c3dbec42d2a25dcecf8665600b8a39a23 100644
--- a/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss
+++ b/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss
@@ -30,6 +30,9 @@ form {
display: flex;
gap: 1.5rem;
align-items: flex-end;
+ app-input {
+ width: 100%;
+ }
}
}
@@ -40,3 +43,6 @@ form {
}
}
}
+.icon-centered {
+ align-self: center;
+}
diff --git a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
index 60550507b6c83ecac46f369bb8dceb52813a7cf4..3f70cab9e214f6d807204139879dd02a28e89d8b 100644
--- a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
+++ b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
@@ -4,27 +4,24 @@
<h3>La structure propose-t-elle du wifi en accès libre ?</h3>
<p>Un seul choix possible</p>
</div>
- <!-- TODO to fix -->
- <!-- <app-radio-form
- [selectedOption]="
- isEditMode ? isInArray('selfServiceMaterial', 'wifiEnAccesLibre') : structureForm.get('freeWifi').value
- "
- (selectedEvent)="onCheckChange($event, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
- >
- </app-radio-form> -->
<div class="formGroup">
<app-radio-option
[id]="'yes'"
[label]="'Oui'"
[value]="true"
- [selected]="structureForm.get('freeWifi').value === true"
+ [selected]="
+ isEditMode ? isInArray('selfServiceMaterial', 'wifiEnAccesLibre') : structureForm.get('freeWifi').value
+ "
(selectedEvent)="onCheckChange($event, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
/>
<app-radio-option
[id]="'no'"
[label]="'Non'"
[value]="false"
- [selected]="structureForm.get('freeWifi').value === false"
+ [selected]="
+ (isEditMode ? isInArray('selfServiceMaterial', 'wifiEnAccesLibre') : structureForm.get('freeWifi').value) ===
+ false
+ "
(selectedEvent)="onCheckChange($event, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
/>
</div>
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 86ab63866ba9fe435f46fa484715e66d3eb7569a..fe687ad53b9be575a5fb091d64feb0ed97182a15 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -29,7 +29,7 @@
}
}
-::ng-deep.title {
+:host ::ng-deep.title {
display: flex;
flex-direction: column;
gap: 16px;
@@ -65,7 +65,7 @@ div.titleform {
color: $red;
}
-::ng-deep .orientationForm {
+:host ::ng-deep .orientationForm {
display: flex;
flex-direction: column;
gap: 40px;
diff --git a/src/app/form/orientation-form-view/orientation-structure-list/orientation-structure-address/orientation-structure-address.component.html b/src/app/form/orientation-form-view/orientation-structure-list/orientation-structure-address/orientation-structure-address.component.html
index b9174874114c4c319dd6d407a53a863d67a43cb3..1cb3c975348e0eb707019d770ec09f325c1cfa4c 100644
--- a/src/app/form/orientation-form-view/orientation-structure-list/orientation-structure-address/orientation-structure-address.component.html
+++ b/src/app/form/orientation-form-view/orientation-structure-list/orientation-structure-address/orientation-structure-address.component.html
@@ -6,6 +6,7 @@
<div class="form-group" fxLayout="column">
<div class="addressRow" fxLayout="row" fxLayoutGap="13px">
<app-address-autocomplete
+ [form]="form"
[address]="form.get('address').valid ? form.get('address').value : null"
(inputAddress)="setAddressStructure()"
(selectedAddress)="setAddressStructure($event)"
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 9033a7b93e431390bf758c4da731ce78a5c32863..0eff962eb5a93587f580ce0868244f7a0d20fcf4 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,5 +1,5 @@
<div class="loginPage">
- <div class="form">
+ <div class="loginContainer">
<div class="title">
<h3>{{ isWelcome ? 'Bienvenue !' : 'Connexion' }}</h3>
<p>Saisissez votre email pour vous connecter</p>
@@ -8,54 +8,44 @@
Une erreur est survenue lors de la validation de votre email... Veuillez envoyer un mail au support.
</p>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
- <div class="form-group" fxLayout="column">
- <label for="email">Identifiant</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input type="text" autocomplete="on" formControlName="email" class="form-input" />
- <svg *ngIf="f.email.invalid && f.email.value" class="notValidate" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'" />
- </svg>
- </div>
- <div *ngIf="authFailed" class="incorrectId">Identifiant ou mot de passe invalide</div>
- <div *ngIf="isUnverifiedEmail">
- <div class="incorrectId">Votre adresse email n’a jamais été validée</div>
- <p class="resendEmail">
- <a tabindex="0" (click)="resendConfirmationEmail()" (keyup.enter)="resendConfirmationEmail()"
- >Renvoyer l'email de confirmation</a
- >
- </p>
- </div>
- </div>
- <div class="form-group password" fxLayout="column">
- <label for="password">Mot de passe</label>
- <div fxLayout="row" fxLayoutGap="13px" fxLayoutAlign="default center">
- <input
- autocomplete="on"
- formControlName="password"
- class="form-input"
- [type]="isShowPassword ? 'text' : 'password'"
- [ngClass]="{ inputInvalid: f.password.invalid && f.password.value }"
- />
- <div class="eyePassword">
- <svg aria-hidden="true" preserveAspectRatio="xMinYMid" (click)="toggleShowPassword()">
- <use *ngIf="!isShowPassword" [attr.xlink:href]="'assets/form/sprite.svg#eyePasswordVisible'" />
- <use *ngIf="isShowPassword" [attr.xlink:href]="'assets/form/sprite.svg#eyePasswordInvisible'" />
- </svg>
- </div>
- <svg *ngIf="f.password.invalid && f.password.value" class="notValidate" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'" />
- </svg>
- </div>
- <p class="passHint" [ngClass]="{ invalid: f.password.invalid && f.password.value }">
- Il doit contenir au minimum :<br />
- 8 caractères dont un caractère spécial, un caractère en majuscule et un chiffre.
- </p>
+ <div class="formGroup" style="gap: 24px">
+ <app-input
+ id="login"
+ label="Identifiant"
+ size="large"
+ [status]="f.email.value ? (f.email.invalid || authFailed || isUnverifiedEmail ? 'error' : 'success') : null"
+ [statusText]="getLoginStatusText()"
+ [value]="f.email.value"
+ (valueChange)="onChange(); f.email.setValue($event)"
+ />
+ <app-v3-button
+ *ngIf="isUnverifiedEmail"
+ label="Renvoyer le mail de confirmation"
+ size="small"
+ [variant]="buttonTypeEnumV3.Secondary"
+ [wide]="true"
+ (action)="resendConfirmationEmail()"
+ />
+ <app-input
+ id="password"
+ label="Mot de passe"
+ size="large"
+ type="password"
+ [statusText]="
+ f.password.invalid
+ ? 'Le mot de passe doit obligatoirement contenir : 8 caractères, une majuscule, une minuscule, un caractère spécial et un chiffre'
+ : ''
+ "
+ [status]="f.password.value ? (f.password.invalid ? 'error' : 'success') : 'info'"
+ [value]="f.password.value"
+ (valueChange)="onChange(); f.password.setValue($event)"
+ />
</div>
<div class="footer">
<app-v3-button
[variant]="buttonTypeEnumV3.Secondary"
[label]="'Mot de passe oublié'"
- (action)="swithToResetPassword()"
+ (action)="switchToResetPassword()"
/>
<app-v3-button
[variant]="buttonTypeEnumV3.Primary"
@@ -67,7 +57,7 @@
<app-v3-button
class="goSignup"
[variant]="buttonTypeEnumV3.Tertiary"
- [label]="'Je n\’ai pas encore de compte'"
+ [label]="'Je n’ai pas encore de compte'"
[wide]="true"
(action)="goToAccountCreation()"
/>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index ead04c8577f2106df539ef108cf6b44c8b4aaa8f..c8645b3b0e411a88d8ca6d5a9ae0dbaa24edc35a 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -8,102 +8,52 @@
display: flex;
justify-content: center;
align-items: center;
-
@media #{$phone} {
padding: 1rem;
align-items: flex-start;
}
- .form {
+ .loginContainer {
display: flex;
flex-direction: column;
+ gap: 40px;
align-items: center;
overflow-y: auto;
width: 100%;
max-width: 980px;
+ color: $grey-1;
box-sizing: border-box;
background: $white;
- border-radius: 8px;
- border: 1px solid $grey-6;
padding: 70px 40px;
* {
max-width: 340px;
}
+ form {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ .fields {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+ }
}
.title {
+ display: flex;
+ flex-direction: column;
text-align: center;
+ gap: 16px;
h3 {
- margin: 0;
@include font-bold-24;
}
p {
- @include font-regular-14;
- margin: 0.5rem;
- }
- }
- .inputInvalid {
- border-color: $orange-warning;
- }
- .incorrectId {
- @include font-regular-14;
- color: $orange-warning;
- }
- .resendEmail {
- margin: 0;
- a {
- @include font-bold-14;
- text-decoration: underline;
- }
- }
-
- .form-group {
- margin: 1.5rem 0;
- .notValidate {
- min-width: 26px;
- width: 26px;
- height: 40px;
- }
- label {
- margin-bottom: 4px;
- @include font-regular-16;
- }
- input {
- width: 100%;
- max-width: 301px;
- }
- &.password {
- input {
- max-width: 264px;
- }
- p {
- @include font-regular-14;
- color: $grey-3;
- margin-top: 0;
- margin-bottom: 4px;
- &.invalid {
- color: $orange-warning;
- }
- }
- .eyePassword {
- display: flex;
- align-content: center;
- svg {
- cursor: pointer;
- width: 32px;
- height: 32px;
- stroke: $grey-3;
- fill: $grey-3;
- }
- }
- .passHint {
- margin-top: 0.5rem;
- }
+ @include font-regular-18;
}
}
.footer {
display: inline-flex;
- margin-bottom: 1rem;
gap: 24px;
}
.goSignup {
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 8eb82029036d1303d52f0bb6c37effd21222e289..da2f191b9cc740c458279e7c8b236bece4014387 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -20,7 +20,6 @@ export class LoginComponent implements OnInit {
public submitted = false;
public authFailed = false;
public isUnverifiedEmail = false;
- public isShowPassword = false;
public buttonTypeEnumV3 = ButtonTypeV3;
public isWelcome = false;
public userId: string;
@@ -73,7 +72,7 @@ export class LoginComponent implements OnInit {
return this.loginForm.controls;
}
- public swithToResetPassword(): void {
+ public switchToResetPassword(): void {
this.router.navigate(['/reset-password']);
}
@@ -109,13 +108,28 @@ export class LoginComponent implements OnInit {
}
}
- public toggleShowPassword(): void {
- this.isShowPassword = !this.isShowPassword;
- }
public goToAccountCreation(): void {
this.router.navigateByUrl('form/account');
}
+ public getLoginStatusText(): string {
+ if (this.f.email.value && this.f.email.invalid) {
+ return 'L’identifiant doit être un email valide';
+ }
+ if (this.authFailed) {
+ return 'Identifiant ou mot de passe invalide';
+ }
+ if (this.isUnverifiedEmail) {
+ return 'Votre email n’a jamais été validé';
+ }
+ return null;
+ }
+
+ public onChange(): void {
+ this.authFailed = false;
+ this.isUnverifiedEmail = false;
+ }
+
public resendConfirmationEmail(): void {
this.isUnverifiedEmail = false;
this.loading = true;
diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index f4b0ea9c8b9c6d5a9fcaef966fb82f89f3603f9e..8705daa313109097c3da5878d000fbc83c91fb4f 100644
--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -125,15 +125,14 @@
<div *ngIf="currentTab === tabsEnum.employer">
<div class="search-structure">
<div fxLayout="column" fxLayoutAlign="space-between" class="form-group search">
- <label for="employer">Employeur</label>
<div fxLayout="row" fxLayoutGap="13px">
- <input
- #searchEmployer
+ <app-input
id="search-employer"
- type="text"
- class="form-input"
- autocomplete="off"
- (input)="onSearchChange($event.target)"
+ label="Employeur"
+ description="Recherchez votre employeur dans la liste suivante"
+ [value]="selectedEmployer?.name"
+ (valueChange)="onSearchChange($event)"
+ (click)="onSearchChange(selectedEmployer?.name || '')"
/>
</div>
</div>
@@ -142,7 +141,6 @@
<p
*ngFor="let employer of employers"
tabindex="0"
- class="autocomplete-item"
(click)="selectEmployer(employer)"
(keyup.enter)="selectEmployer(employer)"
>
@@ -154,15 +152,13 @@
<p class="subTitle">Fonction</p>
<div fxLayout="column" fxLayoutGap="32px">
<div class="btn-grid">
- <span *ngFor="let job of jobs">
- <app-button
- [ngClass]="{ selectedChoice: true }"
- [extraClass]="isSelectedJob(job) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="job.name"
- (action)="selectJob(job)"
- />
- </span>
+ <app-v3-tag-item
+ *ngFor="let job of jobs"
+ [iconName]="isSelectedJob(job) ? 'check' : null"
+ [label]="job.name"
+ [color]="isSelectedJob(job) ? 'black' : 'white'"
+ (action)="selectJob(job)"
+ />
</div>
<div *ngIf="isUnexistingJob()" fxLayout="column" fxLayoutAlign="space-between" class="form-group search">
<label for="employer">Quelle fonction occupez-vous ?</label>
@@ -229,9 +225,10 @@
(closed)="$event ? confirm() : closeModal()"
>
<div class="modal-content">
- <app-input [label]="'Nouvel email'" [status]="getEmailStatus(newEmail)" [(value)]="newEmail" />
+ <app-input [label]="'Nouvel email'" [size]="'large'" [status]="getEmailStatus(newEmail)" [(value)]="newEmail" />
<app-input
[label]="'Confirmer le nouvel email'"
+ [size]="'large'"
[status]="getEmailStatus(newEmailConfirm)"
[statusText]="getEmailStatusText()"
[(value)]="newEmailConfirm"
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index ca4a4bb7af641aa76b7ed01890343145b398c669..35af539ae5dcb8f70b5b4a9379c184c9902bf773 100644
--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -151,7 +151,6 @@
}
p {
- text-align: center;
margin: 10px 0;
&.passwordInfo {
@include font-regular-14;
diff --git a/src/app/profile/edit/edit.component.ts b/src/app/profile/edit/edit.component.ts
index dce0d7aeedc42e253e7ce145a319a3f40ce75549..e9e8b211263123e46e1c0e7869642c9b7ebba94a 100644
--- a/src/app/profile/edit/edit.component.ts
+++ b/src/app/profile/edit/edit.component.ts
@@ -61,7 +61,7 @@ export class EditComponent implements OnInit {
private newJob: Job;
private selectedJob: Job;
public employers: Employer[];
- private selectedEmployer: Employer;
+ public selectedEmployer: Employer;
public selectedRdvChoice: boolean;
public isAlreadySearching = false;
public isNewUser = false;
@@ -71,7 +71,6 @@ export class EditComponent implements OnInit {
// Modal canExit var
public showConfirmationModal = false;
- @ViewChild('searchEmployer') searchEmployer: ElementRef;
@ViewChild('newJobInput') newJobInput: ElementRef;
constructor(
@@ -91,6 +90,7 @@ export class EditComponent implements OnInit {
this.profileService.getProfile().then((profile) => {
if (profile.hasOwnProperty('withAppointment')) this.selectedRdvChoice = profile.withAppointment;
this.userProfile = new User(profile);
+ this.userProfile.description = this.userProfile.description || '';
this.initialUserProfile = new User({ ...profile });
this.selectedEmployer = { ...profile.employer };
this.hasPersonalOffer = profile.job?.hasPersonalOffer;
@@ -407,9 +407,7 @@ export class EditComponent implements OnInit {
}
// Structures
- public onSearchChange(event: EventTarget): void {
- const searchString = (event as HTMLInputElement).value;
- if (searchString.length <= 2) this.getEmployers();
+ public onSearchChange(searchString: string): void {
this.getEmployers(searchString);
this.selectedEmployer = new Employer({ name: searchString, validated: false });
if (!this.employers.map((employer) => employer.name).includes(this.selectedEmployer?.name)) {
@@ -420,7 +418,6 @@ export class EditComponent implements OnInit {
}
public selectEmployer(employer: Employer): void {
- if (employer) this.searchEmployer.nativeElement.value = employer.name;
this.selectedEmployer = employer;
this.employers = [];
this.isNewEmployer = false;
diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index b19b5272b873777953c98e4b2094b7525ca54775..d88e939433a8bff83e51463e3341ec2fc29cb54e 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -15,9 +15,6 @@ export class ResetPasswordComponent implements OnInit {
public loading = false;
public submitted = false;
public token: string;
- // Condition form
- public isShowConfirmPassword = false;
- public isShowPassword = false;
public buttonTypeEnumV3 = ButtonTypeV3;
constructor(
diff --git a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
index ecccd88a83d1cf0dba86878641d89a9cf976fbf6..b41abc7ee1a6d1f47236a5d2d1d101a555ac0533 100644
--- a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
+++ b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
@@ -1,10 +1,9 @@
<div *ngIf="onlineProcedures" class="btn-grid">
- <app-button
+ <app-v3-tag-item
*ngFor="let module of onlineProcedures.modules"
- [extraClass]="isSelectedModule(module) ? 'selected' : ''"
- [active]="isSelectedModule(module)"
- [style]="buttonTypeEnum.CheckButton"
- [text]="module.name"
+ [iconName]="isSelectedModule(module) ? 'check' : null"
+ [label]="module.name"
+ [color]="isSelectedModule(module) ? 'black' : 'white'"
(action)="toogleResult(module)"
/>
</div>
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
index 6b35c394a0a6b42bd16e404c8c3f5c882038a3e2..2a41501e87d15a5479b9a814b36bd4b98dd287af 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
@@ -1,23 +1,17 @@
<div class="search-bar">
- <div>
- <input
- #searchAddress
- id="search-address"
- type="text"
- placeholder="Exemple : 20 rue du lac, Lyon"
- class="form-input"
- autocomplete="off"
- (input)="onSearchChange($event)"
- />
- </div>
+ <app-input
+ id="search-address"
+ label="Adresse"
+ placeholder="Exemple : 20 rue du lac, Lyon"
+ autocomplete="off"
+ size="large"
+ [status]="form.get('address').invalid ? null : 'success'"
+ [statusText]="form.get('address').invalid ? null : 'Adresse sélectionnée'"
+ [value]="displayedAddress"
+ (valueChange)="onSearchChange($event)"
+ />
<div *ngIf="!isAlreadySearching" class="autocomplete-items">
- <p
- *ngFor="let hit of data"
- class="autocomplete-item"
- tabindex="0"
- (click)="selectedResult(hit)"
- (keyup.enter)="selectedResult(hit)"
- >
+ <p *ngFor="let hit of data" tabindex="0" (click)="selectedResult(hit)" (keyup.enter)="selectedResult(hit)">
{{ hit.displayedName }}
</p>
</div>
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.scss b/src/app/shared/components/address-autocomplete/address-autocomplete.component.scss
index bba9bbfcc0db0dc5959f4f82d9d1e4013be6c9b5..63084fc5a48f8c5d6f7f1f8629d9881ec4839d93 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.scss
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.scss
@@ -1,20 +1,10 @@
-@import 'color';
+@import 'breakpoint';
-input#search-address {
- width: 400px;
-}
-
-.search-bar {
- display: flex;
- flex-direction: column;
- * {
- width: 400px;
- }
-}
.autocomplete-items {
- box-sizing: border-box;
- width: 400;
p {
width: auto;
}
+ @media #{$phone} {
+ max-width: 300px;
+ }
}
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
index 297b14a74f3ff2ce35f57fb44ef17673017f166e..d7b32425841eb8e685aa5d9793e2e9a3061a3f45 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
@@ -1,4 +1,5 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
import { Address } from '../../../models/address.model';
import { AddressService } from '../../service/address.service';
@@ -7,39 +8,38 @@ import { AddressService } from '../../service/address.service';
templateUrl: './address-autocomplete.component.html',
styleUrls: ['./address-autocomplete.component.scss'],
})
-export class AddressAutocompleteComponent implements OnInit, OnChanges {
+export class AddressAutocompleteComponent implements OnInit {
+ @Input() form: UntypedFormGroup;
+ @Input() private address?: Address;
+ @Output() selectedAddress = new EventEmitter<Address>();
+ @Output() inputAddress = new EventEmitter<any>();
+
public readonly AUTOCOMPLETE_NBR = 5;
public data = [];
public isAlreadySearching = false;
- @ViewChild('searchAddress', { static: true }) searchAddress: ElementRef;
- @Output() selectedAddress: EventEmitter<Address> = new EventEmitter<Address>();
- @Output() inputAddress: EventEmitter<any> = new EventEmitter<any>();
- @Input() private address?: Address;
+ public displayedAddress: string;
+ private searchString: string;
constructor(private addressService: AddressService) {}
ngOnInit(): void {
- this.lauchSearch();
+ this.launchSearch();
}
- ngOnChanges(): void {
- this.lauchSearch();
- }
-
- public lauchSearch(): void {
+ public launchSearch(): void {
if (this.address) {
let address_str = null;
if (this.address.numero) {
- address_str = this.address.numero + ' ' + this.address.street + ' ' + this.address.commune;
+ address_str = this.address.numero + ' ' + this.address.street + ', ' + this.address.commune;
} else {
- address_str = this.address.street + ' ' + this.address.commune;
+ address_str = this.address.street + ', ' + this.address.commune;
}
- this.searchAddress.nativeElement.value = address_str;
+ this.displayedAddress = address_str;
}
}
- public onSearchChange(event: Event): void {
- const searchString = (event.target as HTMLInputElement).value;
+ public onSearchChange(searchString: string): void {
+ this.searchString = searchString;
if (!this.isAlreadySearching) {
this.isAlreadySearching = true;
this.addressService.searchAddress(searchString).subscribe((data) => {
@@ -50,6 +50,11 @@ export class AddressAutocompleteComponent implements OnInit, OnChanges {
// Filtering duplicate displayed string. This duplication is caused by the API used for gathering addresse info.
this.data = [...new Map(data.features.map((item) => [item.displayedName, item])).values()];
this.isAlreadySearching = false;
+
+ // If user typed another string meanwhile, relaunch the search for this new string
+ if (this.searchString !== searchString) {
+ this.onSearchChange(this.searchString);
+ }
});
}
this.inputAddress.emit();
@@ -68,7 +73,7 @@ export class AddressAutocompleteComponent implements OnInit, OnChanges {
}
const value = this.parseHitToAddress(hit);
// Set input value
- this.searchAddress.nativeElement.value = value;
+ this.displayedAddress = value;
// Reset autocomplete
this.data = [];
// Emit choosen value
diff --git a/src/app/shared/components/appointment-choice/appointment-choice.component.html b/src/app/shared/components/appointment-choice/appointment-choice.component.html
index 7e733a8fcc8292a64565026a07bbcc784b854341..ed61788fabe1482e41a971e32472356c8011dc9f 100644
--- a/src/app/shared/components/appointment-choice/appointment-choice.component.html
+++ b/src/app/shared/components/appointment-choice/appointment-choice.component.html
@@ -1,15 +1,9 @@
-<div>
+<div class="appointmentChoice">
<p class="subtitle">Souhaitez-vous proposer la fonctionnalité "Demander un rendez-vous" ?</p>
<p class="details">
Si vous l'activez, des professionnel·les du réseau pourront vous transmettre les coordonnées d'une personne ayant
besoin d'un accompagnement numérique afin de convenir d'un rendez-vous. C'est vous qui gérez la prise de rendez-vous
sur vos outils habituels, en fonction de vos disponibilités.
</p>
- <app-switch
- checkedText="Oui"
- uncheckedText="Non"
- [label]="'Proposer des rendez-vous'"
- [checked]="selectedRdvChoice"
- (action)="onRdvRadioChange($event)"
- />
+ <app-yes-no [selected]="selectedRdvChoice" (selectedEvent)="onRdvChoiceChange($event)" />
</div>
diff --git a/src/app/shared/components/appointment-choice/appointment-choice.component.scss b/src/app/shared/components/appointment-choice/appointment-choice.component.scss
index 8c13009578bf50f3efd09224f3a320c6c1615ef0..faa1d89ce81751a1edce57a58ed281d6d38473ba 100644
--- a/src/app/shared/components/appointment-choice/appointment-choice.component.scss
+++ b/src/app/shared/components/appointment-choice/appointment-choice.component.scss
@@ -1,12 +1,15 @@
@import 'typography';
@import 'color';
-.subtitle {
- @include font-regular-18;
- font-weight: 500;
- padding-bottom: 16px;
-}
-.details {
- color: $grey-3;
- padding-bottom: 16px;
+.appointmentChoice {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ .subtitle {
+ @include font-regular-16;
+ }
+ .details {
+ @include font-regular-14;
+ color: $grey-3;
+ }
}
diff --git a/src/app/shared/components/appointment-choice/appointment-choice.component.ts b/src/app/shared/components/appointment-choice/appointment-choice.component.ts
index 632061ab517961ea382cf7eac75cb25819652b41..1ac69cd1e35ac0b819670c6c6a063825ebe8adc6 100644
--- a/src/app/shared/components/appointment-choice/appointment-choice.component.ts
+++ b/src/app/shared/components/appointment-choice/appointment-choice.component.ts
@@ -11,7 +11,7 @@ export class AppointmentChoiceComponent {
@Output() validateForm = new EventEmitter<Job>();
@Output() rdvChoice = new EventEmitter<boolean>();
- public onRdvRadioChange(value: boolean): void {
+ public onRdvChoiceChange(value: boolean): void {
this.selectedRdvChoice = value;
this.rdvChoice.emit(this.selectedRdvChoice);
this.validateForm.emit();
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.html b/src/app/shared/components/hour-picker/hour-picker.component.html
index 98018eedd246226502beb51ffb43d15f49205f03..96b8c173c2ca4eb7e010aeb73e7594628010aa71 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.html
+++ b/src/app/shared/components/hour-picker/hour-picker.component.html
@@ -4,7 +4,7 @@
<app-switch
checkedText="Ouvert"
uncheckedText="Fermé"
- [label]="day.name"
+ [label]="day.name | titlecase"
[checked]="day.open"
(action)="toggleOpenDay(day, $event)"
/>
@@ -13,6 +13,7 @@
<div *ngIf="day.open" class="dayContent">
<div *ngFor="let hour of day.hours; let index = index" class="hour">
<app-input
+ class="time"
[id]="day.name + 'From'"
[type]="'time'"
[label]="'De :'"
@@ -20,10 +21,11 @@
[status]="getStatus(hour)"
[statusText]="getStatusText(hour)"
[(value)]="hour.start"
- (finishedEditing)="submitForm()"
+ (valueChange)="submitForm()"
/>
<app-input
+ class="time"
[id]="day.name + 'To'"
[type]="'time'"
[label]="'Jusqu’à :'"
@@ -31,12 +33,11 @@
[status]="getStatus(hour)"
[statusText]="getStatusText(hour)"
[(value)]="hour.end"
- (finishedEditing)="submitForm()"
+ (valueChange)="submitForm()"
/>
<app-v3-button
*ngIf="day.hours.length === 2 && index === 1"
- style="margin-top: 3px"
[variant]="buttonTypeEnumV3.Secondary"
[label]="'Supprimer'"
[iconName]="'delete'"
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.scss b/src/app/shared/components/hour-picker/hour-picker.component.scss
index a782a72abfba9b37df5231708a8a51b0d8610aef..d3b54aecffe63bffc91a2ecad9f92f3bb840f2d0 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -3,25 +3,20 @@
@import 'breakpoint';
.days {
- display: grid;
- row-gap: 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
.day {
display: flex;
- padding: 12px 0px;
flex-direction: column;
- align-items: flex-start;
+ padding: 12px 0px;
gap: 12px;
- align-self: stretch;
border-radius: 4px;
border: 1px solid $grey-6;
.dayHeader {
padding-inline: 8px;
-
- ::ng-deep app-switch span {
- text-transform: capitalize;
- }
}
.dayContent {
@@ -38,12 +33,10 @@
display: flex;
gap: 24px;
align-items: center;
+ flex-wrap: wrap;
- ::ng-deep input {
+ .time {
width: 150px;
- @media #{$tablet} {
- width: unset;
- }
}
}
}
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
index a7cdcf28743742410c2491c8cadf296bffcfaabf..24bb8d1cd5c6a1ab49f3f9182768ff69cfad8075 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
@@ -1,85 +1,40 @@
-<div class="typeContainer">
- <div class="collapse" [ngClass]="{ notCollapsed: !showPublic }">
- <div class="collapseHeader" tabindex="0" (click)="togglePublic()" (keyup.enter)="togglePublic()">
- <app-svg-icon [iconClass]="'icon-52'" [type]="'ico'" [icon]="structureTypeIconEnum.public" />
- <div class="titleCollapse">
- {{ structureTypeCategoryEnum.public }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'" />
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'" />
- </svg>
- </div>
- </div>
- <div *ngIf="showPublic" class="btn-grid">
- <span *ngFor="let type of publicTypes">
- <app-button
- [extraClass]="type._id === pickedTypeId ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="type.name"
- (action)="pickStructureType(type._id)"
- />
- </span>
+<form>
+ <div class="title" style="gap: 12px">
+ <h4>{{ structureTypeCategoryEnum.public }}</h4>
+ <div class="btn-grid">
+ <app-v3-tag-item
+ *ngFor="let type of publicTypes"
+ [iconName]="type._id === pickedTypeId ? 'check' : null"
+ [label]="type.name"
+ [color]="type._id === pickedTypeId ? 'black' : 'white'"
+ (action)="pickStructureType(type._id)"
+ />
</div>
</div>
- <div class="collapse" [ngClass]="{ notCollapsed: !showPrivate }">
- <div class="collapseHeader" tabindex="0" (click)="togglePrivate()" (keyup.enter)="togglePrivate()">
- <app-svg-icon [iconClass]="'icon-52'" [type]="'ico'" [icon]="structureTypeIconEnum.private" />
- <div class="titleCollapse">
- {{ structureTypeCategoryEnum.private }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'" />
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'" />
- </svg>
- </div>
- </div>
- <div *ngIf="showPrivate" class="btn-grid">
- <span *ngFor="let type of privateTypes">
- <app-button
- [extraClass]="type._id === pickedTypeId ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="type.name"
- (action)="pickStructureType(type._id)"
- />
- </span>
+
+ <div class="title" style="gap: 12px">
+ <h4>{{ structureTypeCategoryEnum.private }}</h4>
+ <div class="btn-grid">
+ <app-v3-tag-item
+ *ngFor="let type of privateTypes"
+ [iconName]="type._id === pickedTypeId ? 'check' : null"
+ [label]="type.name"
+ [color]="type._id === pickedTypeId ? 'black' : 'white'"
+ (action)="pickStructureType(type._id)"
+ />
</div>
</div>
- <div class="collapse" [ngClass]="{ notCollapsed: !showPrivateLucrative }">
- <div
- class="collapseHeader"
- tabindex="0"
- (click)="togglePrivateLucrative()"
- (keyup.enter)="togglePrivateLucrative()"
- >
- <app-svg-icon [iconClass]="'icon-52'" [type]="'ico'" [icon]="structureTypeIconEnum.privateLucrative" />
- <div class="titleCollapse">
- {{ structureTypeCategoryEnum.privateLucrative }}
- </div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'" />
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'" />
- </svg>
- </div>
- </div>
- <div *ngIf="showPrivateLucrative" class="btn-grid">
- <span *ngFor="let type of privateLucrativeTypes">
- <app-button
- [extraClass]="type._id === pickedTypeId ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="type.name"
- (action)="pickStructureType(type._id)"
- />
- </span>
+
+ <div class="title" style="gap: 12px">
+ <h4>{{ structureTypeCategoryEnum.privateLucrative }}</h4>
+ <div class="btn-grid">
+ <app-v3-tag-item
+ *ngFor="let type of privateLucrativeTypes"
+ [iconName]="type._id === pickedTypeId ? 'check' : null"
+ [label]="type.name"
+ [color]="type._id === pickedTypeId ? 'black' : 'white'"
+ (action)="pickStructureType(type._id)"
+ />
</div>
</div>
-</div>
+</form>
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
deleted file mode 100644
index 023d3ec4857dc2f204b52723309728e6d39a09d6..0000000000000000000000000000000000000000
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import 'typography';
-@import 'color';
-@import 'shapes';
-@import 'breakpoint';
-
-.typeContainer {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-
- .collapse {
- border: 1px solid $grey-5;
- border-radius: 4px;
- @media #{$small-phone} {
- width: 95% !important;
- }
- &.notCollapsed {
- background: $grey-9;
- .logo {
- .hide {
- display: none;
- }
- .show {
- display: block;
- }
- }
- }
- .collapseHeader {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- height: 65px;
- padding: 0 16px 0 8px;
- cursor: pointer;
- .titleCollapse {
- width: 100%;
- @include font-bold-14;
- color: $grey-1;
- }
- .logo {
- height: 24px;
- width: 24px;
- svg {
- width: 100%;
- height: 100%;
- fill: $grey-1;
- }
- }
- }
-
- .btn-grid {
- padding: 0px 1rem 1rem;
- user-select: none;
- }
-
- .logo,
- .titleCollapse {
- .hide {
- display: block;
- }
- .show {
- display: none;
- }
- }
- }
-}
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
index 395c0c44963235557d3516a1e2376a4a168863d2..e2991ec4e8cc34d47fa69d6e5fe53ea98d4608b2 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
@@ -2,29 +2,20 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { StructureType } from '../../../models/structureType.model';
import { StructureTypeService } from '../../../services/structure-type.service';
import { StructureCategoryEnum } from '../../enum/structureCategory.enum';
-import { StructureCategoryIconEnum } from '../../enum/structureCategoryIcon.enum';
import { ButtonType } from '../button/buttonType.enum';
@Component({
selector: 'app-structure-type-picker',
templateUrl: './structure-type-picker.component.html',
- styleUrls: ['./structure-type-picker.component.scss'],
})
export class StructureTypePickerComponent implements OnInit {
- public pickedCategory: string;
public publicTypes: StructureType[];
public privateTypes: StructureType[];
public privateLucrativeTypes: StructureType[];
@Input() public pickedTypeId?: string;
@Output() selectedType: EventEmitter<string> = new EventEmitter<string>();
- // Collapse var
- public showPublic: boolean;
- public showPrivate: boolean;
- public showPrivateLucrative: boolean;
-
public buttonTypeEnum = ButtonType;
- public structureTypeIconEnum = StructureCategoryIconEnum;
public structureTypeCategoryEnum = StructureCategoryEnum;
constructor(private structureTypeService: StructureTypeService) {}
@@ -39,45 +30,6 @@ export class StructureTypePickerComponent implements OnInit {
this.privateLucrativeTypes = types.filter(
(type) => type.category === this.structureTypeCategoryEnum.privateLucrative,
);
- if (this.pickedTypeId) {
- this.initPickedType(this.pickedTypeId);
- }
- });
- }
-
- public togglePublic(): void {
- this.pickedCategory = this.structureTypeCategoryEnum.public;
- this.showPublic = !this.showPublic;
- this.showPrivate = false;
- this.showPrivateLucrative = false;
- }
- public togglePrivate(): void {
- this.pickedCategory = this.structureTypeCategoryEnum.private;
- this.showPrivate = !this.showPrivate;
- this.showPrivateLucrative = false;
- this.showPublic = false;
- }
- public togglePrivateLucrative(): void {
- this.pickedCategory = this.structureTypeCategoryEnum.privateLucrative;
- this.showPrivateLucrative = !this.showPrivateLucrative;
- this.showPrivate = false;
- this.showPublic = false;
- }
-
- public initPickedType(pickedTypeId: string): void {
- this.structureTypeService.getStructureTypeById(pickedTypeId).subscribe((structureType) => {
- this.pickedCategory = structureType.category;
- switch (structureType.category) {
- case this.structureTypeCategoryEnum.public:
- this.togglePublic();
- break;
- case this.structureTypeCategoryEnum.private:
- this.togglePrivate();
- break;
- case this.structureTypeCategoryEnum.privateLucrative:
- this.togglePrivateLucrative();
- break;
- }
});
}
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.html b/src/app/shared/components/training-type-picker/training-type-picker.component.html
index 1cdc832689eaa61afc22f2e9c3b3f8372696a4e4..e3c46133304c95849c2e29ad8190a5b826b52539 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.html
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html
@@ -7,19 +7,18 @@
[indeterminate]="getCategoryCheckboxStatus(category) === 'halfChecked'"
(action)="pickAllCategory(category); $event.stopPropagation()"
/>
- {{ category.name }}
+ <span class="titleCollapse">{{ category.name }}</span>
</div>
</app-collapse-header>
<app-collapse-content>
<div class="inputSection btn-grid">
- <ng-container *ngFor="let module of category.modules">
- <app-button
- [extraClass]="isModulePicked(category, module) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="module.name"
- (action)="pickChoice(category, module)"
- />
- </ng-container>
+ <app-v3-tag-item
+ *ngFor="let module of category.modules"
+ [iconName]="isModulePicked(category, module) ? 'check' : null"
+ [label]="module.name"
+ [color]="isModulePicked(category, module) ? 'black' : 'white'"
+ (action)="pickChoice(category, module)"
+ />
</div>
</app-collapse-content>
</app-collapse>
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.scss b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
index 4e313411831131c1fbe7b4492250b398068a22fa..0f0a584cdcdbb6397aab225c2aa6489dbc3c97aa 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.scss
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
@@ -7,20 +7,20 @@
.trainingContainer {
display: flex;
flex-direction: column;
- gap: 0.5rem;
+ gap: 1rem;
.collapseHeader {
display: flex;
align-items: center;
- padding: 0.5rem 1.5rem;
- gap: 0.5rem;
+ padding: 8px 12px;
+ gap: 1.5rem;
.checkbox {
width: 2.25rem;
margin-top: 0.2rem;
}
.titleCollapse {
- @include font-bold-14;
+ @include font-bold-16;
color: $grey-1;
}
}
diff --git a/src/app/shared/components/v3/input/input.component.html b/src/app/shared/components/v3/input/input.component.html
index 3205370e6e6d6bb89028f9a508d1e5e873c5f9ba..9159e8e9ab7005393b3095752bc57af34f353542 100644
--- a/src/app/shared/components/v3/input/input.component.html
+++ b/src/app/shared/components/v3/input/input.component.html
@@ -1,4 +1,4 @@
-<div class="container" [ngClass]="{ disabled: disabled }">
+<div class="container" [ngClass]="{ disabled: disabled, wide: wide }">
<div class="label">
<label [ngClass]="status" [htmlFor]="id">{{ label }}</label>
<span *ngIf="description" class="description" [ngClass]="{ disabled: disabled }">{{ description }}</span>
@@ -11,6 +11,7 @@
[disabled]="disabled"
[autocomplete]="autocomplete"
[ngClass]="classes"
+ [placeholder]="placeholder"
[(ngModel)]="value"
(ngModelChange)="onChange()"
(blur)="onFinishedEditing()"
diff --git a/src/app/shared/components/v3/input/input.component.scss b/src/app/shared/components/v3/input/input.component.scss
index 41f90766cca8aa1de5d5508d96a437b6f4ff9115..c881fb554a8dfc493be0db0317a4bd58319bf343 100644
--- a/src/app/shared/components/v3/input/input.component.scss
+++ b/src/app/shared/components/v3/input/input.component.scss
@@ -1,5 +1,6 @@
@import 'color';
@import 'typography';
+@import 'breakpoint';
.container {
display: flex;
@@ -8,6 +9,10 @@
gap: 8px;
max-width: 300px;
+ &.wide {
+ max-width: unset;
+ }
+
&.disabled {
cursor: not-allowed;
label {
diff --git a/src/app/shared/components/v3/input/input.component.ts b/src/app/shared/components/v3/input/input.component.ts
index 62b1405e67344180850307381bcbd924a0f3cdcb..69c94e0da2c1c25aae60fbbfe1668f813245a4a1 100644
--- a/src/app/shared/components/v3/input/input.component.ts
+++ b/src/app/shared/components/v3/input/input.component.ts
@@ -16,11 +16,15 @@ export class InputV3Component implements OnInit {
/** If set to 'on', enables autocomplete of the input DOM */
@Input() autocomplete: 'on' | 'off' = 'off';
- /** Label for the radio */
+ /** Label for the input */
@Input() label?: string;
+ /** Affect the height of the input */
@Input() size?: 'small' | 'large';
+ /** If true, removes the max-width of the component to take 100% width */
+ @Input() wide?: boolean;
+
/** Additional label description */
@Input() description?: string;
@@ -30,6 +34,9 @@ export class InputV3Component implements OnInit {
/** Additional text to display */
@Input() statusText?: string;
+ /** Text for placeholder */
+ @Input() placeholder?: string = '';
+
@Input() value: string;
/** Triggers when input changes */
@@ -44,7 +51,7 @@ export class InputV3Component implements OnInit {
}
public get classes(): string {
- return [this.size, this.status].join(' ');
+ return [this.size, this.status, this.wide ? 'wide' : ''].join(' ');
}
public onChange(): void {
diff --git a/src/app/shared/components/v3/input/input.stories.ts b/src/app/shared/components/v3/input/input.stories.ts
index 40150f7c426e582fb69eefb729684333bafa3468..47180bbae6bdd92cf5504837993ac8a761acaed1 100644
--- a/src/app/shared/components/v3/input/input.stories.ts
+++ b/src/app/shared/components/v3/input/input.stories.ts
@@ -27,6 +27,13 @@ export const Input: Story = {
},
};
+export const InputWide: Story = {
+ args: {
+ ...Input.args,
+ wide: true,
+ },
+};
+
export const InputWithDescription: Story = {
args: {
...Input.args,
diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.scss b/src/app/shared/components/v3/search-bar/search-bar.component.scss
index dae21623968111184cbfef9e070bd68d4e0c82a4..3e9e585b01e1c7c8f49788e0b3519d866ec71edb 100644
--- a/src/app/shared/components/v3/search-bar/search-bar.component.scss
+++ b/src/app/shared/components/v3/search-bar/search-bar.component.scss
@@ -4,6 +4,8 @@
.search-bar {
display: flex;
align-items: center;
+ flex-direction: row;
+ gap: 0;
input {
box-sizing: border-box;
diff --git a/src/app/shared/components/v3/textarea/textarea.component.html b/src/app/shared/components/v3/textarea/textarea.component.html
index a1a687f29705798353ac392b7d550abe251b5fba..be76d2d7e1e1890579359e852230dfee42799db0 100644
--- a/src/app/shared/components/v3/textarea/textarea.component.html
+++ b/src/app/shared/components/v3/textarea/textarea.component.html
@@ -13,7 +13,7 @@
(input)="onValueChange($event)"
></textarea>
- <div class="count">{{ value.length }} / {{ maxLength }}</div>
+ <div class="count">{{ value?.length }} / {{ maxLength }}</div>
<div *ngIf="status && statusText" class="status" [ngClass]="status">
<img *ngIf="status === 'error'" src="assets/ico/error-rounded.svg" alt="" />
<img *ngIf="status === 'success'" src="assets/ico/success-rounded.svg" alt="" />
diff --git a/src/app/shared/components/v3/textarea/textarea.component.scss b/src/app/shared/components/v3/textarea/textarea.component.scss
index e8c4a66c7f6a76144fc783734c47c82778703d07..01fe84bad24ac40a7fdd9aedc632449747a31bdb 100644
--- a/src/app/shared/components/v3/textarea/textarea.component.scss
+++ b/src/app/shared/components/v3/textarea/textarea.component.scss
@@ -40,6 +40,7 @@
padding: 8px 0 8px 16px;
font-size: $font-size-small;
transition: all 0.3s ease-in-out;
+ background: $grey-10;
&:focus {
outline: none;
diff --git a/src/app/shared/components/v3/textarea/textarea.component.ts b/src/app/shared/components/v3/textarea/textarea.component.ts
index 21bfa724cdf2cc01fc3b2c91d09710f7cf4811ab..28fe1f149032908a1ee3a89c7f5f10444c437798 100644
--- a/src/app/shared/components/v3/textarea/textarea.component.ts
+++ b/src/app/shared/components/v3/textarea/textarea.component.ts
@@ -26,7 +26,8 @@ export class TextareaV3Component {
/** Additional text to display */
@Input() statusText?: string;
- @Input() placeholder?: string;
+ /** Placeholder */
+ @Input() placeholder?: string = '';
/** Value */
@Input() value = '';
diff --git a/src/app/shared/components/yes-no/yes-no.component.html b/src/app/shared/components/yes-no/yes-no.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..59d750ff17204740c8e04bcf4a3e6707d4ea895f
--- /dev/null
+++ b/src/app/shared/components/yes-no/yes-no.component.html
@@ -0,0 +1,14 @@
+<div class="content">
+ <app-v3-tag-item
+ [iconName]="selected ? 'check' : null"
+ [label]="'Oui'"
+ [color]="selected ? 'black' : 'white'"
+ (action)="selected = true; clicked()"
+ />
+ <app-v3-tag-item
+ [iconName]="selected !== null && !selected ? 'check' : null"
+ [label]="'Non'"
+ [color]="selected !== null && !selected ? 'black' : 'white'"
+ (action)="selected = false; clicked()"
+ />
+</div>
diff --git a/src/app/shared/components/yes-no/yes-no.component.scss b/src/app/shared/components/yes-no/yes-no.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1ea9e9cca4b8869c6074cbfcb8f4a159d5d5c236
--- /dev/null
+++ b/src/app/shared/components/yes-no/yes-no.component.scss
@@ -0,0 +1,5 @@
+.content {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+}
diff --git a/src/app/shared/components/yes-no/yes-no.component.ts b/src/app/shared/components/yes-no/yes-no.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8b0867da341970395c833051bb966a6b1444d36
--- /dev/null
+++ b/src/app/shared/components/yes-no/yes-no.component.ts
@@ -0,0 +1,17 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-yes-no',
+ templateUrl: './yes-no.component.html',
+ styleUrls: ['./yes-no.component.scss'],
+})
+export class YesNoComponent {
+ /** Selected or not */
+ @Input({ required: true }) selected: boolean = null;
+
+ @Output() selectedEvent = new EventEmitter<boolean>();
+
+ public clicked(): void {
+ this.selectedEvent.emit(this.selected);
+ }
+}
diff --git a/src/app/shared/components/yes-no/yes-no.stories.ts b/src/app/shared/components/yes-no/yes-no.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b943a2adef871a6bceec291ee13ff3b9a4563490
--- /dev/null
+++ b/src/app/shared/components/yes-no/yes-no.stories.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../svg-icon/svg-icon.component';
+import { TagItemV3Component } from '../v3/tag-item/tag-item.component';
+import { YesNoComponent } from './yes-no.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<YesNoComponent> = {
+ title: 'Form/Yes No',
+ component: YesNoComponent,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [TagItemV3Component, SvgIconComponent],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<YesNoComponent>;
+
+export const YesNo: Story = {
+ args: {},
+};
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index abe09765ebf7a478bb8f878824553b081979330a..81b2f0536221714716b6ff915e3eed78a391232d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -11,6 +11,7 @@ import { RadioOptionComponent } from './components/radio-option/radio-option.com
import { InputV3Component } from './components/v3/input/input.component';
import { RadioV3Component } from './components/v3/radio/radio.component';
import { TextareaV3Component } from './components/v3/textarea/textarea.component';
+import { YesNoComponent } from './components/yes-no/yes-no.component';
import { SharedDirectives } from './directives';
import { SharedPipes } from './pipes';
@NgModule({
@@ -26,6 +27,7 @@ import { SharedPipes } from './pipes';
InputV3Component,
TextareaV3Component,
RadioOptionComponent,
+ YesNoComponent,
],
exports: [
...SharedPipes,
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index d546d55f02bc0acc6b92fc2560a4aaf502ce03ab..1ee5d70610b5946eb33317be2b60801721dd6635 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -16,8 +16,12 @@ import { PersonalOffer } from './../models/personalOffer.model';
providedIn: 'root',
})
export class Utils {
- public modifyPhoneInput(form: UntypedFormGroup, controlName: string, target: EventTarget): void {
- const phoneNumber = (target as HTMLInputElement).value;
+ // V3REMOVE : supprimer le cas EventTarget
+ public modifyPhoneInput(form: UntypedFormGroup, controlName: string, target: EventTarget | string): void {
+ if (target['value']) target = (target as HTMLInputElement).value;
+ const phoneNumber = target as string;
+ form.get(controlName).setValue(phoneNumber);
+
// Take length of phone number without spaces.
const phoneNoSpace = phoneNumber.replace(/\s/g, '');
// Check to refresh every 2 number.
diff --git a/src/assets/form/profileSkip.svg b/src/assets/form/profileSkip.svg
index 646b246703944d3b475d4ee2704fd2f0e554e37c..ff870c287bb0fade821f23c7a98b12a6426d0959 100644
--- a/src/assets/form/profileSkip.svg
+++ b/src/assets/form/profileSkip.svg
@@ -1,98 +1,212 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
- <g clip-path="url(#clip0_14133_116819)">
+ <rect width="200" height="200" fill="white" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M120.104 52.7464C120.131 52.7466 120.159 52.7467 120.187 52.7467C120.214 52.7467 120.242 52.7466 120.27 52.7464H190.285V52.72C190.514 52.7374 190.745 52.7462 190.978 52.7462C195.961 52.7462 200 48.7067 200 43.7238C200 38.9571 196.304 35.0537 191.621 34.724C191.654 34.2581 191.671 33.7878 191.671 33.3134C191.671 22.5809 182.971 13.8806 172.238 13.8806C171.662 13.8806 171.092 13.9056 170.528 13.9548C166.088 5.65012 157.332 0 147.256 0C132.691 0 120.883 11.8077 120.883 26.3731L120.883 26.3916C120.652 26.3796 120.42 26.3735 120.187 26.3735C112.904 26.3735 107 32.2774 107 39.5601C107 46.6106 112.533 52.3687 119.494 52.7288V52.7464H120.104Z"
+ fill="#FFDDDD" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M10.8947 90.1842C5.43002 90.1842 1 85.7542 1 80.2895C1 74.8248 5.43002 70.3947 10.8947 70.3947C12.9017 70.3947 14.7691 70.9922 16.3287 72.0191C16.0098 70.4971 15.8421 68.9194 15.8421 67.3026C15.8421 54.6655 26.0865 44.4211 38.7237 44.4211C41.0154 44.4211 43.2284 44.758 45.3159 45.3849C50.1664 40.2235 57.0555 37 64.6974 37C79.3838 37 91.2895 48.9057 91.2895 63.5921C91.2895 66.5533 90.8055 69.4014 89.9123 72.0617C92.9366 73.6455 95.0003 76.8141 95.0003 80.4648C95.0003 85.7001 90.7562 89.9441 85.5209 89.9441C85.3816 89.9441 85.2431 89.9411 85.1053 89.9352V90.1842H64.6974H38.7237H10.8947Z"
+ fill="#FFDDDD" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M172.34 38.8476C172.338 38.8476 172.336 38.8476 172.334 38.8476C172.332 38.8476 172.33 38.8476 172.328 38.8476H160.562H159.973V38.8059C157.976 38.5203 156.441 36.8031 156.441 34.7274C156.441 32.4518 158.286 30.6071 160.562 30.6071C161.3 30.6071 161.994 30.8015 162.593 31.142C162.419 30.4033 162.327 29.633 162.327 28.8413C162.327 23.3149 166.807 18.835 172.334 18.835C176.412 18.835 179.92 21.2741 181.479 24.7731C181.761 24.7387 182.048 24.721 182.34 24.721C185.984 24.721 188.983 27.4802 189.363 31.0232C189.908 30.7567 190.521 30.6071 191.169 30.6071C193.445 30.6071 195.29 32.4518 195.29 34.7274C195.29 37.0029 193.445 38.8476 191.169 38.8476C190.969 38.8476 190.773 38.8334 190.581 38.8059V38.8476H182.34H172.34Z"
+ fill="white" />
+ <path
+ d="M70.7209 52.9167C70.106 52.8694 69.5856 52.7038 69.1362 52.4436L64.027 49.487C64.4765 49.7472 64.9968 49.9127 65.6118 49.9837L70.7209 52.9167Z"
+ fill="#FF5D5C" />
+ <path
+ d="M59.655 55.7071L54.5459 52.7504C53.2686 51.9935 52.2279 50.5507 51.6838 48.0434L56.793 51.0001C57.3133 53.5073 58.3541 54.9502 59.655 55.7071Z"
+ fill="#FF5D5C" />
+ <path
+ d="M31.932 26.6375L65.2359 7.40732C66.0638 6.93426 66.797 6.88695 67.3411 7.19444L72.4502 10.1511C71.9062 9.84362 71.1729 9.89093 70.345 10.364L37.0411 29.5942C35.409 30.5403 34.1081 32.8111 34.1081 34.6797L34.179 60.6511C34.179 61.5736 34.5102 62.2359 35.0305 62.5434L29.9214 59.5867C29.401 59.2792 29.0699 58.6169 29.0699 57.6944L28.9989 31.723C28.9753 29.8544 30.2999 27.56 31.932 26.6375Z"
+ fill="#FF5D5C" />
+ <mask id="path-7-inside-1_14421_60386" fill="white">
<path
- d="M21 102.5H47.5L98 106.5H179.75C182.097 106.5 184 104.597 184 102.25C184 99.9028 182.097 98 179.75 98H175.5C174.119 98 173 96.8807 173 95.5C173 94.1193 174.119 93 175.5 93H183.75C189.687 93 194.5 88.1871 194.5 82.25V78.5C194.5 74.3579 191.142 71 187 71C182.858 71 179.5 67.6421 179.5 63.5V61C179.5 57.9624 177.038 55.5 174 55.5C170.962 55.5 168.5 53.0376 168.5 50V46.25C168.5 41.1414 172.641 37 177.75 37H185.25C188.426 37 191 34.4256 191 31.25C191 28.0744 188.426 25.5 185.25 25.5H169.5C166.186 25.5 163.5 22.8137 163.5 19.5C163.5 16.1863 160.814 13.5 157.5 13.5H113.574C112.428 13.5 111.5 12.5715 111.5 11.4262C111.5 6.22027 107.28 2 102.074 2H59.9262C54.7203 2 50.5 6.22027 50.5 11.4262C50.5 12.5715 49.5715 13.5 48.4262 13.5H36C28.5442 13.5 22.5 19.5442 22.5 27V35C22.5 38.0376 20.0376 40.5 17 40.5C13.9624 40.5 11.5 42.9624 11.5 46V47C11.5 50.5899 14.4101 53.5 18 53.5H24C28.1421 53.5 31.5 56.8579 31.5 61C31.5 65.1421 28.1421 68.5 24 68.5H17.75C10.1561 68.5 4 74.6561 4 82.25V85.5C4 94.8888 11.6112 102.5 21 102.5Z"
- fill="#E3E3E3" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M132.201 51.806H155.194H176.418H191.746V51.7836C191.941 51.7984 192.137 51.806 192.336 51.806C196.569 51.806 200 48.3746 200 44.1418C200 40.0928 196.86 36.7772 192.883 36.4968C192.911 36.1011 192.925 35.7015 192.925 35.2985C192.925 26.1817 185.535 18.791 176.418 18.791C175.928 18.791 175.442 18.8124 174.963 18.8543C171.191 11.7997 163.753 7 155.194 7C142.821 7 132.791 17.0302 132.791 29.403L132.791 29.4182C132.596 29.4081 132.399 29.403 132.201 29.403C126.015 29.403 121 34.4181 121 40.6045C121 46.5931 125.7 51.4841 131.612 51.7907V51.806H132.201Z"
- fill="#676767" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M28 37.9825C27.8347 37.9941 27.668 38 27.5 38C23.3579 38 20 34.4183 20 30C20 25.5817 23.3579 22 27.5 22C29.2006 22 30.769 22.6037 32.0271 23.6212C32.4631 16.575 38.1046 11 45 11C46.7774 11 48.4714 11.3704 50.0145 12.0409C52.7381 8.94552 56.6804 7 61.0658 7C69.2847 7 75.9474 13.8335 75.9474 22.2632C75.9474 23.6076 75.7779 24.9114 75.4596 26.1534C77.542 27.0488 79.0002 29.1187 79.0002 31.5292C79.0002 34.7595 76.3815 37.3782 73.1512 37.3782C73.1006 37.3782 73.0502 37.3775 73 37.3763V38H45H28V37.9825Z"
- fill="#676767" />
- <rect width="109.134" height="109.134" transform="matrix(0.866025 0.5 -0.866025 0.5 99.7188 90.8662)"
- fill="#A0C7F0" />
- <path
- d="M99.7216 74.0342L194.231 126.054L194.234 128.601L99.7216 183.168L5.20884 128.601L5.20904 126.053L99.7216 74.0342Z"
- fill="#4277AF" />
- <rect width="109.134" height="109.134" transform="matrix(0.866025 0.5 -0.866025 0.5 99.7188 71.4873)"
- fill="url(#paint0_linear_14133_116819)" />
- <rect width="80.5611" height="80.5611" transform="matrix(0.866025 0.5 -0.866025 0.5 99.7188 86.291)"
- fill="#769FCB" />
- <path d="M174.22 117.5C174.553 115.167 174.22 110.3 170.22 109.5C165.22 108.5 172.72 119 174.22 117.5Z"
- fill="#3D8C5C" />
- <path d="M177.72 117.5C177.553 116.167 177.82 113.7 180.22 114.5C183.22 115.5 178.721 118.5 177.72 117.5Z"
- fill="#66AF82" />
- <path d="M174.72 118C177.386 115.166 181.92 108.4 178.72 104C174.72 98.4998 172.22 120 174.72 118Z"
- fill="#66AF82" />
- <path
- d="M168.433 63.2912L171.273 54.6866C171.409 54.2768 171.791 54 172.223 54H181.734C182.561 54 183.03 54.9467 182.53 55.6051L180.303 58.5344C179.803 59.1928 180.273 60.1395 181.1 60.1395H186.62C187.506 60.1395 187.955 61.2065 187.334 61.8394L175.298 74.1242C174.521 74.9171 173.223 74.0428 173.666 73.0251L176.724 66.0039C177.012 65.3434 176.528 64.6047 175.807 64.6047H169.383C168.702 64.6047 168.22 63.9382 168.433 63.2912Z"
- fill="#FFA800" />
- <path
- d="M41.6778 49.4743L39.8415 43.5627C39.7375 43.228 39.4279 43 39.0775 43H33.0559C32.405 43 32.0265 43.736 32.4053 44.2655L33.7058 46.0834C34.0846 46.6128 33.7061 47.3488 33.0552 47.3488H29.826C29.1288 47.3488 28.7652 48.1786 29.2379 48.6912L36.6517 56.7306C37.2564 57.3863 38.3183 56.7102 37.9801 55.8849L36.23 51.615C36.0143 51.0886 36.4014 50.5116 36.9702 50.5116H40.9138C41.4529 50.5116 41.8377 49.9892 41.6778 49.4743Z"
- fill="#FFA800" />
- <path d="M44 106.623C42.0508 103.814 36.9827 98.9448 32.3045 101.941C26.4568 105.687 42.0508 110.368 44 106.623Z"
- fill="#3D8C5C" />
- <path d="M44 105C42.4072 95.2152 38.0749 78.1075 33.4877 87.9555C27.7537 100.265 40.1774 105 44 105Z"
- fill="#66AF82" />
- <path d="M127.81 55.6826H156.139V127.461L127.81 143.954L99.4805 160.444V88.6624L127.81 55.6826Z" fill="#EDF7FF" />
- <path d="M42.8164 55.6826V127.461L71.1458 143.954L99.4752 160.444V88.6624L42.8164 55.6826Z" fill="#A0C7F1" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M59.2918 89.9649C59.2918 90.3507 58.8735 90.5911 58.5402 90.397L47.0804 83.7239C46.9266 83.6343 46.832 83.4698 46.832 83.2918V69.9439C46.832 69.5581 47.2503 69.3177 47.5836 69.5118L59.0434 76.1849C59.1972 76.2745 59.2918 76.439 59.2918 76.617V89.9649ZM74.6481 99.5496C74.9814 99.7437 75.3997 99.5033 75.3997 99.1175V85.7668C75.3997 85.5888 75.3051 85.4242 75.1512 85.3346L63.6915 78.6642C63.3582 78.4701 62.94 78.7106 62.94 79.0963V92.4444C62.94 92.6224 63.0346 92.7869 63.1884 92.8765L74.6481 99.5496ZM90.771 108.706C91.1043 108.9 91.5225 108.659 91.5225 108.273V94.9224C91.5225 94.7444 91.4278 94.5798 91.274 94.4902L79.8113 87.8196C79.478 87.6256 79.0598 87.8661 79.0598 88.2518V101.603C79.0598 101.781 79.1545 101.945 79.3084 102.035L90.771 108.706ZM90.771 130.231C91.1043 130.425 91.5225 130.184 91.5225 129.799V116.448C91.5225 116.27 91.4278 116.105 91.274 116.016L79.8113 109.345C79.478 109.151 79.0598 109.391 79.0598 109.777V123.128C79.0598 123.306 79.1545 123.471 79.3084 123.56L90.771 130.231ZM75.3997 120.646C75.3997 121.031 74.9815 121.272 74.6482 121.078L63.1884 114.407C63.0346 114.318 62.94 114.153 62.94 113.975V100.624C62.94 100.238 63.3582 99.998 63.6915 100.192L75.1512 106.863C75.3051 106.952 75.3997 107.117 75.3997 107.295V120.646ZM58.5403 111.925C58.8736 112.119 59.2918 111.879 59.2918 111.493V98.142C59.2918 97.964 59.1972 97.7995 59.0433 97.7099L47.5836 91.0394C47.2502 90.8454 46.832 91.0859 46.832 91.4716V104.822C46.832 105 46.9267 105.165 47.0805 105.255L58.5403 111.925Z"
- fill="#405C76" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M59.2918 84.8462L55.2678 88.4914L47.0804 83.7238C46.9266 83.6342 46.832 83.4697 46.832 83.2917V81.6267L54.4697 73.5215L59.0434 76.1848C59.1972 76.2744 59.2918 76.4389 59.2918 76.6169V84.8462ZM50.5495 92.7657L47.5836 91.0393C47.2502 90.8453 46.832 91.0858 46.832 91.4715V96.1333L50.5495 92.7657ZM48.906 106.317L58.2356 97.2397L59.0433 97.7098C59.1972 97.7994 59.2918 97.9639 59.2918 98.1419V110.865L58.1092 111.674L48.906 106.317ZM65.8714 115.969L63.3859 114.522L74.7373 106.621L75.1512 106.862C75.3051 106.952 75.3997 107.117 75.3997 107.295V109.821L65.8714 115.969ZM91.5225 99.4197L83.5989 104.532L80.408 102.675L91.5225 94.939V99.4197ZM72.2231 83.6301L75.1512 85.3345C75.3051 85.4241 75.3997 85.5887 75.3997 85.7667V99.1174C75.3997 99.5031 74.9814 99.7436 74.6481 99.5495L63.1884 92.8764C63.0899 92.819 63.0157 92.731 62.975 92.6283L72.2231 83.6301ZM65.1677 79.5233L62.94 81.5414V79.0962C62.94 78.7105 63.3582 78.47 63.6915 78.6641L65.1677 79.5233ZM86.9328 91.9638L79.0598 97.3476V88.2517C79.0598 87.866 79.478 87.6255 79.8113 87.8195L86.9328 91.9638ZM69.7464 103.716L63.6915 100.192C63.3582 99.9979 62.94 100.238 62.94 100.624V108.371L69.7464 103.716Z"
- fill="#333B51" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M139.47 83.831C139.136 84.0251 138.718 83.7846 138.718 83.3989V70.0509C138.718 69.8729 138.813 69.7083 138.967 69.6187L150.426 62.9483C150.76 62.7542 151.178 62.9947 151.178 63.3804V76.7284C151.178 76.9064 151.083 77.071 150.929 77.1606L139.47 83.831ZM139.47 104.671C139.136 104.865 138.718 104.624 138.718 104.239V90.888C138.718 90.71 138.813 90.5454 138.967 90.4559L150.426 83.7854C150.76 83.5914 151.178 83.8318 151.178 84.2175V97.5656C151.178 97.7436 151.083 97.9081 150.929 97.9977L139.47 104.671ZM111.48 119.447C111.48 119.832 111.899 120.073 112.232 119.879L123.692 113.208C123.846 113.119 123.94 112.954 123.94 112.776V99.428C123.94 99.0423 123.522 98.8019 123.189 98.9959L111.729 105.666C111.575 105.756 111.48 105.92 111.48 106.098V119.447ZM112.232 99.0391C111.899 99.2331 111.48 98.9926 111.48 98.6069V85.2589C111.48 85.0809 111.575 84.9163 111.729 84.8268L123.189 78.1563C123.522 77.9622 123.94 78.2027 123.94 78.5884V91.9364C123.94 92.1144 123.846 92.279 123.692 92.3686L112.232 99.0391Z"
- fill="#FF9C9B" />
- <path
- d="M138.479 137.788C138.479 137.966 138.385 138.131 138.231 138.22L128.475 143.916L127.502 144.484C127.169 144.679 126.75 144.438 126.75 144.052V120.947C126.75 120.769 126.844 120.605 126.998 120.515L137.727 114.254C138.061 114.059 138.479 114.299 138.479 114.685V137.788Z"
- fill="#333333" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M138.42 138.022C138.458 137.951 138.479 137.871 138.479 137.788V114.685C138.479 114.299 138.06 114.059 137.727 114.253L136.719 114.841C136.719 114.852 136.72 114.862 136.72 114.873V136.691C136.72 136.88 136.827 137.053 136.996 137.138L138.166 137.723C138.295 137.787 138.382 137.898 138.42 138.022Z"
- fill="#606060" />
- <path
- d="M41.4996 54.5885L69.829 21.6087C70.1607 21.2221 70.6454 21 71.1531 21H99.4826C100.074 21 100.596 21.2971 100.911 21.7501L156.378 53.9423C156.837 54.0058 157.238 54.2481 157.512 54.6001L157.526 54.6058H157.52C157.748 54.9059 157.893 55.2751 157.893 55.6819C157.893 56.657 157.108 57.4445 156.141 57.4445H128.611L100.807 89.8157C100.461 90.2195 99.9759 90.4273 99.4854 90.4273C99.0787 90.4273 98.669 90.2859 98.3401 89.9974L42.2468 57.407C42.0419 57.3378 41.8486 57.2282 41.6784 57.0782C40.9486 56.4406 40.8678 55.3271 41.5025 54.5885H41.4996Z"
- fill="#FF5D5C" />
- <path
- d="M99.4797 90.4244C99.0729 90.4244 98.6632 90.283 98.3344 89.9945L42.2468 57.407C42.0419 57.3378 41.8486 57.2282 41.6784 57.0782C40.9486 56.4406 40.8678 55.3271 41.5025 54.5885L69.829 21.6087C70.1607 21.2221 70.6454 21 71.1531 21H71.632L127.812 53.9164L127.258 59.0226L100.807 89.8157C100.461 90.2195 99.9759 90.4273 99.4854 90.4273L99.4797 90.4244Z"
- fill="#DA3635" />
- <path
- d="M99.4797 90.4244C99.0729 90.4244 98.6632 90.283 98.3344 89.9945L42.2468 57.407C42.0419 57.3378 41.8486 57.2282 41.6784 57.0782C40.9486 56.4406 40.8678 55.3271 41.5025 54.5885L69.829 21.6087C70.1607 21.2221 70.6454 21 71.1531 21H71.632L127.812 53.9164L127.258 59.0226L100.807 89.8157C100.461 90.2195 99.9759 90.4273 99.4854 90.4273L99.4797 90.4244Z"
- fill="#DA3635" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M156.052 54.4755C156.437 54.5698 156.773 54.7933 157.012 55.1001L157.026 55.1058H157.02C157.248 55.4059 157.393 55.7751 157.393 56.1819C157.393 57.157 156.608 57.9446 155.641 57.9446H128.111L116.535 71.4225L99 90V86.5L128 54L156.052 54.4755Z"
- fill="#DA3635" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M107.03 82.649L100.807 89.8156C100.464 90.2154 99.9854 90.423 99.5 90.4271V85.9999L127.826 54.2554L127.98 58.0229L107.03 82.649Z"
- fill="#FF5D5C" />
- <path d="M74.1914 59.6488V42.38L81.5767 38.0815V50.6076L74.1914 59.6488Z" fill="#EDF7FF" />
- <path d="M66.8008 55.4629L74.186 59.7613V42.38L66.8008 38.0815V55.4629Z" fill="#A0C7F1" />
- <path d="M66.8008 38.0816L74.186 33.7803L81.5713 38.0816L74.186 42.3801L66.8008 38.0816Z" fill="white" />
- <path d="M69.6328 38.0851L74.2226 35.2793L78.8123 38.0851L74.2226 40.889L69.6328 38.0851Z" fill="#A0C7F1" />
- <path d="M69.6328 38.0851L74.2226 35.2793V38.0851V40.889L69.6328 38.0851Z" fill="#769FCB" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M48.7188 70.173L47.5836 69.512C47.2503 69.3179 46.832 69.5584 46.832 69.9441V83.292C46.832 83.47 46.9266 83.6346 47.0804 83.7241L58.5402 90.3973C58.8735 90.5914 59.2918 90.3509 59.2918 89.9652V89.2929L48.9671 83.2808C48.8133 83.1912 48.7188 83.0267 48.7188 82.8487V70.173ZM64.8267 79.3252V92.0013C64.8267 92.1792 64.9213 92.3438 65.0751 92.4334L75.3997 98.4455V99.1178C75.3997 99.5035 74.9814 99.744 74.6481 99.5499L63.1884 92.8767C63.0346 92.7872 62.94 92.6226 62.94 92.4446V79.0965C62.94 78.7108 63.3582 78.4704 63.6915 78.6644L64.8267 79.3252ZM80.9466 88.4805V101.16C80.9466 101.338 81.0412 101.502 81.1951 101.592L91.5225 107.602V108.274C91.5225 108.659 91.1043 108.9 90.771 108.706L79.3084 102.035C79.1545 101.946 79.0598 101.781 79.0598 101.603V88.252C79.0598 87.8663 79.478 87.6259 79.8113 87.8199L80.9466 88.4805ZM80.9466 110.006V122.685C80.9466 122.863 81.0412 123.028 81.1951 123.117L91.5225 129.127V129.799C91.5225 130.185 91.1043 130.425 90.771 130.231L79.3084 123.561C79.1545 123.471 79.0598 123.306 79.0598 123.128V109.777C79.0598 109.392 79.478 109.151 79.8113 109.345L80.9466 110.006ZM64.8267 100.853L63.6915 100.192C63.3582 99.9983 62.94 100.239 62.94 100.624V113.975C62.94 114.153 63.0346 114.318 63.1884 114.407L74.6482 121.078C74.9815 121.272 75.3997 121.032 75.3997 120.646V119.974L65.0751 113.964C64.9213 113.875 64.8267 113.71 64.8267 113.532V100.853ZM48.7188 91.7004V104.379C48.7188 104.557 48.8134 104.722 48.9672 104.812L59.2918 110.821V111.493C59.2918 111.879 58.8736 112.119 58.5403 111.925L47.0805 105.255C46.9267 105.165 46.832 105.001 46.832 104.823V91.4718C46.832 91.0861 47.2502 90.8457 47.5836 91.0397L48.7188 91.7004Z"
- fill="#333333" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M151.174 66.3265L141.979 82.3682L139.466 83.8313C139.132 84.0253 138.714 83.7849 138.714 83.3992V70.0511C138.714 69.8731 138.809 69.7085 138.963 69.619L150.422 62.9485C150.756 62.7545 151.174 62.9949 151.174 63.3806V66.3265ZM111.477 116.756L120.833 100.365L123.185 98.9961C123.518 98.8021 123.936 99.0426 123.936 99.4282V112.776C123.936 112.954 123.842 113.119 123.688 113.208L112.228 119.879C111.895 120.073 111.477 119.832 111.477 119.447V116.756ZM150.267 83.876L139.641 104.569L139.466 104.671C139.132 104.865 138.714 104.625 138.714 104.239V102.256L147.083 85.7292L150.267 83.876Z"
- fill="white" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M138.718 82.3634V83.3992C138.718 83.7849 139.136 84.0253 139.47 83.8313L150.929 77.1608C151.083 77.0713 151.178 76.9067 151.178 76.7287V63.3806C151.178 62.9949 150.76 62.7545 150.426 62.9485L149.416 63.5365V75.8488C149.416 76.0268 149.322 76.1914 149.168 76.2809L138.718 82.3634ZM138.718 103.203V104.239C138.718 104.625 139.136 104.865 139.47 104.671L150.929 97.9979C151.083 97.9084 151.178 97.7438 151.178 97.5659V84.2178C151.178 83.8321 150.76 83.5916 150.426 83.7856L149.416 84.3736V96.686C149.416 96.8639 149.322 97.0285 149.168 97.1181L138.718 103.203ZM111.48 118.411L121.93 112.329C122.084 112.239 122.179 112.074 122.179 111.896V99.5841L123.189 98.9961C123.522 98.8021 123.94 99.0426 123.94 99.4282V112.776C123.94 112.954 123.846 113.119 123.692 113.208L112.232 119.879C111.899 120.073 111.48 119.832 111.48 119.447V118.411ZM111.48 97.5714V98.6072C111.48 98.9929 111.899 99.2333 112.232 99.0393L123.692 92.3688C123.846 92.2793 123.94 92.1147 123.94 91.9367V78.5886C123.94 78.203 123.522 77.9625 123.189 78.1565L122.179 78.7445V91.0568C122.179 91.2348 122.084 91.3994 121.93 91.4889L111.48 97.5714Z"
- fill="#D86867" />
- <path d="M100.219 160.5C100.385 153.5 102.819 139.8 111.219 141C121.719 142.5 102.719 162.999 100.219 160.5Z"
- fill="#66AF82" />
- <path d="M100.219 160.5C101.552 156 102.419 146.4 95.219 144C86.219 141 95.219 164.5 100.219 160.5Z"
- fill="#3D8C5C" />
- </g>
+ d="M37.0319 29.5938C35.3998 30.54 34.0989 32.8107 34.0989 34.6793L34.1698 60.6507C34.1698 62.5193 35.4944 63.2762 37.1265 62.3301L56.7825 50.9765C58.4855 58.9477 65.2267 56.2512 68.6565 54.2643C69.9101 53.5547 70.667 52.9634 70.7143 52.9161C67.2373 52.6086 66.5986 48.6112 66.6932 45.2524L70.4068 43.0999C72.0389 42.1538 73.3398 39.8831 73.3398 38.0144L73.2689 12.043C73.2689 10.1744 71.9443 9.4175 70.3122 10.3636L37.0319 29.5938Z" />
+ </mask>
+ <path
+ d="M37.0319 29.5938C35.3998 30.54 34.0989 32.8107 34.0989 34.6793L34.1698 60.6507C34.1698 62.5193 35.4944 63.2762 37.1265 62.3301L56.7825 50.9765C58.4855 58.9477 65.2267 56.2512 68.6565 54.2643C69.9101 53.5547 70.667 52.9634 70.7143 52.9161C67.2373 52.6086 66.5986 48.6112 66.6932 45.2524L70.4068 43.0999C72.0389 42.1538 73.3398 39.8831 73.3398 38.0144L73.2689 12.043C73.2689 10.1744 71.9443 9.4175 70.3122 10.3636L37.0319 29.5938Z"
+ fill="white" />
+ <path
+ d="M37.0319 29.5938L36.7811 29.1613L36.7817 29.1609L37.0319 29.5938ZM34.0989 34.6793L33.5989 34.6807V34.6793H34.0989ZM34.1698 60.6507L34.6698 60.6494V60.6507H34.1698ZM37.1265 62.3301L36.8757 61.8975L36.8764 61.8971L37.1265 62.3301ZM56.7825 50.9765L56.5324 50.5435L57.1278 50.1996L57.2714 50.872L56.7825 50.9765ZM68.6565 54.2643L68.4058 53.8316L68.4102 53.8292L68.6565 54.2643ZM70.7143 52.9161L70.7584 52.418L71.8251 52.5123L71.0679 53.2696L70.7143 52.9161ZM66.6932 45.2524L66.1934 45.2383L66.2013 44.9596L66.4425 44.8198L66.6932 45.2524ZM70.4068 43.0999L70.6576 43.5325L70.6576 43.5325L70.4068 43.0999ZM73.3398 38.0144L73.8398 38.0131V38.0144H73.3398ZM73.2689 12.043L72.7689 12.0444V12.043H73.2689ZM70.3122 10.3636L70.563 10.7962L70.5624 10.7966L70.3122 10.3636ZM37.2827 30.0264C36.5599 30.4454 35.8835 31.1769 35.3867 32.0401C34.8899 32.9033 34.5989 33.8527 34.5989 34.6793H33.5989C33.5989 33.6373 33.9584 32.517 34.52 31.5412C35.0817 30.5653 35.8718 29.6884 36.7811 29.1613L37.2827 30.0264ZM34.5989 34.6779L34.6698 60.6494L33.6698 60.6521L33.5989 34.6807L34.5989 34.6779ZM34.6698 60.6507C34.6698 61.4781 34.9589 61.9267 35.2834 62.1114C35.6094 62.2969 36.1501 62.3182 36.8757 61.8975L37.3773 62.7627C36.4709 63.2881 35.5332 63.4041 34.7888 62.9805C34.0431 62.5561 33.6698 61.6919 33.6698 60.6507H34.6698ZM36.8764 61.8971L56.5324 50.5435L57.0326 51.4095L37.3766 62.7631L36.8764 61.8971ZM57.2714 50.872C57.6825 52.7959 58.3844 54.0151 59.2094 54.7617C60.0295 55.5038 61.0176 55.8209 62.0878 55.8549C64.2659 55.9241 66.7042 54.8174 68.4058 53.8317L68.9071 54.697C67.179 55.6981 64.5318 56.9331 62.0561 56.8544C60.7995 56.8145 59.5685 56.4353 58.5385 55.5032C57.5134 54.5756 56.734 53.1427 56.2935 51.081L57.2714 50.872ZM68.4102 53.8292C69.0229 53.4823 69.5131 53.1651 69.8541 52.9301C70.0246 52.8126 70.1571 52.7162 70.2484 52.6474C70.3559 52.5665 70.3793 52.544 70.3608 52.5625L71.0679 53.2696C71.0257 53.3118 70.9367 53.381 70.8498 53.4464C70.7467 53.524 70.6028 53.6286 70.4215 53.7535C70.0587 54.0035 69.5436 54.3367 68.9028 54.6994L68.4102 53.8292ZM70.6703 53.4141C68.6921 53.2392 67.5309 51.9925 66.9001 50.414C66.2797 48.8614 66.1455 46.9409 66.1934 45.2383L67.193 45.2665C67.1464 46.9226 67.2842 48.6803 67.8287 50.0429C68.3629 51.3797 69.2595 52.2855 70.7584 52.418L70.6703 53.4141ZM66.4425 44.8198L70.1561 42.6673L70.6576 43.5325L66.944 45.685L66.4425 44.8198ZM70.1561 42.6673C70.8788 42.2484 71.5552 41.5168 72.052 40.6537C72.5489 39.7905 72.8398 38.8411 72.8398 38.0144H73.8398C73.8398 39.0564 73.4804 40.1767 72.9187 41.1525C72.357 42.1285 71.5669 43.0053 70.6576 43.5325L70.1561 42.6673ZM72.8398 38.0158L72.7689 12.0444L73.7689 12.0417L73.8398 38.0131L72.8398 38.0158ZM72.7689 12.043C72.7689 11.2156 72.4798 10.767 72.1553 10.5824C71.8293 10.3969 71.2887 10.3755 70.563 10.7962L70.0614 9.93106C70.9678 9.40561 71.9055 9.28965 72.6499 9.71323C73.3957 10.1376 73.7689 11.0018 73.7689 12.043H72.7689ZM70.5624 10.7966L37.2821 30.0268L36.7817 29.1609L70.0621 9.93071L70.5624 10.7966Z"
+ fill="#FF5D5C" mask="url(#path-7-inside-1_14421_60386)" />
+ <path
+ d="M45.4312 38.0156C45.4312 35.3664 47.2998 32.1496 49.5941 30.825C51.6756 29.6187 53.4023 30.3756 53.7098 32.5044C54.0173 30.0444 55.744 27.277 57.8255 26.0707C60.1199 24.7461 61.9885 25.8105 61.9885 28.436C61.9885 29.6187 61.6101 30.9196 60.9714 32.1259L53.7571 45.2062L46.5665 40.6411C45.8806 40.1917 45.4312 39.2929 45.4312 38.0156Z"
+ fill="#DA3635" />
+ <rect width="109.134" height="109.134" transform="matrix(0.866025 0.5 -0.866025 0.5 99.719 90.8662)" fill="#A0C7F0" />
+ <path
+ d="M99.7218 74.0342L194.232 126.054L194.235 128.601L99.7218 183.168L5.20909 128.601L5.20928 126.053L99.7218 74.0342Z"
+ fill="#4277AF" />
+ <rect width="109.134" height="109.134" transform="matrix(0.866025 0.5 -0.866025 0.5 99.719 71.4873)"
+ fill="url(#paint0_linear_14421_60386)" />
+ <circle cx="14.177" cy="14.177" r="14.177" transform="matrix(0.866025 -0.5 0.866025 0.5 69.8398 131.177)"
+ fill="#A0C7F0" />
+ <path
+ d="M85.2266 95L89.0903 96.0353L78.2199 136.604C77.934 137.671 76.8373 138.304 75.7704 138.018C74.7034 137.732 74.0703 136.636 74.3562 135.569L85.2266 95Z"
+ fill="#D6AD92" />
+ <path
+ d="M85.2266 95L89.0903 96.0353L83.6772 116.237C83.3913 117.304 82.2947 117.937 81.2277 117.651C80.1608 117.365 79.5276 116.269 79.8135 115.202L85.2266 95Z"
+ fill="#AE907B" />
+ <path
+ d="M85.2266 95L89.0903 96.0353L85.1412 110.774C84.8553 111.84 83.7586 112.474 82.6917 112.188C81.6247 111.902 80.9916 110.805 81.2774 109.738L85.2266 95Z"
+ fill="#88674F" />
+ <path
+ d="M91.2656 77L95.2635 77.1295L93.9042 119.107C93.8684 120.211 92.9445 121.077 91.8405 121.042C90.7365 121.006 89.8705 120.082 89.9063 118.978L91.2656 77Z"
+ fill="#AE907B" />
+ <path
+ d="M91.2656 77L95.2635 77.1295L94.1167 112.543C94.081 113.647 93.157 114.513 92.053 114.478C90.949 114.442 90.0831 113.518 90.1188 112.414L91.2656 77Z"
+ fill="#88674F" />
+ <path
+ d="M100.84 94.0352L104.704 92.9999L115.574 133.569C115.86 134.636 115.227 135.732 114.16 136.018C113.093 136.304 111.996 135.671 111.71 134.604L100.84 94.0352Z"
+ fill="#D6AD92" />
+ <path
+ d="M100.84 94.0352L104.704 92.9999L110.634 115.132C110.92 116.199 110.286 117.295 109.22 117.581C108.153 117.867 107.056 117.234 106.77 116.167L100.84 94.0352Z"
+ fill="#AE907B" />
+ <path
+ d="M100.84 94.0352L104.704 92.9999L109.089 109.367C109.375 110.434 108.742 111.531 107.675 111.817C106.608 112.103 105.511 111.469 105.225 110.402L100.84 94.0352Z"
+ fill="#88674F" />
+ <ellipse cx="20.1148" cy="20.3939" rx="20.1148" ry="20.3939" transform="matrix(0.866025 -0.5 0.866025 0.5 58 95.115)"
+ fill="#AE907B" />
+ <circle cx="18.7543" cy="18.7543" r="18.7543" transform="matrix(0.866025 -0.5 0.866025 0.5 60.8398 92.7548)"
+ fill="#D6AD92" />
+ <circle cx="12.4455" cy="12.4455" r="12.4455" transform="matrix(0.866025 -0.5 0.866025 0.5 71.7671 92.7549)"
+ fill="#E6BC9F" />
+ <rect width="20.1141" height="8.43723" rx="4.21861" transform="matrix(0.866025 0.5 -0.866025 0.5 125.39 134.488)"
+ fill="#DA3635" />
+ <path
+ d="M120.211 133.595C120.479 130.246 128.116 129.138 131.095 132.016L140.554 141.158C141.877 142.437 141.526 144.071 139.701 145.125C137.417 146.444 133.684 146.385 131.527 144.998L124.26 140.325C121.464 138.527 120.005 136.166 120.198 133.752L120.211 133.595Z"
+ fill="#A0C7F0" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M123.654 133.555L134.281 141.767C134.771 142.146 135.058 142.73 135.058 143.349V143.498C135.058 144.782 133.866 145.733 132.615 145.449L132.156 145.344C131.935 145.24 131.725 145.124 131.528 144.998L124.262 140.325C121.466 138.527 120.007 136.166 120.2 133.752L120.213 133.595C120.306 132.422 121.304 131.524 122.689 130.976C122.845 131.221 122.936 131.512 122.936 131.823V132.093C122.936 132.665 123.201 133.205 123.654 133.555Z"
+ fill="white" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M140.39 141.009L140.544 141.159C141.868 142.438 141.517 144.072 139.692 145.126C137.408 146.445 133.675 146.387 131.517 144.999L130.218 144.163C130.66 143.429 131.456 142.974 132.322 142.974H133.835H137.316C138.177 142.974 138.988 142.568 139.504 141.88L139.715 141.599C139.899 141.353 140.13 141.154 140.39 141.009Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M135.837 139.757C134.968 140.364 134.146 141.098 133.661 141.583C133.424 141.82 133.04 141.82 132.804 141.583C132.567 141.346 132.567 140.963 132.804 140.726C133.328 140.201 134.204 139.419 135.143 138.764C135.612 138.436 136.11 138.13 136.597 137.905C137.075 137.684 137.59 137.518 138.081 137.518C138.416 137.518 138.687 137.789 138.687 138.124C138.687 138.459 138.416 138.73 138.081 138.73C137.844 138.73 137.516 138.816 137.106 139.006C136.705 139.191 136.271 139.454 135.837 139.757Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M134.384 134.823C134.533 135.122 134.412 135.486 134.113 135.636C134.042 135.671 133.895 135.807 133.709 136.148C133.535 136.466 133.37 136.884 133.222 137.352C132.927 138.287 132.721 139.344 132.623 140.028C132.576 140.36 132.269 140.59 131.937 140.543C131.606 140.495 131.376 140.188 131.423 139.857C131.527 139.127 131.746 138.002 132.067 136.987C132.227 136.481 132.418 135.982 132.645 135.567C132.859 135.174 133.156 134.759 133.57 134.552C133.87 134.402 134.234 134.523 134.384 134.823Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M131.977 135.419C133.431 135.622 134.922 136.027 135.857 136.338C136.175 136.444 136.347 136.787 136.241 137.105C136.135 137.423 135.792 137.594 135.474 137.488C134.591 137.194 133.173 136.81 131.809 136.62C131.127 136.524 130.476 136.48 129.923 136.513C129.355 136.546 128.96 136.657 128.729 136.811C128.45 136.997 128.074 136.922 127.888 136.643C127.703 136.365 127.778 135.989 128.056 135.803C128.552 135.472 129.203 135.341 129.851 135.302C130.514 135.263 131.25 135.317 131.977 135.419Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M129.737 134.107C128.867 134.593 128.046 135.18 127.562 135.567C127.301 135.776 126.919 135.733 126.71 135.472C126.501 135.211 126.543 134.829 126.805 134.62C127.331 134.199 128.208 133.573 129.146 133.049C130.054 132.542 131.134 132.063 132.032 132.063C132.367 132.063 132.638 132.334 132.638 132.669C132.638 133.004 132.367 133.275 132.032 133.275C131.476 133.275 130.637 133.604 129.737 134.107Z"
+ fill="#769FCB" />
+ <path
+ d="M124.342 132.667C125.492 133.331 127.357 133.331 128.508 132.667C129.085 132.333 129.373 131.896 129.371 131.459L129.371 125.398L123.479 125.398L123.479 131.459C123.476 131.896 123.764 132.333 124.342 132.667Z"
+ fill="#FFCCB7" />
+ <path
+ d="M124.342 130.123C125.492 130.788 127.357 130.788 128.508 130.123C129.085 129.79 129.373 129.352 129.371 128.915L129.371 122.854L123.479 122.854L123.479 128.915C123.476 129.352 123.764 129.79 124.342 130.123Z"
+ fill="#EF937F" />
+ <rect width="20.1141" height="8.43723" rx="4.21861" transform="matrix(0.866025 0.5 -0.866025 0.5 102.277 143.334)"
+ fill="#DA3635" />
+ <path
+ d="M97.0977 142.442C97.3657 139.093 105.003 137.985 107.982 140.863L117.44 150.004C118.764 151.283 118.413 152.918 116.588 153.972C114.304 155.29 110.571 155.232 108.413 153.845L101.147 149.171C98.351 147.373 96.8921 145.012 97.0852 142.599L97.0977 142.442Z"
+ fill="#A0C7F0" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M100.59 142.584L111.155 150.614C111.653 150.992 111.945 151.581 111.945 152.206V152.345C111.945 153.629 110.753 154.58 109.502 154.295L109.042 154.191C108.822 154.087 108.612 153.971 108.415 153.845L101.148 149.171C98.3526 147.373 96.8937 145.012 97.0868 142.599L97.0993 142.442C97.1932 141.269 98.191 140.371 99.576 139.823C99.7322 140.067 99.8227 140.358 99.8227 140.67V141.036C99.8227 141.643 100.107 142.216 100.59 142.584Z"
+ fill="white" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M117.276 149.856L117.431 150.005C118.755 151.284 118.403 152.919 116.578 153.973C114.295 155.291 110.562 155.233 108.404 153.846L107.105 153.01C107.546 152.276 108.343 151.82 109.209 151.82H110.722H114.203C115.064 151.82 115.875 151.415 116.391 150.726L116.602 150.446C116.786 150.2 117.017 150.001 117.276 149.856Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M112.724 148.604C111.854 149.211 111.033 149.944 110.547 150.43C110.311 150.667 109.927 150.667 109.69 150.43C109.454 150.193 109.454 149.809 109.69 149.573C110.215 149.048 111.091 148.266 112.03 147.61C112.499 147.282 112.997 146.977 113.484 146.752C113.962 146.531 114.477 146.365 114.968 146.365C115.302 146.365 115.574 146.636 115.574 146.971C115.574 147.305 115.302 147.577 114.968 147.577C114.731 147.577 114.402 147.663 113.993 147.852C113.592 148.038 113.158 148.301 112.724 148.604Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M111.27 143.67C111.42 143.969 111.299 144.333 110.999 144.483C110.929 144.518 110.781 144.653 110.595 144.994C110.421 145.313 110.257 145.731 110.109 146.199C109.814 147.134 109.608 148.191 109.51 148.875C109.463 149.207 109.156 149.437 108.824 149.389C108.493 149.342 108.263 149.035 108.31 148.704C108.414 147.974 108.632 146.849 108.953 145.834C109.113 145.328 109.305 144.828 109.531 144.414C109.746 144.021 110.042 143.606 110.457 143.398C110.757 143.249 111.121 143.37 111.27 143.67Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M108.863 144.266C110.318 144.469 111.809 144.873 112.744 145.185C113.062 145.291 113.233 145.634 113.128 145.952C113.022 146.269 112.678 146.441 112.361 146.335C111.478 146.041 110.06 145.657 108.696 145.466C108.013 145.371 107.363 145.326 106.81 145.359C106.242 145.393 105.847 145.504 105.615 145.658C105.337 145.844 104.961 145.769 104.775 145.49C104.589 145.212 104.665 144.835 104.943 144.65C105.439 144.319 106.09 144.188 106.738 144.149C107.4 144.11 108.137 144.164 108.863 144.266Z"
+ fill="#769FCB" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M106.624 142.954C105.753 143.44 104.933 144.026 104.449 144.413C104.187 144.622 103.806 144.58 103.597 144.319C103.388 144.057 103.43 143.676 103.692 143.467C104.218 143.046 105.094 142.42 106.032 141.896C106.941 141.388 108.021 140.909 108.919 140.909C109.254 140.909 109.525 141.181 109.525 141.516C109.525 141.85 109.254 142.122 108.919 142.122C108.362 142.122 107.524 142.451 106.624 142.954Z"
+ fill="#769FCB" />
+ <path
+ d="M101.228 141.513C102.379 142.178 104.244 142.178 105.394 141.513C105.972 141.18 106.26 140.743 106.257 140.305L106.257 134.244L100.365 134.244L100.365 140.305C100.363 140.743 100.651 141.18 101.228 141.513Z"
+ fill="#FFCCB7" />
+ <path
+ d="M101.228 138.97C102.379 139.634 104.244 139.634 105.394 138.97C105.972 138.637 106.26 138.199 106.257 137.762L106.257 131.701L100.365 131.701L100.365 137.762C100.363 138.199 100.651 138.637 101.228 138.97Z"
+ fill="#EF937F" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M115.386 66C115.15 68.1745 113.594 70.3102 110.715 71.972C104.446 75.5916 94.2811 75.5916 88.0116 71.972C85.6055 70.5828 84.1228 68.8623 83.5635 67.0649C83.4456 67.5414 83.3911 68.0222 83.4001 68.5027L83.3794 68.5001L82.3385 86.0757C82.0156 91.5292 84.9156 96.884 90.562 101.26L99.9317 108.522C101.162 109.475 101.757 110.653 101.607 111.839L98.7226 134.642C98.6791 135.303 99.0943 135.972 99.9682 136.476C101.633 137.438 104.333 137.438 105.998 136.476C106.66 136.094 106.802 135.73 107.008 135.202C107.074 135.034 107.146 134.849 107.243 134.642L118.207 106.897C119.586 103.407 118.838 99.7476 116.087 96.5383L112.081 91.8636L124.126 99.3197C125.847 100.385 126.668 101.835 126.369 103.282L121.589 126.412C121.545 127.073 121.96 127.742 122.834 128.247C124.499 129.208 127.199 129.208 128.864 128.247C129.738 127.742 130.153 127.073 130.109 126.412L140.109 100.746C141.69 96.6882 140.518 92.4345 136.834 88.8601L115.921 68.5715C115.948 67.7072 115.77 66.8412 115.386 66Z"
+ fill="#4C4D53" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M131.266 123.512C127.042 128.888 124.18 125.343 126.919 105.506C127.435 101.769 126.133 97.9763 123.319 95.4636L114.545 87.6291C114.149 87.2759 113.556 87.3071 113.13 87.6226C112.36 88.1921 111.594 88.3918 110.35 88.4619C109.447 88.5127 109.005 89.6039 109.661 90.2256L115.058 95.3378L119.003 98.1775C120.194 99.0347 120.857 100.096 120.887 101.195L121.161 111.022L121.34 111.5V117.464L121.588 126.412C121.545 127.073 121.96 127.742 122.834 128.247C124.499 129.208 127.198 129.208 128.863 128.247C129.737 127.742 130.153 127.073 130.109 126.412L131.266 123.512ZM107.795 130.88C104.6 130.986 102.43 123.263 104.387 107.084C104.877 103.029 103.303 98.9535 100.049 96.4832L82.4942 83.1542L82.3234 85.9835C82.0092 91.1869 84.6293 96.3086 89.7896 100.578L98.3496 107.661C99.4006 108.531 99.9401 109.572 99.8886 110.632L98.7223 134.642C98.6788 135.303 99.094 135.972 99.9679 136.477C101.633 137.438 104.332 137.438 105.997 136.477C106.871 135.972 107.287 135.303 107.243 134.642L107.795 130.88Z"
+ fill="#333333" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M95.4665 27.3316C85.137 29.577 79.2296 38.3341 79.0057 47.3318H78.8398V64.5647C78.8398 68.5209 80.4809 72.0939 83.1194 74.6401L80.9907 77.9144L96.0867 87.7021C98.9098 89.5325 102.638 87.5062 102.638 84.1417C104.959 82.3429 104.812 78.7919 102.35 77.1914L102.036 76.987L113.341 70.4442C114.208 69.9421 114.889 69.2018 115.318 68.333L119.04 70.7526C121.279 72.2083 124.274 71.5732 125.73 69.334C126.862 67.5925 126.369 65.2628 124.627 64.1305L121.309 61.9733V43.1938L121.39 41.6535C121.856 32.7559 114.509 25.4154 105.612 25.8894L100.961 26.1372L95.4665 27.3316Z"
+ fill="#FF9C9B" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M104.438 75.322L102.116 73.8122C99.5937 72.1724 97.9437 69.4842 97.6234 66.4929L95.5682 47.2992C95.5682 47.2987 95.5678 47.2984 95.5674 47.2983C95.5669 47.2983 95.5664 47.2987 95.5664 47.2993V67.3551C95.5664 70.7396 97.2783 73.8944 100.116 75.7391L102.347 77.1895C104.633 78.676 104.923 81.8451 103.093 83.7302C103.084 83.7398 103.075 83.7495 103.066 83.7594C104.93 81.8783 104.649 78.682 102.35 77.1872L101.951 76.9277L104.438 75.322ZM102.602 84.7058C102.596 84.7353 102.591 84.7648 102.587 84.7942C102.582 84.8239 102.578 84.8538 102.575 84.8838C102.585 84.825 102.594 84.7657 102.602 84.7058Z"
+ fill="#DA3635" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M105.232 16.6523L95.8566 18.9655L96.2634 26.7943L96.0559 27.8022L94.9165 33.4102C94.4327 35.7913 95.6796 38.1129 97.7792 39.0899L97.9823 40.2209C98.5337 43.2923 101.471 45.3352 104.542 44.7837C107.613 44.2323 109.656 41.2954 109.105 38.224L106.765 25.1884L106.962 24.0477L106.538 23.9248L105.232 16.6523Z"
+ fill="#DA3635" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M111.657 5.34717L94.5839 8.41241L96.5731 19.4921L92.5352 19.6622L95.9965 25.4067L95.4724 28.4327C94.9812 31.269 96.8823 33.9666 99.7187 34.4579C101.101 34.6973 102.45 34.3685 103.527 33.6402C104.911 34.1386 106.44 34.2913 107.992 34.0128C112.707 33.1663 115.842 28.6581 114.996 23.9434L111.657 5.34717Z"
+ fill="#FFD2C4" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M112.234 31.9478C111.16 32.7029 109.908 33.2416 108.531 33.4888C103.477 34.3963 98.6435 31.0344 97.736 25.9798L96.7254 20.3506C96.637 19.8584 96.1987 19.5072 95.6991 19.5282L94.3787 19.5839C93.887 19.6046 93.4835 19.9799 93.4273 20.4688L93.4011 20.6972C93.3758 20.9166 93.424 21.1382 93.538 21.3275L95.2216 24.1217C95.2824 24.2225 95.3605 24.3117 95.4524 24.3852L96.0177 24.8373C96.1824 24.9689 96.425 24.9273 96.5364 24.7483C96.7066 24.4747 97.1246 24.5548 97.1815 24.872L97.9228 29.0009C98.3084 31.1487 99.4539 32.9688 101.033 34.2341C101.236 34.3972 101.502 34.4645 101.756 34.4069C102.226 34.3006 102.675 34.13 103.092 33.9034C103.373 33.751 103.703 33.7072 104.009 33.7976C105.262 34.1674 106.618 34.2587 107.991 34.0121C109.63 33.718 111.077 32.9815 112.234 31.9478Z"
+ fill="#EF937F" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M115.014 20.4058H113.153C110.869 20.4058 108.878 18.8513 108.325 16.6355L108.156 15.9608C107.627 13.8454 105.572 12.4823 103.418 12.8175L102.632 12.9397C100.605 13.2551 99.2853 15.2437 99.783 17.2348C100.022 18.1887 99.8465 19.199 99.3011 20.0172L97.1916 23.1814C96.9634 23.5237 96.5447 23.6855 96.1456 23.5858L94.5041 23.1754C92.4758 20.9266 91.2383 17.9309 91.2383 14.6419C91.2383 7.65997 96.815 2 103.694 2C109.467 2 114.323 5.98577 115.735 11.3938C117.3 12.1715 118.382 13.8333 118.382 15.7577C118.382 17.9656 116.958 19.8278 115.014 20.4058Z"
+ fill="#333333" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M122.17 71.5074L123.521 67.5586L121.509 67.4367C119.68 67.3259 118.2 65.9074 118.012 64.0846C117.993 63.9011 118.069 63.7208 118.215 63.6075L118.549 63.3473C119.004 62.9934 118.891 62.2775 118.35 62.0806C118.06 61.9753 117.867 61.7001 117.867 61.392V41.4189C117.867 39.8103 116.563 38.5063 114.955 38.5063C114.832 38.5063 114.736 38.6116 114.748 38.7336L115.621 48.1404C115.765 49.692 115.544 51.2558 114.977 52.707L114.864 52.9953C114.773 53.2274 114.727 53.4745 114.727 53.7237V57.6547C114.727 57.8832 114.766 58.11 114.842 58.3253L115.373 59.8179C116.002 61.584 116.063 63.5023 115.549 65.305L115.094 66.8994C114.964 67.3531 115.002 67.8262 115.181 68.2415L119.041 70.751C120.005 71.3776 121.109 71.6168 122.17 71.5074Z"
+ fill="#DA3635" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M102.352 85.7497L102.344 85.6175L88.6759 76.3234C87.8045 75.7308 87.9439 74.4066 88.9195 74.0084C90.1944 73.488 89.9219 71.6083 88.5518 71.4713L85.7012 71.1862C84.6538 71.0815 83.8668 70.1827 83.9013 69.1306L84.799 41.7507C84.8249 40.9592 84.4942 40.1978 83.8979 39.6767C82.2844 38.2664 79.7516 39.265 79.5346 41.3969L78.8672 47.9546V73.5629C78.8672 75.3113 79.7646 76.8501 81.124 77.7438L81.0142 77.9126L96.1102 87.7003C98.4459 89.2147 101.402 88.0891 102.352 85.7497Z"
+ fill="#DA3635" />
+ <ellipse cx="96.4787" cy="21.4493" rx="1.92787" ry="3.08459" fill="#FFD2C4" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M98.027 21.7513C98.0457 21.611 98.0556 21.4653 98.0556 21.3159C98.0556 20.1884 97.4931 19.2744 96.7993 19.2744C96.1054 19.2744 95.543 20.1884 95.543 21.3159C95.543 22.0656 95.7917 22.721 96.1623 23.0759C95.971 22.7728 95.8552 22.3772 95.8552 21.9443C95.8552 20.9903 96.4177 20.2169 97.1115 20.2169C97.3609 20.2169 97.3982 20.5724 97.4377 20.9491C97.464 21.1997 97.4913 21.4596 97.5827 21.6302C97.6541 21.7637 97.8295 21.7578 97.9964 21.7523C98.0066 21.7519 98.0168 21.7516 98.027 21.7513Z"
+ fill="#EF937F" />
+ <ellipse cx="105.301" cy="23.4348" rx="0.765209" ry="1.33954" transform="rotate(2.6285 105.301 23.4348)"
+ fill="#333333" />
+ <ellipse cx="112.703" cy="22.2175" rx="0.765209" ry="1.33912" transform="rotate(2.6285 112.703 22.2175)"
+ fill="#333333" />
+ <path d="M103.805 22.9914C104.57 22.5036 105.553 21.9842 106.889 22.3353" stroke="#333333" stroke-linecap="round" />
+ <path d="M112.285 20.6782C112.574 20.6782 113.106 20.6782 113.827 20.6782" stroke="#333333" stroke-linecap="round" />
+ <ellipse cx="110.34" cy="27" rx="1.5" ry="1" fill="#EF937F" />
+ <path d="M108.43 29.5752C108.858 29.9202 109.921 30.3204 110.743 29.1611" stroke="#333333" stroke-linecap="round" />
+ <path
+ d="M110.812 87.8705C109.744 87.2148 109.15 86.3488 109.15 85.449L109.15 84.587L129.953 73.2443C132.272 71.9795 135.885 71.955 138.256 73.1878L150.851 79.7381L150.851 80.8974C150.851 81.8127 150.236 82.6923 149.136 83.3513L128.685 95.5987C127.227 96.4716 124.801 96.4628 123.363 95.5793L110.812 87.8705Z"
+ fill="#989898" />
+ <rect width="30.8472" height="21.5482" rx="3" transform="matrix(0.866025 -0.5 0.866025 0.5 107.345 84.5134)"
+ fill="#C5C5C5" />
+ <rect width="25.3527" height="19.5019" rx="3" transform="matrix(0.866025 -0.5 0.866025 0.5 112.185 82.7427)"
+ fill="#444444" />
+ <rect width="1.94964" height="3.61134" rx="0.974821" transform="matrix(0.866025 -0.5 0.866025 0.5 115.936 88.1482)"
+ fill="#818181" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M114.784 81.2417C113.349 82.0701 113.349 83.4133 114.784 84.2417L115.455 84.629L135.621 88.7133L141.033 85.5888L117.971 79.4015L114.784 81.2417ZM122.658 76.6956L144.185 83.7688L146.341 82.5241L126.448 74.5075L122.658 76.6956ZM128.752 73.177L148.139 81.4858L148.433 81.3163C148.65 81.1907 148.835 81.0533 148.987 80.9077L130.967 71.8981L128.752 73.177Z"
+ fill="#656565" />
+ <path
+ d="M122.381 67.6153C120.929 69.5596 120.723 71.86 121.919 72.7533L123.623 74.4953L128.549 69.1283L127.176 65.7122C125.979 64.8189 123.833 65.6709 122.381 67.6153Z"
+ fill="#A0C7F1" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M122.405 72.5504L122.331 71.8357C122.223 70.7934 122.57 69.7552 123.283 68.9873C124.094 68.1139 125.282 67.6934 126.462 67.862L127.092 67.9519C127.974 68.0779 128.756 68.5855 129.23 69.3399L130.432 71.2524C131.623 73.1475 131.089 75.6467 129.226 76.8884L129.06 76.9757L129.801 79.9403C129.899 80.3321 130.251 80.6069 130.655 80.6069C130.789 80.6069 130.897 80.7154 130.897 80.8494V81.3349C130.897 81.6515 130.641 81.9082 130.324 81.9082C129.536 81.9082 128.816 81.463 128.463 80.7582L127.09 78.0124L126.833 78.1479C126.16 78.5022 125.333 78.364 124.811 77.81C123.454 76.3681 122.609 74.52 122.405 72.5504Z"
+ fill="#FFD2C4" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M122.331 71.8359L122.405 72.5506C122.609 74.5202 123.455 76.3683 124.812 77.8102C125.333 78.3642 126.16 78.5024 126.833 78.1481L127.091 78.0126L127.755 79.3412L127.764 79.3352L126.212 76.2324C125.891 75.5901 125.408 75.0427 124.81 74.6443C123.908 74.043 123.367 73.0307 123.367 71.9466V68.901C123.339 68.9294 123.311 68.9582 123.284 68.9875C122.571 69.7554 122.224 70.7936 122.331 71.8359ZM130.017 76.2031L127.922 73.368L129.115 76.9473L129.226 76.8886C129.524 76.6898 129.789 76.4587 130.017 76.2031Z"
+ fill="#EF937F" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M104.046 90.1728L102.077 88.0438L103.936 82.4665L106.167 81.1652L108.584 82.2806C109.947 82.5285 112.86 83.2474 113.603 84.1397C114.193 84.8474 115.83 84.8816 117.043 84.907C117.743 84.9216 118.301 84.9333 118.437 85.0693C118.809 85.4411 118.437 86.3706 117.136 86.5566C116.529 86.6432 115.802 86.4877 115.085 86.3345C114.264 86.1588 113.456 85.9861 112.86 86.1847C111.744 86.5566 111.93 87.8579 112.86 88.4157C113.789 88.9734 116.764 90.8325 117.322 91.3902C117.879 91.948 117.693 92.6916 117.322 93.0634C117.056 93.3289 115.559 92.8362 113.506 91.5853C111.358 92.7231 108.734 92.7582 106.512 91.5617L104.123 90.2752C104.097 90.2411 104.072 90.2069 104.047 90.1728L104.046 90.1728Z"
+ fill="#FFD2C4" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M102.078 88.0445L104.047 90.1735L104.047 90.1735C104.072 90.2076 104.098 90.2417 104.124 90.2758L106.513 91.5623C108.73 92.7563 111.348 92.7239 113.493 91.5931L112.308 91.0008L109.923 90.6338C107.312 90.2322 105.01 88.7045 103.626 86.4553L102.965 85.3813L102.078 88.0445ZM114.264 92.0281L114.308 92.0008L113.64 91.6665C113.854 91.7955 114.063 91.9161 114.264 92.0281Z"
+ fill="#EF937F" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M102.485 89.417C100.926 88.8989 100.345 86.4253 101.187 83.8919C102.028 81.3586 103.975 79.7248 105.534 80.2428L108.028 81.9076L108.01 81.9572C107.89 81.8819 107.762 81.821 107.625 81.7757C106.137 81.2813 104.277 82.8477 103.471 85.2745C102.763 87.4057 103.103 89.4917 104.204 90.3031L102.485 89.417ZM104.717 90.5679L104.868 90.6454L104.88 90.6122C104.825 90.6 104.771 90.5853 104.717 90.5679Z"
+ fill="#A0C7F1" />
+ <path
+ d="M109.973 22.2202V22.2202C110.105 23.19 110.586 24.0785 111.325 24.7202L111.869 25.1929C112.489 25.7314 112.474 26.6989 111.837 27.2172L111.344 27.6182"
+ stroke="#333333" stroke-linecap="round" />
<defs>
- <linearGradient id="paint0_linear_14133_116819" x1="86.6776" y1="54.5845" x2="23.1101" y2="137.189"
+ <linearGradient id="paint0_linear_14421_60386" x1="86.6776" y1="54.5845" x2="23.1101" y2="137.189"
gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="#D9EDFF" />
</linearGradient>
- <clipPath id="clip0_14133_116819">
- <rect width="200" height="200" fill="white" />
- </clipPath>
</defs>
</svg>
\ No newline at end of file
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 5c4d610254eddf4dd2b118cc35b0ed94bb4ab43a..ff0953c174f2fa399aae9ee5e304f8e820452596 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -18,40 +18,27 @@
stroke-linejoin="round" />
</symbol>
- <symbol id="accesLibre" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
- <rect x="16.75" y="7.75" width="15.5" height="28.5" fill="white" stroke="#333333" stroke-width="1.5" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M10 5V37L23 43.5L23 0.5L10 5ZM19 23C19 21.8954 19.8954 21 21 21V25C19.8954 25 19 24.1046 19 23Z"
- fill="#DA3635" />
- <path d="M33 35.5H35.25C35.6642 35.5 36 35.8358 36 36.25C36 36.6642 35.6642 37 35.25 37H33V35.5Z" fill="#333333" />
- <path d="M7 36.25C7 35.8358 7.33579 35.5 7.75 35.5H10V37H7.75C7.33579 37 7 36.6642 7 36.25Z" fill="#333333" />
+ <symbol id="accesLibre" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="44" height="44" rx="22" fill="#FFE5E4" />
+ <path
+ d="M23.75 14.4167C25.0333 14.4167 26.0833 13.3667 26.0833 12.0833C26.0833 10.8 25.0333 9.75 23.75 9.75C22.4667 9.75 21.4167 10.8 21.4167 12.0833C21.4167 13.3667 22.4667 14.4167 23.75 14.4167ZM19.4333 18.3833L16.4467 33.445C16.295 34.1567 16.855 34.8333 17.59 34.8333H17.6833C18.2317 34.8333 18.6983 34.46 18.8267 33.9233L20.7167 25.5L23.1667 27.8333V33.6667C23.1667 34.3083 23.6917 34.8333 24.3333 34.8333C24.975 34.8333 25.5 34.3083 25.5 33.6667V27.0867C25.5 26.445 25.2433 25.8383 24.7767 25.395L23.05 23.75L23.75 20.25C24.9983 21.6967 26.8067 22.735 28.8367 23.0617C29.5367 23.1667 30.1667 22.6067 30.1667 21.895C30.1667 21.3233 29.7467 20.845 29.175 20.7517C27.4017 20.46 25.9317 19.41 25.15 18.0333L23.9833 16.1667C23.33 15.1283 22.0233 14.7083 20.8917 15.1867L16.4233 17.0767C15.56 17.45 15 18.29 15 19.235V22C15 22.6417 15.525 23.1667 16.1667 23.1667C16.8083 23.1667 17.3333 22.6417 17.3333 22V19.2L19.4333 18.3833Z"
+ fill="#CD2524" />
</symbol>
<symbol id="surRdv" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M7 16H37V34C37 35.6569 35.6569 37 34 37H10C8.34315 37 7 35.6569 7 34V16Z" fill="white" />
- <path d="M16.6665 26.3636L20.8147 30L27.3332 22" stroke="#DA3635" stroke-width="3" stroke-linecap="round"
- stroke-linejoin="round" />
- <rect x="7" y="10" width="30" height="27" rx="3" stroke="#333333" stroke-width="1.5" />
- <path d="M7 13C7 11.3431 8.34315 10 10 10H34C35.6569 10 37 11.3431 37 13V16H7V13Z" fill="#333333" />
- <rect x="12" y="6" width="3" height="6" rx="1.5" fill="#333333" />
- <rect x="29" y="6" width="3" height="6" rx="1.5" fill="#333333" />
+ <rect width="44" height="44" rx="22" fill="#FFE5E4" />
+ <path
+ d="M26.6667 20.2848C26.3283 19.9465 25.7683 19.9465 25.43 20.2848L20.355 25.3598L18.5 23.5048C18.1617 23.1665 17.6017 23.1665 17.2633 23.5048C16.925 23.8432 16.925 24.4032 17.2633 24.7415L19.5267 27.0048C19.9817 27.4598 20.7167 27.4598 21.1717 27.0048L26.655 21.5215C27.005 21.1832 27.005 20.6232 26.6667 20.2848ZM30.1667 11.4998H29V10.3332C29 9.6915 28.475 9.1665 27.8333 9.1665C27.1917 9.1665 26.6667 9.6915 26.6667 10.3332V11.4998H17.3333V10.3332C17.3333 9.6915 16.8083 9.1665 16.1667 9.1665C15.525 9.1665 15 9.6915 15 10.3332V11.4998H13.8333C12.5383 11.4998 11.5117 12.5498 11.5117 13.8332L11.5 30.1665C11.5 31.4498 12.5383 32.4998 13.8333 32.4998H30.1667C31.45 32.4998 32.5 31.4498 32.5 30.1665V13.8332C32.5 12.5498 31.45 11.4998 30.1667 11.4998ZM29 30.1665H15C14.3583 30.1665 13.8333 29.6415 13.8333 28.9998V17.3332H30.1667V28.9998C30.1667 29.6415 29.6417 30.1665 29 30.1665Z"
+ fill="#CD2524" />
</symbol>
<symbol id="telephoneVisio" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="44" height="44" rx="22" fill="#FFE5E4" />
<path
- d="M23.418 29.0271L21.8168 30.6282C20.6452 31.7997 18.7458 31.7997 17.5742 30.6282L14.3719 27.4258C13.2003 26.2543 13.2003 24.3548 14.3719 23.1832L15.973 21.582C16.415 21.1401 16.415 20.4245 15.973 19.9836L10.3209 14.3315C9.87891 13.8895 9.16334 13.8895 8.72249 14.3315L5.87868 17.1753C5.31607 17.7379 4.99107 18.5021 5.03132 19.2967C5.61265 30.7735 14.2247 39.3873 25.7033 39.9687C26.4979 40.0089 27.2621 39.6839 27.8247 39.1214L30.6685 36.2776C31.1105 35.8355 31.1105 35.12 30.6685 34.6791L25.0164 29.0271C24.5756 28.5862 23.8589 28.5862 23.418 29.0271Z"
- fill="#333333" />
- <path
- d="M33.1635 24.6539C33.3738 21.5337 32.17 18.3556 29.6254 16.1489C27.112 13.9693 23.8458 13.2188 20.8184 13.8266L19.7273 12.5444C23.4085 11.5374 27.5083 12.3275 30.6081 15.0156C33.7508 17.741 35.1077 21.7601 34.5736 25.5945L33.1635 24.6539Z"
- fill="#DA3635" />
- <path
- d="M27.4385 25.0778C27.4697 23.3164 26.7492 21.5542 25.3142 20.3097C23.895 19.079 22.0736 18.6118 20.3513 18.8725L19.2476 17.5754C21.6325 16.923 24.2887 17.4349 26.2969 19.1764C28.333 20.9421 29.2121 23.546 28.866 26.0301L27.4385 25.0778Z"
- fill="#DA3635" />
- <path
- d="M39.4012 23.7106C39.8462 18.8701 38.0324 13.8928 34.0797 10.465C30.1777 7.08122 25.0759 5.97452 20.3964 7.02957L19.3114 5.75447C24.6403 4.29674 30.5753 5.44049 35.0625 9.3318C39.6118 13.277 41.576 19.0951 40.8028 24.6457L39.4012 23.7106Z"
- fill="#DA3635" />
+ d="M23.0267 13.8917C26.7367 14.3584 29.6417 17.2634 30.1084 20.9734C30.1784 21.5684 30.68 22.0001 31.2634 22.0001C31.31 22.0001 31.3567 22.0001 31.4034 21.9884C32.045 21.9067 32.5 21.3234 32.4184 20.6817C31.8234 15.9101 28.0784 12.1651 23.3067 11.5701C22.665 11.5001 22.0817 11.9551 22.0117 12.5967C21.93 13.2384 22.385 13.8217 23.0267 13.8917ZM23.47 16.3534C22.8517 16.1901 22.21 16.5634 22.0467 17.1934C21.8834 17.8234 22.2567 18.4534 22.8867 18.6167C24.1117 18.9317 25.0684 19.8884 25.395 21.1251C25.535 21.6501 26.0017 22.0001 26.5267 22.0001C26.62 22.0001 26.725 21.9884 26.8184 21.9651C27.4367 21.8017 27.81 21.1601 27.6584 20.5417C27.11 18.4767 25.5117 16.8784 23.47 16.3534ZM30.435 25.8034L27.4717 25.4651C26.76 25.3834 26.06 25.6284 25.5584 26.1301L23.4117 28.2767C20.11 26.5967 17.4034 23.9017 15.7234 20.5884L17.8817 18.4301C18.3834 17.9284 18.6284 17.2284 18.5467 16.5167L18.2084 13.5767C18.0684 12.3984 17.0767 11.5117 15.8867 11.5117H13.8684C12.55 11.5117 11.4534 12.6084 11.535 13.9267C12.1534 23.8901 20.1217 31.8467 30.0734 32.465C31.3917 32.5467 32.4884 31.4501 32.4884 30.1317V28.1134C32.5 26.9351 31.6134 25.9434 30.435 25.8034Z"
+ fill="#CD2524" />
</symbol>
<symbol id="twitter" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -245,11 +232,10 @@
stroke-width="1.5" stroke-linecap="round" />
</symbol>
- <symbol id="notValidate" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle cx="13" cy="13" r="13" fill="#DA6C2E" />
- <path d="M13.25 14.5L13.25 6.00001" stroke="white" stroke-width="3" stroke-linecap="round"
- stroke-linejoin="round" />
- <path d="M13.25 20.6066L13.25 20" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+ <symbol id="notValidate" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M7.99992 1.33337C4.31992 1.33337 1.33325 4.32004 1.33325 8.00004C1.33325 11.68 4.31992 14.6667 7.99992 14.6667C11.6799 14.6667 14.6666 11.68 14.6666 8.00004C14.6666 4.32004 11.6799 1.33337 7.99992 1.33337ZM7.99992 8.66671C7.63325 8.66671 7.33325 8.36671 7.33325 8.00004V5.33337C7.33325 4.96671 7.63325 4.66671 7.99992 4.66671C8.36659 4.66671 8.66659 4.96671 8.66659 5.33337V8.00004C8.66659 8.36671 8.36659 8.66671 7.99992 8.66671ZM8.66659 11.3334H7.33325V10H8.66659V11.3334Z"
+ fill="#DA3635" />
</symbol>
<symbol id="notValidateWithBorder" width="24" height="24" viewBox="0 0 24 24" fill="none"
@@ -261,10 +247,10 @@
</symbol>
- <symbol id="validate" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle cx="13" cy="13" r="13" fill="#47C562" />
- <path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round"
- stroke-linejoin="round" />
+ <symbol id="validate" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M7.99992 1.33337C4.31992 1.33337 1.33325 4.32004 1.33325 8.00004C1.33325 11.68 4.31992 14.6667 7.99992 14.6667C11.6799 14.6667 14.6666 11.68 14.6666 8.00004C14.6666 4.32004 11.6799 1.33337 7.99992 1.33337ZM6.19325 10.86L3.79992 8.46671C3.53992 8.20671 3.53992 7.78671 3.79992 7.52671C4.05992 7.26671 4.47992 7.26671 4.73992 7.52671L6.66659 9.44671L11.2533 4.86004C11.5133 4.60004 11.9333 4.60004 12.1933 4.86004C12.4533 5.12004 12.4533 5.54004 12.1933 5.80004L7.13325 10.86C6.87992 11.12 6.45325 11.12 6.19325 10.86Z"
+ fill="#1D8844" />
</symbol>
<symbol id="formClock" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -301,17 +287,6 @@
<path stroke="none" d="M13.083 17.458H10a.77.77 0 010-1.541h3.083a.77.77 0 110 1.541z" fill="#FAFAFA"></path>
</symbol>
- <symbol id="formTime" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle cx="89.4997" cy="89.5" r="67.2273" fill="#EAF8FB" stroke="#348899" stroke-width="12" />
- <path opacity="0.35"
- d="M91.5 40C91.5 38.8954 90.6046 38 89.5 38C88.3954 38 87.5 38.8954 87.5 40H91.5ZM89.5 89.5H87.5C87.5 90.1511 87.817 90.7615 88.3496 91.1361L89.5 89.5ZM120.35 113.636C121.253 114.271 122.501 114.054 123.136 113.15C123.771 112.247 123.554 110.999 122.65 110.364L120.35 113.636ZM87.5 40V89.5H91.5V40H87.5ZM88.3496 91.1361L120.35 113.636L122.65 110.364L90.6504 87.8639L88.3496 91.1361Z"
- fill="#F35453" />
- <path
- d="M79.7677 103.84V110H56.9427V103.84H64.6427V83.6275C64.6427 83.1142 64.6519 82.6008 64.6702 82.0875C64.6886 81.5558 64.7161 81.0242 64.7527 80.4925L60.1877 84.2875C59.7844 84.5992 59.3811 84.7917 58.9777 84.865C58.5927 84.92 58.2261 84.92 57.8777 84.865C57.5294 84.7917 57.2177 84.6725 56.9427 84.5075C56.6677 84.3242 56.4661 84.1408 56.3377 83.9575L53.6427 80.3825L66.1277 69.905H73.1677V103.84H79.7677ZM113.57 89.9525C113.57 93.4542 113.194 96.4883 112.442 99.055C111.69 101.622 110.645 103.748 109.307 105.435C107.987 107.122 106.41 108.377 104.577 109.202C102.762 110.028 100.791 110.44 98.6645 110.44C96.5379 110.44 94.567 110.028 92.752 109.202C90.9554 108.377 89.397 107.122 88.077 105.435C86.757 103.748 85.7212 101.622 84.9695 99.055C84.2362 96.4883 83.8695 93.4542 83.8695 89.9525C83.8695 86.4508 84.2362 83.4167 84.9695 80.85C85.7212 78.2833 86.757 76.1567 88.077 74.47C89.397 72.7833 90.9554 71.5367 92.752 70.73C94.567 69.905 96.5379 69.4925 98.6645 69.4925C100.791 69.4925 102.762 69.905 104.577 70.73C106.41 71.5367 107.987 72.7833 109.307 74.47C110.645 76.1567 111.69 78.2833 112.442 80.85C113.194 83.4167 113.57 86.4508 113.57 89.9525ZM104.77 89.9525C104.77 87.1842 104.595 84.92 104.247 83.16C103.899 81.3817 103.431 79.9883 102.845 78.98C102.276 77.9717 101.625 77.2842 100.892 76.9175C100.159 76.5325 99.4162 76.34 98.6645 76.34C97.9129 76.34 97.1704 76.5325 96.437 76.9175C95.722 77.2842 95.0804 77.9717 94.512 78.98C93.962 79.9883 93.5129 81.3817 93.1645 83.16C92.8345 84.92 92.6695 87.1842 92.6695 89.9525C92.6695 92.7392 92.8345 95.0125 93.1645 96.7725C93.5129 98.5325 93.962 99.9258 94.512 100.952C95.0804 101.961 95.722 102.657 96.437 103.042C97.1704 103.409 97.9129 103.592 98.6645 103.592C99.4162 103.592 100.159 103.409 100.892 103.042C101.625 102.657 102.276 101.961 102.845 100.952C103.431 99.9258 103.899 98.5325 104.247 96.7725C104.595 95.0125 104.77 92.7392 104.77 89.9525ZM123.309 67.2925C124.299 68.8692 124.968 70.4917 125.316 72.16C125.665 73.8283 125.683 75.4783 125.371 77.11C125.078 78.7233 124.464 80.2725 123.529 81.7575C122.594 83.2425 121.347 84.59 119.789 85.8L117.094 84.205C116.855 84.0767 116.69 83.9208 116.599 83.7375C116.507 83.5358 116.461 83.3433 116.461 83.16C116.48 82.9583 116.525 82.775 116.599 82.61C116.69 82.4267 116.8 82.2708 116.929 82.1425C117.13 81.9225 117.35 81.62 117.589 81.235C117.827 80.85 118.047 80.4008 118.249 79.8875C118.45 79.3742 118.606 78.815 118.716 78.21C118.845 77.5867 118.89 76.9358 118.854 76.2575C118.817 75.5608 118.689 74.8458 118.469 74.1125C118.249 73.3608 117.891 72.6 117.396 71.83C116.993 71.1883 116.883 70.6383 117.066 70.18C117.268 69.7217 117.644 69.3917 118.194 69.19L123.309 67.2925Z"
- fill="#DA3635" />
- </symbol>
-
-
<symbol id="handicap" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.6842 7.66864C16.614 7.66864 18.1784 6.06389 18.1784 4.08432C18.1784 2.10475 16.614 0.5 14.6842 0.5C12.7545 0.5 11.1901 2.10475 11.1901 4.08432C11.1901 6.06389 12.7545 7.66864 14.6842 7.66864Z"
@@ -426,22 +401,47 @@
<symbol id="mesPapiers" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
- <rect width="40" height="40" rx="4" fill="#333333" />
+ <rect width="40" height="40" rx="20" fill="#FFE5E4" />
<path
- d="M34.6582 23.7743L17.3484 33.8335C17.1361 33.9561 16.8754 33.9578 16.6631 33.8335L5.34193 27.2977C4.88619 27.0353 4.88619 26.3776 5.34193 26.1135L22.6517 16.0542C22.864 15.9317 23.1247 15.93 23.337 16.0542L34.6582 22.5901C35.1139 22.8525 35.1139 23.5102 34.6582 23.7743Z"
- fill="white" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M33.9016 22.1533L17.3484 31.7729C17.136 31.8955 16.8754 31.8972 16.663 31.7729L6.09839 25.6738L22.6516 16.0542C22.8639 15.9317 23.1246 15.93 23.3369 16.0542L33.9016 22.1533Z"
- fill="#696969" />
+ d="M34.8122 24.0855L35.1053 23.6611H34.1341L33.8541 24.0855H32.2617V29.8295H35.8403V29.0989H33.0142V26.7103H35.8534V25.9797H33.0142V24.8161H35.8534V24.0855H34.8122Z"
+ fill="#A50F0E" />
+ <path d="M27.1484 24.816H29.0427V29.8295H29.8126V24.816H31.7507V24.0854H27.1484V24.816Z" fill="#A50F0E" />
<path
- d="M34.6582 19.4706L17.3484 29.5298C17.1361 29.6524 16.8754 29.6541 16.6631 29.5298L5.34193 22.994C4.88619 22.7316 4.88619 22.0739 5.34193 21.8098L22.6517 11.7505C22.864 11.628 23.1247 11.6262 23.337 11.7505L34.6582 18.2863C35.1139 18.5487 35.1139 19.2065 34.6582 19.4706Z"
- fill="white" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M34.0495 17.9349L23.3372 11.7505C23.1248 11.6262 22.8642 11.628 22.6518 11.7505L5.9491 21.457L16.6615 27.6414C16.8738 27.7639 17.1362 27.7639 17.3468 27.6414L34.0495 17.9349Z"
- fill="#696969" />
+ d="M24.6807 23.9365C23.342 23.9365 22.209 25.0958 22.209 26.4651V29.8293H22.9614V26.4651C22.9614 25.4633 23.7139 24.6802 24.6763 24.6802C25.6475 24.6802 26.3475 25.4589 26.3475 26.5307V29.8293H27.1087V26.5307C27.1174 25.1002 26.0238 23.9365 24.6807 23.9365Z"
+ fill="#A50F0E" />
<path
- d="M21.2578 6.1042C21.1891 6.0639 21.1066 6.0639 21.0378 6.1042L15.4961 9.38816C15.3501 9.47403 15.3501 9.68957 15.4961 9.77544L17.1097 10.7252L5.47982 17.6173C5.02789 17.8854 5.02789 18.5531 5.47982 18.8195L16.7488 25.454C16.9602 25.5784 17.2214 25.5784 17.431 25.454L34.661 15.2429C35.1129 14.9747 35.1129 14.3071 34.661 14.0407L21.2578 6.1042Z"
- fill="white" />
+ d="M18.876 23.9365C17.5374 23.9365 16.4043 25.0958 16.4043 26.4651V29.8293H17.1568V27.655H20.5472V29.8293H21.3084V26.5307C21.3084 25.1002 20.2147 23.9365 18.876 23.9365ZM20.5472 26.9288H17.1568V26.4651C17.1568 25.4633 17.9092 24.6802 18.8716 24.6802C19.8428 24.6802 20.5428 25.4589 20.5428 26.5307V26.9288H20.5472Z"
+ fill="#A50F0E" />
+ <path
+ d="M15.6378 28.0839C15.6378 27.2439 15.1653 26.6227 14.2335 26.2421C13.1836 25.7959 13.0961 25.6384 13.0961 25.2797C13.0961 25.0216 13.2011 24.711 13.7129 24.711C14.1241 24.711 14.3035 24.8685 14.3691 25.2972L14.3997 25.5072L15.1347 25.3716L15.0997 25.1703C14.9641 24.4047 14.461 23.9629 13.7216 23.9629C12.9167 23.9629 12.3524 24.5272 12.3524 25.3366C12.3524 25.7215 12.4967 26.0759 12.7548 26.334C12.9692 26.544 13.1879 26.6709 13.7173 26.9158C14.1854 27.1214 14.391 27.2396 14.566 27.4014C14.776 27.6158 14.881 27.8608 14.881 28.1539C14.881 28.7795 14.391 29.2476 13.7391 29.2476C13.1004 29.2476 12.6192 28.8363 12.6192 28.2939V27.6683H11.8799V28.2983C11.8799 29.2213 12.7242 30 13.7216 30C14.7803 30 15.6378 29.1426 15.6378 28.0839Z"
+ fill="#A50F0E" />
+ <path
+ d="M34.1303 22.2346H31.3042V19.8416H34.1478V19.1111H31.3042V17.9474H34.1303V17.2168H30.5518V22.9652H34.1303V22.2346Z"
+ fill="#A50F0E" />
+ <path
+ d="M29.3134 21.7403C28.6353 22.2259 28.2547 22.3834 27.7341 22.3834C26.7498 22.3834 25.9361 21.7666 25.6342 20.8873C25.6255 20.8566 25.6124 20.8304 25.6036 20.7998V20.7954C25.5424 20.5854 25.5074 20.3579 25.5074 20.126C25.5074 19.8898 25.5424 19.6667 25.6036 19.4567V19.4523C25.6124 19.4217 25.6255 19.3911 25.6342 19.3605C25.9361 18.4811 26.7498 17.8687 27.7341 17.8687C28.2547 17.8687 28.6397 18.0262 29.3134 18.5118L29.484 18.6343L29.8996 18.0174L29.7377 17.8993C28.9547 17.3306 28.4122 17.1206 27.7297 17.1206C27.7254 17.1206 27.7254 17.1206 27.721 17.1206C26.9379 17.1206 26.1986 17.4356 25.6342 18.0087C25.0699 18.5774 24.7637 19.3298 24.7637 20.1173C24.7637 20.1217 24.7637 20.126 24.7637 20.1304C24.7637 20.1348 24.7637 20.1392 24.7637 20.1435C24.7637 20.931 25.0743 21.6791 25.6342 22.2522C26.1986 22.8253 26.9379 23.1402 27.721 23.1402C27.7254 23.1402 27.7254 23.1402 27.7297 23.1402C28.4122 23.1402 28.9547 22.9303 29.7377 22.3615L29.8996 22.2434L29.484 21.6266L29.3134 21.7403Z"
+ fill="#A50F0E" />
+ <path
+ d="M21.7491 17.0684C20.4104 17.0684 19.2773 18.2277 19.2773 19.597V22.9611H20.0298V20.7869H23.4202V22.9611H24.1814V19.6626C24.1814 18.232 23.0921 17.0684 21.7491 17.0684ZM20.0298 20.0651V19.6013C20.0298 18.5995 20.7823 17.8164 21.7447 17.8164C22.7159 17.8164 23.4158 18.5951 23.4158 19.667V20.0651H20.0298Z"
+ fill="#A50F0E" />
+ <path
+ d="M15.4277 21.2678H16.7664C17.8207 21.2678 18.8138 20.301 18.8138 19.2773C18.8138 18.7961 18.5557 18.223 18.1707 17.8467C17.9826 17.6674 17.7595 17.523 17.5057 17.4136C17.2126 17.278 16.9414 17.2124 16.6964 17.2124H14.6709V22.9608H15.4234V21.2678H15.4277ZM15.4277 17.9474H16.6877C17.4664 17.9474 18.0569 18.5161 18.0569 19.2729C18.0569 19.9947 17.497 20.5372 16.7533 20.5372H15.4277V17.9474Z"
+ fill="#A50F0E" />
+ <path
+ d="M13.9015 21.2196C13.9015 20.3797 13.429 19.7585 12.4972 19.3779C11.4472 18.9316 11.3597 18.7742 11.3597 18.4154C11.3597 18.1573 11.4647 17.8467 11.9766 17.8467C12.3878 17.8467 12.5672 18.0042 12.6328 18.4329L12.6634 18.6429L13.3984 18.5073L13.3634 18.3061C13.2277 17.5405 12.7246 17.0986 11.9853 17.0986C11.1804 17.0986 10.616 17.663 10.616 18.4723C10.616 18.8573 10.7604 19.2116 11.0185 19.4697C11.2329 19.6797 11.4516 19.8066 11.9809 20.0516C12.449 20.2572 12.6547 20.3753 12.8296 20.5372C13.0396 20.7515 13.1446 20.9965 13.1446 21.2896C13.1446 21.9152 12.6547 22.3833 12.0028 22.3833C11.3641 22.3833 10.8829 21.9721 10.8829 21.4296V20.804H10.1436V21.4296C10.1436 22.3527 10.9879 23.1314 11.9853 23.1314C13.0396 23.1358 13.9015 22.2739 13.9015 21.2196Z"
+ fill="#A50F0E" />
+ <path
+ d="M6.74855 17.9913H9.57463V17.2607H5.99609V23.0091H9.57463V22.2786H6.74855V19.8856H9.59213V19.155H6.74855V17.9913Z"
+ fill="#A50F0E" />
+ <path
+ d="M35.8493 17.0725C35.8493 16.2238 35.1581 15.5283 34.305 15.5283L24.0462 15.5108V12.9297C24.0462 11.4991 22.5413 10.3354 21.1983 10.3354C19.8596 10.3354 18.7266 11.4948 18.7266 12.864V16.2282H19.479V12.864C19.479 11.8622 20.2315 11.0792 21.1939 11.0792C22.1651 11.0792 23.2807 11.8579 23.2807 12.9297V16.2457L34.3006 16.237C34.7425 16.237 35.0881 16.6307 35.0881 17.0725V22.9653H35.8405V17.0725H35.8493Z"
+ fill="#A50F0E" />
+ <path
+ d="M15.0781 16.4166C15.87 16.4166 16.618 16.0973 17.1868 15.5242C17.7555 14.9511 18.0661 14.1942 18.0661 13.3937C18.0661 12.6018 17.7511 11.8538 17.1824 11.285C16.6093 10.712 15.8568 10.397 15.0563 10.397C13.4332 10.397 12.0596 11.7838 12.0596 13.4243C12.0639 15.0429 13.4464 16.4166 15.0781 16.4166ZM15.065 11.1407C16.3337 11.1407 17.3311 12.1337 17.3311 13.398C17.3311 14.6755 16.3424 15.6773 15.0825 15.6773C13.8095 15.6773 12.812 14.6842 12.812 13.4199C12.8077 12.1425 13.8007 11.1407 15.065 11.1407Z"
+ fill="#A50F0E" />
+ <path
+ d="M5.68104 29.103C5.23919 29.103 4.89359 28.7312 4.89359 28.2893V12.2822C4.89359 11.5822 5.37043 11.0923 6.04852 11.0923C6.80972 11.0923 7.38281 11.6522 7.38281 12.3959V16.2369H8.14402V12.3916C8.14402 11.9235 8.22276 11.7047 8.48087 11.4554C8.73461 11.2148 9.07146 11.0835 9.42581 11.0835C10.1301 11.0835 10.6639 11.6479 10.6639 12.3916V16.2369H11.4163V12.3259C11.4163 11.2629 10.4889 10.3311 9.43456 10.3311C8.91835 10.3311 8.37588 10.5585 7.9909 10.9348C7.89028 11.031 7.82029 11.1141 7.75029 11.2235C7.69342 11.1448 7.63655 11.0791 7.5578 10.996L7.54905 10.9873C7.36094 10.8079 7.15095 10.6548 6.94096 10.5454L6.93222 10.541C6.66973 10.4229 6.37662 10.3617 6.07039 10.3617C4.97233 10.3617 4.14551 11.241 4.14551 12.4091V21.7272V28.2981C4.14551 29.1468 4.83672 29.8424 5.68979 29.8424H11.4163V29.1118L5.68104 29.103Z"
+ fill="#A50F0E" />
</symbol>
<symbol id="finish" width="22" height="28" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/assets/form/structureNegatif.svg b/src/assets/form/structureNegatif.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b9259699015e3dd093dd9c6917e9899a0b7a0783
--- /dev/null
+++ b/src/assets/form/structureNegatif.svg
@@ -0,0 +1,49 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14133_116819)">
+<path d="M21 102.5H47.5L98 106.5H179.75C182.097 106.5 184 104.597 184 102.25C184 99.9028 182.097 98 179.75 98H175.5C174.119 98 173 96.8807 173 95.5C173 94.1193 174.119 93 175.5 93H183.75C189.687 93 194.5 88.1871 194.5 82.25V78.5C194.5 74.3579 191.142 71 187 71C182.858 71 179.5 67.6421 179.5 63.5V61C179.5 57.9624 177.038 55.5 174 55.5C170.962 55.5 168.5 53.0376 168.5 50V46.25C168.5 41.1414 172.641 37 177.75 37H185.25C188.426 37 191 34.4256 191 31.25C191 28.0744 188.426 25.5 185.25 25.5H169.5C166.186 25.5 163.5 22.8137 163.5 19.5C163.5 16.1863 160.814 13.5 157.5 13.5H113.574C112.428 13.5 111.5 12.5715 111.5 11.4262C111.5 6.22027 107.28 2 102.074 2H59.9262C54.7203 2 50.5 6.22027 50.5 11.4262C50.5 12.5715 49.5715 13.5 48.4262 13.5H36C28.5442 13.5 22.5 19.5442 22.5 27V35C22.5 38.0376 20.0376 40.5 17 40.5C13.9624 40.5 11.5 42.9624 11.5 46V47C11.5 50.5899 14.4101 53.5 18 53.5H24C28.1421 53.5 31.5 56.8579 31.5 61C31.5 65.1421 28.1421 68.5 24 68.5H17.75C10.1561 68.5 4 74.6561 4 82.25V85.5C4 94.8888 11.6112 102.5 21 102.5Z" fill="#E3E3E3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M132.201 51.806H155.194H176.418H191.746V51.7836C191.941 51.7984 192.137 51.806 192.336 51.806C196.569 51.806 200 48.3746 200 44.1418C200 40.0928 196.86 36.7772 192.883 36.4968C192.911 36.1011 192.925 35.7015 192.925 35.2985C192.925 26.1817 185.535 18.791 176.418 18.791C175.928 18.791 175.442 18.8124 174.963 18.8543C171.191 11.7997 163.753 7 155.194 7C142.821 7 132.791 17.0302 132.791 29.403L132.791 29.4182C132.596 29.4081 132.399 29.403 132.201 29.403C126.015 29.403 121 34.4181 121 40.6045C121 46.5931 125.7 51.4841 131.612 51.7907V51.806H132.201Z" fill="#676767"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28 37.9825C27.8347 37.9941 27.668 38 27.5 38C23.3579 38 20 34.4183 20 30C20 25.5817 23.3579 22 27.5 22C29.2006 22 30.769 22.6037 32.0271 23.6212C32.4631 16.575 38.1046 11 45 11C46.7774 11 48.4714 11.3704 50.0145 12.0409C52.7381 8.94552 56.6804 7 61.0658 7C69.2847 7 75.9474 13.8335 75.9474 22.2632C75.9474 23.6076 75.7779 24.9114 75.4596 26.1534C77.542 27.0488 79.0002 29.1187 79.0002 31.5292C79.0002 34.7595 76.3815 37.3782 73.1512 37.3782C73.1006 37.3782 73.0502 37.3775 73 37.3763V38H45H28V37.9825Z" fill="#676767"/>
+<rect width="109.134" height="109.134" transform="matrix(0.866025 0.5 -0.866025 0.5 99.7188 90.8662)" fill="#A0C7F0"/>
+<path d="M99.7216 74.0342L194.231 126.054L194.234 128.601L99.7216 183.168L5.20884 128.601L5.20904 126.053L99.7216 74.0342Z" fill="#4277AF"/>
+<rect width="109.134" height="109.134" transform="matrix(0.866025 0.5 -0.866025 0.5 99.7188 71.4873)" fill="url(#paint0_linear_14133_116819)"/>
+<rect width="80.5611" height="80.5611" transform="matrix(0.866025 0.5 -0.866025 0.5 99.7188 86.291)" fill="#769FCB"/>
+<path d="M174.22 117.5C174.553 115.167 174.22 110.3 170.22 109.5C165.22 108.5 172.72 119 174.22 117.5Z" fill="#3D8C5C"/>
+<path d="M177.72 117.5C177.553 116.167 177.82 113.7 180.22 114.5C183.22 115.5 178.721 118.5 177.72 117.5Z" fill="#66AF82"/>
+<path d="M174.72 118C177.386 115.166 181.92 108.4 178.72 104C174.72 98.4998 172.22 120 174.72 118Z" fill="#66AF82"/>
+<path d="M168.433 63.2912L171.273 54.6866C171.409 54.2768 171.791 54 172.223 54H181.734C182.561 54 183.03 54.9467 182.53 55.6051L180.303 58.5344C179.803 59.1928 180.273 60.1395 181.1 60.1395H186.62C187.506 60.1395 187.955 61.2065 187.334 61.8394L175.298 74.1242C174.521 74.9171 173.223 74.0428 173.666 73.0251L176.724 66.0039C177.012 65.3434 176.528 64.6047 175.807 64.6047H169.383C168.702 64.6047 168.22 63.9382 168.433 63.2912Z" fill="#FFA800"/>
+<path d="M41.6778 49.4743L39.8415 43.5627C39.7375 43.228 39.4279 43 39.0775 43H33.0559C32.405 43 32.0265 43.736 32.4053 44.2655L33.7058 46.0834C34.0846 46.6128 33.7061 47.3488 33.0552 47.3488H29.826C29.1288 47.3488 28.7652 48.1786 29.2379 48.6912L36.6517 56.7306C37.2564 57.3863 38.3183 56.7102 37.9801 55.8849L36.23 51.615C36.0143 51.0886 36.4014 50.5116 36.9702 50.5116H40.9138C41.4529 50.5116 41.8377 49.9892 41.6778 49.4743Z" fill="#FFA800"/>
+<path d="M44 106.623C42.0508 103.814 36.9827 98.9448 32.3045 101.941C26.4568 105.687 42.0508 110.368 44 106.623Z" fill="#3D8C5C"/>
+<path d="M44 105C42.4072 95.2152 38.0749 78.1075 33.4877 87.9555C27.7537 100.265 40.1774 105 44 105Z" fill="#66AF82"/>
+<path d="M127.81 55.6826H156.139V127.461L127.81 143.954L99.4805 160.444V88.6624L127.81 55.6826Z" fill="#EDF7FF"/>
+<path d="M42.8164 55.6826V127.461L71.1458 143.954L99.4752 160.444V88.6624L42.8164 55.6826Z" fill="#A0C7F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.2918 89.9649C59.2918 90.3507 58.8735 90.5911 58.5402 90.397L47.0804 83.7239C46.9266 83.6343 46.832 83.4698 46.832 83.2918V69.9439C46.832 69.5581 47.2503 69.3177 47.5836 69.5118L59.0434 76.1849C59.1972 76.2745 59.2918 76.439 59.2918 76.617V89.9649ZM74.6481 99.5496C74.9814 99.7437 75.3997 99.5033 75.3997 99.1175V85.7668C75.3997 85.5888 75.3051 85.4242 75.1512 85.3346L63.6915 78.6642C63.3582 78.4701 62.94 78.7106 62.94 79.0963V92.4444C62.94 92.6224 63.0346 92.7869 63.1884 92.8765L74.6481 99.5496ZM90.771 108.706C91.1043 108.9 91.5225 108.659 91.5225 108.273V94.9224C91.5225 94.7444 91.4278 94.5798 91.274 94.4902L79.8113 87.8196C79.478 87.6256 79.0598 87.8661 79.0598 88.2518V101.603C79.0598 101.781 79.1545 101.945 79.3084 102.035L90.771 108.706ZM90.771 130.231C91.1043 130.425 91.5225 130.184 91.5225 129.799V116.448C91.5225 116.27 91.4278 116.105 91.274 116.016L79.8113 109.345C79.478 109.151 79.0598 109.391 79.0598 109.777V123.128C79.0598 123.306 79.1545 123.471 79.3084 123.56L90.771 130.231ZM75.3997 120.646C75.3997 121.031 74.9815 121.272 74.6482 121.078L63.1884 114.407C63.0346 114.318 62.94 114.153 62.94 113.975V100.624C62.94 100.238 63.3582 99.998 63.6915 100.192L75.1512 106.863C75.3051 106.952 75.3997 107.117 75.3997 107.295V120.646ZM58.5403 111.925C58.8736 112.119 59.2918 111.879 59.2918 111.493V98.142C59.2918 97.964 59.1972 97.7995 59.0433 97.7099L47.5836 91.0394C47.2502 90.8454 46.832 91.0859 46.832 91.4716V104.822C46.832 105 46.9267 105.165 47.0805 105.255L58.5403 111.925Z" fill="#405C76"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.2918 84.8462L55.2678 88.4914L47.0804 83.7238C46.9266 83.6342 46.832 83.4697 46.832 83.2917V81.6267L54.4697 73.5215L59.0434 76.1848C59.1972 76.2744 59.2918 76.4389 59.2918 76.6169V84.8462ZM50.5495 92.7657L47.5836 91.0393C47.2502 90.8453 46.832 91.0858 46.832 91.4715V96.1333L50.5495 92.7657ZM48.906 106.317L58.2356 97.2397L59.0433 97.7098C59.1972 97.7994 59.2918 97.9639 59.2918 98.1419V110.865L58.1092 111.674L48.906 106.317ZM65.8714 115.969L63.3859 114.522L74.7373 106.621L75.1512 106.862C75.3051 106.952 75.3997 107.117 75.3997 107.295V109.821L65.8714 115.969ZM91.5225 99.4197L83.5989 104.532L80.408 102.675L91.5225 94.939V99.4197ZM72.2231 83.6301L75.1512 85.3345C75.3051 85.4241 75.3997 85.5887 75.3997 85.7667V99.1174C75.3997 99.5031 74.9814 99.7436 74.6481 99.5495L63.1884 92.8764C63.0899 92.819 63.0157 92.731 62.975 92.6283L72.2231 83.6301ZM65.1677 79.5233L62.94 81.5414V79.0962C62.94 78.7105 63.3582 78.47 63.6915 78.6641L65.1677 79.5233ZM86.9328 91.9638L79.0598 97.3476V88.2517C79.0598 87.866 79.478 87.6255 79.8113 87.8195L86.9328 91.9638ZM69.7464 103.716L63.6915 100.192C63.3582 99.9979 62.94 100.238 62.94 100.624V108.371L69.7464 103.716Z" fill="#333B51"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M139.47 83.831C139.136 84.0251 138.718 83.7846 138.718 83.3989V70.0509C138.718 69.8729 138.813 69.7083 138.967 69.6187L150.426 62.9483C150.76 62.7542 151.178 62.9947 151.178 63.3804V76.7284C151.178 76.9064 151.083 77.071 150.929 77.1606L139.47 83.831ZM139.47 104.671C139.136 104.865 138.718 104.624 138.718 104.239V90.888C138.718 90.71 138.813 90.5454 138.967 90.4559L150.426 83.7854C150.76 83.5914 151.178 83.8318 151.178 84.2175V97.5656C151.178 97.7436 151.083 97.9081 150.929 97.9977L139.47 104.671ZM111.48 119.447C111.48 119.832 111.899 120.073 112.232 119.879L123.692 113.208C123.846 113.119 123.94 112.954 123.94 112.776V99.428C123.94 99.0423 123.522 98.8019 123.189 98.9959L111.729 105.666C111.575 105.756 111.48 105.92 111.48 106.098V119.447ZM112.232 99.0391C111.899 99.2331 111.48 98.9926 111.48 98.6069V85.2589C111.48 85.0809 111.575 84.9163 111.729 84.8268L123.189 78.1563C123.522 77.9622 123.94 78.2027 123.94 78.5884V91.9364C123.94 92.1144 123.846 92.279 123.692 92.3686L112.232 99.0391Z" fill="#FF9C9B"/>
+<path d="M138.479 137.788C138.479 137.966 138.385 138.131 138.231 138.22L128.475 143.916L127.502 144.484C127.169 144.679 126.75 144.438 126.75 144.052V120.947C126.75 120.769 126.844 120.605 126.998 120.515L137.727 114.254C138.061 114.059 138.479 114.299 138.479 114.685V137.788Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M138.42 138.022C138.458 137.951 138.479 137.871 138.479 137.788V114.685C138.479 114.299 138.06 114.059 137.727 114.253L136.719 114.841C136.719 114.852 136.72 114.862 136.72 114.873V136.691C136.72 136.88 136.827 137.053 136.996 137.138L138.166 137.723C138.295 137.787 138.382 137.898 138.42 138.022Z" fill="#606060"/>
+<path d="M41.4996 54.5885L69.829 21.6087C70.1607 21.2221 70.6454 21 71.1531 21H99.4826C100.074 21 100.596 21.2971 100.911 21.7501L156.378 53.9423C156.837 54.0058 157.238 54.2481 157.512 54.6001L157.526 54.6058H157.52C157.748 54.9059 157.893 55.2751 157.893 55.6819C157.893 56.657 157.108 57.4445 156.141 57.4445H128.611L100.807 89.8157C100.461 90.2195 99.9759 90.4273 99.4854 90.4273C99.0787 90.4273 98.669 90.2859 98.3401 89.9974L42.2468 57.407C42.0419 57.3378 41.8486 57.2282 41.6784 57.0782C40.9486 56.4406 40.8678 55.3271 41.5025 54.5885H41.4996Z" fill="#FF5D5C"/>
+<path d="M99.4797 90.4244C99.0729 90.4244 98.6632 90.283 98.3344 89.9945L42.2468 57.407C42.0419 57.3378 41.8486 57.2282 41.6784 57.0782C40.9486 56.4406 40.8678 55.3271 41.5025 54.5885L69.829 21.6087C70.1607 21.2221 70.6454 21 71.1531 21H71.632L127.812 53.9164L127.258 59.0226L100.807 89.8157C100.461 90.2195 99.9759 90.4273 99.4854 90.4273L99.4797 90.4244Z" fill="#DA3635"/>
+<path d="M99.4797 90.4244C99.0729 90.4244 98.6632 90.283 98.3344 89.9945L42.2468 57.407C42.0419 57.3378 41.8486 57.2282 41.6784 57.0782C40.9486 56.4406 40.8678 55.3271 41.5025 54.5885L69.829 21.6087C70.1607 21.2221 70.6454 21 71.1531 21H71.632L127.812 53.9164L127.258 59.0226L100.807 89.8157C100.461 90.2195 99.9759 90.4273 99.4854 90.4273L99.4797 90.4244Z" fill="#DA3635"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M156.052 54.4755C156.437 54.5698 156.773 54.7933 157.012 55.1001L157.026 55.1058H157.02C157.248 55.4059 157.393 55.7751 157.393 56.1819C157.393 57.157 156.608 57.9446 155.641 57.9446H128.111L116.535 71.4225L99 90V86.5L128 54L156.052 54.4755Z" fill="#DA3635"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.03 82.649L100.807 89.8156C100.464 90.2154 99.9854 90.423 99.5 90.4271V85.9999L127.826 54.2554L127.98 58.0229L107.03 82.649Z" fill="#FF5D5C"/>
+<path d="M74.1914 59.6488V42.38L81.5767 38.0815V50.6076L74.1914 59.6488Z" fill="#EDF7FF"/>
+<path d="M66.8008 55.4629L74.186 59.7613V42.38L66.8008 38.0815V55.4629Z" fill="#A0C7F1"/>
+<path d="M66.8008 38.0816L74.186 33.7803L81.5713 38.0816L74.186 42.3801L66.8008 38.0816Z" fill="white"/>
+<path d="M69.6328 38.0851L74.2226 35.2793L78.8123 38.0851L74.2226 40.889L69.6328 38.0851Z" fill="#A0C7F1"/>
+<path d="M69.6328 38.0851L74.2226 35.2793V38.0851V40.889L69.6328 38.0851Z" fill="#769FCB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.7188 70.173L47.5836 69.512C47.2503 69.3179 46.832 69.5584 46.832 69.9441V83.292C46.832 83.47 46.9266 83.6346 47.0804 83.7241L58.5402 90.3973C58.8735 90.5914 59.2918 90.3509 59.2918 89.9652V89.2929L48.9671 83.2808C48.8133 83.1912 48.7188 83.0267 48.7188 82.8487V70.173ZM64.8267 79.3252V92.0013C64.8267 92.1792 64.9213 92.3438 65.0751 92.4334L75.3997 98.4455V99.1178C75.3997 99.5035 74.9814 99.744 74.6481 99.5499L63.1884 92.8767C63.0346 92.7872 62.94 92.6226 62.94 92.4446V79.0965C62.94 78.7108 63.3582 78.4704 63.6915 78.6644L64.8267 79.3252ZM80.9466 88.4805V101.16C80.9466 101.338 81.0412 101.502 81.1951 101.592L91.5225 107.602V108.274C91.5225 108.659 91.1043 108.9 90.771 108.706L79.3084 102.035C79.1545 101.946 79.0598 101.781 79.0598 101.603V88.252C79.0598 87.8663 79.478 87.6259 79.8113 87.8199L80.9466 88.4805ZM80.9466 110.006V122.685C80.9466 122.863 81.0412 123.028 81.1951 123.117L91.5225 129.127V129.799C91.5225 130.185 91.1043 130.425 90.771 130.231L79.3084 123.561C79.1545 123.471 79.0598 123.306 79.0598 123.128V109.777C79.0598 109.392 79.478 109.151 79.8113 109.345L80.9466 110.006ZM64.8267 100.853L63.6915 100.192C63.3582 99.9983 62.94 100.239 62.94 100.624V113.975C62.94 114.153 63.0346 114.318 63.1884 114.407L74.6482 121.078C74.9815 121.272 75.3997 121.032 75.3997 120.646V119.974L65.0751 113.964C64.9213 113.875 64.8267 113.71 64.8267 113.532V100.853ZM48.7188 91.7004V104.379C48.7188 104.557 48.8134 104.722 48.9672 104.812L59.2918 110.821V111.493C59.2918 111.879 58.8736 112.119 58.5403 111.925L47.0805 105.255C46.9267 105.165 46.832 105.001 46.832 104.823V91.4718C46.832 91.0861 47.2502 90.8457 47.5836 91.0397L48.7188 91.7004Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M151.174 66.3265L141.979 82.3682L139.466 83.8313C139.132 84.0253 138.714 83.7849 138.714 83.3992V70.0511C138.714 69.8731 138.809 69.7085 138.963 69.619L150.422 62.9485C150.756 62.7545 151.174 62.9949 151.174 63.3806V66.3265ZM111.477 116.756L120.833 100.365L123.185 98.9961C123.518 98.8021 123.936 99.0426 123.936 99.4282V112.776C123.936 112.954 123.842 113.119 123.688 113.208L112.228 119.879C111.895 120.073 111.477 119.832 111.477 119.447V116.756ZM150.267 83.876L139.641 104.569L139.466 104.671C139.132 104.865 138.714 104.625 138.714 104.239V102.256L147.083 85.7292L150.267 83.876Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M138.718 82.3634V83.3992C138.718 83.7849 139.136 84.0253 139.47 83.8313L150.929 77.1608C151.083 77.0713 151.178 76.9067 151.178 76.7287V63.3806C151.178 62.9949 150.76 62.7545 150.426 62.9485L149.416 63.5365V75.8488C149.416 76.0268 149.322 76.1914 149.168 76.2809L138.718 82.3634ZM138.718 103.203V104.239C138.718 104.625 139.136 104.865 139.47 104.671L150.929 97.9979C151.083 97.9084 151.178 97.7438 151.178 97.5659V84.2178C151.178 83.8321 150.76 83.5916 150.426 83.7856L149.416 84.3736V96.686C149.416 96.8639 149.322 97.0285 149.168 97.1181L138.718 103.203ZM111.48 118.411L121.93 112.329C122.084 112.239 122.179 112.074 122.179 111.896V99.5841L123.189 98.9961C123.522 98.8021 123.94 99.0426 123.94 99.4282V112.776C123.94 112.954 123.846 113.119 123.692 113.208L112.232 119.879C111.899 120.073 111.48 119.832 111.48 119.447V118.411ZM111.48 97.5714V98.6072C111.48 98.9929 111.899 99.2333 112.232 99.0393L123.692 92.3688C123.846 92.2793 123.94 92.1147 123.94 91.9367V78.5886C123.94 78.203 123.522 77.9625 123.189 78.1565L122.179 78.7445V91.0568C122.179 91.2348 122.084 91.3994 121.93 91.4889L111.48 97.5714Z" fill="#D86867"/>
+<path d="M100.219 160.5C100.385 153.5 102.819 139.8 111.219 141C121.719 142.5 102.719 162.999 100.219 160.5Z" fill="#66AF82"/>
+<path d="M100.219 160.5C101.552 156 102.419 146.4 95.219 144C86.219 141 95.219 164.5 100.219 160.5Z" fill="#3D8C5C"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_14133_116819" x1="86.6776" y1="54.5845" x2="23.1101" y2="137.189" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#D9EDFF"/>
+</linearGradient>
+<clipPath id="clip0_14133_116819">
+<rect width="200" height="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 0efadc6c0154dee1e1c793faffb9cb429ad976de..29c063e9f5ec8f9679e863f65f83df625959b439 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -82,10 +82,11 @@ button {
}
}
+// V3REMOVE we should probably rename this to "tagList" or something like this
.btn-grid {
display: inline-flex;
flex-wrap: wrap;
- gap: 8px;
+ gap: 12px 8px;
}
.tags-cloud {
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index a08dc357b2464b69be9144dac1fd3baa0d0f3909..76a0ac0c046b73b15f289daa7ae9644e7220f831 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -77,5 +77,7 @@ $app-background: $grey-9;
$modal-background-transparent: rgba($grey-1, 0);
$modal-background: rgba($grey-1, 0.25);
$app-background: $grey-9;
+$scrollbar-track: rgba($grey-9, 0.65);
+$scrollbar-thumb: $grey-1;
$focus-color: $grey-1;
$box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
diff --git a/src/styles.scss b/src/styles.scss
index 2c076593e05569df17672a176a14dd12e90b1544..2617fe1893c9ff6d2440e121ea11e35a595c96c9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -397,6 +397,9 @@ button {
// AUTOCOMPLETE
.autocomplete-items {
+ width: 600px;
+ padding-right: 16px;
+ border-radius: 8px;
border: 0.0625rem solid #d4d4d4;
box-shadow: $box-shadow;
box-sizing: border-box;
@@ -407,14 +410,16 @@ button {
cursor: pointer;
max-height: 250px;
overflow: auto;
-}
-.autocomplete-item {
- margin: 0;
- padding: 1em;
-}
-.autocomplete-item:hover {
- background-color: #dee6ee;
- cursor: pointer;
+ p {
+ padding: 12px;
+ &:not(:last-child) {
+ border-bottom: 1px solid $grey-7;
+ }
+ &:hover {
+ background-color: $grey-7;
+ cursor: pointer;
+ }
+ }
}
:focus-visible {