Skip to content

Commit dd034f3

Browse files
alberto-art3chalberto-art3ch
authored
Merge pull request #2666 from shubhamkumar9199/improve-the-profile-page-layout
[WEB-317] Fix: Resolve CSS style issues in profile layout
2 parents e845a45 + 5145e7b commit dd034f3

File tree

3 files changed

+155
-48
lines changed

3 files changed

+155
-48
lines changed

‎src/app/profile/profile.component.scss‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@
66
margin-bottom: 1rem;
77
padding: 1.5rem;
88
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
9-
border: 1px solid #ddd;
9+
border: 1px solid var(--border-color, #ddd);
1010
border-radius: 6px;
11+
background-color: var(--card-background, #fff);
12+
transition:
13+
background-color 0.3s ease,
14+
border-color 0.3s ease;
1115

1216
.layout-row-wrap {
1317
display: grid;
@@ -18,14 +22,16 @@
1822
display: flex;
1923
flex-direction: column;
2024
padding: 0.75rem;
21-
border: 1px solid #ddd;
25+
border: 1px solid var(--border-color, #ddd);
2226
border-radius: 6px;
23-
background-color: #fff;
27+
background-color: var(--info-box-background, #fff);
28+
transition: background-color 0.3s ease;
2429

2530
.header {
2631
font-weight: 600;
2732
margin-bottom: 0.5rem;
2833
font-size: 1.1rem;
34+
color: var(--header-color, inherit);
2935
}
3036
}
3137
}
@@ -35,11 +41,13 @@
3541
div {
3642
margin: 1rem 0;
3743
word-wrap: break-word;
44+
color: var(--text-color, inherit);
3845

3946
&.header {
4047
font-weight: 600;
4148
margin-bottom: 0.5rem;
4249
font-size: 1.1rem;
50+
color: var(--header-color, inherit);
4351
}
4452
}
4553
}
@@ -52,31 +60,57 @@
5260
th {
5361
font-weight: 600;
5462
text-align: left;
63+
color: var(--table-header-color, inherit);
64+
background-color: var(--table-header-bg, transparent);
5565
}
5666

5767
td {
5868
padding: 0.75rem;
59-
border: 1px solid #ddd;
69+
border: 1px solid var(--border-color, #ddd);
70+
color: var(--text-color, inherit);
6071
}
6172

6273
tr:hover {
63-
background-color: #f9f9f9;
74+
background-color: var(--table-hover-bg, #f9f9f9);
6475
}
6576
}
6677
}
6778

6879
.container table th,
6980
.container table td {
70-
border-top: 1px solid rgb(0 0 0 / 12%);
81+
border-top: 1px solid var(--border-color, rgb(0 0 0 / 12%));
7182
}
7283

7384
th.mat-header-cell:not(:first-of-type),
7485
td.mat-cell:not(:first-of-type) {
75-
border-left: 1px solid rgb(0 0 0 / 12%);
86+
border-left: 1px solid var(--border-color, rgb(0 0 0 / 12%));
7687
}
7788

7889
.mat-elevation-z1 {
7990
margin: 0.5rem 0;
80-
box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
91+
box-shadow: 0 1px 3px var(--elevation-shadow, rgb(0 0 0 / 12%));
8192
border-radius: 6px;
8293
}
94+
95+
// Dark mode styles
96+
:host-context(.dark-theme) {
97+
--border-color: #444;
98+
--card-background: #2d2d2d;
99+
--info-box-background: #383838;
100+
--header-color: #e0e0e0;
101+
--text-color: #d0d0d0;
102+
--table-header-bg: #333;
103+
--table-header-color: #e0e0e0;
104+
--table-hover-bg: #3a3a3a;
105+
--elevation-shadow: rgb(0 0 0 / 30%);
106+
107+
.container {
108+
mat-card {
109+
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
110+
}
111+
112+
table {
113+
box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
114+
}
115+
}
116+
}

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

Lines changed: 24 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,59 +16,43 @@
1616
<div class="container">
1717
<mat-card>
1818
<mat-card-content>
19-
<div class="layout-row-wrap">
20-
<div class="flex-50 mat-body-strong">
21-
{{ 'labels.inputs.Login Name' | translate }}
19+
<div class="content-rows">
20+
<div class="content-row">
21+
<div class="label">{{ 'labels.inputs.Login Name' | translate }}</div>
22+
<div class="value">{{ userData.username }}</div>
2223
</div>
2324

24-
<div class="flex-50">
25-
{{ userData.username }}
25+
<div class="content-row">
26+
<div class="label">{{ 'labels.inputs.First Name' | translate }}</div>
27+
<div class="value">{{ userData.firstname }}</div>
2628
</div>
2729

28-
<div class="flex-50 mat-body-strong">
29-
{{ 'labels.inputs.First Name' | translate }}
30+
<div class="content-row">
31+
<div class="label">{{ 'labels.inputs.Last Name' | translate }}</div>
32+
<div class="value">{{ userData.lastname }}</div>
3033
</div>
3134

32-
<div class="flex-50">
33-
{{ userData.firstname }}
35+
<div class="content-row" *ngIf="userData.email">
36+
<div class="label">{{ 'labels.inputs.Email' | translate }}</div>
37+
<div class="value">{{ userData.email }}</div>
3438
</div>
3539

36-
<div class="flex-50 mat-body-strong">
37-
{{ 'labels.inputs.Last Name' | translate }}
40+
<div class="content-row">
41+
<div class="label">{{ 'labels.inputs.Office' | translate }}</div>
42+
<div class="value">{{ userData.officeName }}</div>
3843
</div>
3944

40-
<div class="flex-50">
41-
{{ userData.lastname }}
42-
</div>
43-
44-
<div class="flex-50 mat-body-strong" *ngIf="userData.email">
45-
{{ 'labels.inputs.Email' | translate }}
46-
</div>
47-
48-
<div class="flex-50" *ngIf="userData.email">
49-
{{ userData.email }}
50-
</div>
51-
52-
<div class="flex-50 mat-body-strong">
53-
{{ 'labels.inputs.Office' | translate }}
54-
</div>
55-
56-
<div class="flex-50">
57-
{{ userData.officeName }}
58-
</div>
59-
60-
<div class="flex-50 mat-body-strong">
61-
{{ 'labels.inputs.Roles' | translate }}
62-
</div>
63-
64-
<div class="flex-50">
65-
<span *ngFor="let role of userData.selectedRoles">
66-
{{ role.name }}
67-
</span>
45+
<div class="content-row">
46+
<div class="label">{{ 'labels.inputs.Roles' | translate }}</div>
47+
<div class="value">
48+
<span *ngFor="let role of userData.selectedRoles">
49+
{{ role.name }}
50+
</span>
51+
</div>
6852
</div>
6953
</div>
7054

71-
<div class="layout-row layout-align-center gap-2percent column-on-mobile">
55+
<div class="layout-row layout-align-center gap-2percent column-on-mobile back-button-container">
7256
<button type="button" mat-raised-button color="primary" [routerLink]="['../']">
7357
{{ 'labels.buttons.Back' | translate }}
7458
</button>

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,34 @@
11
.container {
22
max-width: 37rem;
3+
margin: 0 auto;
4+
padding: 1rem;
5+
6+
mat-card {
7+
margin-bottom: 1rem;
8+
padding: 1.5rem;
9+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
10+
border: 1px solid var(--border-color, #ddd);
11+
border-radius: 8px;
12+
background-color: var(--card-background, #fff);
13+
transition:
14+
background-color 0.3s ease,
15+
border-color 0.3s ease;
16+
}
17+
18+
.layout-row-wrap {
19+
display: grid;
20+
grid-template-columns: 50% 50%;
21+
gap: 1rem;
22+
23+
.flex-50 {
24+
padding: 0.5rem;
25+
26+
&.mat-body-strong {
27+
color: var(--label-color, #555);
28+
font-weight: 600;
29+
}
30+
}
31+
}
332

433
.content {
534
div {
@@ -8,7 +37,67 @@
837

938
span {
1039
display: block;
40+
padding: 0.25rem 0;
41+
color: var(--text-color, inherit);
42+
}
43+
}
44+
}
45+
46+
.content-rows {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 1rem;
50+
51+
.content-row {
52+
display: flex;
53+
flex-direction: row;
54+
border-bottom: 1px solid var(--border-color-light, #eee);
55+
padding-bottom: 0.5rem;
56+
57+
.label {
58+
flex: 0 0 40%;
59+
font-weight: 600;
60+
color: var(--label-color, #555);
61+
padding: 0.5rem 1rem 0.5rem 0;
1162
}
63+
64+
.value {
65+
flex: 0 0 60%;
66+
padding: 0.5rem 0;
67+
color: var(--text-color, inherit);
68+
69+
span {
70+
display: block;
71+
padding: 0.25rem 0;
72+
}
73+
}
74+
}
75+
}
76+
77+
.back-button-container {
78+
margin-top: 2rem;
79+
}
80+
81+
button {
82+
transition: all 0.2s ease;
83+
84+
&:hover {
85+
transform: translateY(-2px);
86+
}
87+
}
88+
}
89+
90+
// Dark mode styles
91+
:host-context(.dark-theme) {
92+
--border-color: #444;
93+
--border-color-light: #3a3a3a;
94+
--card-background: #2d2d2d;
95+
--label-color: #b8b8b8;
96+
--text-color: #e0e0e0;
97+
98+
.container {
99+
mat-card {
100+
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
12101
}
13102
}
14103
}

0 commit comments

Comments
 (0)