fix: UI fixes in mediaco self-service portal (#654)

Author: tumms2021389

package-lock.json

@@ -61,7 +61,7 @@
     "@angular/platform-browser": "^19.2.14",
     "@angular/platform-browser-dynamic": "^19.2.14",
     "@angular/router": "^19.2.14",
-    "@pega/angular-sdk-components": "~0.25.5",
+    "@pega/angular-sdk-components": "~0.25.6",
     "@pega/auth": "~0.2.34",
     "@pega/cosmos-react-condition-builder": "^7.0.4",
     "@pega/cosmos-react-core": "^7.0.4",
@@ -86,7 +86,7 @@
     "@angular/compiler-cli": "^19.2.14",
     "@angular/language-service": "^19.2.14",
     "@chromatic-com/storybook": "^3.2.7",
-    "@pega/angular-sdk-overrides": "~0.25.5",
+    "@pega/angular-sdk-overrides": "~0.25.6",
     "@pega/configs": "^0.16.3",
     "@pega/constellationjs": "~25.1.0",
     "@pega/dx-component-builder-sdk": "~0.25.7",

package.json

@@ -5,41 +5,31 @@
   "theme": "light",
   "authConfig": {
     "authService": "pega",
-
     "mashupClient_comment": "Client ID and Client secret from the OAuth 2.0 Client Registration record used for mashup use case",
     "mashupClient_comment2": "See SDK Guide for instructions on how to generate and obtain the proper values for the following entries",
     "mashupClientId": "69184022781147469983",
     "mashupUserIdentifier": "customer@mediaco",
     "mashupClient_comment3": "Note: mashupPassword requires Base64 encoding",
     "mashupPassword": "",
-
     "portalClientId_comment": "Client ID from the OAuth 2.0 Client Registration record used for portal use case",
     "portalClientId": "69184022781147469983"
   },
-
   "serverConfig": {
     "infinityRestServerUrl_comment": "Full path to Infinity REST server",
     "infinityRestServerUrl": "https://localhost:1080/prweb",
-
     "appAlias_comment": "appAlias of the application which operators will be accessing (e.g., MediaCo)",
     "appAlias": "",
-
     "sdkContentServerUrl_comment": "If specified, the given URL will be used. If left blank, window.location.origin will be used.",
     "sdkContentServerUrl": "",
-
     "appPortal_comment": "If specified, the given appPortal will be loaded. If left blank, the operator's default Portal is used. Ignored for Embedded use",
     "appPortal": "",
-
     "appMashupCaseType_comment": "If specified, uses this case type for mashup.  Otherwise, uses the first case type found for the app",
     "appMashupCaseType": "DIXL-MediaCo-Work-PurchasePhone",
-
     "excludePortals_comment": "Array of specific portals to avoid attempting to load with SDK",
     "excludePortals": ["pxExpress", "Developer", "pxPredictionStudio", "pxAdminStudio", "pyCaseWorker", "pyCaseManager7"],
-
     "showModalsInEmbeddedMode_comment": "If true, modals will be shown in embedded mode",
     "showModalsInEmbeddedMode": false
   },
-
   "dxcbConfig": {
     "publishAccess": {
       "rulesetName": "CustomDXComponents",
@@ -60,7 +50,6 @@
       "user": "",
       "password": ""
     },
-
     "componentDefaults": {
       "organization": "YourOrg",
       "library": "YourComponentLib",
@@ -71,7 +60,6 @@
       "icon": "",
       "lintAction": "show"
     },
-
     "componentTemplates": {
       "componentTemplates_comment": "Optional paths for location of custom or override templates.",
       "customTemplatesPath": "",

sdk-config.json

@@ -17,7 +17,7 @@
     </div>
   </div>
   <div *ngIf="bPCoreReady$">
-    <div *ngIf="sComponentName$ === 'RootContainer'">
+    <div *ngIf="sComponentName$ === 'RootContainer'" id="pega-portal-container">
       <component-mapper name="RootContainer" [props]="{ pConn$ }"></component-mapper>
     </div>
   </div>

src/app/_samples/full-portal/full-portal.component.html

@@ -19,6 +19,10 @@
   row-gap: calc(2 * 0.5rem);
   align-items: start;
   padding: 1rem;
+
+  & > *:nth-child(1) {
+    min-width: 0;
+  }
 }
 
 .psdk-grid-filter-narrow-wide {

src/app/_samples/mediaco/components/banner/banner.component.scss

@@ -53,7 +53,7 @@
                 <mat-icon class="circle-icon">person</mat-icon>
               </div>
             </mat-list-item>
-            <mat-menu #menu="matMenu">
+            <mat-menu #menu="matMenu" class="custom-menu-no-padding">
               <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
             </mat-menu>
             <mat-list-item>

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.html

@@ -189,3 +189,11 @@ mat-nav-list {
 .mat-drawer {
   background-color: #fef7ff !important;
 }
+
+.psdk-nav-header {
+  cursor: pointer;
+}
+
+::ng-deep .custom-menu-no-padding .mat-mdc-menu-content {
+  padding: 0 !important;
+}

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.scss

@@ -24,7 +24,7 @@
     border-top-left-radius: 2rem !important;
     border-bottom: gray 0.0625rem solid !important;
 
-    h2 {
+    h2:nth-child(1) {
       color: #46185a;
       font-weight: 700;
       font-size: 36px;
@@ -34,4 +34,20 @@
     }
   }
   // Self Service Case View styles for MediaCo sample app - end
+
+  // Confirmation screen styles for MediaCo sample app - start
+  .done-button {
+    justify-content: start !important;
+    padding-inline: 1rem;
+
+    button {
+      color: var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary));
+      background-color: var(--mdc-filled-button-container-color, var(--mat-sys-primary));
+      box-shadow: none;
+    }
+  }
+
+  .confirmation-details {
+    padding-inline: 1rem;
+  }
 }

src/app/_samples/mediaco/mediaCoStyles.scss

@@ -70,5 +70,6 @@ app-view-container {
 
   .psdk-view-container-top {
     padding: 0;
+    scroll-margin-top: 64px;
   }
 }