From 7f959663e60cce9fcfa3dae0512c763ba091198b Mon Sep 17 00:00:00 2001
From: Uliana <like-me1@yandex.ru>
Date: Tue, 7 Apr 2020 07:54:41 +0200
Subject: [PATCH 01/19] 1229 Update the Fundamental library version to 0.7.0
 for Angular App

---
 .../luigi-client-ux-alerts-i18n.spec.js       |  4 +-
 .../luigi-client-ux-manager-features.spec.js  | 48 ++++++++------
 .../e2e/tests/1-angular/navigation.spec.js    |  2 +-
 test/e2e-test-application/package-lock.json   |  8 +--
 test/e2e-test-application/package.json        |  2 +-
 .../src/app/app.component.scss                |  3 +
 .../app/project/modal/modal.component.html    | 64 +++++++++++--------
 .../src/app/project/project.component.html    |  4 +-
 8 files changed, 78 insertions(+), 57 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
index 00eeaa4019..e83c20d832 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
@@ -117,11 +117,11 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('*[id$=_link_relativePath]').click();
       cy.expectPathToBe('/projects/pr1');
-      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
       cy.get('[data-testid=luigi-modal-dismiss]').click();
       cy.expectPathToBe('/projects/pr1');
       cy.get('*[id$=_link_relativePath]').click();
-      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
       cy.get('[data-testid=luigi-modal-confirm]').click();
       cy.expectPathToBe('/projects/pr1/hideSideNav');
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
index 85f8bf210d..861e2ef960 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
@@ -27,7 +27,7 @@ describe('Luigi Client ux manager features', () => {
       cy.get('.lui-backdrop').should('exist');
       //close modal
       cy.wrap($iframeBody)
-        .find('.fd-modal__footer')
+        .find('.fd-dialog__footer')
         .contains('Confirm')
         .click();
 
@@ -38,47 +38,57 @@ describe('Luigi Client ux manager features', () => {
     it('Luigi Client generic confirmation modal', () => {
       cy.goToUxManagerMethods($iframeBody);
 
-      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        'not.be.visible'
+      );
 
       cy.wrap($iframeBody)
-        .find('[data-testid=show-luigi-confirmation-modal]')
+        .find('[data-testid=show-luigi-confirmation-dialog]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-dismiss]').click();
-      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        'not.be.visible'
+      );
       cy.wrap($iframeBody)
-        .find('[data-testid=luigi-confirmation-modal-result]')
+        .find('[data-testid=luigi-confirmation-dialog-result]')
         .contains('Luigi confirmation modal has been dismissed');
 
       cy.wrap($iframeBody)
-        .find('[data-testid=show-luigi-confirmation-modal]')
+        .find('[data-testid=show-luigi-confirmation-dialog]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-confirm]').click();
-      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        'not.be.visible'
+      );
       cy.wrap($iframeBody)
-        .find('[data-testid=luigi-confirmation-modal-result]')
+        .find('[data-testid=luigi-confirmation-dialog-result]')
         .contains('Luigi confirmation modal has been confirmed');
     });
 
     it('Close Luigi Client generic confirmation modal by esc keypress', () => {
       cy.goToUxManagerMethods($iframeBody);
 
-      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        'not.be.visible'
+      );
       cy.wrap($iframeBody)
-        .find('[data-testid=show-luigi-confirmation-modal]')
+        .find('[data-testid=show-luigi-confirmation-dialog]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-dismiss]').trigger('keydown', {
         keyCode: 27,
         which: 27
       });
-      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
+      cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        'not.be.visible'
+      );
       cy.wrap($iframeBody)
-        .find('[data-testid=luigi-confirmation-modal-result]')
+        .find('[data-testid=luigi-confirmation-dialog-result]')
         .contains('Luigi confirmation modal has been dismissed');
     });
 
@@ -119,13 +129,13 @@ describe('Luigi Client ux manager features', () => {
           .contains('Projects')
           .click();
 
-        cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+        cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
 
         cy.expectPathToBe('/overview'); //the location is unchanged
 
         cy.get('[data-testid=luigi-modal-dismiss]').click();
 
-        cy.get('[data-testid=luigi-confirmation-modal]').should(
+        cy.get('[data-testid=luigi-confirmation-dialog]').should(
           'not.be.visible'
         );
 
@@ -141,13 +151,13 @@ describe('Luigi Client ux manager features', () => {
           .contains('Projects')
           .click();
 
-        cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
+        cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
 
         cy.expectPathToBe('/overview'); //the location is unchanged
 
         cy.get('[data-testid=luigi-modal-confirm]').click();
 
-        cy.get('[data-testid=luigi-confirmation-modal]').should(
+        cy.get('[data-testid=luigi-confirmation-dialog]').should(
           'not.be.visible'
         );
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
index 0c3bfb7b12..d1fa69a4c4 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
@@ -17,7 +17,7 @@ describe('Navigation', () => {
           title: 'Preserved View',
           size: 'm'
         });
-        cy.get('.fd-modal__close').click();
+        cy.get('.fd-dialog__close').click();
         cy.expectPathToBe('/overview');
       });
     });
diff --git a/test/e2e-test-application/package-lock.json b/test/e2e-test-application/package-lock.json
index 6159398d21..4c6477d0c1 100644
--- a/test/e2e-test-application/package-lock.json
+++ b/test/e2e-test-application/package-lock.json
@@ -6838,11 +6838,11 @@
       "dev": true
     },
     "fundamental-styles": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.6.0.tgz",
-      "integrity": "sha512-jn3earSGApXH87Pu38EBI/5JHyfUsS9pBbinDJQmgTFifGBaHyfkfSwfU9Gx+vWeq+hPZSJ4FIoPqIVDybjnBQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.7.0.tgz",
+      "integrity": "sha512-wq6bCGjS6uUN1lbiBBC1NA8U+OJ57i6vpkNFt3bPf/jc6Vugvpt4fpGbU9tuEoeB1YqUIGL7A6DSuzOKbJy7NA==",
       "requires": {
-        "@sap-theming/theming-base-content": "~11.1.16"
+        "@sap-theming/theming-base-content": "~11.1.17"
       }
     },
     "gauge": {
diff --git a/test/e2e-test-application/package.json b/test/e2e-test-application/package.json
index dcaff7f178..92677518bf 100644
--- a/test/e2e-test-application/package.json
+++ b/test/e2e-test-application/package.json
@@ -28,7 +28,7 @@
     "@luigi-project/core": "1.0.0",
     "ajv": "^6.1.1",
     "core-js": "^2.4.1",
-    "fundamental-styles": "^0.6.0",
+    "fundamental-styles": "^0.7.0",
     "rxjs": "6.2.0",
     "zone.js": "^0.8.14",
     "lodash": ">=4.17.13"
diff --git a/test/e2e-test-application/src/app/app.component.scss b/test/e2e-test-application/src/app/app.component.scss
index abb86acec7..81b18e4af6 100644
--- a/test/e2e-test-application/src/app/app.component.scss
+++ b/test/e2e-test-application/src/app/app.component.scss
@@ -12,3 +12,6 @@ $fd-icons-path: '~fundamental-styles/scss/icons/';
 .fd-list-group__item {
   display: block;
 }
+.fd-dialog {
+  z-index: 2;
+}
diff --git a/test/e2e-test-application/src/app/project/modal/modal.component.html b/test/e2e-test-application/src/app/project/modal/modal.component.html
index f5e4b4d846..dbc8d7e418 100644
--- a/test/e2e-test-application/src/app/project/modal/modal.component.html
+++ b/test/e2e-test-application/src/app/project/modal/modal.component.html
@@ -1,38 +1,46 @@
 <div
   *ngIf="modalActive"
-  class="fd-ui__overlay fd-overlay fd-overlay--modal"
+  class="fd-dialog fd-dialog--active fd-dialog-docs-static"
+  role="dialog"
+  data-testid="luigi-confirmation-dialog"
   aria-hidden="false"
 >
-  <div class="fd-modal" role="dialog">
-    <div class="fd-modal__content" role="document">
-      <header class="fd-modal__header">
-        <h1 class="fd-modal__title">Modal Header</h1>
-        <button
-          (click)="onCloseModalClick()"
-          class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l"
-          aria-label="close"
-        ></button>
-      </header>
-      <div class="fd-modal__body">
-        <p>
-          Lorem tipsum dolor sit amet, consectetur adipisicing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur.
-        </p>
+  <div class="fd-dialog__content fd-dialog__content--s">
+    <header class="fd-dialog__header fd-bar fd-bar--header">
+      <div class="fd-bar__left">
+        <div class="fd-bar__element">
+          <h1 class="fd-dialog__title">Modal Header</h1>
+        </div>
       </div>
-      <footer class="fd-modal__footer">
-        <div class="fd-modal__actions">
-          <button (click)="onCloseModalClick()" class="fd-button--light">
-            Cancel
-          </button>
-          <button (click)="onCloseModalClick()" class="fd-button">
+    </header>
+    <div class="fd-dialog__body">
+      <p>
+        Lorem tipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+    </div>
+    <footer class="fd-dialog__footer fd-bar fd-bar--footer">
+      <div class="fd-bar__right">
+        <div class="fd-bar__element">
+          <button
+            (click)="onCloseModalClick()"
+            class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact"
+          >
             Confirm
           </button>
         </div>
-      </footer>
-    </div>
+        <div class="fd-bar__element">
+          <button
+            (click)="onCloseModalClick()"
+            class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </footer>
   </div>
 </div>
diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
index 1294e01de6..1f1c26ba27 100644
--- a/test/e2e-test-application/src/app/project/project.component.html
+++ b/test/e2e-test-application/src/app/project/project.component.html
@@ -34,7 +34,7 @@ <h3 class="fd-panel__title">Confirmation modal</h3>
       <div class="fd-panel__body">
         <button
           class="fd-button"
-          data-testid="show-luigi-confirmation-modal"
+          data-testid="show-luigi-confirmation-dialog"
           (click)="showConfirmationModal()"
         >
           Show Luigi confirmation modal
@@ -46,7 +46,7 @@ <h3 class="fd-panel__title">Confirmation modal</h3>
         </p>
         <p
           class="fd-has-font-style-italic"
-          data-testid="luigi-confirmation-modal-result"
+          data-testid="luigi-confirmation-dialog-result"
           ngClass="{{
             confirmationModalResult === 'confirmed'
               ? 'fd-has-color-status-1'

From e8440d1e958b9c3170471e881f47a876a7229a32 Mon Sep 17 00:00:00 2001
From: Uliana <like-me1@yandex.ru>
Date: Tue, 7 Apr 2020 10:43:56 +0200
Subject: [PATCH 02/19] fix tests after changing the modal layoutt

---
 .../luigi-client-ux-alerts-i18n.spec.js       |  4 +-
 .../luigi-client-ux-manager-features.spec.js  | 46 ++++++++-----------
 .../e2e/tests/1-angular/navigation.spec.js    |  2 +-
 .../app/project/modal/modal.component.html    |  3 +-
 .../src/app/project/project.component.html    |  4 +-
 5 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
index e83c20d832..00eeaa4019 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
@@ -117,11 +117,11 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('*[id$=_link_relativePath]').click();
       cy.expectPathToBe('/projects/pr1');
-      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
       cy.get('[data-testid=luigi-modal-dismiss]').click();
       cy.expectPathToBe('/projects/pr1');
       cy.get('*[id$=_link_relativePath]').click();
-      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
       cy.get('[data-testid=luigi-modal-confirm]').click();
       cy.expectPathToBe('/projects/pr1/hideSideNav');
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
index 861e2ef960..4942814ab7 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
@@ -38,57 +38,47 @@ describe('Luigi Client ux manager features', () => {
     it('Luigi Client generic confirmation modal', () => {
       cy.goToUxManagerMethods($iframeBody);
 
-      cy.get('[data-testid=luigi-confirmation-dialog]').should(
-        'not.be.visible'
-      );
+      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
 
       cy.wrap($iframeBody)
-        .find('[data-testid=show-luigi-confirmation-dialog]')
+        .find('[data-testid=show-luigi-confirmation-modal]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-modal').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-dismiss]').click();
-      cy.get('[data-testid=luigi-confirmation-dialog]').should(
-        'not.be.visible'
-      );
+      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
       cy.wrap($iframeBody)
-        .find('[data-testid=luigi-confirmation-dialog-result]')
+        .find('[data-testid=luigi-confirmation-modal-result]')
         .contains('Luigi confirmation modal has been dismissed');
 
       cy.wrap($iframeBody)
-        .find('[data-testid=show-luigi-confirmation-dialog]')
+        .find('[data-testid=show-luigi-confirmation-modal]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-confirm]').click();
-      cy.get('[data-testid=luigi-confirmation-dialog]').should(
-        'not.be.visible'
-      );
+      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
       cy.wrap($iframeBody)
-        .find('[data-testid=luigi-confirmation-dialog-result]')
+        .find('[data-testid=luigi-confirmation-modal-result]')
         .contains('Luigi confirmation modal has been confirmed');
     });
 
     it('Close Luigi Client generic confirmation modal by esc keypress', () => {
       cy.goToUxManagerMethods($iframeBody);
 
-      cy.get('[data-testid=luigi-confirmation-dialog]').should(
-        'not.be.visible'
-      );
+      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
       cy.wrap($iframeBody)
-        .find('[data-testid=show-luigi-confirmation-dialog]')
+        .find('[data-testid=show-luigi-confirmation-modal]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-dismiss]').trigger('keydown', {
         keyCode: 27,
         which: 27
       });
-      cy.get('[data-testid=luigi-confirmation-dialog]').should(
-        'not.be.visible'
-      );
+      cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');
       cy.wrap($iframeBody)
-        .find('[data-testid=luigi-confirmation-dialog-result]')
+        .find('[data-testid=luigi-confirmation-modal-result]')
         .contains('Luigi confirmation modal has been dismissed');
     });
 
@@ -129,13 +119,13 @@ describe('Luigi Client ux manager features', () => {
           .contains('Projects')
           .click();
 
-        cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+        cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
 
         cy.expectPathToBe('/overview'); //the location is unchanged
 
         cy.get('[data-testid=luigi-modal-dismiss]').click();
 
-        cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        cy.get('[data-testid=luigi-confirmation-modal]').should(
           'not.be.visible'
         );
 
@@ -151,13 +141,13 @@ describe('Luigi Client ux manager features', () => {
           .contains('Projects')
           .click();
 
-        cy.get('[data-testid=luigi-confirmation-dialog]').should('be.visible');
+        cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
 
         cy.expectPathToBe('/overview'); //the location is unchanged
 
         cy.get('[data-testid=luigi-modal-confirm]').click();
 
-        cy.get('[data-testid=luigi-confirmation-dialog]').should(
+        cy.get('[data-testid=luigi-confirmation-modal]').should(
           'not.be.visible'
         );
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
index d1fa69a4c4..0c3bfb7b12 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
@@ -17,7 +17,7 @@ describe('Navigation', () => {
           title: 'Preserved View',
           size: 'm'
         });
-        cy.get('.fd-dialog__close').click();
+        cy.get('.fd-modal__close').click();
         cy.expectPathToBe('/overview');
       });
     });
diff --git a/test/e2e-test-application/src/app/project/modal/modal.component.html b/test/e2e-test-application/src/app/project/modal/modal.component.html
index dbc8d7e418..300bd56a44 100644
--- a/test/e2e-test-application/src/app/project/modal/modal.component.html
+++ b/test/e2e-test-application/src/app/project/modal/modal.component.html
@@ -2,7 +2,7 @@
   *ngIf="modalActive"
   class="fd-dialog fd-dialog--active fd-dialog-docs-static"
   role="dialog"
-  data-testid="luigi-confirmation-dialog"
+  data-testid="luigi-confirmation-modal"
   aria-hidden="false"
 >
   <div class="fd-dialog__content fd-dialog__content--s">
@@ -36,6 +36,7 @@ <h1 class="fd-dialog__title">Modal Header</h1>
           <button
             (click)="onCloseModalClick()"
             class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact"
+            aria-label="close"
           >
             Cancel
           </button>
diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
index 1f1c26ba27..1294e01de6 100644
--- a/test/e2e-test-application/src/app/project/project.component.html
+++ b/test/e2e-test-application/src/app/project/project.component.html
@@ -34,7 +34,7 @@ <h3 class="fd-panel__title">Confirmation modal</h3>
       <div class="fd-panel__body">
         <button
           class="fd-button"
-          data-testid="show-luigi-confirmation-dialog"
+          data-testid="show-luigi-confirmation-modal"
           (click)="showConfirmationModal()"
         >
           Show Luigi confirmation modal
@@ -46,7 +46,7 @@ <h3 class="fd-panel__title">Confirmation modal</h3>
         </p>
         <p
           class="fd-has-font-style-italic"
-          data-testid="luigi-confirmation-dialog-result"
+          data-testid="luigi-confirmation-modal-result"
           ngClass="{{
             confirmationModalResult === 'confirmed'
               ? 'fd-has-color-status-1'

From 0b495a167e36cca692ff135764eb120cc660aea6 Mon Sep 17 00:00:00 2001
From: Uliana <like-me1@yandex.ru>
Date: Tue, 7 Apr 2020 10:58:31 +0200
Subject: [PATCH 03/19] forgot a square inn tests

---
 .../tests/1-angular/luigi-client-ux-manager-features.spec.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
index 4942814ab7..1fb7061aed 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
@@ -43,7 +43,7 @@ describe('Luigi Client ux manager features', () => {
       cy.wrap($iframeBody)
         .find('[data-testid=show-luigi-confirmation-modal]')
         .click();
-      cy.get('[data-testid=luigi-confirmation-modal').should('be.visible');
+      cy.get('[data-testid=luigi-confirmation-modal]').should('be.visible');
 
       cy.get('[data-testid=luigi-modal-dismiss]').click();
       cy.get('[data-testid=luigi-confirmation-modal]').should('not.be.visible');

From 6561d92ac0a518fb8c001516e9b610d87a2faeee Mon Sep 17 00:00:00 2001
From: Uliana <like-me1@yandex.ru>
Date: Tue, 7 Apr 2020 15:24:58 +0200
Subject: [PATCH 04/19] update the README.md for fiddle and upgrade the version
 of angular example to 0.8.1

---
 test/e2e-test-application/package-lock.json   | 34 ++-----------------
 test/e2e-test-application/package.json        |  2 +-
 .../app/project/modal/modal.component.scss    |  3 ++
 website/fiddle/README.md                      |  8 +++++
 4 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/test/e2e-test-application/package-lock.json b/test/e2e-test-application/package-lock.json
index 4c6477d0c1..0d12f1e348 100644
--- a/test/e2e-test-application/package-lock.json
+++ b/test/e2e-test-application/package-lock.json
@@ -2387,26 +2387,6 @@
         }
       }
     },
-    "@luigi-project/client": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/client/-/client-1.0.0.tgz",
-      "integrity": "sha512-/5QCgd26h/zON+Cj6Ga2rzCD2X6f1lU/NZaaya5E28k1vvwch2mwKarpZLqHaWSsxbkp/5kRWAPKJ56iQMHnSg=="
-    },
-    "@luigi-project/core": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/core/-/core-1.0.0.tgz",
-      "integrity": "sha512-r9f0sFEkjqyOrNIYSdq/lPTUKnoIIdgBtYCRMp/2hg4ZYSacMbrXVGeb7Iv00lQ7R3IQ4H8lKweBQtI4btp0+w=="
-    },
-    "@luigi-project/plugin-auth-oauth2": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oauth2/-/plugin-auth-oauth2-1.0.0.tgz",
-      "integrity": "sha512-ntEnWxSDAy906mym+LOIC6ZCtvGMbdaRyg0t2X/C5ANwpOunhlIJqFkDpfLH9QgZu8HVasTOfQCKCcfPzTYRZQ=="
-    },
-    "@luigi-project/plugin-auth-oidc": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oidc/-/plugin-auth-oidc-1.0.0.tgz",
-      "integrity": "sha512-4uPHU6YqfMMnePHAsA3wvyCrjJjQH4IS6gQqKGE1pxLaj57mBu6H2QX23ErpR/8aeaTiZqUXZPIHH+RT43RpuA=="
-    },
     "@ngtools/webpack": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.3.9.tgz",
@@ -2456,11 +2436,6 @@
         }
       }
     },
-    "@sap-theming/theming-base-content": {
-      "version": "11.1.18",
-      "resolved": "https://registry.npmjs.org/@sap-theming/theming-base-content/-/theming-base-content-11.1.18.tgz",
-      "integrity": "sha512-NDqUq35hc/eZQomLhsDQEO8PeCnNCZmJIittafuho5VlGNdJWR1ZsXj97MZSJnLLfttVWcpb5KNrj+b84F6aAw=="
-    },
     "@schematics/angular": {
       "version": "0.8.9",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.8.9.tgz",
@@ -6838,12 +6813,9 @@
       "dev": true
     },
     "fundamental-styles": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.7.0.tgz",
-      "integrity": "sha512-wq6bCGjS6uUN1lbiBBC1NA8U+OJ57i6vpkNFt3bPf/jc6Vugvpt4fpGbU9tuEoeB1YqUIGL7A6DSuzOKbJy7NA==",
-      "requires": {
-        "@sap-theming/theming-base-content": "~11.1.17"
-      }
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.8.1.tgz",
+      "integrity": "sha512-lP29Hi4esdf9lOa3l1uMncTjnROR9sLjxM27InrztADa228H8Ry5LRqI7nJJTEfqo/e53QKVRjbZo3B1+hqqFg=="
     },
     "gauge": {
       "version": "2.7.4",
diff --git a/test/e2e-test-application/package.json b/test/e2e-test-application/package.json
index 92677518bf..476261be26 100644
--- a/test/e2e-test-application/package.json
+++ b/test/e2e-test-application/package.json
@@ -28,7 +28,7 @@
     "@luigi-project/core": "1.0.0",
     "ajv": "^6.1.1",
     "core-js": "^2.4.1",
-    "fundamental-styles": "^0.7.0",
+    "fundamental-styles": "^0.8.1",
     "rxjs": "6.2.0",
     "zone.js": "^0.8.14",
     "lodash": ">=4.17.13"
diff --git a/test/e2e-test-application/src/app/project/modal/modal.component.scss b/test/e2e-test-application/src/app/project/modal/modal.component.scss
index e69de29bb2..8ee52b5aa6 100644
--- a/test/e2e-test-application/src/app/project/modal/modal.component.scss
+++ b/test/e2e-test-application/src/app/project/modal/modal.component.scss
@@ -0,0 +1,3 @@
+:host .fd-dialog__content {
+  max-width: 460px;
+}
diff --git a/website/fiddle/README.md b/website/fiddle/README.md
index 04c3b6386d..2fdf0d2e40 100644
--- a/website/fiddle/README.md
+++ b/website/fiddle/README.md
@@ -1,3 +1,11 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/6e36180d-2486-4daf-80a5-90a0ab363992/deploy-status)](https://app.netlify.com/sites/relaxed-kowalevski-49f468/deploys)
 
 Luigi fiddle, deployed via netlify and accessible at https://fiddle.luigi-project.io
+Go to the [Luigi Fiddle](https://fiddle.luigi-project.io) site to see Luigi in action and configure a sample application.
+
+### Code formatting for contributors
+
+All projects in the repository use [Prettier](https://prettier.io) to format source code. Run the `npm install` command in the root folder to install it along with [husky](https://github.com/typicode/husky), the Git hooks manager. Both tools ensure proper codebase formatting before committing it.
+
+### Run fiddle locally
+`npm run dev`
\ No newline at end of file

From 95166adeb58bcb8585c70f3ab439b46dd919703c Mon Sep 17 00:00:00 2001
From: Uliana <like-me1@yandex.ru>
Date: Wed, 8 Apr 2020 09:43:24 +0200
Subject: [PATCH 05/19] cleanup the README.md file for fiddle

---
 website/fiddle/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/fiddle/README.md b/website/fiddle/README.md
index 2fdf0d2e40..fabe2c3fcf 100644
--- a/website/fiddle/README.md
+++ b/website/fiddle/README.md
@@ -5,7 +5,7 @@ Go to the [Luigi Fiddle](https://fiddle.luigi-project.io) site to see Luigi in a
 
 ### Code formatting for contributors
 
-All projects in the repository use [Prettier](https://prettier.io) to format source code. Run the `npm install` command in the root folder to install it along with [husky](https://github.com/typicode/husky), the Git hooks manager. Both tools ensure proper codebase formatting before committing it.
+Run the `npm install` command in the root folder to install it.
 
 ### Run fiddle locally
 `npm run dev`
\ No newline at end of file

From 59e81ce56a01df484ebc5fd4b9130c463bc8b73f Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Wed, 8 Apr 2020 19:15:12 +0200
Subject: [PATCH 06/19] Fix issue with top navbar on the page and re-login
 button

---
 .../src/app/app.component.scss                |  4 ---
 test/e2e-test-application/package-lock.json   | 25 +++++++++++++++++++
 test/e2e-test-application/package.json        |  1 +
 .../src/app/app.component.scss                |  4 ---
 .../src/app/overview/overview.component.html  |  6 ++---
 .../src/assets/basicexternal.html             |  4 ---
 .../src/assets/sampleexternal.html            |  4 ---
 test/e2e-test-application/src/logout.html     |  2 +-
 8 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/core/examples/luigi-example-angular/src/app/app.component.scss b/core/examples/luigi-example-angular/src/app/app.component.scss
index fba64742d1..47b19678e5 100644
--- a/core/examples/luigi-example-angular/src/app/app.component.scss
+++ b/core/examples/luigi-example-angular/src/app/app.component.scss
@@ -1,6 +1,2 @@
 $fd-scss-font-path: '~fiori-fundamentals/scss/fonts/';
 $fd-icons-path: '~fiori-fundamentals/scss/icons/';
-
-.fd-page__header {
-  padding-left: 1.5rem;
-}
diff --git a/test/e2e-test-application/package-lock.json b/test/e2e-test-application/package-lock.json
index 0d12f1e348..e70db04a00 100644
--- a/test/e2e-test-application/package-lock.json
+++ b/test/e2e-test-application/package-lock.json
@@ -2387,6 +2387,26 @@
         }
       }
     },
+    "@luigi-project/client": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/client/-/client-1.0.0.tgz",
+      "integrity": "sha512-/5QCgd26h/zON+Cj6Ga2rzCD2X6f1lU/NZaaya5E28k1vvwch2mwKarpZLqHaWSsxbkp/5kRWAPKJ56iQMHnSg=="
+    },
+    "@luigi-project/core": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/core/-/core-1.0.0.tgz",
+      "integrity": "sha512-r9f0sFEkjqyOrNIYSdq/lPTUKnoIIdgBtYCRMp/2hg4ZYSacMbrXVGeb7Iv00lQ7R3IQ4H8lKweBQtI4btp0+w=="
+    },
+    "@luigi-project/plugin-auth-oauth2": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oauth2/-/plugin-auth-oauth2-1.0.0.tgz",
+      "integrity": "sha512-ntEnWxSDAy906mym+LOIC6ZCtvGMbdaRyg0t2X/C5ANwpOunhlIJqFkDpfLH9QgZu8HVasTOfQCKCcfPzTYRZQ=="
+    },
+    "@luigi-project/plugin-auth-oidc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oidc/-/plugin-auth-oidc-1.0.0.tgz",
+      "integrity": "sha512-4uPHU6YqfMMnePHAsA3wvyCrjJjQH4IS6gQqKGE1pxLaj57mBu6H2QX23ErpR/8aeaTiZqUXZPIHH+RT43RpuA=="
+    },
     "@ngtools/webpack": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.3.9.tgz",
@@ -2436,6 +2456,11 @@
         }
       }
     },
+    "@sap-theming/theming-base-content": {
+      "version": "11.1.18",
+      "resolved": "https://registry.npmjs.org/@sap-theming/theming-base-content/-/theming-base-content-11.1.18.tgz",
+      "integrity": "sha512-NDqUq35hc/eZQomLhsDQEO8PeCnNCZmJIittafuho5VlGNdJWR1ZsXj97MZSJnLLfttVWcpb5KNrj+b84F6aAw=="
+    },
     "@schematics/angular": {
       "version": "0.8.9",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.8.9.tgz",
diff --git a/test/e2e-test-application/package.json b/test/e2e-test-application/package.json
index 476261be26..2730e8fbee 100644
--- a/test/e2e-test-application/package.json
+++ b/test/e2e-test-application/package.json
@@ -28,6 +28,7 @@
     "@luigi-project/core": "1.0.0",
     "ajv": "^6.1.1",
     "core-js": "^2.4.1",
+    "@sap-theming/theming-base-content": "^11.1.18",
     "fundamental-styles": "^0.8.1",
     "rxjs": "6.2.0",
     "zone.js": "^0.8.14",
diff --git a/test/e2e-test-application/src/app/app.component.scss b/test/e2e-test-application/src/app/app.component.scss
index 81b18e4af6..46e3401033 100644
--- a/test/e2e-test-application/src/app/app.component.scss
+++ b/test/e2e-test-application/src/app/app.component.scss
@@ -1,10 +1,6 @@
 $fd-scss-font-path: '~fundamental-styles/scss/fonts/';
 $fd-icons-path: '~fundamental-styles/scss/icons/';
 
-.fd-page__header {
-  padding-left: 1.5rem;
-}
-
 .fd-form-item {
   margin-bottom: 10px;
 }
diff --git a/test/e2e-test-application/src/app/overview/overview.component.html b/test/e2e-test-application/src/app/overview/overview.component.html
index e215f885fc..2b8f8d5444 100644
--- a/test/e2e-test-application/src/app/overview/overview.component.html
+++ b/test/e2e-test-application/src/app/overview/overview.component.html
@@ -2,10 +2,10 @@
   <div class="fd-action-bar">
     <div class="fd-action-bar__header">
       <h1 class="fd-action-bar__title">Luigi Angular Example</h1>
-      <p class="fd-action-bar__description">
-        Follow the links below to the Luigi feature demos.
-      </p>
     </div>
+    <p class="fd-action-bar__description">
+      Follow the links below to the Luigi feature demos.
+    </p>
   </div>
 </header>
 
diff --git a/test/e2e-test-application/src/assets/basicexternal.html b/test/e2e-test-application/src/assets/basicexternal.html
index d413f48091..b6f129d78c 100644
--- a/test/e2e-test-application/src/assets/basicexternal.html
+++ b/test/e2e-test-application/src/assets/basicexternal.html
@@ -24,10 +24,6 @@
         height: 800px;
       }
 
-      .fd-page__header {
-        padding-left: 1.5rem;
-      }
-
       .fd-form-item {
         margin-bottom: 10px;
       }
diff --git a/test/e2e-test-application/src/assets/sampleexternal.html b/test/e2e-test-application/src/assets/sampleexternal.html
index 85deb23209..f813681444 100644
--- a/test/e2e-test-application/src/assets/sampleexternal.html
+++ b/test/e2e-test-application/src/assets/sampleexternal.html
@@ -25,10 +25,6 @@
       height: 800px;
     }
 
-    .fd-page__header {
-      padding-left: 1.5rem;
-    }
-
     .fd-form-item {
       margin-bottom: 10px;
     }
diff --git a/test/e2e-test-application/src/logout.html b/test/e2e-test-application/src/logout.html
index 1e5921368c..25cd43ec7a 100644
--- a/test/e2e-test-application/src/logout.html
+++ b/test/e2e-test-application/src/logout.html
@@ -57,7 +57,7 @@
           <div class="hint" id="message" data-testid="logout-message">Sign in again to continue working on awesome things!</div>
         </p>
         <p class="fd-has-text-align-center">
-          <button class="fd-button--emphasized" onclick="login()">Re-Login</button>
+          <button class="fd-button fd-button--emphasized" onclick="login()">Re-Login</button>
         </p>
       </section>
     </div>

From c00e2e413b85148839d8132381f09b8da4c045f8 Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Thu, 9 Apr 2020 11:45:04 +0200
Subject: [PATCH 07/19] fix issues with fonts and icons from sap-theming

---
 .../luigi-example-angular/package.json        |  1 +
 .../luigi-example-angular/src/styles.css      | 80 ++++++++++++++++++
 test/e2e-test-application/package.json        |  2 +-
 test/e2e-test-application/src/styles.css      | 83 +++++++++++++++++++
 4 files changed, 165 insertions(+), 1 deletion(-)

diff --git a/core/examples/luigi-example-angular/package.json b/core/examples/luigi-example-angular/package.json
index e58ac6a7fb..e6fe856dc4 100644
--- a/core/examples/luigi-example-angular/package.json
+++ b/core/examples/luigi-example-angular/package.json
@@ -20,6 +20,7 @@
     "@kyma-project/luigi-core": "0.7.1",
     "ajv": "6.10.2",
     "core-js": "3.3.5",
+    "@sap-theming/theming-base-content": "^11.1.18",
     "fiori-fundamentals": "1.7.3",
     "rxjs": "6.5.3",
     "zone.js": "0.9.1"
diff --git a/core/examples/luigi-example-angular/src/styles.css b/core/examples/luigi-example-angular/src/styles.css
index 8bae2b8def..d68d59bbce 100644
--- a/core/examples/luigi-example-angular/src/styles.css
+++ b/core/examples/luigi-example-angular/src/styles.css
@@ -1,3 +1,83 @@
+@font-face {
+  font-family: '72';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff')
+    format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff2')
+    format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff')
+    format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff2')
+    format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff2')
+    format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.ttf')
+    format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(
+    --sapFontFamily,
+    '72',
+    '72full',
+    Arial,
+    Helvetica,
+    sans-serif
+  );
+}
+
 body {
   padding: 0;
 }
diff --git a/test/e2e-test-application/package.json b/test/e2e-test-application/package.json
index 2730e8fbee..c40b965608 100644
--- a/test/e2e-test-application/package.json
+++ b/test/e2e-test-application/package.json
@@ -26,9 +26,9 @@
     "@luigi-project/plugin-auth-oidc": "1.0.0",
     "@luigi-project/client": "1.0.0",
     "@luigi-project/core": "1.0.0",
+    "@sap-theming/theming-base-content": "^11.1.18",
     "ajv": "^6.1.1",
     "core-js": "^2.4.1",
-    "@sap-theming/theming-base-content": "^11.1.18",
     "fundamental-styles": "^0.8.1",
     "rxjs": "6.2.0",
     "zone.js": "^0.8.14",
diff --git a/test/e2e-test-application/src/styles.css b/test/e2e-test-application/src/styles.css
index eb778fa3dd..080ccdc516 100644
--- a/test/e2e-test-application/src/styles.css
+++ b/test/e2e-test-application/src/styles.css
@@ -17,3 +17,86 @@ ul {
 .clickable {
   cursor: pointer;
 }
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff')
+    format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff2')
+    format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff')
+    format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff2')
+    format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff2')
+    format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.ttf')
+    format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(
+    --sapFontFamily,
+    '72',
+    '72full',
+    Arial,
+    Helvetica,
+    sans-serif
+  );
+}
+
+.fd-menu a {
+  text-decoration: none;
+}

From c7b5e0aa40ec53e7a5a368b90c4af0ce8d03f68b Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Thu, 9 Apr 2020 16:52:34 +0200
Subject: [PATCH 08/19] remove unnecessary badges from examples

---
 .../src/app/project/dynamic/dynamic.component.html              | 1 -
 .../e2e-test-application/src/app/project/project.component.html | 1 -
 .../src/app/project/settings/settings.component.html            | 2 --
 3 files changed, 4 deletions(-)

diff --git a/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html b/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
index f5ca846d91..80a8822210 100644
--- a/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
+++ b/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
@@ -29,7 +29,6 @@ <h1 class="fd-section__title">{{ nodeLabel }}</h1>
     <div class="fd-panel__body">
       <div class="fd-alert" role="alert">
         <div class="fd-alert__text">
-          <span class="fd-status-label fd-status-label--available"></span>
           Called with params:<br />
           <pre>{{ nodeParams | json }}</pre>
         </div>
diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
index d040c26cca..ad871c8c93 100644
--- a/test/e2e-test-application/src/app/project/project.component.html
+++ b/test/e2e-test-application/src/app/project/project.component.html
@@ -254,7 +254,6 @@ <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
         <div class="fd-panel__body">
           <div class="fd-alert" role="alert">
             <div class="fd-alert__text">
-              <span class="fd-status-label fd-status-label--available"></span>
               Context received from linkManager().goBack():<br />
               <pre>{{ preservedViewCallbackContext | json }}</pre>
             </div>
diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index cade5f3108..18e6749bf3 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -4,7 +4,6 @@
       <div class="fd-alert" role="alert">
         <div class="fd-alert__text">
           <div class="fd-alert__text">
-            <span class="fd-status-label fd-status-label--available"></span>
             Called with params:<br />
             <pre>{{ nodeParams | json }}</pre>
           </div>
@@ -46,7 +45,6 @@
       <div class="fd-alert" role="alert">
         <div class="fd-alert__text">
           <div class="fd-alert__text">
-            <span class="fd-status-label fd-status-label--available"></span>
             Context received from linkManager().goBack():<br />
             <pre>{{ preservedViewCallbackContext | json }}</pre>
           </div>

From de34cc5046c1aa37074500ca970fc8e54849e6f7 Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Thu, 16 Apr 2020 16:12:23 +0200
Subject: [PATCH 09/19] replace old spinner with loading indicator

---
 .../luigi-client-ux-manager-features.spec.js  |  8 ++++----
 test/e2e-test-application/package-lock.json   | 20 -------------------
 test/e2e-test-application/src/index.html      | 17 ++++++++++++----
 3 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
index 1fb7061aed..e829095493 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
@@ -90,11 +90,11 @@ describe('Luigi Client ux manager features', () => {
         .contains('External Page')
         .click();
 
-      cy.get('.spinnerContainer .fd-spinner').should('exist');
+      cy.get('[data-testid=luigi-loading-spinner]').should('exist');
 
       cy.wait(250); // give it some time to hide
 
-      cy.get('.spinnerContainer .fd-spinner').should('not.be.visible');
+      cy.get('[data-testid=luigi-loading-spinner]').should('not.be.visible');
 
       // show loading indicator
       cy.getIframeBody().then($iframeBody => {
@@ -102,10 +102,10 @@ describe('Luigi Client ux manager features', () => {
           .contains('Show loading indicator')
           .click();
 
-        cy.get('.spinnerContainer .fd-spinner').should('exist');
+        cy.get('[data-testid=luigi-loading-spinner]').should('exist');
         cy.wait(250); // give it some time to hide
         // wait for programmatic hide of loading indicator
-        cy.get('.spinnerContainer .fd-spinner').should('not.be.visible');
+        cy.get('[data-testid=luigi-loading-spinner]').should('not.be.visible');
       });
     });
 
diff --git a/test/e2e-test-application/package-lock.json b/test/e2e-test-application/package-lock.json
index e70db04a00..e2bb90728e 100644
--- a/test/e2e-test-application/package-lock.json
+++ b/test/e2e-test-application/package-lock.json
@@ -2387,26 +2387,6 @@
         }
       }
     },
-    "@luigi-project/client": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/client/-/client-1.0.0.tgz",
-      "integrity": "sha512-/5QCgd26h/zON+Cj6Ga2rzCD2X6f1lU/NZaaya5E28k1vvwch2mwKarpZLqHaWSsxbkp/5kRWAPKJ56iQMHnSg=="
-    },
-    "@luigi-project/core": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/core/-/core-1.0.0.tgz",
-      "integrity": "sha512-r9f0sFEkjqyOrNIYSdq/lPTUKnoIIdgBtYCRMp/2hg4ZYSacMbrXVGeb7Iv00lQ7R3IQ4H8lKweBQtI4btp0+w=="
-    },
-    "@luigi-project/plugin-auth-oauth2": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oauth2/-/plugin-auth-oauth2-1.0.0.tgz",
-      "integrity": "sha512-ntEnWxSDAy906mym+LOIC6ZCtvGMbdaRyg0t2X/C5ANwpOunhlIJqFkDpfLH9QgZu8HVasTOfQCKCcfPzTYRZQ=="
-    },
-    "@luigi-project/plugin-auth-oidc": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oidc/-/plugin-auth-oidc-1.0.0.tgz",
-      "integrity": "sha512-4uPHU6YqfMMnePHAsA3wvyCrjJjQH4IS6gQqKGE1pxLaj57mBu6H2QX23ErpR/8aeaTiZqUXZPIHH+RT43RpuA=="
-    },
     "@ngtools/webpack": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.3.9.tgz",
diff --git a/test/e2e-test-application/src/index.html b/test/e2e-test-application/src/index.html
index ca014f6d54..2e0ecf873e 100644
--- a/test/e2e-test-application/src/index.html
+++ b/test/e2e-test-application/src/index.html
@@ -68,8 +68,15 @@
     <script src="/assets/extendedConfiguration.bundle.js"></script>
 
     <div luigi-app-loading-indicator>
-      <div class="fd-spinner" aria-hidden="false" aria-label="Loading">
-        <div class="fd-spinner__body"></div>
+      <div
+        class="fd-busy-indicator--m"
+        aria-hidden="false"
+        aria-label="Loading"
+        data-testid="luigi-loading-spinner"
+      >
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
       </div>
     </div>
     <!-- LUIGI CUSTOM CONTAINER FEATURE -->
@@ -78,8 +85,10 @@
       <div class="custom" id="my-leftnav">MY LEFTNAV</div>
       <div luigi-app-root></div>
       <div luigi-app-loading-indicator>
-        <div class="fd-spinner">
-          <div></div>
+        <div class="fd-busy-indicator--m" aria-hidden="false" aria-label="Loading" data-testid="luigi-loading-spinner">
+          <div class="fd-busy-indicator--circle-0"></div>
+          <div class="fd-busy-indicator--circle-1"></div>
+          <div class="fd-busy-indicator--circle-2"></div>
         </div>
       </div>
       <div class="custom" id="my-rightnav">MY RIGHTNAV</div>

From 3e72a6db730dbd1fa4a28295d7ca535880c1590e Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Fri, 17 Apr 2020 16:53:04 +0200
Subject: [PATCH 10/19] replace fd-alert with fd-message-strip

---
 .../i18n-context-product-app-switcher.spec.js |  2 +-
 ...luigi-client-link-manager-features.spec.js | 10 +++++-----
 .../luigi-client-ux-alerts-i18n.spec.js       |  8 ++++----
 test/e2e-test-application/package-lock.json   | 20 +++++++++++++++++++
 .../project/dynamic/dynamic.component.html    |  4 ++--
 .../src/app/project/project.component.html    |  4 ++--
 .../project/settings/settings.component.html  | 20 ++++++++-----------
 7 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js b/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
index e2e55ef5d5..af2754be73 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
@@ -45,7 +45,7 @@ describe('Context switcher', () => {
 
     cy.get('[data-testid=luigi-alert]').should(
       'have.class',
-      'fd-alert--information'
+      'fd-message-strip--information'
     );
 
     cy.get('[data-testid=luigi-alert]').should('contain', 'Project 4 created.');
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
index 6d3e1afe50..036007c006 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
@@ -84,7 +84,7 @@ describe('Luigi client linkManager', () => {
 
       //wait for the alert coming from an inactive iFrame to be shown and second iFrame to be loaded
       cy.wait(500);
-      cy.get('.fd-alert').should(
+      cy.get('.fd-message-strip').should(
         'contain',
         'Information alert sent from an inactive iFrame'
       );
@@ -164,7 +164,7 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/projects/pr2/miscellaneous2');
 
-      cy.get('.fd-alert').contains(
+      cy.get('.fd-message-strip').contains(
         'Could not map the exact target node for the requested route projects/pr2/miscellaneous2/maskopatol'
       );
 
@@ -174,7 +174,7 @@ describe('Luigi client linkManager', () => {
         .click();
 
       //alert disappears
-      cy.get('.fd-alert').should('not.exist');
+      cy.get('.fd-message-strip').should('not.exist');
     });
 
     it('navigate to a totally wrong link', () => {
@@ -183,7 +183,7 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/overview');
 
-      cy.get('.fd-alert').contains(
+      cy.get('.fd-message-strip').contains(
         'Could not find the requested route maskopatol/has/a/child'
       );
 
@@ -193,7 +193,7 @@ describe('Luigi client linkManager', () => {
         .click();
 
       //alert disappears
-      cy.get('.fd-alert').should('not.exist');
+      cy.get('.fd-message-strip').should('not.exist');
     });
   });
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
index 00eeaa4019..7cfb64015e 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
@@ -26,7 +26,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-alert--success'
+        'fd-message-strip--success'
       );
 
       cy.get('[data-testid=luigi-alert-dismiss]').click();
@@ -44,7 +44,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-alert--information'
+        'fd-message-strip--information'
       );
     });
     it('hides Alert after specified time', () => {
@@ -112,7 +112,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-alert--warning'
+        'fd-message-strip--warning'
       );
 
       cy.get('*[id$=_link_relativePath]').click();
@@ -150,7 +150,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
         .click();
 
       cy.get('[data-testid=luigi-alert]')
-        .should('have.class', 'fd-alert--error')
+        .should('have.class', 'fd-message-strip--error')
         .should('contain', "<b onmouseover=alert('Wufff!')>click me!</b>");
 
       cy.get('[data-testid=luigi-alert]')
diff --git a/test/e2e-test-application/package-lock.json b/test/e2e-test-application/package-lock.json
index e2bb90728e..e70db04a00 100644
--- a/test/e2e-test-application/package-lock.json
+++ b/test/e2e-test-application/package-lock.json
@@ -2387,6 +2387,26 @@
         }
       }
     },
+    "@luigi-project/client": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/client/-/client-1.0.0.tgz",
+      "integrity": "sha512-/5QCgd26h/zON+Cj6Ga2rzCD2X6f1lU/NZaaya5E28k1vvwch2mwKarpZLqHaWSsxbkp/5kRWAPKJ56iQMHnSg=="
+    },
+    "@luigi-project/core": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/core/-/core-1.0.0.tgz",
+      "integrity": "sha512-r9f0sFEkjqyOrNIYSdq/lPTUKnoIIdgBtYCRMp/2hg4ZYSacMbrXVGeb7Iv00lQ7R3IQ4H8lKweBQtI4btp0+w=="
+    },
+    "@luigi-project/plugin-auth-oauth2": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oauth2/-/plugin-auth-oauth2-1.0.0.tgz",
+      "integrity": "sha512-ntEnWxSDAy906mym+LOIC6ZCtvGMbdaRyg0t2X/C5ANwpOunhlIJqFkDpfLH9QgZu8HVasTOfQCKCcfPzTYRZQ=="
+    },
+    "@luigi-project/plugin-auth-oidc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oidc/-/plugin-auth-oidc-1.0.0.tgz",
+      "integrity": "sha512-4uPHU6YqfMMnePHAsA3wvyCrjJjQH4IS6gQqKGE1pxLaj57mBu6H2QX23ErpR/8aeaTiZqUXZPIHH+RT43RpuA=="
+    },
     "@ngtools/webpack": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.3.9.tgz",
diff --git a/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html b/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
index 80a8822210..6e6aa4b760 100644
--- a/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
+++ b/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
@@ -27,8 +27,8 @@ <h1 class="fd-section__title">{{ nodeLabel }}</h1>
 <section class="fd-section" *ngIf="nodeParams && hasBack">
   <div class="fd-panel fd-has-margin-bottom-small">
     <div class="fd-panel__body">
-      <div class="fd-alert" role="alert">
-        <div class="fd-alert__text">
+      <div class="fd-message-strip" role="alert">
+        <div class="fd-message-strip_text">
           Called with params:<br />
           <pre>{{ nodeParams | json }}</pre>
         </div>
diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
index ad871c8c93..60d6ae2abd 100644
--- a/test/e2e-test-application/src/app/project/project.component.html
+++ b/test/e2e-test-application/src/app/project/project.component.html
@@ -252,8 +252,8 @@ <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
     <ng-container *ngIf="preservedViewCallbackContext">
       <div class="fd-panel fd-has-margin-bottom-small">
         <div class="fd-panel__body">
-          <div class="fd-alert" role="alert">
-            <div class="fd-alert__text">
+          <div class="fd-message-strip" role="alert">
+            <div class="fd-message-strip__text">
               Context received from linkManager().goBack():<br />
               <pre>{{ preservedViewCallbackContext | json }}</pre>
             </div>
diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index 18e6749bf3..b8bfdf6225 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -1,12 +1,10 @@
 <section class="fd-section" *ngIf="nodeParams">
   <div class="fd-panel fd-has-margin-bottom-small">
     <div class="fd-panel__body">
-      <div class="fd-alert" role="alert">
-        <div class="fd-alert__text">
-          <div class="fd-alert__text">
-            Called with params:<br />
-            <pre>{{ nodeParams | json }}</pre>
-          </div>
+      <div class="fd-message-strip" role="alert">
+        <div class="fd-message-strip__text">
+          Called with params:<br />
+          <pre>{{ nodeParams | json }}</pre>
         </div>
       </div>
     </div>
@@ -42,12 +40,10 @@
 <section class="fd-section" *ngIf="preservedViewCallbackContext">
   <div class="fd-panel fd-has-margin-bottom-small">
     <div class="fd-panel__body">
-      <div class="fd-alert" role="alert">
-        <div class="fd-alert__text">
-          <div class="fd-alert__text">
-            Context received from linkManager().goBack():<br />
-            <pre>{{ preservedViewCallbackContext | json }}</pre>
-          </div>
+      <div class="fd-message-strip" role="alert">
+        <div class="fd-message-strip__text">
+          Context received from linkManager().goBack():<br />
+          <pre>{{ preservedViewCallbackContext | json }}</pre>
         </div>
       </div>
     </div>

From 37b9f61bc46d25b81f82de35439418f828e2578d Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Mon, 20 Apr 2020 12:50:41 +0200
Subject: [PATCH 11/19] update list group

---
 .../e2e/tests/1-angular/navigation.spec.js    |  6 ++--
 .../src/app/app.component.scss                |  5 ++-
 .../src/app/nav-sync/nav-sync.component.html  |  8 ++---
 .../onNodeActivation.component.html           |  6 ++--
 .../src/app/overview/overview.component.html  | 18 ++++-------
 .../project/dynamic/dynamic.component.html    |  4 +--
 .../src/app/project/project.component.html    | 32 +++++++++----------
 .../src/assets/basicexternal.html             |  2 +-
 .../src/assets/sampleexternal.html            |  2 +-
 9 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
index 0c3bfb7b12..0a10690158 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
@@ -277,7 +277,7 @@ describe('Navigation', () => {
 
       cy.getIframeBody().then($iframeBody => {
         cy.wrap($iframeBody)
-          .find('.fd-list-group__item')
+          .find('.fd-list__item')
           .contains('keepSelectedForChildren')
           .click();
         cy.wait(500);
@@ -289,7 +289,7 @@ describe('Navigation', () => {
       cy.getIframeBody().then($iframeBody => {
         // wrap this body with cy so as to do cy actions inside iframe elements
         cy.wrap($iframeBody)
-          .find('.fd-list-group__item')
+          .find('.fd-list__item')
           .contains('Thor')
           .click();
         cy.wait(500);
@@ -308,7 +308,7 @@ describe('Navigation', () => {
         cy.wait(500);
         cy.getIframeBody().then($iframeBody => {
           cy.wrap($iframeBody)
-            .find('.fd-list-group__item strong')
+            .find('.fd-list__item strong')
             .contains('Node with link to another node')
             .click();
         });
diff --git a/test/e2e-test-application/src/app/app.component.scss b/test/e2e-test-application/src/app/app.component.scss
index 46e3401033..19324cb955 100644
--- a/test/e2e-test-application/src/app/app.component.scss
+++ b/test/e2e-test-application/src/app/app.component.scss
@@ -5,8 +5,11 @@ $fd-icons-path: '~fundamental-styles/scss/icons/';
   margin-bottom: 10px;
 }
 
-.fd-list-group__item {
+.fd-list__item {
   display: block;
+  border-bottom: none;
+  height: auto;
+  padding: 10px;
 }
 .fd-dialog {
   z-index: 2;
diff --git a/test/e2e-test-application/src/app/nav-sync/nav-sync.component.html b/test/e2e-test-application/src/app/nav-sync/nav-sync.component.html
index 945a9b9512..196c2ae785 100644
--- a/test/e2e-test-application/src/app/nav-sync/nav-sync.component.html
+++ b/test/e2e-test-application/src/app/nav-sync/nav-sync.component.html
@@ -12,11 +12,9 @@ <h1 class="fd-section__title">Navigation Synchronization</h1>
         <code>.withoutSync()</code> method when navigating with
         <code>LuigiClient.linkManager()</code>.
       </p>
-      <ul class="fd-list-group">
-        <li class="fd-list-group__item">
-          Current pathsegment: {{ currentSegment }}
-        </li>
-        <li class="fd-list-group__item">
+      <ul class="fd-list">
+        <li class="fd-list__item">Current pathsegment: {{ currentSegment }}</li>
+        <li class="fd-list__item">
           Go to:&nbsp;<a class="fd-link" [routerLink]="['../' + nextSegment]">{{
             nextSegment
           }}</a>
diff --git a/test/e2e-test-application/src/app/onNodeActivation/onNodeActivation.component.html b/test/e2e-test-application/src/app/onNodeActivation/onNodeActivation.component.html
index f2abf48a3c..7738e245ef 100644
--- a/test/e2e-test-application/src/app/onNodeActivation/onNodeActivation.component.html
+++ b/test/e2e-test-application/src/app/onNodeActivation/onNodeActivation.component.html
@@ -6,9 +6,9 @@ <h1 class="fd-section__title">
   </div>
   <div class="fd-panel">
     <div class="fd-panel__body">
-      <ul class="fd-list-group">
+      <ul class="fd-list">
         <li
-          class="fd-list-group__item clickable"
+          class="fd-list__item clickable"
           (click)="
             linkManager().navigate(
               '/projects/pr1/on-node-activation/not-navigated'
@@ -19,7 +19,7 @@ <h1 class="fd-section__title">
           <strong>Prevent navigation</strong> &nbsp;&ndash; and shows an alert
         </li>
         <li
-          class="fd-list-group__item clickable"
+          class="fd-list__item clickable"
           (click)="
             linkManager().navigate('/projects/pr1/on-node-activation/navigated')
           "
diff --git a/test/e2e-test-application/src/app/overview/overview.component.html b/test/e2e-test-application/src/app/overview/overview.component.html
index 2b8f8d5444..d32d0dac6b 100644
--- a/test/e2e-test-application/src/app/overview/overview.component.html
+++ b/test/e2e-test-application/src/app/overview/overview.component.html
@@ -17,14 +17,13 @@ <h3 class="fd-panel__title">LuigiClient Features</h3>
       </div>
     </div>
     <div class="fd-panel__body">
-      <ul class="fd-list-group">
+      <ul class="fd-list">
         <li
-          class="fd-list-group__item clickable"
+          class="fd-list__item clickable"
           *ngFor="let item of luigiClientItems"
           (click)="item.clickHandler()"
         >
-          <span
-            ><strong>{{ item.text }}</strong></span
+          <strong>{{ item.text }}</strong>
           >&nbsp;&ndash;&nbsp;<span>{{ item.description }}</span>
         </li>
       </ul>
@@ -40,15 +39,15 @@ <h3 class="fd-panel__title">Luigi Core Features</h3>
       </div>
     </div>
     <div class="fd-panel__body">
-      <ul class="fd-list-group">
+      <ul class="fd-list">
         <li
-          class="fd-list-group__item clickable"
+          class="fd-list__item clickable"
           *ngFor="let item of luigiCoreLinks"
           (click)="linkManager().navigate(item.link)"
         >
           <strong>{{ item.text }}</strong> &nbsp;&ndash; {{ item.description }}
         </li>
-        <li class="fd-list-group__item">
+        <li class="fd-list__item">
           <div class="fd-form-item">
             <label class="fd-switch__label" for="ImBw4551">
               <span class="fd-switch fd-switch--compact">
@@ -87,10 +86,7 @@ <h3 class="fd-panel__title">Luigi Core Features</h3>
             </a>
           </p>
         </li>
-        <li
-          class="fd-list-group__item clickable"
-          (click)="updateBadgeCounters()"
-        >
+        <li class="fd-list__item clickable" (click)="updateBadgeCounters()">
           <strong>Update Header Navigation</strong> &nbsp;&ndash; Updates the
           top navigation, eg. to update badge counters
         </li>
diff --git a/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html b/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
index 6e6aa4b760..e50801d3bf 100644
--- a/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
+++ b/test/e2e-test-application/src/app/project/dynamic/dynamic.component.html
@@ -10,9 +10,9 @@ <h1 class="fd-section__title">{{ nodeLabel }}</h1>
   </div>
   <div class="fd-panel" *ngIf="links">
     <div class="fd-panel__body">
-      <ul class="fd-list-group">
+      <ul class="fd-list">
         <li
-          class="fd-list-group__item clickable"
+          class="fd-list__item clickable"
           *ngFor="let link of links"
           (click)="linkManager().navigate(slugify(link))"
         >
diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
index 60d6ae2abd..71ad5907f9 100644
--- a/test/e2e-test-application/src/app/project/project.component.html
+++ b/test/e2e-test-application/src/app/project/project.component.html
@@ -268,8 +268,8 @@ <h3 class="fd-panel__title">Navigate</h3>
         </div>
       </div>
       <div class="fd-panel__body">
-        <ul class="fd-list-group">
-          <li class="fd-list-group__item">
+        <ul class="fd-list">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -280,7 +280,7 @@ <h3 class="fd-panel__title">Navigate</h3>
               data="linkManager().navigate('/overview')"
             ></app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -291,7 +291,7 @@ <h3 class="fd-panel__title">Navigate</h3>
               data="linkManager().navigate('users/groups/stakeholders')"
             ></app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -308,7 +308,7 @@ <h3 class="fd-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -325,7 +325,7 @@ <h3 class="fd-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -341,7 +341,7 @@ <h3 class="fd-panel__title">Navigate</h3>
               data="linkManager().fromContext('project').navigate('/settings')"
             ></app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -359,7 +359,7 @@ <h3 class="fd-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -376,7 +376,7 @@ <h3 class="fd-panel__title">Navigate</h3>
               data="linkManager().fromContext('NONEXISTING').navigate('/settings')"
             ></app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -388,7 +388,7 @@ <h3 class="fd-panel__title">Navigate</h3>
               data="linkManager().navigate('/settings', null, true)"
             ></app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -406,7 +406,7 @@ <h3 class="fd-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -427,7 +427,7 @@ <h3 class="fd-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -472,7 +472,7 @@ <h3 class="fd-panel__title">Navigate</h3>
               </button>
             </div>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -533,8 +533,8 @@ <h3 class="fd-panel__title">
         </div>
       </div>
       <div class="fd-panel__body">
-        <ul class="fd-list-group">
-          <li class="fd-list-group__item">
+        <ul class="fd-list">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
@@ -549,7 +549,7 @@ <h3 class="fd-panel__title">
               data="linkManager().navigate('/projects/pr2/miscellaneous2/maskopatol')"
             ></app-code-snippet>
           </li>
-          <li class="fd-list-group__item">
+          <li class="fd-list__item">
             <a
               href="javascript:void(0)"
               class="fd-link"
diff --git a/test/e2e-test-application/src/assets/basicexternal.html b/test/e2e-test-application/src/assets/basicexternal.html
index b6f129d78c..a004bb22a9 100644
--- a/test/e2e-test-application/src/assets/basicexternal.html
+++ b/test/e2e-test-application/src/assets/basicexternal.html
@@ -28,7 +28,7 @@
         margin-bottom: 10px;
       }
 
-      .fd-list-group__item {
+      .fd-list__item {
         display: block;
       }
     </style>
diff --git a/test/e2e-test-application/src/assets/sampleexternal.html b/test/e2e-test-application/src/assets/sampleexternal.html
index f813681444..77dd4eb08c 100644
--- a/test/e2e-test-application/src/assets/sampleexternal.html
+++ b/test/e2e-test-application/src/assets/sampleexternal.html
@@ -29,7 +29,7 @@
       margin-bottom: 10px;
     }
 
-    .fd-list-group__item {
+    .fd-list__item {
       display: block;
     }
 

From 6ff1158b7d4ff5c4755f5695a7456337eed18e3b Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Mon, 20 Apr 2020 13:03:32 +0200
Subject: [PATCH 12/19] cleanup css

---
 .../src/app/app.component.scss                |  5 +--
 test/e2e-test-application/src/styles.css      | 34 +++++++------------
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/test/e2e-test-application/src/app/app.component.scss b/test/e2e-test-application/src/app/app.component.scss
index 19324cb955..5f85275708 100644
--- a/test/e2e-test-application/src/app/app.component.scss
+++ b/test/e2e-test-application/src/app/app.component.scss
@@ -1,6 +1,3 @@
-$fd-scss-font-path: '~fundamental-styles/scss/fonts/';
-$fd-icons-path: '~fundamental-styles/scss/icons/';
-
 .fd-form-item {
   margin-bottom: 10px;
 }
@@ -8,7 +5,7 @@ $fd-icons-path: '~fundamental-styles/scss/icons/';
 .fd-list__item {
   display: block;
   border-bottom: none;
-  height: auto;
+  height: auto; //override the 2,75rem from FD Styles, otherwise the content doesn#t fit
   padding: 10px;
 }
 .fd-dialog {
diff --git a/test/e2e-test-application/src/styles.css b/test/e2e-test-application/src/styles.css
index 080ccdc516..681e1fb39b 100644
--- a/test/e2e-test-application/src/styles.css
+++ b/test/e2e-test-application/src/styles.css
@@ -1,22 +1,3 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-size: 14px;
-}
-
-blockquote,
-figure,
-ol,
-p,
-table,
-ul {
-  margin-top: 0;
-  margin-bottom: 12px;
-}
-
-.clickable {
-  cursor: pointer;
-}
 @font-face {
   font-family: '72';
   src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff')
@@ -95,8 +76,19 @@ body {
     Helvetica,
     sans-serif
   );
+  font-size: 14px;
+}
+
+blockquote,
+figure,
+ol,
+p,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: 12px;
 }
 
-.fd-menu a {
-  text-decoration: none;
+.clickable {
+  cursor: pointer;
 }

From 523da5e4967bf9db3d3a117e58e143dafe5c2e5d Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Tue, 21 Apr 2020 14:42:24 +0200
Subject: [PATCH 13/19] fix issues with navigation tests and modal

---
 .../e2e/tests/1-angular/navigation.spec.js                    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
index 0a10690158..aab8db78af 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
@@ -11,13 +11,13 @@ describe('Navigation', () => {
         cy.expectPathToBe('/projects/pr2');
       });
     });
-    it('Core API open in modal', () => {
+    it('Core API open in dialog', () => {
       cy.window().then(win => {
         win.Luigi.navigation().openAsModal('/settings', {
           title: 'Preserved View',
           size: 'm'
         });
-        cy.get('.fd-modal__close').click();
+        cy.get('.fd-dialog__close').click();
         cy.expectPathToBe('/overview');
       });
     });

From 37bec2411234082b71ee412e65254de24cb913fc Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Tue, 21 Apr 2020 15:51:52 +0200
Subject: [PATCH 14/19] remove not needed tests changes and remove angular
 example update

---
 .../luigi-example-angular/package.json        |  1 -
 .../src/app/app.component.scss                |  4 +
 .../luigi-example-angular/src/styles.css      | 80 -------------------
 .../i18n-context-product-app-switcher.spec.js |  2 +-
 ...luigi-client-link-manager-features.spec.js | 10 +--
 .../luigi-client-ux-alerts-i18n.spec.js       |  8 +-
 .../luigi-client-ux-manager-features.spec.js  |  8 +-
 .../e2e/tests/1-angular/navigation.spec.js    |  4 +-
 8 files changed, 20 insertions(+), 97 deletions(-)

diff --git a/core/examples/luigi-example-angular/package.json b/core/examples/luigi-example-angular/package.json
index 8dc52cec5c..caf310099b 100644
--- a/core/examples/luigi-example-angular/package.json
+++ b/core/examples/luigi-example-angular/package.json
@@ -20,7 +20,6 @@
     "@kyma-project/luigi-core": "0.7.1",
     "ajv": "6.10.2",
     "core-js": "3.3.5",
-    "@sap-theming/theming-base-content": "^11.1.18",
     "fiori-fundamentals": "1.7.3",
     "rxjs": "6.5.3",
     "zone.js": "0.9.1"
diff --git a/core/examples/luigi-example-angular/src/app/app.component.scss b/core/examples/luigi-example-angular/src/app/app.component.scss
index 47b19678e5..fba64742d1 100644
--- a/core/examples/luigi-example-angular/src/app/app.component.scss
+++ b/core/examples/luigi-example-angular/src/app/app.component.scss
@@ -1,2 +1,6 @@
 $fd-scss-font-path: '~fiori-fundamentals/scss/fonts/';
 $fd-icons-path: '~fiori-fundamentals/scss/icons/';
+
+.fd-page__header {
+  padding-left: 1.5rem;
+}
diff --git a/core/examples/luigi-example-angular/src/styles.css b/core/examples/luigi-example-angular/src/styles.css
index d68d59bbce..8bae2b8def 100644
--- a/core/examples/luigi-example-angular/src/styles.css
+++ b/core/examples/luigi-example-angular/src/styles.css
@@ -1,83 +1,3 @@
-@font-face {
-  font-family: '72';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff')
-    format('woff');
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: '72';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff2')
-    format('woff2');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: '72';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff')
-    format('woff');
-  font-weight: 700;
-  font-style: normal;
-}
-@font-face {
-  font-family: '72';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff2')
-    format('woff2');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: '72';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff')
-    format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: '72';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff2')
-    format('woff2');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'SAP-icons';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff')
-    format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'SAP-icons';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff2')
-    format('woff2');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'SAP-icons';
-  src: url('../../../node_modules/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.ttf')
-    format('ttf');
-  font-weight: normal;
-  font-style: normal;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(
-    --sapFontFamily,
-    '72',
-    '72full',
-    Arial,
-    Helvetica,
-    sans-serif
-  );
-}
-
 body {
   padding: 0;
 }
diff --git a/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js b/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
index af2754be73..e2e55ef5d5 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
@@ -45,7 +45,7 @@ describe('Context switcher', () => {
 
     cy.get('[data-testid=luigi-alert]').should(
       'have.class',
-      'fd-message-strip--information'
+      'fd-alert--information'
     );
 
     cy.get('[data-testid=luigi-alert]').should('contain', 'Project 4 created.');
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
index 036007c006..6d3e1afe50 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
@@ -84,7 +84,7 @@ describe('Luigi client linkManager', () => {
 
       //wait for the alert coming from an inactive iFrame to be shown and second iFrame to be loaded
       cy.wait(500);
-      cy.get('.fd-message-strip').should(
+      cy.get('.fd-alert').should(
         'contain',
         'Information alert sent from an inactive iFrame'
       );
@@ -164,7 +164,7 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/projects/pr2/miscellaneous2');
 
-      cy.get('.fd-message-strip').contains(
+      cy.get('.fd-alert').contains(
         'Could not map the exact target node for the requested route projects/pr2/miscellaneous2/maskopatol'
       );
 
@@ -174,7 +174,7 @@ describe('Luigi client linkManager', () => {
         .click();
 
       //alert disappears
-      cy.get('.fd-message-strip').should('not.exist');
+      cy.get('.fd-alert').should('not.exist');
     });
 
     it('navigate to a totally wrong link', () => {
@@ -183,7 +183,7 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/overview');
 
-      cy.get('.fd-message-strip').contains(
+      cy.get('.fd-alert').contains(
         'Could not find the requested route maskopatol/has/a/child'
       );
 
@@ -193,7 +193,7 @@ describe('Luigi client linkManager', () => {
         .click();
 
       //alert disappears
-      cy.get('.fd-message-strip').should('not.exist');
+      cy.get('.fd-alert').should('not.exist');
     });
   });
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
index 7cfb64015e..00eeaa4019 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
@@ -26,7 +26,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-message-strip--success'
+        'fd-alert--success'
       );
 
       cy.get('[data-testid=luigi-alert-dismiss]').click();
@@ -44,7 +44,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-message-strip--information'
+        'fd-alert--information'
       );
     });
     it('hides Alert after specified time', () => {
@@ -112,7 +112,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-message-strip--warning'
+        'fd-alert--warning'
       );
 
       cy.get('*[id$=_link_relativePath]').click();
@@ -150,7 +150,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
         .click();
 
       cy.get('[data-testid=luigi-alert]')
-        .should('have.class', 'fd-message-strip--error')
+        .should('have.class', 'fd-alert--error')
         .should('contain', "<b onmouseover=alert('Wufff!')>click me!</b>");
 
       cy.get('[data-testid=luigi-alert]')
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
index e829095493..1fb7061aed 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
@@ -90,11 +90,11 @@ describe('Luigi Client ux manager features', () => {
         .contains('External Page')
         .click();
 
-      cy.get('[data-testid=luigi-loading-spinner]').should('exist');
+      cy.get('.spinnerContainer .fd-spinner').should('exist');
 
       cy.wait(250); // give it some time to hide
 
-      cy.get('[data-testid=luigi-loading-spinner]').should('not.be.visible');
+      cy.get('.spinnerContainer .fd-spinner').should('not.be.visible');
 
       // show loading indicator
       cy.getIframeBody().then($iframeBody => {
@@ -102,10 +102,10 @@ describe('Luigi Client ux manager features', () => {
           .contains('Show loading indicator')
           .click();
 
-        cy.get('[data-testid=luigi-loading-spinner]').should('exist');
+        cy.get('.spinnerContainer .fd-spinner').should('exist');
         cy.wait(250); // give it some time to hide
         // wait for programmatic hide of loading indicator
-        cy.get('[data-testid=luigi-loading-spinner]').should('not.be.visible');
+        cy.get('.spinnerContainer .fd-spinner').should('not.be.visible');
       });
     });
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
index 276153fb14..fe362811aa 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
@@ -17,7 +17,7 @@ describe('Navigation', () => {
           title: 'Preserved View',
           size: 'm'
         });
-        cy.get('.fd-dialog__close').click();
+        cy.get('.fd-modal__close').click();
         cy.expectPathToBe('/overview');
       });
     });
@@ -412,7 +412,7 @@ describe('Navigation', () => {
 
         cy.getIframeBody().then($iframeBody => {
           cy.wrap($iframeBody)
-            .find('.fd-list-group__item')
+            .find('.fd-list__item')
             .contains('Current pathsegment: ' + label);
         });
       });

From 835f365062b0d08c8fae0254edbddc6352cd013a Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Tue, 21 Apr 2020 16:34:52 +0200
Subject: [PATCH 15/19] style the logout page

---
 .../src/app/project/project.component.scss                    | 1 -
 test/e2e-test-application/src/logout.html                     | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/e2e-test-application/src/app/project/project.component.scss b/test/e2e-test-application/src/app/project/project.component.scss
index 557c15d7d4..a966ed7f1c 100644
--- a/test/e2e-test-application/src/app/project/project.component.scss
+++ b/test/e2e-test-application/src/app/project/project.component.scss
@@ -3,7 +3,6 @@ section {
     margin-bottom: 0.75rem;
     &:focus {
       border-color: #085caf;
-      color: #085caf;
       box-shadow: 0 0 0 1px #0a6ed1;
     }
   }
diff --git a/test/e2e-test-application/src/logout.html b/test/e2e-test-application/src/logout.html
index 25cd43ec7a..a4cfdb3578 100644
--- a/test/e2e-test-application/src/logout.html
+++ b/test/e2e-test-application/src/logout.html
@@ -9,8 +9,12 @@
   <meta name="description" content="">
   <meta name="keywords" content="logout">
   <link rel='stylesheet' href='/fundamental-styles/fundamental-styles.css'>
+  <link rel='stylesheet' href='/styles.css'>
 
   <style>
+    body {
+      margin: 0;
+    }
     .sap-icon--log::before {
       font-size: 150px;
       color: #a0a0a0;

From 8c09545475d99d8c229022e16c7b33a1d186cedc Mon Sep 17 00:00:00 2001
From: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com>
Date: Wed, 22 Apr 2020 16:02:31 +0200
Subject: [PATCH 16/19] Update website/fiddle/README.md

Co-Authored-By: Aleksandra Simeonova <aleksandra.simeonova@sap.com>
---
 website/fiddle/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/fiddle/README.md b/website/fiddle/README.md
index fabe2c3fcf..abbd5e5604 100644
--- a/website/fiddle/README.md
+++ b/website/fiddle/README.md
@@ -1,11 +1,11 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/6e36180d-2486-4daf-80a5-90a0ab363992/deploy-status)](https://app.netlify.com/sites/relaxed-kowalevski-49f468/deploys)
 
-Luigi fiddle, deployed via netlify and accessible at https://fiddle.luigi-project.io
-Go to the [Luigi Fiddle](https://fiddle.luigi-project.io) site to see Luigi in action and configure a sample application.
+Luigi Fiddle, deployed via Netlify and accessible at https://fiddle.luigi-project.io.
+The Fiddle allows you to see Luigi in action and configure a sample application.
 
-### Code formatting for contributors
+### Install Luigi Fiddle on your machine
 
 Run the `npm install` command in the root folder to install it.
 
 ### Run fiddle locally
-`npm run dev`
\ No newline at end of file
+`npm run dev`

From c9490aa60f6331daf18c27aeb40aedf80fa103e3 Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Thu, 23 Apr 2020 14:02:11 +0200
Subject: [PATCH 17/19] add fonts and icons to angular and include styles.css
 into main views

---
 test/e2e-test-application/angular.json        | 13 +++----
 .../src/assets/auth-mock/login-mock.html      |  1 +
 .../src/assets/basicexternal.html             |  1 +
 test/e2e-test-application/src/logout.html     |  5 ++-
 test/e2e-test-application/src/styles.css      | 34 ++++++-------------
 5 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/test/e2e-test-application/angular.json b/test/e2e-test-application/angular.json
index b8f32dbf38..4e0612e6e2 100644
--- a/test/e2e-test-application/angular.json
+++ b/test/e2e-test-application/angular.json
@@ -21,6 +21,7 @@
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
+              "src/styles.css",
               "src/index.html",
               "src/logout.html",
               {
@@ -29,14 +30,14 @@
                 "output": "/fundamental-styles"
               },
               {
-                "glob": "fonts/**",
-                "input": "node_modules/fundamental-styles/dist",
-                "output": "/fundamental-styles"
+                "glob": "**",
+                "input": "node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts",
+                "output": "/fonts"
               },
               {
-                "glob": "icons/**",
-                "input": "node_modules/fundamental-styles/dist",
-                "output": "/fundamental-styles"
+                "glob": "**",
+                "input": "node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/",
+                "output": "/fonts"
               },
               {
                 "glob": "**",
diff --git a/test/e2e-test-application/src/assets/auth-mock/login-mock.html b/test/e2e-test-application/src/assets/auth-mock/login-mock.html
index bb22f8a0d4..3123590595 100644
--- a/test/e2e-test-application/src/assets/auth-mock/login-mock.html
+++ b/test/e2e-test-application/src/assets/auth-mock/login-mock.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Luigi Mock Identity Provider</title>
+    <link rel="stylesheet" type="text/css" href="../../styles.css" />
     <style type="text/css">
       body {
         background-color: #f3f4f5;
diff --git a/test/e2e-test-application/src/assets/basicexternal.html b/test/e2e-test-application/src/assets/basicexternal.html
index a004bb22a9..5ab72b6d9c 100644
--- a/test/e2e-test-application/src/assets/basicexternal.html
+++ b/test/e2e-test-application/src/assets/basicexternal.html
@@ -3,6 +3,7 @@
   <head>
     <title>Basic example</title>
     <link rel="stylesheet" href="/fundamental-styles/fundamental-styles.css" />
+    <link rel="stylesheet" type="text/css" href="../styles.css" />
     <style type="text/css">
       body {
         padding: 0;
diff --git a/test/e2e-test-application/src/logout.html b/test/e2e-test-application/src/logout.html
index a4cfdb3578..7753682bdf 100644
--- a/test/e2e-test-application/src/logout.html
+++ b/test/e2e-test-application/src/logout.html
@@ -8,9 +8,8 @@
   <title>Logout successful</title>
   <meta name="description" content="">
   <meta name="keywords" content="logout">
-  <link rel='stylesheet' href='/fundamental-styles/fundamental-styles.css'>
-  <link rel='stylesheet' href='/styles.css'>
-
+  <link rel="stylesheet" type="text/css" href="/fundamental-styles/fundamental-styles.css">
+  <link rel="stylesheet" type="text/css" href="styles.css">
   <style>
     body {
       margin: 0;
diff --git a/test/e2e-test-application/src/styles.css b/test/e2e-test-application/src/styles.css
index 681e1fb39b..513b4bad06 100644
--- a/test/e2e-test-application/src/styles.css
+++ b/test/e2e-test-application/src/styles.css
@@ -1,66 +1,51 @@
 @font-face {
   font-family: '72';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff')
-    format('woff');
+  src: url('/fonts/72-Light-full.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: '72';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff2')
-    format('woff2');
+  src: url('/fonts/72-Light-full.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: '72';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff')
-    format('woff');
+  src: url('/fonts/72-Bold-full.woff') format('woff');
   font-weight: 700;
   font-style: normal;
 }
 @font-face {
   font-family: '72';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff2')
-    format('woff2');
+  src: url('/fonts/72-Bold-full.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: '72';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff')
-    format('woff');
+  src: url('/fonts/72-Regular-full.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: '72';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff2')
-    format('woff2');
+  src: url('/fonts/72-Regular-full.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'SAP-icons';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff')
-    format('woff');
+  src: url('/fonts/SAP-icons.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'SAP-icons';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff2')
-    format('woff2');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'SAP-icons';
-  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.ttf')
-    format('ttf');
+  src: url('/fonts/SAP-icons.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
@@ -92,3 +77,6 @@ ul {
 .clickable {
   cursor: pointer;
 }
+.fd-list .fd-list__item:active .fd-link {
+  color: var(--sapList_Active_TextColor, #fff);
+}

From 5e228e365f867a3ab2eff6f4adfb87b79884e099 Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Thu, 23 Apr 2020 14:22:37 +0200
Subject: [PATCH 18/19] relocate fixes for dialog/modal

---
 test/e2e-test-application/src/app/app.component.scss  |  3 ---
 .../src/app/project/modal/modal.component.scss        | 11 +++++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/test/e2e-test-application/src/app/app.component.scss b/test/e2e-test-application/src/app/app.component.scss
index 5f85275708..cf5822b6a8 100644
--- a/test/e2e-test-application/src/app/app.component.scss
+++ b/test/e2e-test-application/src/app/app.component.scss
@@ -8,6 +8,3 @@
   height: auto; //override the 2,75rem from FD Styles, otherwise the content doesn#t fit
   padding: 10px;
 }
-.fd-dialog {
-  z-index: 2;
-}
diff --git a/test/e2e-test-application/src/app/project/modal/modal.component.scss b/test/e2e-test-application/src/app/project/modal/modal.component.scss
index 8ee52b5aa6..c128b73294 100644
--- a/test/e2e-test-application/src/app/project/modal/modal.component.scss
+++ b/test/e2e-test-application/src/app/project/modal/modal.component.scss
@@ -1,3 +1,10 @@
-:host .fd-dialog__content {
-  max-width: 460px;
+@media (max-width: 599px) {
+  :host .fd-dialog__content:not(.fd-dialog__content--mobile) {
+    max-width: 90%;
+    min-width: 90%;
+  }
+}
+
+.fd-dialog {
+  z-index: 1000;
 }

From f549b28bae1afaac7c1a615c9d98690964adde24 Mon Sep 17 00:00:00 2001
From: UlianaMunich <like-me1@yandex.ru>
Date: Fri, 24 Apr 2020 11:30:03 +0200
Subject: [PATCH 19/19] add 460px width to a modal and clean it

---
 .../src/app/project/modal/modal.component.html              | 2 +-
 .../src/app/project/modal/modal.component.scss              | 6 ++++++
 .../src/assets/auth-mock/login-mock.html                    | 5 +----
 test/e2e-test-application/src/logout.html                   | 3 ---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/e2e-test-application/src/app/project/modal/modal.component.html b/test/e2e-test-application/src/app/project/modal/modal.component.html
index 300bd56a44..1d08280d3e 100644
--- a/test/e2e-test-application/src/app/project/modal/modal.component.html
+++ b/test/e2e-test-application/src/app/project/modal/modal.component.html
@@ -1,6 +1,6 @@
 <div
   *ngIf="modalActive"
-  class="fd-dialog fd-dialog--active fd-dialog-docs-static"
+  class="fd-dialog fd-dialog--active"
   role="dialog"
   data-testid="luigi-confirmation-modal"
   aria-hidden="false"
diff --git a/test/e2e-test-application/src/app/project/modal/modal.component.scss b/test/e2e-test-application/src/app/project/modal/modal.component.scss
index c128b73294..8efffba347 100644
--- a/test/e2e-test-application/src/app/project/modal/modal.component.scss
+++ b/test/e2e-test-application/src/app/project/modal/modal.component.scss
@@ -5,6 +5,12 @@
   }
 }
 
+@media (min-width: 600px) {
+  .fd-dialog__content {
+    max-width: 460px;
+  }
+}
+
 .fd-dialog {
   z-index: 1000;
 }
diff --git a/test/e2e-test-application/src/assets/auth-mock/login-mock.html b/test/e2e-test-application/src/assets/auth-mock/login-mock.html
index 3123590595..db9364a0c7 100644
--- a/test/e2e-test-application/src/assets/auth-mock/login-mock.html
+++ b/test/e2e-test-application/src/assets/auth-mock/login-mock.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" type="text/css" href="../../styles.css" />
     <style type="text/css">
       body {
-        background-color: #f3f4f5;
+        background-color: #f7f7f7;
       }
 
       .form-input {
@@ -63,9 +63,6 @@
         display: block;
         margin-bottom: 20px;
         color: #32363a;
-        font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-          Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-          Segoe UI Symbol;
       }
     </style>
   </head>
diff --git a/test/e2e-test-application/src/logout.html b/test/e2e-test-application/src/logout.html
index 7753682bdf..bf33b9975e 100644
--- a/test/e2e-test-application/src/logout.html
+++ b/test/e2e-test-application/src/logout.html
@@ -11,9 +11,6 @@
   <link rel="stylesheet" type="text/css" href="/fundamental-styles/fundamental-styles.css">
   <link rel="stylesheet" type="text/css" href="styles.css">
   <style>
-    body {
-      margin: 0;
-    }
     .sap-icon--log::before {
       font-size: 150px;
       color: #a0a0a0;