fix(design sprint1): login page, onboarding

src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss

@@ -4,7 +4,7 @@
 p.special {
   @include lato-regular-14;
   color: $grey-3;
-  margin: 4px 0 8px 0;
+  margin: 4px 0;
   width: 280px;
   &.invalid {
     color: $orange-warning;

src/app/login/login.component.scss

@@ -92,6 +92,20 @@
   }
   .footer {
     margin-bottom: 1rem;
+    gap: 24px;
+  }
+  ::ng-deep app-button {
+    flex: 1;
+    .secondary {
+      width: 100% !important;
+
+      div {
+        width: 95% !important;
+      }
+    }
+    .tertiary {
+      border-radius: 4px !important;
+    }
   }
 }
 

src/app/reset-password/reset-password.component.html

 <div class="content">
   <div class="resetPage">
     <div class="resetPasswordForm">
-      <h1>Mot de passe oublié</h1>
-      <p>Saisissez votre email afin de réinitialiser votre mot de passe</p>
-      <form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
-        <div class="form-group">
-          <label for="email">Email du compte</label>
-          <div fxLayout="row" fxLayoutGap="13px">
-            <input
-              type="text"
-              autocomplete="on"
-              formControlName="email"
-              class="form-input"
-              [ngClass]="{ inputInvalid: submitted && f.email.errors }"
-            />
+      <div class="title">
+        <h1>Mot de passe oublié</h1>
+        <p>Saisissez votre email afin de réinitialiser votre mot de passe</p>
+      </div>
+      <div class="fields">
+        <form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
+          <div class="form-group">
+            <label for="email">Email du compte</label>
+            <div fxLayout="row" fxLayoutGap="13px">
+              <input
+                type="text"
+                autocomplete="on"
+                formControlName="email"
+                class="form-input"
+                [ngClass]="{ inputInvalid: submitted && f.email.errors }"
+              />
+            </div>
+            <div *ngIf="submitted && f.email.errors" class="incorrectId">
+              <div *ngIf="f.email.errors.required">L'adresse e-mail est requise</div>
+            </div>
           </div>
-          <div *ngIf="submitted && f.email.errors" class="incorrectId">
-            <div *ngIf="f.email.errors.required">L'adresse e-mail est requise</div>
+          <div class="footer" fxLayout="row" fxLayoutAlign="space-between center">
+            <app-button
+              (action)="goLogin()"
+              [type]="'button'"
+              [text]="'Annuler'"
+              [style]="buttonTypeEnum.Secondary"
+              [extraClass]="'fullButton'"
+            >
+            </app-button>
+            <app-button
+              [type]="'submit'"
+              [disabled]="loading"
+              [text]="'Envoyer'"
+              [style]="buttonTypeEnum.Primary"
+              [extraClass]="'fullWidth'"
+            >
+            </app-button>
           </div>
-        </div>
-        <div class="footer" fxLayout="row" fxLayoutAlign="space-around center">
-          <app-button
-            (action)="goLogin()"
-            [type]="'button'"
-            [text]="'Annuler'"
-            [style]="buttonTypeEnum.Secondary"
-            [extraClass]="'fullButton'"
-          >
-          </app-button>
-          <app-button
-            [type]="'submit'"
-            [disabled]="loading"
-            [text]="'Envoyer'"
-            [style]="buttonTypeEnum.Primary"
-            [extraClass]="'fullButton'"
-          >
-          </app-button>
-        </div>
-      </form>
+        </form>
+      </div>
       <!-- <app-password-form *ngIf="token" (passwordForm)="onSubmitPassword($event)"></app-password-form> -->
     </div>
   </div>

src/app/reset-password/reset-password.component.scss

@@ -34,8 +34,9 @@
   }
 }
 .resetPasswordForm {
-  max-width: 430px;
-  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   h1,
   p {
     text-align: center;
@@ -50,8 +51,8 @@
 }
 .form-group {
   max-width: 320px;
-  margin: auto;
   margin-top: 2rem;
+
   label {
     color: $grey-2;
   }
@@ -71,6 +72,5 @@
 }
 .footer {
   width: 340px;
-  margin: auto;
   margin-top: 2rem;
 }

src/app/reset-password/reset-password.component.ts

@@ -23,7 +23,6 @@ export class ResetPasswordComponent implements OnInit {
     private formBuilder: FormBuilder,
     private authService: AuthService,
     private router: Router,
-    private activatedRoute: ActivatedRoute,
     private notificationService: NotificationService
   ) {}
 

src/app/shared/components/button/button.component.scss

@@ -249,11 +249,10 @@ button {
   }
 }
 .fullButton {
-  @include lato-regular-14;
   width: 125px !important;
 }
 .fullWidth {
-  width: 100%;
+  width: 100% !important;
 }
 .bigButton {
   width: 280px !important;

src/app/shared/components/checkbox-form/checkbox-form.component.html

-<button
-  (click)="clicked()"
-  [ngClass]="{ selected: isChecked }"
-  fxLayout="row"
-  fxLayoutAlign=" center"
-  fxLayoutGap="17px"
->
+<button (click)="clicked()" [ngClass]="{ selected: isChecked }">
   <div class="checkmark">
     <svg class="validate" aria-hidden="true">
-      <use [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareFull'"></use>
+      <use *ngIf="isChecked" [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareFull'"></use>
+      <use *ngIf="isChecked === false" [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareEmpty'"></use>
     </svg>
   </div>
-  <svg *ngIf="iconSvg" aria-hidden="true" [ngClass]="iconType">
+  <svg *ngIf="iconSvg" aria-hidden="true" [ngClass]="iconType" class="icon">
     <use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg"></use>
   </svg>
   <p>{{ text }}</p>

src/app/shared/components/checkbox-form/checkbox-form.component.scss

 @import '../../../../assets/scss/color';
 @import '../../../../assets/scss/typography';
 
-svg {
-  min-width: 44px;
-  width: 44px;
-  height: 44px;
-  fill: $primary-color;
-  stroke: $primary-color;
-  &.validate {
-    stroke: none;
-    display: none;
-  }
-  &.labels {
-    min-width: 50px;
-    width: 50px;
-  }
-}
-
 button {
   width: 296px;
+  height: 65px;
+  margin-top: 8px;
   background: $grey-8;
-  border-radius: 4px;
   padding: 0 16px;
-  height: 65px;
+  border-radius: 4px;
   outline: none;
-  border: none;
+  border: 3px solid transparent;
   cursor: pointer;
-  margin: 8px 0 0 0;
-  &.selected {
-    background: $white;
-    border: 3px solid $green-1;
-    .validate {
-      display: initial;
-      width: 100%;
-      height: 100%;
-    }
-    .checkmark {
-      width: 24px;
-      height: 24px;
-      // to compensate viewbox of svg
-      margin-right: 8px !important;
-      transform: translate(-5px);
-      border: none;
-    }
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+
+  svg.validate {
+    width: 24px;
+    height: 24px;
   }
+
+  svg.icon {
+    height: 44px;
+    width: 44px;
+    min-width: 44px;
+  }
+
   p {
     @include lato-bold-16;
     text-align: left;
     color: $grey-2;
   }
-  .checkmark {
-    width: 18px;
-    height: 18px;
-    min-width: 18px;
+
+  &:hover {
+    p {
+      color: $grey-3;
+    }
+  }
+
+  &.selected {
     background: $white;
-    border: 1px solid $grey-3;
-    border-radius: 4px;
-    box-sizing: border-box;
+    border: 3px solid $green-1;
   }
 }

src/assets/form/sprite.svg

@@ -27,6 +27,11 @@
 <path d="M7 12.8182L10.8889 16L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </symbol>
 
+<symbol id="checkVectorSquareEmpty" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.5" y="3.5" width="17" height="17" rx="3.5" fill="white" stroke="#696969"/>
+</symbol>
+
+
 <symbol id="typeStructure_privateLucratif" viewBox="0 0 20 45" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.56201 15.4203L16.562 10V43H3.56201V15.4203Z" stroke="none"/>
 <rect x="0.562012" y="44" width="19" height="1" stroke="none"/>