feat: move several static color definitions of template component int…

…o theme file

chore: unify paddings to be divided by 8 + adjust order of definitions
chore: add TODOs + comments

src/app/wlo-search/template/template.component.html

@@ -1,6 +1,6 @@
 <div
-  class="reloading-indicator"
-  [class.light-bg]="requestInProgress"
+  class="reloading-indicator-bg"
+  [class.transparent-bg]="requestInProgress"
   *ngIf="!pageConfigCheckFailed && (!initialLoadSuccessfully || requestInProgress)"
 >
   <!-- for requestInProgress the page might be too large to display a visible spinner -->

src/app/wlo-search/template/template.component.scss

@@ -13,7 +13,7 @@
     margin: auto;
 }
 
-.reloading-indicator {
+.reloading-indicator-bg {
     position: absolute;
     top: 0;
     left: 0;
@@ -23,10 +23,9 @@
     align-items: center;
     justify-content: center;
     cursor: wait;
-    background: $white;
     z-index: 100;
 
-    &.light-bg {
+    &.transparent-bg {
         background: $black-40;
     }
 }
@@ -49,7 +48,6 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            background: $white;
             border-radius: var(--border-radius) var(--border-radius) 0 0;
         }
     }
@@ -75,8 +73,8 @@
     margin-top: -20px;
     margin-bottom: 30px;
     padding-right: calc(var(--offcanvas-menu-width) + var(--offcanvas-offset));
-    z-index: 10;
     border-radius: var(--border-radius);
+    z-index: 10;
 
     &.reserve-space-left {
         padding-left: calc(var(--offcanvas-menu-width) + var(--offcanvas-offset));
@@ -95,7 +93,6 @@
             flex-grow: 1;
             width: 100%;
             max-width: var(--maximal-width);
-            background: $white;
             border-radius: var(--border-radius);
 
             .wlo-swimlane {
@@ -197,7 +194,7 @@
 
                 /* type: jumbotron */
                 .wlo-jumbotron {
-                    padding: 15px 25px;
+                    padding: 16px 24px;
                     height: 100%;
                     box-sizing: border-box;
                     overflow-y: scroll;
@@ -213,10 +210,11 @@
 
                 /* type: text */
                 .wlo-text {
-                    padding: 10px;
+                    padding: 8px;
                 }
 
                 /* type: spacer */
+                // TODO: Remove wlo-spacer style, if not used anymore
                 .wlo-spacer {
                     margin: 1.5em auto;
                     width: 100%;

src/app/wlo-search/template/template.component.theme.scss

@@ -2,9 +2,12 @@
 @import '../functions';
 
 @mixin template-page-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
     $primary: map-get($theme, primary);
     $customAccent: map-get($theme, custom-accent);
     $customGray: map-get($theme, custom-gray);
+    $primary-foreground-color: primary-foreground-color($theme);
 
     app-template {
         // overwrite border radius
@@ -19,5 +22,20 @@
                 background: mat.m2-get-color-from-palette($customAccent, accent1);
             }
         }
+
+        .reloading-indicator-bg {
+            background: mat.m2-get-color-from-palette($background, background);
+        }
+
+        // note: this element is located within the wlo-topic-header,
+        //       thus, !important is necessary to overwrite its style
+        h1 {
+            color: mat.m2-get-color-from-palette($foreground, text) !important;
+        }
+
+        .template-header-container,
+        .portal-wrapper-left {
+            background: mat.m2-get-color-from-palette($background, background);
+        }
     }
 }

src/styles.scss

@@ -171,6 +171,7 @@ body {
     display: none;
 }
 
+// TODO: Move into theme file of details component
 .mdc-button--outlined.btn-outline-primary:not(:disabled) {
     color: var(--primary);
     border: 1.5px solid var(--primary);