Merge pull request #2604 from shubhamsharma9199/fix/improve-profile-page-layout

fix(profile-page): improve layout and fix formatting/lint issues

src/app/profile/profile.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
+<div class="container m-b-10 layout-row layout-lt-md-column align-end gap-1percent">
   <button mat-raised-button color="primary" [routerLink]="['/system', 'roles-and-permissions']">
     <fa-icon icon="check" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Permissions' | translate }}
@@ -8,72 +8,65 @@
     {{ 'labels.buttons.Change Password' | translate }}
   </button>
 </div>
-
-<div class="container layout-column gap-2percent">
+<div class="container layout-column gap-1percent">
   <mat-card>
     <div class="layout-row-wrap">
       <div class="flex-50 header">
         {{ 'labels.inputs.Tenant Id' | translate }}
       </div>
-
       <div class="flex-50">
         {{ tenantIdentifier }}
       </div>
-
       <div class="flex-50 header">
         {{ 'labels.inputs.User Id' | translate }}
       </div>
-
       <div class="flex-50">
         {{ profileData.userId }}
       </div>
-
       <div class="flex-50 header">
         {{ 'labels.inputs.User Name' | translate }}
       </div>
-
       <div class="flex-50">
         {{ profileData.username }}
       </div>
-
       <div class="flex-50 header">
         {{ 'labels.inputs.Office' | translate }}
       </div>
-
       <div class="flex-50">
         {{ profileData.officeName }}
       </div>
-
       <div class="flex-50 header">
         {{ 'labels.inputs.Status' | translate }}
       </div>
-
       <div class="flex-50">
         {{ profileData.authenticated ? 'Authenticated' : 'Not Authenticated' }}
       </div>
-
       <div class="flex-50 header">
         {{ 'labels.inputs.Language' | translate }}
       </div>
-
       <div class="flex-50">
         {{ language }}
       </div>
     </div>
   </mat-card>
-
   <mat-card>
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="role">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Role' | translate }}</th>
-        <td mat-cell *matCellDef="let role">{{ role.name }}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ 'labels.inputs.Role' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let role">
+          {{ role.name }}
+        </td>
       </ng-container>
-
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-        <td mat-cell *matCellDef="let role">{{ role.description }}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ 'labels.inputs.Description' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let role">
+          {{ role.description }}
+        </td>
       </ng-container>
-
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>

src/app/profile/profile.component.scss

@@ -1,5 +1,16 @@
 .container {
   max-width: 37rem;
+  padding: 0.5rem;
+
+  mat-card {
+    margin-bottom: 1rem;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+
+    .layout-row-wrap {
+      padding: 0.5rem 0;
+    }
+  }
 
   .content {
     div {
@@ -8,7 +19,28 @@
 
       &.header {
         font-weight: 500;
+        margin-bottom: 0.5rem;
       }
     }
   }
+
+  table {
+    width: 100%;
+    margin-top: 1rem;
+  }
+}
+
+.mat-elevation-z1 {
+  margin: 0.5rem 0;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+
+  th,
+  td {
+    border-top: 1px solid rgb(0 0 0 / 12%);
+  }
+
+  th.mat-header-cell:not(:first-of-type),
+  td.mat-cell:not(:first-of-type) {
+    border-left: 1px solid rgb(0 0 0 / 12%);
+  }
 }