WEB-412:reduce spacing and use centralized color system (#2953)

fix/padding

src/app/system/roles-and-permissions/view-role/view-role.component.html

@@ -1,4 +1,4 @@
-<div class="layout-row align-end gap-2px responsive-column container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-0">
   <button
     mat-raised-button
     color="primary"
@@ -44,8 +44,8 @@
   </button>
 </div>
 
-<div class="container m-b-20">
+<div class="container m-b-0">
-  <mat-card class="mat-elevation-z8">
+  <mat-card class="mat-elevation-z8 role-details-card">
     <mat-card-content>
       <div class="layout-row-wrap">
         <div class="flex-40 flex-lt-md-50 header">
@@ -68,7 +68,7 @@
   </mat-card>
 </div>
 
-<div class="mat-elevation-z8 container">
+<div class="container m-b-20">
   <mat-card>
     <ng-container>
       <div class="permission-selected layout-row">
@@ -127,7 +127,7 @@
     </ng-container>
 
     @if (!isDisabled) {
-      <div class="layout-row layout-align-center gap-5px layout-xs-column">
+      <div class="layout-row layout-align-center gap-10px layout-xs-column">
         <mat-card-actions>
           <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
             {{ 'labels.buttons.Cancel' | translate }}

src/app/system/roles-and-permissions/view-role/view-role.component.scss

@@ -1,5 +1,36 @@
+@use '../../../../assets/styles/colours' as *;
+
+.container {
+  padding: 1rem;
+
+  mat-card {
+    margin-bottom: 0.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 2px 4px rgba($black, 0.1);
+    border: 1px solid var(--border-color, $mid-grey);
+    border-radius: 8px;
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease;
+
+    mat-card-content {
+      padding: 0;
+    }
+
+    .layout-row {
+      margin: 0;
+      padding: 0;
+    }
+
+    &.role-details-card {
+      padding: 0.5rem;
+    }
+  }
+}
+
 .display-permissions {
   padding-top: 15px;
+  padding-bottom: 8px;
 }
 
 span {
@@ -8,14 +39,12 @@ span {
 
 mat-list-item {
   cursor: pointer;
+  padding: 8px 0;
 }
 
 .mat-list-base .mat-list-item .mat-list-item-content {
   cursor: pointer;
-}
+  padding: 0 16px;
-
-.active {
-  background-color: #f2f2f2;
 }
 
 .grouping-name {
@@ -23,28 +52,54 @@ mat-list-item {
 }
 
 .list-permission {
-  padding-left: 20px;
+  padding-left: 24px;
+  padding-right: 16px;
 }
 
 .permission-selected {
-  margin-top: 10px;
+  margin-top: 0;
-  height: 40px;
+  margin-bottom: 16px;
+  height: auto;
+  min-height: 40px;
+  padding-bottom: 8px;
+
+  h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
 }
 
 .inactive {
   transition: all 0.2s ease-in-out;
-}
 
-.inactive:hover {
+  &:hover {
-  transform: scale(1.1);
+    transform: scale(1.01);
+    background-color: $light-grey;
+  }
 }
 
 .content {
   div {
-    line-height: 3rem;
+    line-height: 2.5rem;
+    margin-bottom: 0.5rem;
 
     &.header {
       font-weight: 500;
+      padding: 0.5rem 0;
+    }
+  }
+}
+
+mat-card-actions {
+  padding: 16px 0 0;
+  margin: 0;
+
+  button {
+    margin-right: 8px;
+
+    &:last-child {
+      margin-right: 0;
     }
   }
 }