Enhance profile layout: Single-row box layout for user details (#2664)

src/app/profile/profile.component.html

@@ -1,9 +1,9 @@
 <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']">
+  <button mat-raised-button color="primary" class="m-r-10" [routerLink]="['/system', 'roles-and-permissions']">
     <fa-icon icon="check" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Permissions' | translate }}
   </button>
-  <button mat-raised-button color="primary" (click)="changeUserPassword()">
+  <button mat-raised-button color="primary" class="m-r-10" (click)="changeUserPassword()">
     <fa-icon icon="cog" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Change Password' | translate }}
   </button>
@@ -11,43 +11,55 @@
 <div class="container layout-column gap-1percent">
   <mat-card>
     <div class="layout-row-wrap">
-      <div class="flex-50 header">
+      <div class="info-box">
+        <div class="header">
           {{ 'labels.inputs.Tenant Id' | translate }}
         </div>
-      <div class="flex-50">
+        <div>
           {{ tenantIdentifier }}
         </div>
-      <div class="flex-50 header">
+      </div>
+      <div class="info-box">
+        <div class="header">
           {{ 'labels.inputs.User Id' | translate }}
         </div>
-      <div class="flex-50">
+        <div>
           {{ profileData.userId }}
         </div>
-      <div class="flex-50 header">
+      </div>
+      <div class="info-box">
+        <div class="header">
           {{ 'labels.inputs.User Name' | translate }}
         </div>
-      <div class="flex-50">
+        <div>
           {{ profileData.username }}
         </div>
-      <div class="flex-50 header">
+      </div>
+      <div class="info-box">
+        <div class="header">
           {{ 'labels.inputs.Office' | translate }}
         </div>
-      <div class="flex-50">
+        <div>
           {{ profileData.officeName }}
         </div>
-      <div class="flex-50 header">
+      </div>
+      <div class="info-box">
+        <div class="header">
           {{ 'labels.inputs.Status' | translate }}
         </div>
-      <div class="flex-50">
+        <div>
           {{ profileData.authenticated ? 'Authenticated' : 'Not Authenticated' }}
         </div>
-      <div class="flex-50 header">
+      </div>
+      <div class="info-box">
+        <div class="header">
           {{ 'labels.inputs.Language' | translate }}
         </div>
-      <div class="flex-50">
+        <div>
           {{ language }}
         </div>
       </div>
+    </div>
   </mat-card>
   <mat-card>
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">

src/app/profile/profile.component.scss

@@ -1,14 +1,33 @@
 .container {
   max-width: 37rem;
-  padding: 0.5rem;
+  padding: 1rem;
 
   mat-card {
     margin-bottom: 1rem;
-    padding: 1rem;
+    padding: 1.5rem;
     box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+    border: 1px solid #ddd;
+    border-radius: 6px;
 
     .layout-row-wrap {
-      padding: 0.5rem 0;
+      display: grid;
+      grid-template-columns: 50% 50%;
+      gap: 1rem;
+
+      .info-box {
+        display: flex;
+        flex-direction: column;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        background-color: #fff;
+
+        .header {
+          font-weight: 600;
+          margin-bottom: 0.5rem;
+          font-size: 1.1rem;
+        }
+      }
     }
   }
 
@@ -18,8 +37,9 @@
       word-wrap: break-word;
 
       &.header {
-        font-weight: 500;
+        font-weight: 600;
         margin-bottom: 0.5rem;
+        font-size: 1.1rem;
       }
     }
   }
@@ -27,15 +47,26 @@
   table {
     width: 100%;
     margin-top: 1rem;
-  }
+    border-collapse: collapse;
+
+    th {
+      font-weight: 600;
+      text-align: left;
     }
 
-.mat-elevation-z1 {
-  margin: 0.5rem 0;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
-
-  th,
     td {
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+    }
+
+    tr:hover {
+      background-color: #f9f9f9;
+    }
+  }
+}
+
+.container table th,
+.container table td {
   border-top: 1px solid rgb(0 0 0 / 12%);
 }
 
@@ -43,4 +74,9 @@
 td.mat-cell:not(:first-of-type) {
   border-left: 1px solid rgb(0 0 0 / 12%);
 }
+
+.mat-elevation-z1 {
+  margin: 0.5rem 0;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+  border-radius: 6px;
 }