From 60337f91071cb501cd80eb9914a564506d1c9a22 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 10 Jan 2022 17:35:24 +0100
Subject: [PATCH] feat: design refacto for form, pop-up, carto and
password-reset
---
src/app/footer/footer.component.ts | 8 -
.../form/structure-form/form.component.html | 146 +++++++------
.../form/structure-form/form.component.scss | 17 +-
src/app/form/structure-form/form.component.ts | 7 +-
src/app/header/header.component.scss | 3 +-
.../reset-password.component.html | 196 +++++++++++++++---
.../reset-password.component.scss | 42 +++-
.../reset-password.component.ts | 39 +++-
src/app/resolvers/structure.resolver.ts | 2 -
.../components/button/button.component.scss | 4 +-
.../modal-confirmation.component.html | 2 +-
.../modal-confirmation.component.scss | 39 +---
.../signin-modal/signin-modal.component.scss | 2 +-
.../signup-modal/signup-modal.component.scss | 2 +-
.../structure-options-modal.component.scss | 2 +-
.../svg-icon/svg-icon.component.scss | 6 +-
.../modal-filter/modal-filter.component.scss | 4 +-
.../modal-filter/modal-filter.component.ts | 1 -
.../structure-list-search.component.html | 4 +-
.../structure-list-search.component.scss | 2 +-
src/assets/form/factures.svg | 118 +++++------
src/assets/form/schedule.svg | 4 +-
src/assets/scss/_typography.scss | 2 +-
src/styles.scss | 7 +-
24 files changed, 430 insertions(+), 229 deletions(-)
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
index e5bb30b81..4d75caf8e 100644
--- a/src/app/footer/footer.component.ts
+++ b/src/app/footer/footer.component.ts
@@ -7,12 +7,4 @@ import { Component } from '@angular/core';
})
export class FooterComponent {
constructor() {}
-
- public openLegalNotice(): void {
- console.log('openLegalNotice');
- }
-
- public openContactDialog(): void {
- console.log('openContactDialog');
- }
}
diff --git a/src/app/form/structure-form/form.component.html b/src/app/form/structure-form/form.component.html
index e4083fe48..1312f1e13 100644
--- a/src/app/form/structure-form/form.component.html
+++ b/src/app/form/structure-form/form.component.html
@@ -130,10 +130,12 @@
<p>Ces informations ne seront pas visibles sur la plateforme</p>
</div>
<div *ngIf="!isClaimMode" class="title">
- <h4>Vous possédez déja un compte ? Connectez-vous:</h4>
- <button class="btn-primary small next" *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen">
- Se connecter
- </button>
+ <div class="section">
+ <h4>Vous possédez déja un compte ? Connectez-vous:</h4>
+ <button class="btn-primary small next" *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen">
+ Se connecter
+ </button>
+ </div>
<h4>Sinon, inscrivez-vous en suivant le formulaire ci-dessous:</h4>
</div>
<div class="form-group" fxLayout="column">
@@ -243,16 +245,17 @@
invalid: accountForm.get('password').value.length < 8,
valid: accountForm.get('password').value.length >= 8
}"
+ class=""
>
<app-svg-icon
*ngIf="accountForm.get('password').value.length >= 8"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="accountForm.get('password').value.length < 8"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
@@ -266,18 +269,38 @@
>
<app-svg-icon
*ngIf="checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="!checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
<p>un caractère spécial</p>
</li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasLowerCase(accountForm.get('password').value),
+ valid: checkIfPasswordHasLowerCase(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasLowerCase(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasLowerCase(accountForm.get('password').value); s"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère en minuscule</p>
+ </li>
<li
[ngClass]="{
invalid: !checkIfPasswordHasUpperCase(accountForm.get('password').value),
@@ -286,13 +309,13 @@
>
<app-svg-icon
*ngIf="checkIfPasswordHasUpperCase(accountForm.get('password').value)"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="!checkIfPasswordHasUpperCase(accountForm.get('password').value); s"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
@@ -306,20 +329,20 @@
>
<app-svg-icon
*ngIf="checkIfPasswordHasDigit(accountForm.get('password').value)"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="!checkIfPasswordHasDigit(accountForm.get('password').value)"
- [iconClass]="'validation'"
+ [iconClass]="'validation-small'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
<p>un chiffre</p>
</li>
</ul>
- <div fxLayout="row" fxLayoutGap="13px">
+ <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
<input
[type]="isShowPassword ? 'text' : 'password'"
formControlName="password"
@@ -350,7 +373,7 @@
</div>
<div class="form-group" fxLayout="column">
<label for="confirmPassword">Vérification du mot de passe</label>
- <div fxLayout="row" fxLayoutGap="13px">
+ <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
<input
[type]="isShowConfirmPassword ? 'text' : 'password'"
formControlName="confirmPassword"
@@ -502,34 +525,38 @@
</div>
</div>
<div *ngIf="currentPage == pageTypeEnum.structureHours" class="page">
- <div class="title">
- <h3>Quels sont les horaires d'ouverture ?</h3>
- <p class="notRequired">facultatif</p>
- </div>
- <app-hour-picker
- *ngIf="hoursForm"
- (updateForm)="updateHours($event)"
- (updateFormError)="setHoursError()"
- [structureInput]="hoursForm"
- ></app-hour-picker>
- <div class="nextTitle">
- <h3>Avez-vous des précisions à apporter sur les horaires ?</h3>
- <p class="notRequired">facultatif</p>
+ <div class="section">
+ <div class="title">
+ <h3>Quels sont les horaires d'ouverture ?</h3>
+ <p class="notRequired">facultatif</p>
+ </div>
+ <app-hour-picker
+ *ngIf="hoursForm"
+ (updateForm)="updateHours($event)"
+ (updateFormError)="setHoursError()"
+ [structureInput]="hoursForm"
+ ></app-hour-picker>
</div>
- <div class="textareaBlock" fxLayout="column">
- <textarea
- rows="8"
- placeholder="Exemple : nous ne sommes ouvert que le 1er mercredi du mois."
- maxlength="500"
- formControlName="exceptionalClosures"
- ></textarea>
- <p>
- {{
- getStructureControl('exceptionalClosures').value
- ? getStructureControl('exceptionalClosures').value.length
- : 0
- }}/500
- </p>
+ <div>
+ <div class="title">
+ <h3>Avez-vous des précisions à apporter sur les horaires ?</h3>
+ <p class="notRequired">facultatif</p>
+ </div>
+ <div class="textareaBlock" fxLayout="column">
+ <textarea
+ rows="8"
+ placeholder="Exemple : nous ne sommes ouvert que le 1er mercredi du mois."
+ maxlength="500"
+ formControlName="exceptionalClosures"
+ ></textarea>
+ <p>
+ {{
+ getStructureControl('exceptionalClosures').value
+ ? getStructureControl('exceptionalClosures').value.length
+ : 0
+ }}/500
+ </p>
+ </div>
</div>
</div>
<div *ngIf="currentPage == pageTypeEnum.structurePmr" class="page">
@@ -612,7 +639,7 @@
<input
type="text"
(input)="setValidationsForm()"
- placeholder="facebook.com/resonum"
+ placeholder="facebook.com/resin"
formControlName="facebook"
class="form-input withIcon"
/>
@@ -644,7 +671,7 @@
<input
type="text"
(input)="setValidationsForm()"
- placeholder="twitter.com/resonum"
+ placeholder="twitter.com/resin"
formControlName="twitter"
class="form-input withIcon"
/>
@@ -677,7 +704,7 @@
type="text"
(input)="setValidationsForm()"
formControlName="instagram"
- placeholder="instagram.com/resonum"
+ placeholder="instagram.com/resin"
class="form-input withIcon"
/>
@@ -710,7 +737,7 @@
type="text"
(input)="setValidationsForm()"
formControlName="linkedin"
- placeholder="linkedin.com/in/resonum"
+ placeholder="linkedin.com/in/resin"
class="form-input withIcon"
/>
<app-svg-icon
@@ -1180,20 +1207,23 @@
</div>
</form>
<div *ngIf="currentPage == pageTypeEnum.cgu" class="page">
- <div class="title">
- <h3>
- Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon<span class="asterisk"
- >*</span
- >
- ?
- </h3>
+ <div class="section">
+ <div class="title">
+ <h3>
+ Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon<span
+ class="asterisk"
+ >*</span
+ >
+ ?
+ </h3>
+ </div>
+ <app-checkbox-form
+ [isChecked]="userAcceptSavedDate"
+ [text]="'J\'accepte'"
+ (checkEvent)="acceptDataBeSaved($event)"
+ >
+ </app-checkbox-form>
</div>
- <app-checkbox-form
- [isChecked]="userAcceptSavedDate"
- [text]="'J\'accepte'"
- (checkEvent)="acceptDataBeSaved($event)"
- >
- </app-checkbox-form>
<div *ngIf="!profile">
<div class="title">
<h3>Acceptez-vous de recevoir des mails d'informations de la part de Res'in ?</h3>
diff --git a/src/app/form/structure-form/form.component.scss b/src/app/form/structure-form/form.component.scss
index 986c73d07..0a5bb71f0 100644
--- a/src/app/form/structure-form/form.component.scss
+++ b/src/app/form/structure-form/form.component.scss
@@ -13,6 +13,11 @@
h3 {
margin: 0;
}
+
+h4 {
+ margin-bottom: 16px;
+}
+
.form {
background: white;
width: 100vw;
@@ -158,7 +163,7 @@ h3 {
}
}
.title {
- margin-bottom: 26px;
+ margin-bottom: 10px;
}
.nextTitle {
margin-bottom: 10px;
@@ -187,6 +192,7 @@ h3 {
}
}
&.notRequired {
+ margin-top: 0px;
font-style: italic;
color: $secondary-color;
}
@@ -296,15 +302,16 @@ h3 {
display: flex;
margin-left: 1%;
font-size: small;
+ align-items: center;
p {
margin-left: 10px;
- margin-top: 12px;
+ margin-top: unset;
}
&.valid {
color: $green;
}
&.invalid {
- color: $red;
+ color: $orange-warning;
}
}
.addressRow {
@@ -565,3 +572,7 @@ img {
max-width: 530px;
margin: 0 auto;
}
+
+.section {
+ padding-bottom: 2rem;
+}
diff --git a/src/app/form/structure-form/form.component.ts b/src/app/form/structure-form/form.component.ts
index 1fd107605..939f1f52e 100644
--- a/src/app/form/structure-form/form.component.ts
+++ b/src/app/form/structure-form/form.component.ts
@@ -1049,8 +1049,13 @@ export class FormComponent implements OnInit {
return false;
}
- public checkIfPasswordHasUpperCase(password): boolean {
+ public checkIfPasswordHasUpperCase(password: string): boolean {
if (password.match(CustomRegExp.UPPERCASE)) return true;
return false;
}
+
+ public checkIfPasswordHasLowerCase(password: string): boolean {
+ if (password.match(CustomRegExp.LOWERCASE)) return true;
+ return false;
+ }
}
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 6a991d53b..590c7925e 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -27,6 +27,7 @@
@include cn-regular-14;
text-align: initial;
outline: none;
+ margin-right: 70px;
p {
margin: 0;
}
@@ -74,7 +75,7 @@ a {
}
}
-@media #{$tablet} {
+@media #{$desktop} {
.logo-text {
display: none !important;
}
diff --git a/src/app/reset-password/reset-password.component.html b/src/app/reset-password/reset-password.component.html
index 13b83e7cc..6257275a9 100644
--- a/src/app/reset-password/reset-password.component.html
+++ b/src/app/reset-password/reset-password.component.html
@@ -27,40 +27,178 @@
</div>
</form>
</div>
- <form *ngIf="token" [formGroup]="resetFormChangePassword" (ngSubmit)="onSubmitPassword()">
- <div class="form-group">
- <label for="password">Mot de passe</label>
- <input
- type="password"
- autocomplete="on"
- formControlName="password"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && fPassword.password.errors }"
- />
- <div *ngIf="submitted && fPassword.password.errors" class="invalid-feedback">
- <div *ngIf="fPassword.password.errors.required">Le mot de passe est obligatoire</div>
- <div *ngIf="fPassword.password.errors.pattern">
- Le mot de passe doit avoir au minimun 8 caractères, une majuscule, une minuscule, un chiffre et un caractère
- spécial.
- </div>
+ <form *ngIf="token" [formGroup]="accountForm" (ngSubmit)="onSubmitPassword()">
+ <div class="form-group" fxLayout="column">
+ <label for="password">Création de mot de passe</label>
+ Le mot de passe doit contenir au minimum :
+ <ul>
+ <li
+ [ngClass]="{
+ invalid: accountForm.get('password').value.length < 8,
+ valid: accountForm.get('password').value.length >= 8
+ }"
+ class=""
+ >
+ <app-svg-icon
+ *ngIf="accountForm.get('password').value.length >= 8"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('password').value.length < 8"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>8 caractères</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasSpecialChar(accountForm.get('password').value),
+ valid: checkIfPasswordHasSpecialChar(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère spécial</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasLowerCase(accountForm.get('password').value),
+ valid: checkIfPasswordHasLowerCase(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasLowerCase(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasLowerCase(accountForm.get('password').value); s"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère en minuscule</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasUpperCase(accountForm.get('password').value),
+ valid: checkIfPasswordHasUpperCase(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasUpperCase(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasUpperCase(accountForm.get('password').value); s"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère en majuscule</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasDigit(accountForm.get('password').value),
+ valid: checkIfPasswordHasDigit(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasDigit(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasDigit(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un chiffre</p>
+ </li>
+ </ul>
+ <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
+ <input
+ [type]="isShowPassword ? 'text' : 'password'"
+ formControlName="password"
+ class="form-input password"
+ (input)="setValidationsForm()"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
+ (click)="showPassword()"
+ ></app-svg-icon>
+
+ <app-svg-icon
+ *ngIf="accountForm.get('password').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('password').invalid && accountForm.get('password').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
- <div class="form-group">
- <label for="confirmPassword">Confirmation du mot de passe</label>
- <input
- type="password"
- autocomplete="on"
- formControlName="confirmPassword"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && fPassword.confirmPassword.errors }"
- />
- <div *ngIf="submitted && fPassword.confirmPassword.errors" class="invalid-feedback">
- <div *ngIf="fPassword.confirmPassword.errors.required">La confirmation du mot de passe est obligatoire</div>
- <div *ngIf="fPassword.confirmPassword.errors.mustMatch">Les mot de passe ne sont pas les mêmes</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
+ [type]="isShowConfirmPassword ? 'text' : 'password'"
+ formControlName="confirmPassword"
+ class="form-input password"
+ (input)="setValidationsForm()"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
+ (click)="showConfirmPassword()"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('confirmPassword').valid && accountForm.get('confirmPassword').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('confirmPassword').invalid && accountForm.get('confirmPassword').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group">
- <button [disabled]="loading" class="btn btn-primary">
+ <button
+ [disabled]="loading"
+ class="btn btn-primary"
+ [disabled]="accountForm.get('confirmPassword').invalid || accountForm.get('password').invalid"
+ >
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Enregistrer
</button>
diff --git a/src/app/reset-password/reset-password.component.scss b/src/app/reset-password/reset-password.component.scss
index 89432adb7..2ebbc815c 100644
--- a/src/app/reset-password/reset-password.component.scss
+++ b/src/app/reset-password/reset-password.component.scss
@@ -1,11 +1,39 @@
-.resetPasswordForm {
+@import '../../assets/scss/color';
+
+.form-group {
+ margin-bottom: 26px;
+ label {
+ color: $grey-2;
+ }
+ .resetPasswordForm {
max-width: 500px;
-}
+ }
-.button {
+ .button {
margin-top: 20px;
-}
+ }
-.form-input {
- width: 100%;
- }
\ No newline at end of file
+ .form-input {
+ width: 256px;
+ }
+
+ ul {
+ padding-left: 0;
+ }
+
+ li {
+ display: flex;
+ margin-left: 1%;
+ font-size: small;
+ align-items: center;
+ p {
+ margin: 0 10px;
+ }
+ &.valid {
+ color: $green;
+ }
+ &.invalid {
+ color: $orange-warning;
+ }
+ }
+}
diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index 8a0669fd1..86eb3c24f 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -12,10 +12,13 @@ import { CustomRegExp } from '../utils/CustomRegExp';
})
export class ResetPasswordComponent implements OnInit {
public resetForm: FormGroup;
- public resetFormChangePassword: FormGroup;
+ public accountForm: FormGroup;
public token: string;
public loading = false;
public submitted = false;
+ // Condition form
+ public isShowConfirmPassword = false;
+ public isShowPassword = false;
constructor(
private formBuilder: FormBuilder,
@@ -36,7 +39,7 @@ export class ResetPasswordComponent implements OnInit {
}
private initPasswordForm(): void {
- this.resetFormChangePassword = this.formBuilder.group(
+ this.accountForm = this.formBuilder.group(
{
password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
confirmPassword: [''],
@@ -51,7 +54,7 @@ export class ResetPasswordComponent implements OnInit {
}
get fPassword(): { [key: string]: AbstractControl } {
- return this.resetFormChangePassword.controls;
+ return this.accountForm.controls;
}
public onSubmit(): void {
@@ -77,7 +80,7 @@ export class ResetPasswordComponent implements OnInit {
this.submitted = true;
// stop here if form is invalid
- if (this.resetFormChangePassword.invalid) {
+ if (this.accountForm.invalid) {
return;
}
@@ -91,4 +94,32 @@ export class ResetPasswordComponent implements OnInit {
}
);
}
+
+ public checkIfPasswordHasSpecialChar(password: string): boolean {
+ if (password.match(CustomRegExp.SPECHAR)) return true;
+ return false;
+ }
+
+ public checkIfPasswordHasDigit(password: string): boolean {
+ if (password.match(CustomRegExp.DIGIT)) return true;
+ return false;
+ }
+
+ public checkIfPasswordHasUpperCase(password: string): boolean {
+ if (password.match(CustomRegExp.UPPERCASE)) return true;
+ return false;
+ }
+
+ public checkIfPasswordHasLowerCase(password: string): boolean {
+ if (password.match(CustomRegExp.LOWERCASE)) return true;
+ return false;
+ }
+
+ public showPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
+
+ public showConfirmPassword(): void {
+ this.isShowConfirmPassword = !this.isShowConfirmPassword;
+ }
}
diff --git a/src/app/resolvers/structure.resolver.ts b/src/app/resolvers/structure.resolver.ts
index 3eb41ce25..a7eb4d9ce 100644
--- a/src/app/resolvers/structure.resolver.ts
+++ b/src/app/resolvers/structure.resolver.ts
@@ -11,8 +11,6 @@ export class StructureResolver implements Resolve<Structure> {
resolve(route: ActivatedRouteSnapshot): Observable<Structure> {
const structureId = route.params.id;
- console.log(route);
- console.info(`Resolver: ${structureId}`);
return this.structureService.getStructure(structureId).pipe(
map((res) => res),
catchError(() => {
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 4cea9a735..6cb409630 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -24,7 +24,7 @@ button {
.btnSearch {
@include background-hash($grey-2);
border-color: $grey-4;
- padding: 0 0 4px 5px;
+ padding: 0 0 4px 4px;
&:hover {
border-color: $grey-6;
.searchButton {
@@ -45,7 +45,7 @@ button {
padding: 3px 16px 3px 16px;
display: table-cell;
vertical-align: middle;
- border-radius: 4px;
+ border-radius: 2px;
@include btn-bold;
font-size: 16px;
&.withIcon {
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
index 018d67fad..d3b7781e2 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
@@ -4,8 +4,8 @@
<h3>ATTENTION</h3>
<p>{{ content }}</p>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
- <button class="btn-primary small leave" (click)="closeModal(true)">Confirmer</button>
<button class="btn-primary small" (click)="closeModal(false)">Annuler</button>
+ <button class="btn-primary small leave" (click)="closeModal(true)">Confirmer</button>
</div>
</div>
</div>
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
index 21be72c13..bae7c317e 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
@@ -3,45 +3,10 @@
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/z-index';
-.modalExitContainer {
- width: 100%;
- height: 100%;
- z-index: $modal-z-index;
- position: absolute;
- content: '';
- top: 0;
- background-color: $modal-background;
+.modalBackground {
.modal {
.contentModal {
- width: 100%;
- background: $white;
- padding: 35px 20px 18px 20px;
- h3 {
- @include cn-bold-18;
- color: $orange-warning;
- }
- p {
- @include cn-bold-16;
- color: $grey-1;
- text-align: center;
- }
- .footerModal {
- width: 100%;
- margin-top: 14px;
- @include cn-bold-16;
- .leave {
- background: none;
- color: $grey-1;
- text-decoration: underline;
- }
- }
+ padding: 20px !important;
}
- width: 350px;
- margin: auto;
- border-radius: 6px;
- @include background-hash($grey-2);
- border: 1px solid $grey-4;
- margin-top: 50vh;
- transform: translateY(-50%);
}
}
diff --git a/src/app/shared/components/signin-modal/signin-modal.component.scss b/src/app/shared/components/signin-modal/signin-modal.component.scss
index 35477fdae..313841ed3 100644
--- a/src/app/shared/components/signin-modal/signin-modal.component.scss
+++ b/src/app/shared/components/signin-modal/signin-modal.component.scss
@@ -11,7 +11,7 @@ h3 {
}
.form {
max-width: 391px;
- margin: auto;
+ margin: 0 32px;
width: 100%;
}
.emailAlreadyUse {
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.scss b/src/app/shared/components/signup-modal/signup-modal.component.scss
index 554f25628..50508b34c 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.scss
+++ b/src/app/shared/components/signup-modal/signup-modal.component.scss
@@ -26,7 +26,7 @@ h3 {
}
.form {
max-width: 391px;
- margin: auto;
+ margin: 0 32px;
margin-bottom: 8%;
}
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
index 2d34b631e..94ed697a3 100644
--- a/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
@@ -45,7 +45,7 @@ button {
}
}
.contentModal {
- padding: 35px 34px 18px 54px !important;
+ padding: 18px 32px !important;
.headerModal {
width: 100%;
}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index 46654c043..51458d05e 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -19,7 +19,11 @@
}
&.validation {
height: 40px;
- width: 26px;
+ width: 20px;
+ }
+ &.validation-small {
+ height: 26px;
+ width: 20px;
}
&.hover {
cursor: pointer;
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index d4912ddf0..909ebb5f2 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -11,13 +11,13 @@
margin-left: 0;
}
- margin-left: 213px;
+ margin-left: 201px;
}
.modalmoreFilters {
@media #{$desktop} {
margin-left: 0;
}
- margin-left: 410px;
+ margin-left: 404px;
}
.modal {
max-width: 754px;
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.ts b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
index f48250843..a7df06d05 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.ts
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
@@ -26,7 +26,6 @@ export class ModalFilterComponent implements OnInit {
// Management of the checkbox event (Check / Uncheck)
public onCheckboxChange(event, categ: string): void {
const checkValue: string = event.target.value;
- console.log(checkValue);
if (event.target.checked) {
this.checkedModules.push(new Module(checkValue, categ));
} else {
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
index 3489ad991..254eff125 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
@@ -96,7 +96,7 @@
<div class="footerSearchSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center">
<div class="checkbox no-width">
<div class="checkboxItem">
- <label>
+ <label fxLayout="row" fxLayoutAlign="center center">
<input
type="checkbox"
value="passNumerique"
@@ -110,7 +110,7 @@
</div>
<div class="checkbox no-width">
<div class="checkboxItem">
- <label>
+ <label fxLayout="row" fxLayoutAlign="center center">
<input
type="checkbox"
value="conseillerNumFranceServices"
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
index 30116fa01..46d79929c 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
@@ -39,7 +39,7 @@
height: 40px;
width: 100%;
border: 1px solid $grey-4;
- padding: 3px 16px 3px 16px;
+ padding: 3px 8px;
outline: none;
border-radius: 4px;
cursor: pointer;
diff --git a/src/assets/form/factures.svg b/src/assets/form/factures.svg
index 80ef31646..af7a8847d 100644
--- a/src/assets/form/factures.svg
+++ b/src/assets/form/factures.svg
@@ -1,86 +1,86 @@
-<svg width="170" height="142" viewBox="0 0 170 142" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<g opacity="0.35" filter="url(#filter0_f)">
-<path d="M96.7349 10.5946L25.9592 23.3835L22.9014 54.5339L93.6772 41.7449L96.7349 10.5946Z" fill="#DC2A59"/>
-<path d="M36.6071 82.3114L32.8077 117.377L103.583 104.589L107.383 69.5224L93.6772 41.7449L22.9014 54.5339L36.6071 82.3114Z" fill="#DC2A59"/>
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4810_101286)">
+<g opacity="0.35" filter="url(#filter0_f_4810_101286)">
+<path d="M101.735 29.5946L30.9591 42.3835L27.9013 73.5339L98.677 60.7449L101.735 29.5946Z" fill="#DC2A59"/>
+<path d="M41.607 101.311L37.8076 136.377L108.583 123.589L112.383 88.5224L98.677 60.7449L27.9013 73.5339L41.607 101.311Z" fill="#DC2A59"/>
</g>
-<path opacity="0.55" d="M97.7301 10.6923L97.8594 9.37522L96.5571 9.61055L25.7814 22.3995L25.0378 22.5338L24.964 23.2858L21.9801 53.6842L21.4173 53.7858L21.8783 54.7203L21.7769 55.7532L22.338 55.6519L35.5816 82.4929L31.8135 117.27L31.6695 118.599L32.9855 118.362L103.761 105.573L104.497 105.44L104.578 104.696L108.377 69.6301L108.408 69.3409L108.28 69.0799L94.7003 41.5585L97.7301 10.6923Z" fill="#348899" stroke="#DC2A59" stroke-width="2"/>
-<path d="M36.6072 82.3113L107.383 69.5224L103.584 104.588L32.8078 117.377L36.6072 82.3113Z" fill="#FDECF0"/>
-<path d="M36.6072 82.3114L107.383 69.5225L93.6771 41.745L22.9014 54.5339L36.6072 82.3114Z" fill="#F3D0D9"/>
-<path d="M25.9592 23.3835L96.7349 10.5946L93.6772 41.7449L22.9015 54.5338L25.9592 23.3835Z" fill="#FDECF0"/>
-<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="40" y="72" width="59" height="37">
-<path d="M42.7433 82.9215L98.8361 72.7857L97.8518 88.4515L75.4952 92.4912L74.3715 102.647L40.2676 108.81L42.7433 82.9215Z" fill="#FF0101"/>
+<path opacity="0.55" d="M30.7813 41.3995L30.0377 41.5338L29.9639 42.2858L26.9061 73.4362L26.8782 73.7203L27.0045 73.9763L40.5815 101.493L36.8134 136.27L36.6693 137.599L37.9854 137.362L108.761 124.573L109.497 124.44L109.577 123.696L113.377 88.6301L113.408 88.3409L113.279 88.0799L99.7001 60.5585L102.73 29.6923L102.859 28.3752L101.557 28.6105L30.7813 41.3995Z" fill="#348899" stroke="#DC2A59" stroke-width="2"/>
+<path d="M41.6069 101.311L112.383 88.5224L108.583 123.589L37.8075 136.377L41.6069 101.311Z" fill="#FDECF0"/>
+<path d="M41.6068 101.311L112.383 88.5225L98.6767 60.745L27.901 73.5339L41.6068 101.311Z" fill="#F3D0D9"/>
+<path d="M30.959 42.3835L101.735 29.5946L98.677 60.7449L27.9013 73.5339L30.959 42.3835Z" fill="#FDECF0"/>
+<mask id="mask0_4810_101286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="45" y="91" width="59" height="37">
+<path d="M47.7432 101.921L103.836 91.7857L102.852 107.452L80.495 111.491L79.3714 121.647L45.2675 127.81L47.7432 101.921Z" fill="#FF0101"/>
</mask>
-<g mask="url(#mask0)">
-<rect x="38.2935" y="86.4759" width="66.6075" height="2.70654" transform="rotate(-10.2426 38.2935 86.4759)" fill="#DC2A59"/>
-<path d="M37.0513 95.0104L99.7692 83.6775L99.7514 86.4311L37.5325 97.6738L37.0513 95.0104Z" fill="#DC2A59"/>
-<rect x="36.916" y="103.571" width="66.6075" height="2.70651" transform="rotate(-10.2426 36.916 103.571)" fill="#DC2A59"/>
+<g mask="url(#mask0_4810_101286)">
+<rect x="43.2933" y="105.476" width="66.6075" height="2.70654" transform="rotate(-10.2426 43.2933 105.476)" fill="#DC2A59"/>
+<path d="M42.0508 114.01L104.769 102.678L104.751 105.431L42.532 116.674L42.0508 114.01Z" fill="#DC2A59"/>
+<rect x="41.9158" y="122.571" width="66.6075" height="2.70651" transform="rotate(-10.2426 41.9158 122.571)" fill="#DC2A59"/>
</g>
-<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="28" y="17" width="61" height="37">
-<path d="M30.7004 27.6837L88.9863 17.1516L86.5106 43.0399L28.2247 53.5719L30.7004 27.6837Z" fill="#FF0101"/>
+<mask id="mask1_4810_101286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="33" y="36" width="61" height="37">
+<path d="M35.7004 46.6837L93.9863 36.1517L91.5106 62.0399L33.2247 72.572L35.7004 46.6837Z" fill="#FF0101"/>
</mask>
-<g mask="url(#mask1)">
-<path d="M27.3296 41.0132L51.2855 36.6845L50.5941 39.5598L27.8109 43.6766L27.3296 41.0132Z" fill="#DC2A59"/>
-<rect x="25.9912" y="48.8185" width="66.6075" height="2.70654" transform="rotate(-10.2426 25.9912 48.8185)" fill="#DC2A59"/>
+<g mask="url(#mask1_4810_101286)">
+<path d="M32.3297 60.0132L56.2856 55.6845L55.5942 58.5598L32.8109 62.6766L32.3297 60.0132Z" fill="#DC2A59"/>
+<rect x="30.9914" y="67.8185" width="66.6075" height="2.70654" transform="rotate(-10.2426 30.9914 67.8185)" fill="#DC2A59"/>
</g>
-<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="29" y="45" width="71" height="35">
-<path d="M88.263 45.1299L29.9771 55.6619L41.3563 79.0466L99.6421 68.5146L88.263 45.1299Z" fill="#FF0101"/>
+<mask id="mask2_4810_101286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="34" y="64" width="71" height="35">
+<path d="M93.2625 64.1299L34.9767 74.662L46.3558 98.0467L104.642 87.5146L93.2625 64.1299Z" fill="#FF0101"/>
</mask>
-<g mask="url(#mask2)">
-<rect x="31.9019" y="66.3155" width="66.6075" height="2.70654" transform="rotate(-10.2426 31.9019 66.3155)" fill="#DC2A59"/>
-<rect x="27.7964" y="58.8063" width="66.6075" height="2.70653" transform="rotate(-10.2426 27.7964 58.8063)" fill="#DC2A59"/>
-<rect x="35.3418" y="73.945" width="66.6075" height="2.70653" transform="rotate(-10.2426 35.3418 73.945)" fill="#DC2A59"/>
+<g mask="url(#mask2_4810_101286)">
+<rect x="36.9016" y="85.3156" width="66.6075" height="2.70654" transform="rotate(-10.2426 36.9016 85.3156)" fill="#DC2A59"/>
+<rect x="32.7961" y="77.8063" width="66.6075" height="2.70653" transform="rotate(-10.2426 32.7961 77.8063)" fill="#DC2A59"/>
+<rect x="40.3417" y="92.9451" width="66.6075" height="2.70653" transform="rotate(-10.2426 40.3417 92.9451)" fill="#DC2A59"/>
</g>
</g>
-<g clip-path="url(#clip1)">
-<g opacity="0.35" filter="url(#filter1_f)">
-<path d="M154.96 36.732L85.0298 19.9223L69.6811 47.2007L139.611 64.0104L154.96 36.732Z" fill="#348899"/>
-<path d="M71.0339 78.1459L53.4288 108.709L123.359 125.519L140.964 94.9556L139.611 64.0104L69.6811 47.2007L71.0339 78.1459Z" fill="#348899"/>
+<g clip-path="url(#clip1_4810_101286)">
+<g opacity="0.35" filter="url(#filter1_f_4810_101286)">
+<path d="M159.96 55.7321L90.0298 38.9224L74.6811 66.2007L144.611 83.0105L159.96 55.7321Z" fill="#348899"/>
+<path d="M76.0339 97.1459L58.4288 127.709L128.359 144.519L145.964 113.956L144.611 83.0105L74.6811 66.2007L76.0339 97.1459Z" fill="#348899"/>
</g>
-<path opacity="0.55" d="M155.831 37.2224L156.48 36.069L155.193 35.7597L85.2635 18.95L84.5288 18.7734L84.1583 19.432L69.1801 46.0518L68.6241 45.9181L68.6696 46.9592L68.1606 47.8637L68.7149 47.997L70.0222 77.8989L52.5623 108.21L51.8947 109.369L53.1951 109.682L123.125 126.491L123.852 126.666L124.225 126.018L141.83 95.4547L141.976 95.2026L141.963 94.9119L140.622 64.252L155.831 37.2224Z" fill="#348899" stroke="#348899" stroke-width="2"/>
-<path d="M71.0339 78.1458L140.964 94.9555L123.359 125.519L53.4287 108.709L71.0339 78.1458Z" fill="#EAF8FB"/>
-<path d="M71.0335 78.1459L140.963 94.9556L139.61 64.0104L69.6805 47.2007L71.0335 78.1459Z" fill="#C9ECF3"/>
-<path d="M85.0296 19.9223L154.96 36.732L139.611 64.0104L69.6809 47.2007L85.0296 19.9223Z" fill="#EAF8FB"/>
-<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="63" y="81" width="69" height="31">
-<path d="M76.4042 81.1765L131.827 94.4989L124.614 108.44L102.525 103.131L97.4046 111.973L63.7082 103.873L76.4042 81.1765Z" fill="#FF0101"/>
+<path opacity="0.55" d="M90.2635 37.9501L89.5288 37.7735L89.1583 38.432L73.8096 65.7104L73.6696 65.9592L73.682 66.2444L75.0222 96.8989L57.5623 127.21L56.8948 128.369L58.1951 128.682L128.125 145.491L128.852 145.666L129.225 145.018L146.83 114.455L146.976 114.203L146.963 113.912L145.622 83.252L160.831 56.2224L161.48 55.0691L160.193 54.7598L90.2635 37.9501Z" fill="#348899" stroke="#348899" stroke-width="2"/>
+<path d="M76.034 97.1459L145.964 113.956L128.359 144.519L58.4288 127.709L76.034 97.1459Z" fill="#EAF8FB"/>
+<path d="M76.0338 97.1459L145.964 113.956L144.611 83.0104L74.6808 66.2007L76.0338 97.1459Z" fill="#C9ECF3"/>
+<path d="M90.0299 38.9223L159.96 55.732L144.611 83.0104L74.6812 66.2007L90.0299 38.9223Z" fill="#EAF8FB"/>
+<mask id="mask3_4810_101286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="68" y="100" width="69" height="31">
+<path d="M81.4043 100.177L136.827 113.499L129.614 127.44L107.525 122.131L102.405 130.973L68.7084 122.873L81.4043 100.177Z" fill="#FF0101"/>
</mask>
-<g mask="url(#mask3)">
-<rect x="70.8989" y="82.6369" width="66.6075" height="2.70654" transform="rotate(13.5163 70.8989 82.6369)" fill="#348899"/>
-<path d="M66.3237 89.9475L128.292 104.843L127.166 107.357L65.6912 92.5791L66.3237 89.9475Z" fill="#348899"/>
-<rect x="62.751" y="97.728" width="66.6075" height="2.70651" transform="rotate(13.5163 62.751 97.728)" fill="#348899"/>
+<g mask="url(#mask3_4810_101286)">
+<rect x="75.8995" y="101.637" width="66.6075" height="2.70654" transform="rotate(13.5163 75.8995 101.637)" fill="#348899"/>
+<path d="M71.3239 108.948L133.292 123.843L132.167 126.357L70.6913 111.579L71.3239 108.948Z" fill="#348899"/>
+<rect x="67.7513" y="116.728" width="66.6075" height="2.70651" transform="rotate(13.5163 67.7513 116.728)" fill="#348899"/>
</g>
-<mask id="mask4" mask-type="alpha" maskUnits="userSpaceOnUse" x="74" y="25" width="72" height="38">
-<path d="M87.6366 25.7683L145.226 39.6116L132.53 62.3084L74.9407 48.4651L87.6366 25.7683Z" fill="#FF0101"/>
+<mask id="mask4_4810_101286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="79" y="44" width="72" height="38">
+<path d="M92.6367 44.7684L150.226 58.6116L137.53 81.3084L79.9408 67.4651L92.6367 44.7684Z" fill="#FF0101"/>
</mask>
-<g mask="url(#mask4)">
-<path d="M79.1812 36.6101L102.851 42.2998L101.06 44.6529L78.5486 39.2417L79.1812 36.6101Z" fill="#348899"/>
-<rect x="74.8115" y="43.2148" width="66.6075" height="2.70654" transform="rotate(13.5163 74.8115 43.2148)" fill="#348899"/>
+<g mask="url(#mask4_4810_101286)">
+<path d="M84.1814 55.6102L107.851 61.2999L106.06 63.6529L83.5488 58.2417L84.1814 55.6102Z" fill="#348899"/>
+<rect x="79.8118" y="62.2148" width="66.6075" height="2.70654" transform="rotate(13.5163 79.8118 62.2148)" fill="#348899"/>
</g>
-<mask id="mask5" mask-type="alpha" maskUnits="userSpaceOnUse" x="75" y="51" width="60" height="40">
-<path d="M133.292 64.9271L75.7023 51.0838L76.6956 77.0712L134.285 90.9144L133.292 64.9271Z" fill="#FF0101"/>
+<mask id="mask5_4810_101286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="70" width="60" height="40">
+<path d="M138.292 83.9271L80.7024 70.0838L81.6957 96.0711L139.285 109.914L138.292 83.9271Z" fill="#FF0101"/>
</mask>
-<g mask="url(#mask5)">
-<rect x="73.1719" y="61.6101" width="66.6075" height="2.70654" transform="rotate(13.5163 73.1719 61.6101)" fill="#117083"/>
-<rect x="72.4395" y="53.0832" width="66.6075" height="2.70653" transform="rotate(13.5163 72.4395 53.0832)" fill="#117083"/>
-<rect x="73.2466" y="69.9789" width="66.6075" height="2.70653" transform="rotate(13.5163 73.2466 69.9789)" fill="#117083"/>
+<g mask="url(#mask5_4810_101286)">
+<rect x="78.1721" y="80.6101" width="66.6075" height="2.70654" transform="rotate(13.5163 78.1721 80.6101)" fill="#117083"/>
+<rect x="77.4398" y="72.0832" width="66.6075" height="2.70653" transform="rotate(13.5163 77.4398 72.0832)" fill="#117083"/>
+<rect x="78.2468" y="88.9789" width="66.6075" height="2.70653" transform="rotate(13.5163 78.2468 88.9789)" fill="#117083"/>
</g>
</g>
<defs>
-<filter id="filter0_f" x="10.9014" y="-1.4054" width="108.481" height="130.783" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_f_4810_101286" x="15.9013" y="17.5946" width="108.481" height="130.783" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_4810_101286"/>
</filter>
-<filter id="filter1_f" x="41.4287" y="7.92233" width="125.531" height="129.597" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter1_f_4810_101286" x="46.4288" y="26.9224" width="125.531" height="129.597" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_4810_101286"/>
</filter>
-<clipPath id="clip0">
-<rect width="109.547" height="112.659" fill="white" transform="translate(0 19.4793) rotate(-10.2426)"/>
+<clipPath id="clip0_4810_101286">
+<rect width="109.547" height="112.659" fill="white" transform="translate(5 38.4794) rotate(-10.2426)"/>
</clipPath>
-<clipPath id="clip1">
-<rect width="109.547" height="112.659" fill="white" transform="translate(62.8438 5.89041) rotate(13.5163)"/>
+<clipPath id="clip1_4810_101286">
+<rect width="109.547" height="112.659" fill="white" transform="translate(67.8438 24.8904) rotate(13.5163)"/>
</clipPath>
</defs>
</svg>
diff --git a/src/assets/form/schedule.svg b/src/assets/form/schedule.svg
index 87830d059..d1c8acb01 100644
--- a/src/assets/form/schedule.svg
+++ b/src/assets/form/schedule.svg
@@ -1,5 +1,5 @@
-<svg width="179" height="179" viewBox="0 0 179 179" 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"/>
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="89.5" 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="#348899"/>
<path d="M62.9482 109V81.1562L55.0908 85.876V79.2842C60.1357 76.8408 64.126 73.8174 67.0615 70.2139H69.8037V109H62.9482ZM83.9365 106.073L86.6523 100.431C89.4473 102.61 91.8467 103.7 93.8506 103.7C98.2803 103.7 100.495 100.976 100.495 95.5264C100.495 92.9072 99.9941 91 98.9922 89.8047C97.9902 88.5918 96.3115 87.9854 93.9561 87.9854C91.8291 87.9854 89.7549 89.0312 87.7334 91.123L85.0176 89.3564V70.2139H105.821V76.041H91.6094V82.9492C92.7695 82.4219 94.1582 82.1582 95.7754 82.1582C99.5723 82.1582 102.49 83.2568 104.529 85.4541C106.586 87.6514 107.614 90.7627 107.614 94.7881C107.614 104.614 103.035 109.527 93.877 109.527C90.0801 109.527 86.7666 108.376 83.9365 106.073ZM124.146 69.1855L126.335 72.1123C124.7 73.3604 123.698 74.2832 123.329 74.8809C122.96 75.4785 122.775 76.1113 122.775 76.7793C122.775 77.4824 123.206 78.2646 124.067 79.126C124.929 79.9873 125.359 80.9102 125.359 81.8945C125.359 84.7422 123.953 86.166 121.141 86.166C119.717 86.166 118.609 85.709 117.818 84.7949C117.045 83.8809 116.658 82.6504 116.658 81.1035C116.658 76.252 119.154 72.2793 124.146 69.1855Z" fill="#DC2A59"/>
</svg>
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index b4067a794..658823519 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -174,5 +174,5 @@ h6,
@mixin btn-pass {
@include cn-regular-14;
- line-height: 21px;
+ line-height: 15.5px;
}
diff --git a/src/styles.scss b/src/styles.scss
index 1e80fc9f4..ed277ef13 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -119,11 +119,11 @@ button {
cursor: pointer;
}
.label {
- padding-left: 16px;
+ padding-left: 8px;
padding-right: 10px;
@include btn-pass;
&.pass {
- @include cn-regular-18;
+ @include cn-regular-16;
}
}
.customCheck {
@@ -202,7 +202,7 @@ button {
.contentModal {
width: 100%;
background: $white;
- padding: 35px 20px 18px 20px;
+ padding-top: 20px;
}
.footerModal {
width: 100%;
@@ -226,7 +226,6 @@ button {
}
}
min-width: 350px;
- width: 80%;
max-width: 560px;
margin: auto;
border-radius: 6px;
--
GitLab