From 5c9ff5b36c3d588f3939d54e712ce22807ee23b0 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Wed, 14 Jun 2023 16:01:12 +0200
Subject: [PATCH] [AAE-15239] Making about settings component styles
 configurable (#8666)

---
 .../about-server-settings.component.html                 | 4 ++--
 .../about-server-settings.component.scss                 | 9 +++++++--
 .../about-server-settings.component.ts                   | 4 ++--
 lib/core/src/lib/styles/_components-variables.scss       | 6 +++++-
 lib/core/src/lib/styles/_reference-variables.scss        | 5 ++++-
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html
index 83b54597fe..a164e763d2 100644
--- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.html
+++ b/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>
diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss
index 16d6a6e6ac..c792989e00 100644
--- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss
+++ b/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);
+    }
 }
diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts
index 0ce46dd974..fe5a1d0683 100644
--- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts
+++ b/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 = '';
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index 68bf9ce0f3..c036d549e0 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/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
diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss
index db65bb969a..83ff6383df 100644
--- a/lib/core/src/lib/styles/_reference-variables.scss
+++ b/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;