[AAE-15239] Making about settings component styles configurable (#8666)

lib/core/src/lib/about/about-server-settings/about-server-settings.component.html

@@ -1,5 +1,5 @@
-<div class="adf-github-link-container">
-    <mat-card class="mat-elevation-z0">
+<div class="adf-about-server-settings">
+    <mat-card class="mat-elevation-z0 adf-about-server-settings__card">
         <p data-automation-id="adf-process-service-host">
             {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
         </p>

lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss

@@ -1,3 +1,8 @@
-.adf-github-link-container {
-    padding: 10px;
+.adf-about-server-settings {
+    &__card {
+        background: var(--adf-about-server-settings-background);
+        color: var(--adf-about-server-settings-color);
+        border-radius: var(--adf-about-server-settings-border-radius);
+        padding: var(--adf-about-server-settings-padding);
+    }
 }

lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
 
 @Component({
     selector: 'adf-about-server-settings',
     templateUrl: './about-server-settings.component.html',
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ['./about-server-settings.component.scss']
 })
 export class AboutServerSettingsComponent implements OnInit {
     ecmHost = '';

lib/core/src/lib/styles/_components-variables.scss

@@ -5,7 +5,7 @@
         --adf-card-view-background: $adf-ref-card-background,
         --adf-card-view-border: $adf-ref-card-border,
         --adf-card-view-border-color: $adf-ref-card-border-color,
-        --adf-card-view-border-radius: $adf-ref-card-border-radius,
+        --adf-card-view-border-radius: $adf-ref-card-border-radius-0,
         --adf-edit-task-and-service-filter-header-title-color: $adf-ref-title-color,
         --adf-edit-task-and-service-filter-header-description-color: $adf-ref-description-color,
         --adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-text-field-label-color,
@@ -18,6 +18,10 @@
         --adf-edit-process-filter-header-description-color: $adf-ref-description-color,
         --adf-edit-process-filter-content-text-label-color: $adf-ref-text-field-label-color,
         --adf-edit-process-filter-content-select-label-color: $adf-ref-select-field-label-color,
+        --adf-about-server-settings-background: $adf-ref-card-background,
+        --adf-about-server-settings-color: $adf-ref-card-color,
+        --adf-about-server-settings-border-radius: $adf-ref-card-border-radius-4,
+        --adf-about-server-settings-padding: $adf-ref-card-padding-16,
     );
 
     // propagates SCSS variables into the CSS variables scope

lib/core/src/lib/styles/_reference-variables.scss

@@ -1,9 +1,12 @@
 $adf-ref-card-background: white;
 $adf-ref-card-border: unset;
 $adf-ref-card-border-color: unset;
-$adf-ref-card-border-radius: 0;
+$adf-ref-card-border-radius-0: 0;
 $adf-ref-height-48: 48px;
 $adf-ref-title-color: rgba(0, 0, 0, 0.87);
 $adf-ref-description-color: rgba(0, 0, 0, 0.54);
 $adf-ref-text-field-label-color: rgba(0, 0, 0, 0.54);
 $adf-ref-select-field-label-color: rgba(0, 0, 0, 0.54);
+$adf-ref-card-color: rgba(0, 0, 0, 0.87);
+$adf-ref-card-padding-16: 16px;
+$adf-ref-card-border-radius-4: 4px;