From 989d51f46fd59466ffc0d2455bf27d0b56411cc6 Mon Sep 17 00:00:00 2001
From: megli2 <egli@puzzle.ch>
Date: Fri, 8 Dec 2023 14:40:08 +0100
Subject: [PATCH] uninstall puzzle shell and implement banner on our own

---
 frontend/angular.json                         |  5 +-
 .../application-banner.component.html         | 72 ++++++++++---------
 .../application-banner.component.scss         |  1 +
 .../application-banner.component.ts           |  1 +
 4 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/frontend/angular.json b/frontend/angular.json
index 122f52587b..ee55dc2591 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -33,10 +33,7 @@
             "stylePreprocessorOptions": {
               "includePaths": ["src/style", "src/assets"]
             },
-            "scripts": [
-              "node_modules/@puzzleitc/puzzle-shell/dist/bundle.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ]
+            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {
             "production": {
diff --git a/frontend/src/app/application-banner/application-banner.component.html b/frontend/src/app/application-banner/application-banner.component.html
index d069bc2dd8..6bb811e4d4 100644
--- a/frontend/src/app/application-banner/application-banner.component.html
+++ b/frontend/src/app/application-banner/application-banner.component.html
@@ -1,38 +1,42 @@
-<pzsh-banner id="okrBanner" #okrBanner>
-  <img alt="okr-tangram" height="140" ngSrc="assets/images/triangles-okr-header.svg" slot="tangram" width="274" />
-  <div class="h-100 m-0 d-flex" slot="content">
-    <section class="d-none d-md-flex">
-      <div class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
-        <div class="d-flex align-items-end gap-2">
-          <span class="d-flex flex-column">
-            <p class="mb-2">Quartal</p>
-            <app-quarter-filter></app-quarter-filter>
-          </span>
-          <app-objective-filter></app-objective-filter>
+<div id="okrBanner" #okrBanner>
+  <div class="d-flex flex-row">
+    <div class="h-100 m-0 d-flex w-50" slot="content">
+      <section class="d-none d-md-flex">
+        <div class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
+          <div class="d-flex align-items-end gap-2">
+            <span class="d-flex flex-column">
+              <p class="mb-2">Quartal</p>
+              <app-quarter-filter></app-quarter-filter>
+            </span>
+            <app-objective-filter></app-objective-filter>
+          </div>
+          <app-team-filter></app-team-filter>
         </div>
-        <app-team-filter></app-team-filter>
-      </div>
-    </section>
+      </section>
 
-    <section class="m-0 d-sm-flex d-md-none w-100">
-      <mat-accordion [displayMode]="'flat'" class="w-100">
-        <mat-expansion-panel (closed)="panelOpenState = false" (opened)="panelOpenState = true" id="header-accordion">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <span *ngIf="!panelOpenState; else openedPanel">{{
-                (quarterLabel$ | async) || quarterLabel$.getValue()
-              }}</span>
-              <ng-template #openedPanel> Filter </ng-template>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
+      <section class="m-0 d-sm-flex d-md-none w-100">
+        <mat-accordion [displayMode]="'flat'" class="w-100">
+          <mat-expansion-panel (closed)="panelOpenState = false" (opened)="panelOpenState = true" id="header-accordion">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <span *ngIf="!panelOpenState; else openedPanel">{{
+                  (quarterLabel$ | async) || quarterLabel$.getValue()
+                }}</span>
+                <ng-template #openedPanel> Filter </ng-template>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
 
-          <div class="d-flex gap-2 flex-column">
-            <app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)"></app-quarter-filter>
-            <app-objective-filter></app-objective-filter>
-            <app-team-filter></app-team-filter>
-          </div>
-        </mat-expansion-panel>
-      </mat-accordion>
-    </section>
+            <div class="d-flex gap-2 flex-column">
+              <app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)"></app-quarter-filter>
+              <app-objective-filter></app-objective-filter>
+              <app-team-filter></app-team-filter>
+            </div>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </section>
+    </div>
+    <div class="w-50 d-flex justify-content-end">
+      <img alt="okr-tangram" height="140" ngSrc="assets/images/triangles-okr-header.svg" slot="tangram" width="274" />
+    </div>
   </div>
-</pzsh-banner>
+</div>
diff --git a/frontend/src/app/application-banner/application-banner.component.scss b/frontend/src/app/application-banner/application-banner.component.scss
index e13097de5f..dbf18ec973 100644
--- a/frontend/src/app/application-banner/application-banner.component.scss
+++ b/frontend/src/app/application-banner/application-banner.component.scss
@@ -6,6 +6,7 @@
   height: min-content;
   z-index: 100;
   transition: 0.5s;
+  background-color: #dcedf9;
 }
 
 .header-content {
diff --git a/frontend/src/app/application-banner/application-banner.component.ts b/frontend/src/app/application-banner/application-banner.component.ts
index 9b46e8ef45..7af852e31f 100644
--- a/frontend/src/app/application-banner/application-banner.component.ts
+++ b/frontend/src/app/application-banner/application-banner.component.ts
@@ -37,6 +37,7 @@ export class ApplicationBannerComponent implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit(): void {
     this.resizeObserver.observe(this.okrBanner.nativeElement);
+    this.changeHeaderAppearance();
   }
 
   changeHeaderAppearance() {