Merge pull request #2666 from shubhamkumar9199/improve-the-profile-page-layout

[WEB-317] Fix: Resolve CSS style issues in profile layout

src/app/profile/profile.component.scss

@@ -6,8 +6,12 @@
     margin-bottom: 1rem;
     padding: 1.5rem;
     box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color, #ddd);
     border-radius: 6px;
+    background-color: var(--card-background, #fff);
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease;
 
     .layout-row-wrap {
       display: grid;
@@ -18,14 +22,16 @@
         display: flex;
         flex-direction: column;
         padding: 0.75rem;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color, #ddd);
         border-radius: 6px;
-        background-color: #fff;
+        background-color: var(--info-box-background, #fff);
+        transition: background-color 0.3s ease;
 
         .header {
           font-weight: 600;
           margin-bottom: 0.5rem;
           font-size: 1.1rem;
+          color: var(--header-color, inherit);
         }
       }
     }
@@ -35,11 +41,13 @@
     div {
       margin: 1rem 0;
       word-wrap: break-word;
+      color: var(--text-color, inherit);
 
       &.header {
         font-weight: 600;
         margin-bottom: 0.5rem;
         font-size: 1.1rem;
+        color: var(--header-color, inherit);
       }
     }
   }
@@ -52,31 +60,57 @@
     th {
       font-weight: 600;
       text-align: left;
+      color: var(--table-header-color, inherit);
+      background-color: var(--table-header-bg, transparent);
     }
 
     td {
       padding: 0.75rem;
-      border: 1px solid #ddd;
+      border: 1px solid var(--border-color, #ddd);
+      color: var(--text-color, inherit);
     }
 
     tr:hover {
-      background-color: #f9f9f9;
+      background-color: var(--table-hover-bg, #f9f9f9);
     }
   }
 }
 
 .container table th,
 .container table td {
-  border-top: 1px solid rgb(0 0 0 / 12%);
+  border-top: 1px solid var(--border-color, 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%);
+  border-left: 1px solid var(--border-color, rgb(0 0 0 / 12%));
 }
 
 .mat-elevation-z1 {
   margin: 0.5rem 0;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+  box-shadow: 0 1px 3px var(--elevation-shadow, rgb(0 0 0 / 12%));
   border-radius: 6px;
 }
+
+// Dark mode styles
+:host-context(.dark-theme) {
+  --border-color: #444;
+  --card-background: #2d2d2d;
+  --info-box-background: #383838;
+  --header-color: #e0e0e0;
+  --text-color: #d0d0d0;
+  --table-header-bg: #333;
+  --table-header-color: #e0e0e0;
+  --table-hover-bg: #3a3a3a;
+  --elevation-shadow: rgb(0 0 0 / 30%);
+
+  .container {
+    mat-card {
+      box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
+    }
+
+    table {
+      box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+    }
+  }
+}

src/app/users/view-user/view-user.component.html

@@ -16,59 +16,43 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div class="layout-row-wrap">
-        <div class="flex-50 mat-body-strong">
-          {{ 'labels.inputs.Login Name' | translate }}
+      <div class="content-rows">
+        <div class="content-row">
+          <div class="label">{{ 'labels.inputs.Login Name' | translate }}</div>
+          <div class="value">{{ userData.username }}</div>
         </div>
 
-        <div class="flex-50">
-          {{ userData.username }}
+        <div class="content-row">
+          <div class="label">{{ 'labels.inputs.First Name' | translate }}</div>
+          <div class="value">{{ userData.firstname }}</div>
         </div>
 
-        <div class="flex-50 mat-body-strong">
-          {{ 'labels.inputs.First Name' | translate }}
+        <div class="content-row">
+          <div class="label">{{ 'labels.inputs.Last Name' | translate }}</div>
+          <div class="value">{{ userData.lastname }}</div>
         </div>
 
-        <div class="flex-50">
-          {{ userData.firstname }}
+        <div class="content-row" *ngIf="userData.email">
+          <div class="label">{{ 'labels.inputs.Email' | translate }}</div>
+          <div class="value">{{ userData.email }}</div>
         </div>
 
-        <div class="flex-50 mat-body-strong">
-          {{ 'labels.inputs.Last Name' | translate }}
+        <div class="content-row">
+          <div class="label">{{ 'labels.inputs.Office' | translate }}</div>
+          <div class="value">{{ userData.officeName }}</div>
         </div>
 
-        <div class="flex-50">
-          {{ userData.lastname }}
-        </div>
-
-        <div class="flex-50 mat-body-strong" *ngIf="userData.email">
-          {{ 'labels.inputs.Email' | translate }}
-        </div>
-
-        <div class="flex-50" *ngIf="userData.email">
-          {{ userData.email }}
-        </div>
-
-        <div class="flex-50 mat-body-strong">
-          {{ 'labels.inputs.Office' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ userData.officeName }}
-        </div>
-
-        <div class="flex-50 mat-body-strong">
-          {{ 'labels.inputs.Roles' | translate }}
-        </div>
-
-        <div class="flex-50">
-          <span *ngFor="let role of userData.selectedRoles">
-            {{ role.name }}
-          </span>
+        <div class="content-row">
+          <div class="label">{{ 'labels.inputs.Roles' | translate }}</div>
+          <div class="value">
+            <span *ngFor="let role of userData.selectedRoles">
+              {{ role.name }}
+            </span>
+          </div>
         </div>
       </div>
 
-      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile back-button-container">
         <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>

src/app/users/view-user/view-user.component.scss

@@ -1,5 +1,34 @@
 .container {
   max-width: 37rem;
+  margin: 0 auto;
+  padding: 1rem;
+
+  mat-card {
+    margin-bottom: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 8px;
+    background-color: var(--card-background, #fff);
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease;
+  }
+
+  .layout-row-wrap {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    gap: 1rem;
+
+    .flex-50 {
+      padding: 0.5rem;
+
+      &.mat-body-strong {
+        color: var(--label-color, #555);
+        font-weight: 600;
+      }
+    }
+  }
 
   .content {
     div {
@@ -8,7 +37,67 @@
 
       span {
         display: block;
+        padding: 0.25rem 0;
+        color: var(--text-color, inherit);
       }
     }
   }
+
+  .content-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .content-row {
+      display: flex;
+      flex-direction: row;
+      border-bottom: 1px solid var(--border-color-light, #eee);
+      padding-bottom: 0.5rem;
+
+      .label {
+        flex: 0 0 40%;
+        font-weight: 600;
+        color: var(--label-color, #555);
+        padding: 0.5rem 1rem 0.5rem 0;
+      }
+
+      .value {
+        flex: 0 0 60%;
+        padding: 0.5rem 0;
+        color: var(--text-color, inherit);
+
+        span {
+          display: block;
+          padding: 0.25rem 0;
+        }
+      }
+    }
+  }
+
+  .back-button-container {
+    margin-top: 2rem;
+  }
+
+  button {
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
+}
+
+// Dark mode styles
+:host-context(.dark-theme) {
+  --border-color: #444;
+  --border-color-light: #3a3a3a;
+  --card-background: #2d2d2d;
+  --label-color: #b8b8b8;
+  --text-color: #e0e0e0;
+
+  .container {
+    mat-card {
+      box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
+    }
+  }
 }