Revert "Merge pull request #931 from bcgov/feature/DSS-1154"

This reverts commit b6d8c06, reversing
changes made to ed43417.

Author: Sai Krishna Metpalli

frontend/nginx.local.conf

@@ -79,7 +79,7 @@ http {
         # See https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
         # See https://content-security-policy.com/nonce/
         # See https://angular.io/guide/security#content-security-policy
-        add_header content-security-policy "default-src 'self'; style-src 'self' 'nonce-$cspNonce' 'unsafe-inline'; script-src 'self' 'nonce-$cspNonce'; font-src 'self'; frame-src loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca; connect-src 'self' loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca server.arcgisonline.com; img-src 'self' https://tile.openstreetmap.org data: server.arcgisonline.com www.w3.org; frame-ancestors https://loginproxy.gov.bc.ca https://dev.loginproxy.gov.bc.ca https://test.loginproxy.gov.bc.ca; object-src 'none'; base-uri 'self'; form-action 'self';";
+        add_header content-security-policy "default-src 'self'; style-src 'self' 'nonce-$cspNonce' ; script-src 'self' 'nonce-$cspNonce'; font-src 'self'; frame-src loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca; connect-src 'self' loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca server.arcgisonline.com; img-src 'self' https://tile.openstreetmap.org data: server.arcgisonline.com www.w3.org; frame-ancestors https://loginproxy.gov.bc.ca https://dev.loginproxy.gov.bc.ca https://test.loginproxy.gov.bc.ca; object-src 'none'; base-uri 'self'; form-action 'self';";
 
         include /nginx/nginx.conf;
 

frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html

@@ -13,7 +13,7 @@ <h4>All fields are required except where stated.</h4>
         size="small" [(selection)]="selectedListings">
         <ng-template pTemplate="header">
             <tr>
-                <th class="width-4rem" aria-labelledby="selectAll_checkbox_header">
+                <th style="width: 4rem" aria-labelledby="selectAll_checkbox_header">
                     <p-tableHeaderCheckbox id="selectAll_checkbox_header"
                         ariaLabel="'Select or Deselect All'"></p-tableHeaderCheckbox>
                 </th>
@@ -140,7 +140,7 @@ <h4>All fields are required except where stated.</h4>
             <div class="form-group-row-col">
 
                 <p-editor (onTextChange)="onEditorChanged($event)" appendTo="body" #textarea id="comment" name="comment"
-                    placeholder="Optional" formControlName="comment" class="height-320px">
+                    placeholder="Optional" formControlName="comment" [style]="{ height: '320px' }">
                     <ng-template pTemplate="header">
                         <span class="ql-formats">
                             <button type="button" class="ql-bold" aria-label="Bold"></button>
@@ -164,8 +164,8 @@ <h4>All fields are required except where stated.</h4>
         (click)="submit()">Review</button>
     <button pButton id="cancel-btn" class="outline-btn" (click)="cancel()">Cancel</button>
 </div>
-<p-dialog class="preview-dialog width-50vw" header="Send Notice of Non-Compliance" [(visible)]="showPreviewDialog" [modal]="true"
-    [draggable]="false" [resizable]="false">
+<p-dialog class="preview-dialog" header="Send Notice of Non-Compliance" [(visible)]="showPreviewDialog" [modal]="true"
+    [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
 
     <div class="note">
         <div class="title">

frontend/src/app/features/components/platform-management/platform-management.component.html

@@ -10,7 +10,7 @@ <h2>Manage Platforms</h2>
         size="small">
         <ng-template pTemplate="header">
             <tr>
-                <th class="width-4rem"></th>
+                <th style="width: 4rem"></th>
                 <th class="sortable-header" id="organizationNm_header"
                     [class.sorted]="this.sort && this.sort.prop === 'organizationNm'"
                     (click)="onSort('organizationNm')">Platform Name
@@ -58,12 +58,12 @@ <h2>Manage Platforms</h2>
                     <i class="pi pi-angle-up"
                         *ngIf="this.sort && this.sort.prop === 'updDtm' && this.sort.dir === 'asc'"></i>
                 </th>
-                <th class="width-4rem">Edit</th>
+                <th style="width: 4rem">Edit</th>
             </tr>
         </ng-template>
         <ng-template pTemplate="body" let-platform let-index="rowIndex" let-expanded="expanded">
             <tr>
-                <td class="width-4rem">
+                <td style="width: 4rem">
                     <button [disabled]="!platform.subsidiaries || !platform.subsidiaries.length"
                         [pRowTogglerDisabled]="!platform.subsidiaries || !platform.subsidiaries.length" pButton
                         [pTooltip]="(!platform.subsidiaries || !platform.subsidiaries.length)?'Does Not Contain Subsidiary Platforms':'Expand / Collapse'"
@@ -82,7 +82,7 @@ <h2>Manage Platforms</h2>
                 <td class="status" [class.active]="platform.isActive">
                     {{platform.isActive?'Active':'Disabled'}}</td>
                 <td>{{platform.updDtm |date:'yyyy-MM-dd'}}</td>
-                <td class="width-4rem">
+                <td style="width: 4rem">
                     <a id="platform-edit-{{index}}-icon" class="edit-icon"
                         [routerLink]="'/platform/'+platform.organizationId">
                         <i class="pi pi-list"></i>

frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.html

@@ -12,7 +12,7 @@ <h4>Send a message to all hosts of the listings selected below. All fields are r
         size="small" [(selection)]="selectedListings">
         <ng-template pTemplate="header">
             <tr>
-                <th class="width-4rem">
+                <th style="width: 4rem">
                     <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                 </th>
                 <th class="sortable-header" id="offeringOrganizationNm_header"
@@ -98,7 +98,7 @@ <h4>Send a message to all hosts of the listings selected below. All fields are r
             </div>
             <div class="form-group-row-col">
                 <p-editor (onTextChange)="onEditorChanged($event)" appendTo="body" id="comment" name="comment"
-                    placeholder="Enter Messages here..." formControlName="comment" class="height-320px">
+                    placeholder="Enter Messages here..." formControlName="comment" [style]="{ height: '320px' }">
                     <ng-template pTemplate="header">
                         <span class="ql-formats">
                             <button type="button" class="ql-bold" aria-label="Bold"></button>
@@ -154,8 +154,8 @@ <h4>Send a message to all hosts of the listings selected below. All fields are r
     <button pButton id="cancel-btn" class="outline-btn" (click)="cancel()">Cancel</button>
 </div>
 
-<p-dialog class="preview-dialog width-50vw" header="Message to Hosts" [(visible)]="showPreviewDialog" [modal]="true"
-    [draggable]="false" [resizable]="false">
+<p-dialog class="preview-dialog" header="Message to Hosts" [(visible)]="showPreviewDialog" [modal]="true"
+    [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
 
     <div class="note">
         <div class="title">

frontend/src/app/features/components/upload-business-license/upload-business-license.component.html

@@ -143,8 +143,8 @@
     </div>
 </div>
 
-<p-dialog header="Upload Business Licence Data" class="upload-bl-popup width-640px" [modal]="true" [closable]="true"
-    [(visible)]="isUploadVisible">
+<p-dialog header="Upload Business Licence Data" class="upload-bl-popup" [modal]="true" [closable]="true"
+    [(visible)]="isUploadVisible" [style]="{ width: '640px' }">
     <ng-template pTemplate="body">
         <div class="row sub-header">Upload Your Business Licence Data (.CSV File Only)</div>
         <div class="row file-select" [class.has-file]="selectedFile?.name">

frontend/src/app/features/components/user-management/add-aps-user/add-aps-user.component.html

@@ -47,7 +47,7 @@ <h2>Add APS User Information</h2>
                 <br>
                 <a class="link-to-roles" [routerLink]="'/roles'" target="_blank">View All Roles and Permissions</a>
                 <div class="tags-content">
-                    <p-tag class="tag-light-blue" *ngFor="let tag of tags"
+                    <p-tag [style]="{'background-color':'#D8EAFD', 'color':'#2D2D2D'}" *ngFor="let tag of tags"
                         [value]="tag"></p-tag>
                 </div>
             </div>

frontend/src/app/features/components/user-management/user-details/user-details.component.html

@@ -87,7 +87,7 @@ <h2>User Information</h2>
                 <br>
                 <a class="link-to-roles" [routerLink]="'/roles'" target="_blank">View All Roles and Permissions</a>
                 <div class="tags-content">
-                    <p-tag class="tag-light-blue" *ngFor="let tag of tags"
+                    <p-tag [style]="{'background-color':'#D8EAFD', 'color':'#2D2D2D'}" *ngFor="let tag of tags"
                         [value]="tag"></p-tag>
                 </div>
             </div>

frontend/src/app/features/components/user-management/user-management.component.html

@@ -111,10 +111,10 @@
                     <td>
                         <ng-container [ngSwitch]="accessRequest.accessRequestStatusCd">
                             <ng-container *ngSwitchCase="'Approved'">
-                                <span class="status-approved">Approved</span>
+                                <span [style]="{'color':'#42814A'}">Approved</span>
                             </ng-container>
                             <ng-container *ngSwitchCase="'Denied'">
-                                <span class="status-denied">Denied</span>
+                                <span [style]="{'color':'#CE3E39'}">Denied</span>
                             </ng-container>
                             <ng-container *ngSwitchCase="'Requested'">
                                 <button pButton name="form-approve-btn" id="form-approve-{{index}}-btn"
@@ -153,7 +153,7 @@
 </div>
 
 <p-dialog *ngIf="currentTableItem" id="approve-popup-dialog" header="Approve Access Request" [modal]="true"
-    [(visible)]="showApprovePopup" class="width-50vw">
+    [(visible)]="showApprovePopup" [style]="{width: '50vw'}">
     <div class="form-group-row"><strong class="bold-text">User Email: </strong>{{currentTableItem.emailAddressDsc}}
     </div>
     <div class="form-group-row"><strong class="bold-text">ID Provider: </strong>
@@ -193,7 +193,7 @@
 </p-dialog>
 
 <p-dialog id="reject-popup-dialog" *ngIf="currentTableItem" header="Reject Access Request" [modal]="true"
-    [(visible)]="showRejectPopup" class="width-50vw">
+    [(visible)]="showRejectPopup" [style]="{width: '50vw'}">
     <div class="form-group-row-col"><strong class="bold-text">User ID: </strong>{{currentTableItem.emailAddressDsc}}
     </div>
     <div class="form-group-row-col"><strong class="bold-text">Requested User

frontend/src/styles.scss

@@ -582,10 +582,6 @@ body {
                 border-bottom-left-radius: 4px;
             }
         }
-
-        &.width-50vw {
-            width: 50vw !important;
-        }
     }
 
     .p-menubar {
@@ -778,54 +774,4 @@ body {
 
 .ql-tooltip {
     left: 1rem !important;
-}
-
-/* CSP-compliant utility classes to replace inline styles */
-.width-4rem {
-    width: 4rem !important;
-}
-
-.width-2rem {
-    width: 2rem !important;
-}
-
-.width-19rem {
-    width: 19rem !important;
-}
-
-.width-24rem {
-    width: 24rem !important;
-}
-
-.width-50vw {
-    width: 50vw !important;
-}
-
-.width-640px {
-    width: 640px !important;
-}
-
-.text-align-center {
-    text-align: center !important;
-}
-
-.height-320px {
-    height: 320px !important;
-}
-
-.height-320px .p-editor-content {
-    height: 320px !important;
-}
-
-.status-approved {
-    color: #42814A !important;
-}
-
-.status-denied {
-    color: #CE3E39 !important;
-}
-
-.tag-light-blue {
-    background-color: #D8EAFD !important;
-    color: #2D2D2D !important;
 }