From b6c921981881db9b4227ec78edcb25bfe3ec6c07 Mon Sep 17 00:00:00 2001
From: Zaid Abed Jaser <zaid.abed-jaser@arbetsformedlingen.se>
Date: Thu, 29 Apr 2021 16:47:53 +0200
Subject: [PATCH] changed code according to comments from pull request

---
 .../src/app/data/models/staff.model.ts        |   2 +-
 .../create-account.component.html             | 107 +++++++-----------
 .../create-account.component.scss             |  44 +++----
 .../create-account.component.ts               |   5 +-
 .../staff-list/staff-list.component.html      |  29 +++--
 .../staff-list/staff-list.component.scss      |  14 +--
 .../staff-list/staff-list.component.ts        |  21 ----
 .../pages/staff/staff.component.html          |   3 +-
 .../pages/staff/staff.component.scss          |   5 -
 .../pages/staff/staff.module.ts               |   3 +-
 .../src/app/pages/start/start.component.html  |  82 ++++----------
 .../src/app/pages/start/start.component.scss  |  16 +--
 .../src/app/pages/start/start.component.ts    |  23 +---
 .../src/app/pages/start/start.module.ts       |   2 -
 package-lock.json                             |   4 +-
 15 files changed, 107 insertions(+), 253 deletions(-)

diff --git a/apps/dafa-web/src/app/data/models/staff.model.ts b/apps/dafa-web/src/app/data/models/staff.model.ts
index 97d602f..90dd257 100644
--- a/apps/dafa-web/src/app/data/models/staff.model.ts
+++ b/apps/dafa-web/src/app/data/models/staff.model.ts
@@ -6,7 +6,7 @@ export interface Staff {
   staffId: string;
   firstName: string;
   lastName: string;
-  kommun: string;
+  Utforandeverksamhet: string;
   active: boolean;
   service: string;
   fullName?: string;
diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html
index 62b1a38..f4b8ecf 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html
@@ -8,7 +8,7 @@
     </p>
   </digi-typography>
   <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
-    <div class="create-account__block-ssn">
+    <div class="create-account__block">
       <h2>Personuppgifter</h2>
       <div class="create-account__combined-inputs">
         <digi-ng-form-input
@@ -37,81 +37,56 @@
         [afInvalid]="ssnControl.invalid && ssnControl.dirty"
       ></digi-ng-form-input>
     </div>
-    <div class="create-account__block-service">
+    <div class="create-account__block">
       <h2>Tjänst</h2>
 
       <digi-ng-form-select afPlaceholder=" " afLabel="Välj tjänst" formControlName="service" [afSelectItems]="list">
       </digi-ng-form-select>
     </div>
+    <fieldset class="create-account__fieldset">
+      <legend>Tilldela behörigheter</legend>
 
-    <div class="create-account__block-permissions">
-      <h2>Tilldela behörigheter</h2>
-
-      <div class="assign-permissions">
-        <div class="assign-permissions__child">
-          <h3>Behörighet: administrera behörigheter</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
-            <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
-            <a href="#">Tab to me</a>
-          </digi-ng-popover>
-        </div>
-        <div>
-          <digi-ng-form-checkbox formControlName="permissions" afLabel="Välj administrera behörigheter">
-          </digi-ng-form-checkbox>
-        </div>
-
-        <div class="assign-permissions__child">
-          <h3>Behörighet: ta emot deltagare</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
-            <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
-            <a href="#">Tab to me</a>
-          </digi-ng-popover>
-        </div>
-        <div>
-          <digi-ng-form-checkbox formControlName="participant" afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox>
-        </div>
-
-        <div class="assign-permissions__child">
-          <h3>Behörighet: rapportering, planering och information om deltagare</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
-            <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
-            <a href="#">Tab to me</a>
-          </digi-ng-popover>
-        </div>
-        <div>
-          <digi-ng-form-checkbox
-            formControlName="infoParticipant"
-            afLabel="Välj rapportering, planering och infomration om deltagare"
-          >
-          </digi-ng-form-checkbox>
-        </div>
-
-        <div class="assign-permissions__child">
-          <h3>Behörighet: administrera ordrar och fakturor</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
-            <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
-            <a href="#">Tab to me</a>
-          </digi-ng-popover>
-        </div>
-        <div>
-          <digi-ng-form-checkbox formControlName="orderBills" afLabel="Välj administrera ordrar och fakturor">
-          </digi-ng-form-checkbox>
-        </div>
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox formControlName="permissions" afLabel="Välj administrera behörigheter">
+        </digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
       </div>
-    </div>
 
-    <div class="create-account__block-address">
-      <form class="search-address" (ngSubmit)="handleSearchSubmit()">
-        <h2>utförandeverksamheter</h2>
-        <digi-form-input-search
-          af-label-description="Sök på utförandeverksamheter"
-          (afOnInput)="handleSearchInput($event)"
-        ></digi-form-input-search>
-      </form>
-    </div>
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox formControlName="participant" afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox
+          formControlName="infoParticipant"
+          afLabel="Välj rapportering, planering och infomration om deltagare"
+        >
+        </digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox formControlName="orderBills" afLabel="Välj administrera ordrar och fakturor">
+        </digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+    </fieldset>
 
     <div class="create-account__footer">
-      <digi-button (afOnClick)="handleSearchSubmit()" af-type="reset" af-variation="secondary">Avbryt</digi-button>
+      <digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>
       <digi-button af-type="submit">Registrera konto</digi-button>
     </div>
   </form>
diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss
index 535f78a..665c230 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss
+++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss
@@ -1,16 +1,9 @@
 @import 'mixins/list';
 
 .create-account {
-  &__block-ssn {
+  &__block {
     max-width: var(--digi--typography--text--max-width);
   }
-  &__block-service {
-    max-width: var(--digi--typography--text--max-width);
-  }
-  &__block-address {
-    max-width: var(--digi--typography--text--max-width);
-  }
-
   &__combined-inputs {
     display: flex;
     gap: var(--digi--layout--gutter);
@@ -22,11 +15,16 @@
     margin-bottom: var(--digi--layout--gutter);
   }
 
+  &__permission-checkbox {
+    display: flex;
+    height: 5em;
+    align-items: center;
+  }
+
   &__fieldset {
-    margin: 0;
-    margin-bottom: var(--digi--layout--gutter);
     padding: 0;
-    border-width: 0;
+    border: 0;
+    margin-top: 2em;
 
     legend {
       width: 100%;
@@ -34,7 +32,7 @@
       align-items: center;
       margin: 0;
       font-weight: var(--digi--typography--font-weight--bold);
-      font-size: var(--digi--typography--font-size);
+      font-size: 1.5em;
       padding-bottom: var(--digi--layout--gutter--s);
     }
   }
@@ -57,32 +55,22 @@
   }
 
   &__footer {
-    margin-top: 50px;
+    margin-top: 2em;
     display: flex;
     gap: var(--digi--layout--gutter);
   }
 }
 
-.assign-permissions {
-  &__child {
-    &:first-child {
-      margin-top: 0px;
-    }
-    display: flex;
-    flex-direction: row;
-    height: 100px;
-    width: 100%;
-    align-items: center;
-    margin-right: 330px;
-    margin-top: 80px;
-  }
+.assign-permission-checkbox {
+  display: flex;
+  height: 5em;
+  align-items: center;
 }
 
 .search-address {
-  margin-top: 80px;
   width: 30%;
 }
 
 digi-ng-popover {
-  margin-left: 20px;
+  margin-left: 1em;
 }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
index d322b0d..7cd6da6 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
@@ -1,5 +1,6 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
 import { FormSelectBaseItem } from '@af/digi-ng/_form/form-select-base';
+import { PopoverDirection, PopoverOrientation } from '@af/digi-ng/_popover/popover';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -37,9 +38,6 @@ export class CreateAccountComponent {
     },
   ];
 
-  popoverOrientation: string;
-  popoverDirection: string;
-
   constructor(private formBuilder: FormBuilder, private staffService: StaffService, private router: Router) {
     this.formGroup = this.formBuilder.group({
       firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]),
@@ -55,7 +53,6 @@ export class CreateAccountComponent {
   }
 
   handleSearchSubmit(): void {
-    console.log(this.formGroup.value);
     // skicka searchvalue till en service och filtrera
   }
 
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html
index d03ea36..1e89ffd 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html
@@ -3,7 +3,6 @@
     <thead>
       <tr>
         <th scope="col" class="staff-list__column-head">
-
           <button class="staff-list__sort-button" (click)="handleSort('fullName')">
             Namn
             <ng-container *ngIf="sortBy?.key === 'fullName'">
@@ -22,9 +21,9 @@
           </button>
         </th>
         <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('kommun')">
+          <button class="staff-list__sort-button" (click)="handleSort('Utforandeverksamhet')">
             Utförandeverksamhet
-            <ng-container *ngIf="sortBy?.key === 'kommun'">
+            <ng-container *ngIf="sortBy?.key === 'Utforandeverksamhet'">
               <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
               <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
             </ng-container>
@@ -35,25 +34,23 @@
     <tbody>
       <tr *ngFor="let staff of pagedStaff">
         <th scope="row">
-          <!-- <a (click)="popup()" style="cursor: pointer;">
-            {{staff.fullName}}
-          <div class="staff-list__modal">
-           <p>asdasdasdasd</p>>
-          </div>
-        </a > -->
           <a [routerLink]="staff.id" class="staff-list__link">{{ staff.fullName }}</a>
         </th>
         <td>{{ staff.service }}</td>
         <td>{{ staff.kommun }}</td>
-
-
       </tr>
     </tbody>
   </table>
 </digi-ng-table>
 
-
-<digi-navigation-pagination *ngIf="staff.length > pagedStaff.length" class="staff-list__pagination"
-  [afTotalPages]="totalPages" [afCurrentResultStart]="currentResultStart" [afCurrentResultEnd]="currentResultEnd"
-  [afTotalResults]="staff.length" (afOnPageChange)="handlePagination($event.detail)" af-result-name="deltagare">
-</digi-navigation-pagination>
\ No newline at end of file
+<digi-navigation-pagination
+  *ngIf="staff.length > pagedStaff.length"
+  class="staff-list__pagination"
+  [afTotalPages]="totalPages"
+  [afCurrentResultStart]="currentResultStart"
+  [afCurrentResultEnd]="currentResultEnd"
+  [afTotalResults]="staff.length"
+  (afOnPageChange)="handlePagination($event.detail)"
+  af-result-name="deltagare"
+>
+</digi-navigation-pagination>
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss
index 90a309e..049da3c 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss
@@ -20,7 +20,7 @@
     align-items: center;
     gap: var(--digi--layout--gutter);
     cursor: pointer;
-    color: #1616B2;
+    color: #1616b2;
   }
 
   &__sort-icon {
@@ -33,16 +33,4 @@
     display: block;
     margin-top: var(--digi--layout--gutter);
   }
-  
-  // &__modal{
-  //   visibility: hidden;
-  //   position: fixed; /* Stay in place */
-  //   z-index: 1; /* Sit on top */
-  //   width: 25%; /* Full width */
-  //   height: 25%; /* Full height */
-  //   overflow: auto; /* Enable scroll if needed */
-  //   background-color:white; /* Fallback color */
-  //  border: 1px solid black;
-  // }
-  
 }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts
index 2cd1cac..bea5fda 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts
@@ -14,8 +14,6 @@ export class StaffListComponent {
   @Input() sortBy: SortBy | null;
   @Output() sorted = new EventEmitter<keyof Staff>();
 
-
-  
   private _currentPage$ = new BehaviorSubject<number>(1);
   private _staffPerPage = 10;
 
@@ -33,7 +31,6 @@ export class StaffListComponent {
     return [...this.staff].slice(this.currentResultStart - 1, this.currentResultEnd - 1);
   }
 
-
   get currentResultStart(): number {
     return (this.currentPage - 1) * this._staffPerPage + 1;
   }
@@ -49,22 +46,4 @@ export class StaffListComponent {
   handlePagination(page: number): void {
     this._currentPage$.next(page);
   }
-
-
-  // popup()
-  // {
-  //   var open = document.getElementsByClassName('staff-list__modal');
-    
-
-  //   for (let i = 0; i < open.length; i++) {
-  //     const slide = open[i] as HTMLElement;
-  //     if(slide.style.visibility == "hidden")
-  //     {
-  //     slide.style.visibility = "visible";
-  //   }else
-  //   slide.style.visibility = "hidden";
-  // }
-
-
-  // }
 }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html
index ddbcbc6..36ce7d4 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html
@@ -11,8 +11,7 @@
       <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
     </div>
 
-    <h3>Personallista</h3>
-    <hr />
+    <h2>Personallista</h2>
 
     <form class="staff__search-wrapper" (ngSubmit)="handleSearchSubmit()">
       <digi-form-input-search
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss
index be33d3b..db127d6 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss
@@ -1,7 +1,5 @@
 @import 'variables/gutters';
 .staff {
-  text-decoration: none;
-
   &__cta-wrapper {
     margin-top: var(--digi--layout--gutter);
   }
@@ -17,7 +15,4 @@
     margin-top: $digi--layout--gutter--l;
     margin-bottom: $digi--layout--gutter--xl;
   }
-  hr {
-    border: 1px solid #00005a;
-  }
 }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts
index 8570ac2..58075a6 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts
@@ -6,7 +6,7 @@ import { RouterModule } from '@angular/router';
 import { StaffListModule } from './components/staff-list/staff-list.module';
 import { StaffComponent } from './staff.component';
 import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -18,7 +18,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     DigiNgSkeletonBaseModule,
     StaffListModule,
     DigiNgLinkButtonModule,
-    ReactiveFormsModule,
     FormsModule,
   ],
 })
diff --git a/apps/dafa-web/src/app/pages/start/start.component.html b/apps/dafa-web/src/app/pages/start/start.component.html
index a1ef616..e711b77 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.html
+++ b/apps/dafa-web/src/app/pages/start/start.component.html
@@ -4,84 +4,42 @@
     <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
   </digi-typography>
   <div class="start__wrapper">
-    <div class="start__item-b">
-      <digi-ng-card
-        afHeading="Notiser"
-        [afHeadingLevel]="afHeadingLevel"
-        afLinkText="Deltagare"
-        afLinkHref="/mina-deltagare"
-        [afCardVariation]="afCardVariation"
+    <div class="start__main">
+      <!-- Syntax fel i digi info card? -->
+      <digi-info-card
+        af-heading="Notiser"
+        af-heading-level="h1"
+        af-type="info"
+        af-link-text="Deltagare"
+        af-link-href="/mina-deltagare"
       >
         <p>
           Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den också
           i vänster menyn på sidan
         </p>
-      </digi-ng-card>
+      </digi-info-card>
     </div>
 
-    <div class="start__item-c">
-      <digi-ng-notification-alert
-        [afVariation]="variation"
-        [afSize]="notificationAlertSize"
-        afHeading="Viktig information"
-        [afHeadingLevel]="afHeading"
-      >
+    <div class="start__sidebar">
+      <digi-ng-notification-alert afVariation="info" afSize="l" afHeading="Viktig information" afHeadingLevel="h3">
         <p>Large alert! Check the knobs section and play around!</p>
       </digi-ng-notification-alert>
-      <div class="start__item-c-alert">
+      <div class="start__sidebar-alert">
         <digi-ng-notification-alert
-          [afVariation]="variation"
-          [afSize]="notificationAlertSize"
+          afVariation="success"
+          afSize="l"
           afCloseable="true"
-          (afOnClose)="closed()"
-          afHeading="Viktig information"
-          [afHeadingLevel]="afHeading"
+          afHeading="Allt gick bra"
+          afHeadingLevel="h3"
         >
-          <p>Large alert! Check the knobs section and play around!</p>
+          <p>Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna</p>
         </digi-ng-notification-alert>
       </div>
     </div>
-    <div class="start__item-d">
-      <digi-ng-card afHeading="Statistik" [afHeadingLevel]="afHeadingLevel" [afCardVariation]="afCardVariation">
+    <div class="start__footer">
+      <digi-info-card af-heading="Statistik" af-heading-level="h1" af-type="info">
         <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
-      </digi-ng-card>
+      </digi-info-card>
     </div>
   </div>
-
-  <!-- <digi-typography>
-    <h1>Välkommen till DAFA 2.0</h1>
-    <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
-  </digi-typography>
-  <div class="start__wrapper">
-    <div class="start__card-info">
-      <div>
-        <digi-ng-card
-          afHeading="Notiser"
-          [afHeadingLevel]="afHeadingLevel"
-          afLinkText="Deltagare"
-          afLinkHref="/mina-deltagare"
-          [afCardVariation]="afCardVariation"
-        >
-          <p>
-            Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den
-            också i vänster menyn på sidan
-          </p>
-        </digi-ng-card>
-      </div>
-      <div class="start__card-info-notice">
-        <digi-ng-form-error-list afHeading="Viktig Information"> </digi-ng-form-error-list>
-
-        <digi-ng-form-error-list afHeading="Viktig Information"> </digi-ng-form-error-list>
-      </div>
-    </div>
-
-    <div class="start__statistics">
-      <div style="width: 100%; max-height: 100%">
-        
-        <digi-ng-card afHeading="Statistik" [afHeadingLevel]="afHeadingLevel" [afCardVariation]="afCardVariation">
-          <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
-        </digi-ng-card>
-      </div>
-    </div>
-  </div> -->
 </section>
diff --git a/apps/dafa-web/src/app/pages/start/start.component.scss b/apps/dafa-web/src/app/pages/start/start.component.scss
index 23d87df..b166548 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.scss
+++ b/apps/dafa-web/src/app/pages/start/start.component.scss
@@ -6,22 +6,18 @@
       'header header '
       'main  sidebar'
       'footer footer ';
-    grid-gap: 50px;
+    grid-gap: 3em;
   }
-  &__item-a {
-    grid-area: header;
-  }
-  &__item-b {
+  &__main {
     grid-area: main;
   }
-  &__item-c {
+  &__sidebar {
     grid-area: sidebar;
   }
-  &__item-c-alert {
-    visibility: visible;
-    margin-top: 30px;
+  &__sidebar-alert {
+    margin-top: 5%;
   }
-  &__item-d {
+  &__footer {
     grid-area: footer;
   }
 }
diff --git a/apps/dafa-web/src/app/pages/start/start.component.ts b/apps/dafa-web/src/app/pages/start/start.component.ts
index 340cf3f..da381f5 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.ts
+++ b/apps/dafa-web/src/app/pages/start/start.component.ts
@@ -5,6 +5,8 @@ import {
   NotificationAlertVariation,
 } from '@af/digi-ng/_notification/notification-alert';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { InfoCardHeadingLevel } from '@digi/core/dist/types/components/_info-card/info-card/info-card-heading-level.enum';
+import { InfoCardType } from '@digi/core/dist/types/components/_info-card/info-card/info-card-type.enum';
 
 @Component({
   selector: 'dafa-start',
@@ -12,23 +14,4 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./start.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StartComponent {
-  afHeadingLevel: CardHeadingLevel = CardHeadingLevel.H3;
-
-  afCardVariation: CardVariation = CardVariation.INFO;
-
-  variation: NotificationAlertVariation = NotificationAlertVariation.INFO;
-
-  notificationAlertSize: NotificationAlertSize = NotificationAlertSize.M;
-  afHeading: NotificationAlertHeadingLevel = NotificationAlertHeadingLevel.H3;
-
-  closed() {
-    var open = document.getElementsByClassName('start__item-c-alert');
-    for (let i = 0; i < open.length; i++) {
-      const slide = open[i] as HTMLElement;
-      if (slide.style.visibility == 'hidden') {
-        slide.style.visibility = 'visible';
-      } else slide.style.visibility = 'hidden';
-    }
-  }
-}
+export class StartComponent {}
diff --git a/apps/dafa-web/src/app/pages/start/start.module.ts b/apps/dafa-web/src/app/pages/start/start.module.ts
index a08fd4b..1a97273 100644
--- a/apps/dafa-web/src/app/pages/start/start.module.ts
+++ b/apps/dafa-web/src/app/pages/start/start.module.ts
@@ -3,7 +3,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StartComponent } from './start.component';
 import { DigiNgCardModule } from '@af/digi-ng/_card/card';
-import { DigiNgFormErrorListModule } from '@af/digi-ng/_form/form-error-list';
 import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
 
 @NgModule({
@@ -13,7 +12,6 @@ import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notific
     CommonModule,
     RouterModule.forChild([{ path: '', component: StartComponent }]),
     DigiNgCardModule,
-    DigiNgFormErrorListModule,
     DigiNgNotificationAlertModule,
   ],
 })
diff --git a/package-lock.json b/package-lock.json
index 39d0ce0..4ef64e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,7 +58,7 @@
         "typescript": "~4.0.3"
       },
       "engines": {
-        "node": "16.0.0"
+        "node": "14.16.1"
       }
     },
     "node_modules/@af/auth": {
@@ -22669,6 +22669,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "bindings": "^1.5.0",
@@ -23076,6 +23077,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "bindings": "^1.5.0",