From 9a947d65c74cfdcb12088d4766eca0314a987fb5 Mon Sep 17 00:00:00 2001
From: Zaid Abed Jaser <zaid.abed-jaser@arbetsformedlingen.se>
Date: Wed, 28 Apr 2021 16:59:03 +0200
Subject: [PATCH] updated startpage from flex to grid, and other minor changes

---
 .../create-account.component.html             | 190 +++++++-----------
 .../create-account.component.scss             |  37 ++--
 .../create-account.component.ts               |  39 ++--
 .../create-account/create-account.module.ts   |  16 +-
 .../pages/staff/staff.component.html          |  25 +--
 .../pages/staff/staff.component.scss          |  27 +--
 .../pages/staff/staff.component.ts            |   7 +-
 .../pages/staff/staff.module.ts               |   8 +-
 .../src/app/pages/start/start.component.html  | 121 +++++++----
 .../src/app/pages/start/start.component.scss  |  57 +++---
 .../src/app/pages/start/start.component.ts    |  23 ++-
 .../src/app/pages/start/start.module.ts       |  23 ++-
 package.json                                  |   2 +-
 13 files changed, 279 insertions(+), 296 deletions(-)

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 2064e82..62b1a38 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,8 +8,7 @@
     </p>
   </digi-typography>
   <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
-    
-    <div class="create-account__block">
+    <div class="create-account__block-ssn">
       <h2>Personuppgifter</h2>
       <div class="create-account__combined-inputs">
         <digi-ng-form-input
@@ -22,13 +21,13 @@
         ></digi-ng-form-input>
       </div>
       <digi-ng-form-input
-      class="create-account__input"
-      formControlName="lastName"
-      afLabel="Efternamn"
-      afInvalidMessage="Efternamn är obligatoriskt"
-      [afDisableValidStyle]="true"
-      [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
-    ></digi-ng-form-input>
+        class="create-account__input"
+        formControlName="lastName"
+        afLabel="Efternamn"
+        afInvalidMessage="Efternamn är obligatoriskt"
+        [afDisableValidStyle]="true"
+        [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
+      ></digi-ng-form-input>
       <digi-ng-form-input
         class="create-account__input"
         formControlName="ssn"
@@ -37,127 +36,82 @@
         [afDisableValidStyle]="true"
         [afInvalid]="ssnControl.invalid && ssnControl.dirty"
       ></digi-ng-form-input>
-      
-
+    </div>
+    <div class="create-account__block-service">
       <h2>Tjänst</h2>
 
-      <digi-ng-form-select-base [afSelectItems]="list" style="display: block; width: 50%; margin-bottom: 50px;"></digi-ng-form-select-base>
+      <digi-ng-form-select afPlaceholder=" " afLabel="Välj tjänst" formControlName="service" [afSelectItems]="list">
+      </digi-ng-form-select>
+    </div>
 
-      
-      <h2 >Tilldela behörigheter</h2>
+    <div class="create-account__block-permissions">
+      <h2>Tilldela behörigheter</h2>
 
-    <div class="assign-permissions">
+      <div class="assign-permissions">
         <div class="assign-permissions__child">
-        <h3>Behörighet: administrera behörigheter</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
-            <p>
-              Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
-            </p>
+          <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-base
-        formControlName = "permissions" 
-        afLabel="Välj administrera behörigheter"
-        >
-      </digi-ng-form-checkbox-base>
-      </div>
-
-  
-      <div class="assign-permissions__child">
-        <h3>Behörighet: ta emot deltagare</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
-            <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-base 
-         afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox-base>
-      </div>
-      
-
-      <div class="assign-permissions__child">
-        <h3>Behörighet: rapportering, planering och information om deltagare</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
-            <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-base 
-         afLabel="Välj rapportering, planering och infomration om deltagare">
-        </digi-ng-form-checkbox-base>
-      </div>
-
-      <div class="assign-permissions__child">
-        <h3>Behörighet: administrera ordrar och fakturor</h3>
-          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
-            <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-base 
-        afLabel="Välj administrera ordrar och fakturor">
-      </digi-ng-form-checkbox-base>
-      </div>
-    </div>
-  </div>
-
-  <!--  <div class="create-account__block">
-
-
-
-      <h2>Bemanning av personal</h2>
-
-      <fieldset class="create-account__fieldset">
-        <legend>Planerad frånvaroperiod</legend>
-        <div class="create-account__combined-inputs">
-          <digi-ng-form-datepicker
-            formControlName="outOfOfficeStart"
-            afLabel="Från"
-            [afMinDate]="todaysDate"
-          ></digi-ng-form-datepicker>
-          <digi-ng-form-datepicker
-            formControlName="outOfOfficeEnd"
-            afLabel="Till"
-            [afMinDate]="todaysDate"
-          ></digi-ng-form-datepicker>
         </div>
-        <digi-button (afOnClick)="addOutOfOfficeDate()">Lägg till</digi-button>
+        <div>
+          <digi-ng-form-checkbox formControlName="permissions" afLabel="Välj administrera behörigheter">
+          </digi-ng-form-checkbox>
+        </div>
 
-        <ul class="create-account__pending-out-of-office-list" *ngIf="pendingOutOfOfficeDates.length">
-          <li *ngFor="let date of pendingOutOfOfficeDates">
-            Från {{ date.start | localDate }} till {{ date.end | localDate }}
-            <digi-button af-variation="secondary" af-size="s" (afOnClick)="removeOutOfOfficeDate(date.id)">
-              <digi-icon-x slot="icon"></digi-icon-x>
-              <span>Ta bort</span>
-            </digi-button>
-          </li>
-        </ul>
-      </fieldset>
+        <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>
     </div>
--->
-    
-<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 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__footer">
-      <digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>
+    <div class="create-account__footer">
+      <digi-button (afOnClick)="handleSearchSubmit()" 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 6f6ed7a..535f78a 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,7 +1,13 @@
 @import 'mixins/list';
 
 .create-account {
-  &__block {
+  &__block-ssn {
+    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);
   }
 
@@ -57,27 +63,26 @@
   }
 }
 
-.assign-permissions
-{
-  &__child{
-    &:first-child
-    {
+.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;
+    display: flex;
+    flex-direction: row;
+    height: 100px;
+    width: 100%;
+    align-items: center;
+    margin-right: 330px;
+    margin-top: 80px;
   }
 }
 
-.search-address
-{
+.search-address {
   margin-top: 80px;
   width: 30%;
 }
 
-
+digi-ng-popover {
+  margin-left: 20px;
+}
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 96c47e0..d322b0d 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
@@ -17,27 +17,25 @@ import { BehaviorSubject } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateAccountComponent {
-
   private _searchValue$ = new BehaviorSubject<string>('');
 
   formGroup: FormGroup;
   todaysDate = new Date();
-  
+
   list: FormSelectBaseItem[] = [
     {
-      name:Service.STOM,
-      value: '1'
+      name: Service.STOM,
+      value: '1',
     },
     {
       name: Service.KVL,
-      value: '2'
+      value: '2',
     },
     {
       name: Service.KROM,
-      value: '3'
+      value: '3',
     },
-    
-  ]
+  ];
 
   popoverOrientation: string;
   popoverDirection: string;
@@ -48,39 +46,40 @@ export class CreateAccountComponent {
       lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
       ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]),
       staffId: this.formBuilder.control('', [RequiredValidator('Personal-ID')]),
-      permissions: this.formBuilder.control(true),
+      service: this.formBuilder.control(''),
+      permissions: this.formBuilder.control(false),
+      participant: this.formBuilder.control(false),
+      infoParticipant: this.formBuilder.control(false),
+      orderBills: this.formBuilder.control(false),
     });
   }
 
   handleSearchSubmit(): void {
-   // skicka searchvalue till en service och filtrera
+    console.log(this.formGroup.value);
+    // skicka searchvalue till en service och filtrera
   }
 
   handleSearchInput($event: CustomEvent): void {
     this._searchValue$.next($event.detail.target.value);
   }
 
-  get formselectItem(): FormSelectBaseItem[]
-  {
-    return  [
-
+  get formselectItem(): FormSelectBaseItem[] {
+    return [
       {
-        name:Service.STOM,
-        value: '1'
+        name: Service.STOM,
+        value: '1',
       },
       {
         name: Service.KVL,
-        value: '2'
+        value: '2',
       },
       {
         name: Service.KROM,
-        value: '3'
+        value: '3',
       },
-
     ];
   }
 
-
   get firstNameControl(): AbstractControl {
     return this.formGroup.get('firstName');
   }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts
index c985156..3fe912e 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts
@@ -7,15 +7,9 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { CreateAccountComponent } from './create-account.component';
-import {DigiNgFormSelectBaseModule} from '@af/digi-ng/_form/form-select-base';
-import {DigiNgPopoverModule} from '@af/digi-ng/_popover/popover';
-import {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base';
-
-
-
-
-
-
+import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
+import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
+import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -28,9 +22,9 @@ import {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base
     DigiNgFormInputModule,
     DigiNgFormRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
-    DigiNgFormSelectBaseModule,
+    DigiNgFormSelectModule,
     DigiNgPopoverModule,
-    DigiNgFormCheckboxBaseModule
+    DigiNgFormCheckboxModule,
   ],
 })
 export class CreateAccountModule {}
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 8a5d747..ddbcbc6 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
@@ -7,28 +7,21 @@
       leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
     </p>
 
-    <div class="staff__cta-wrapper" >
+    <div class="staff__cta-wrapper">
       <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
     </div>
 
-  
-
     <h3>Personallista</h3>
-    <hr style="border: 1px solid #00005a;">
+    <hr />
 
-    <div class="staff__search-wrapper">
-    <div class="staff__search-form">
-      <digi-form-input
-        af-label-description="Sök på namn"
+    <form class="staff__search-wrapper" (ngSubmit)="handleSearchSubmit()">
+      <digi-form-input-search
+        af-label="Sök kunder"
+        af-label-description="Sök på namn eller ärendenummer"
         (afOnInput)="handleSearchInput($event)"
-        [afSize]="size"
-      ></digi-form-input> 
-    </div>
-    <div class="staff__search-button">
-        <digi-button class="search-address"  (afOnClick)="handleSearchSubmit()">
-        Sök </digi-button >
-    </div>
-  </div>
+      ></digi-form-input-search>
+    </form>
+
     <dafa-staff-list
       *ngIf="filteredStaff$ | async as staff; else loadingRef"
       [staff]="staff"
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 d35ba55..be33d3b 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,10 +1,9 @@
-.staff { 
+@import 'variables/gutters';
+.staff {
   text-decoration: none;
-  
+
   &__cta-wrapper {
     margin-top: var(--digi--layout--gutter);
-  
-   
   }
 
   &__link {
@@ -12,23 +11,13 @@
     align-items: center;
     gap: var(--digi--layout--gutter--s);
   }
-  &__search-wrapper
-  {
+  &__search-wrapper {
     display: flex;
- 
-   
-  }
-  &__search-form
-  {
-  
     max-width: var(--digi--typography--text--max-width);
+    margin-top: $digi--layout--gutter--l;
+    margin-bottom: $digi--layout--gutter--xl;
   }
-  &__search-button
-  {
-   flex-direction: column;
-
-   margin-top: 46px;
-   
-   
+  hr {
+    border: 1px solid #00005a;
   }
 }
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts
index e946493..6a64e09 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts
@@ -1,4 +1,3 @@
-import { FormInputSize } from '@af/digi-ng/_form/form-input/form-input-size.enum';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IconType } from '@dafa-enums/icon-type.enum';
 import { SortBy } from '@dafa-models/sort-by.model';
@@ -18,8 +17,6 @@ export class StaffComponent {
   staffSortBy$: Observable<SortBy | null> = this.staffService.staffSortBy$;
   iconType = IconType;
 
-  size: FormInputSize.M;
-
   constructor(private staffService: StaffService) {}
 
   get searchValue(): string {
@@ -27,7 +24,7 @@ export class StaffComponent {
   }
 
   handleSearchSubmit(): void {
-   this.staffService.setSearchFilter(this.searchValue);
+    this.staffService.setSearchFilter(this.searchValue);
   }
 
   handleSearchInput($event: CustomEvent): void {
@@ -37,6 +34,4 @@ export class StaffComponent {
   handleStaffSort(key: keyof Staff): void {
     this.staffService.setStaffSortKey(key);
   }
-
-
 }
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 f24646a..8570ac2 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
@@ -5,8 +5,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 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 { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -17,7 +17,9 @@ import {DigiNgLinkButtonModule} from '@af/digi-ng/_link/link-button';
     DigiNgLinkInternalModule,
     DigiNgSkeletonBaseModule,
     StaffListModule,
-    DigiNgLinkButtonModule
+    DigiNgLinkButtonModule,
+    ReactiveFormsModule,
+    FormsModule,
   ],
 })
 export class StaffModule {}
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 780118c..a1ef616 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.html
+++ b/apps/dafa-web/src/app/pages/start/start.component.html
@@ -1,48 +1,87 @@
 <section class="start">
-   
-<div>
-  <h1>Välkommen till DAFA 2.0</h1>
-  <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
-</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__item-b">
+      <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>
 
-<br>
-
-<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>
-    <br>
-    <digi-ng-form-error-list afHeading="Viktig Information">
-     
-    </digi-ng-form-error-list>
-</div>
-
-  </div> <!--end of carf-info-->
-
-
-<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 class="start__item-c">
+      <digi-ng-notification-alert
+        [afVariation]="variation"
+        [afSize]="notificationAlertSize"
+        afHeading="Viktig information"
+        [afHeadingLevel]="afHeading"
+      >
+        <p>Large alert! Check the knobs section and play around!</p>
+      </digi-ng-notification-alert>
+      <div class="start__item-c-alert">
+        <digi-ng-notification-alert
+          [afVariation]="variation"
+          [afSize]="notificationAlertSize"
+          afCloseable="true"
+          (afOnClose)="closed()"
+          afHeading="Viktig information"
+          [afHeadingLevel]="afHeading"
+        >
+          <p>Large alert! Check the knobs section and play around!</p>
+        </digi-ng-notification-alert>
+      </div>
+    </div>
+    <div class="start__item-d">
+      <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>
-
-</div> <!--end of wrapper-->
-
+  <!-- <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 40059f1..23d87df 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.scss
+++ b/apps/dafa-web/src/app/pages/start/start.component.scss
@@ -1,30 +1,27 @@
-.start
-{
-    &__wrapper
-    {
-        display: flex;
-        flex-direction: column;
-       
-    
-    }
-   
-    &__card-info
-    {
-    
-       flex-direction: row;
-       display: flex;
-      
-      
-        
-    }
-    &__card-info-notice{
-        margin-left: 5%;
-    }
-    &__statistics{
-        display: flex;
-        flex-direction: row;
-        margin-top: 5%;
-    }
-   
-    
-}
\ No newline at end of file
+.start {
+  &__wrapper {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-areas:
+      'header header '
+      'main  sidebar'
+      'footer footer ';
+    grid-gap: 50px;
+  }
+  &__item-a {
+    grid-area: header;
+  }
+  &__item-b {
+    grid-area: main;
+  }
+  &__item-c {
+    grid-area: sidebar;
+  }
+  &__item-c-alert {
+    visibility: visible;
+    margin-top: 30px;
+  }
+  &__item-d {
+    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 6b52588..340cf3f 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.ts
+++ b/apps/dafa-web/src/app/pages/start/start.component.ts
@@ -1,4 +1,9 @@
 import { CardHeadingLevel, CardVariation } from '@af/digi-ng/_card/card';
+import {
+  NotificationAlertHeadingLevel,
+  NotificationAlertSize,
+  NotificationAlertVariation,
+} from '@af/digi-ng/_notification/notification-alert';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
@@ -8,12 +13,22 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StartComponent {
+  afHeadingLevel: CardHeadingLevel = CardHeadingLevel.H3;
 
+  afCardVariation: CardVariation = CardVariation.INFO;
 
-  afHeadingLevel : CardHeadingLevel = CardHeadingLevel.H3;
+  variation: NotificationAlertVariation = NotificationAlertVariation.INFO;
 
-  afCardVariation: CardVariation = CardVariation.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';
+    }
+  }
 }
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 4267d17..a08fd4b 100644
--- a/apps/dafa-web/src/app/pages/start/start.module.ts
+++ b/apps/dafa-web/src/app/pages/start/start.module.ts
@@ -1,19 +1,20 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+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 { 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({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [StartComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]),
-  DigiNgCardModule,
-  DigiNgFormErrorListModule
-],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: StartComponent }]),
+    DigiNgCardModule,
+    DigiNgFormErrorListModule,
+    DigiNgNotificationAlertModule,
+  ],
 })
 export class StartModule {}
diff --git a/package.json b/package.json
index 3fb5e71..8b5878d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/dafa-web-monorepo",
   "engines": {
-    "node": "16.0.0"
+    "node": "14.16.1"
   },
   "scripts": {
     "ng": "nx",