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,41 +11,53 @@
 <div class="container layout-column gap-1percent">
   <mat-card>
     <div class="layout-row-wrap">
-      <div class="flex-50 header">
+      <div class="info-box">
-        {{ 'labels.inputs.Tenant Id' | translate }}
+        <div class="header">
+          {{ 'labels.inputs.Tenant Id' | translate }}
+        </div>
+        <div>
+          {{ tenantIdentifier }}
+        </div>
       </div>
-      <div class="flex-50">
+      <div class="info-box">
-        {{ tenantIdentifier }}
+        <div class="header">
+          {{ 'labels.inputs.User Id' | translate }}
+        </div>
+        <div>
+          {{ profileData.userId }}
+        </div>
       </div>
-      <div class="flex-50 header">
+      <div class="info-box">
-        {{ 'labels.inputs.User Id' | translate }}
+        <div class="header">
+          {{ 'labels.inputs.User Name' | translate }}
+        </div>
+        <div>
+          {{ profileData.username }}
+        </div>
       </div>
-      <div class="flex-50">
+      <div class="info-box">
-        {{ profileData.userId }}
+        <div class="header">
+          {{ 'labels.inputs.Office' | translate }}
+        </div>
+        <div>
+          {{ profileData.officeName }}
+        </div>
       </div>
-      <div class="flex-50 header">
+      <div class="info-box">
-        {{ 'labels.inputs.User Name' | translate }}
+        <div class="header">
+          {{ 'labels.inputs.Status' | translate }}
+        </div>
+        <div>
+          {{ profileData.authenticated ? 'Authenticated' : 'Not Authenticated' }}
+        </div>
       </div>
-      <div class="flex-50">
+      <div class="info-box">
-        {{ profileData.username }}
+        <div class="header">
-      </div>
+          {{ 'labels.inputs.Language' | translate }}
-      <div class="flex-50 header">
+        </div>
-        {{ 'labels.inputs.Office' | translate }}
+        <div>
-      </div>
+          {{ language }}
-      <div class="flex-50">
+        </div>
-        {{ 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>

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,20 +47,36 @@
   table {
     width: 100%;
     margin-top: 1rem;
+    border-collapse: collapse;
+
+    th {
+      font-weight: 600;
+      text-align: left;
+    }
+
+    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%);
+}
+
+th.mat-header-cell:not(:first-of-type),
+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;
-  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%);
-  }
 }