Skip to content

Commit 29a7eb5

Browse files
JFranciosiJFranciosi
committed
Feet: implemented new styles to login and register to match home Design
1 parent 6a31556 commit 29a7eb5

5 files changed

Lines changed: 181 additions & 14 deletions

File tree

‎src/app/pages/login/login.css‎

Lines changed: 85 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@
33
justify-content: center;
44
align-items: center;
55
min-height: 100vh;
6-
background-color: var(--background-color);
6+
background: var(--graph-gradient);
77
padding: 1rem;
88
}
99

1010
:host ::ng-deep .p-card {
1111
background: var(--card-bg);
12-
box-shadow: var(--card-shadow);
12+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
1313
border-radius: 1rem;
14-
border: 1px solid rgba(255, 255, 255, 0.18);
14+
border: 1px solid rgba(227, 27, 35, 0.2);
15+
/* Red subtle border */
1516
}
1617

18+
/* Add a glow effect to the card on hover */
19+
:host ::ng-deep .p-card:hover {
20+
border-color: var(--logo-red);
21+
box-shadow: 0 0 30px var(--logo-red-glow);
22+
transition: all 0.3s ease;
23+
}
1724

1825
.field {
1926
margin-bottom: 2rem;
@@ -33,9 +40,10 @@
3340
}
3441

3542
.error-message {
36-
color: var(--red-500);
43+
color: var(--logo-red);
3744
text-align: center;
3845
margin-top: 1rem;
46+
font-weight: bold;
3947
}
4048

4149
.text-center {
@@ -47,7 +55,13 @@
4755
}
4856

4957
.text-primary {
50-
color: var(--primary-color);
58+
color: var(--logo-red);
59+
transition: color 0.2s;
60+
}
61+
62+
.text-primary:hover {
63+
color: #ff4d4d;
64+
/* lighter red on hover */
5165
}
5266

5367
.no-underline {
@@ -58,7 +72,12 @@
5872
display: flex;
5973
justify-content: center;
6074
align-items: center;
61-
margin: 0rem 0rem 2rem .5rem;
75+
margin: 0 0 2rem 0;
76+
color: var(--logo-red);
77+
font-size: 1.5rem;
78+
font-weight: bold;
79+
text-transform: uppercase;
80+
letter-spacing: 1px;
6281
}
6382

6483
:host ::ng-deep .p-password input {
@@ -67,4 +86,64 @@
6786

6887
:host ::ng-deep input {
6988
width: 100%;
89+
background: #2a2a2a;
90+
border: 1px solid #444;
91+
color: white;
92+
}
93+
94+
:host ::ng-deep input:enabled:focus,
95+
:host ::ng-deep .p-inputtext:enabled:focus,
96+
:host ::ng-deep .p-password-input:enabled:focus,
97+
:host ::ng-deep input.p-inputtext:enabled:focus {
98+
border-color: #ffffff !important;
99+
box-shadow: 0 0 0 1px #ffffff !important;
100+
outline: none !important;
101+
}
102+
103+
:host ::ng-deep .p-button {
104+
background: var(--logo-red);
105+
border: 1px solid var(--logo-red);
106+
}
107+
108+
:host ::ng-deep .p-button:enabled:hover {
109+
background: #c0151c;
110+
/* Darker red */
111+
border-color: #c0151c;
112+
box-shadow: 0 0 10px var(--logo-red-glow);
113+
}
114+
115+
:host ::ng-deep .p-float-label label {
116+
color: #aaa;
117+
}
118+
119+
:host ::ng-deep .p-input-icon-right>i:last-of-type {
120+
color: #aaa;
121+
}
122+
123+
:host ::ng-deep .p-float-label input:focus~label,
124+
:host ::ng-deep .p-float-label input.p-filled~label,
125+
:host ::ng-deep .p-float-label textarea:focus~label,
126+
:host ::ng-deep .p-float-label textarea.p-filled~label,
127+
:host ::ng-deep p-floatLabel input:focus+label,
128+
:host ::ng-deep p-floatLabel input.p-filled+label,
129+
/* Fix for p-password and other wrapped inputs */
130+
:host ::ng-deep p-floatLabel .p-inputwrapper-focus~label,
131+
:host ::ng-deep p-floatLabel .p-inputwrapper-filled~label,
132+
:host ::ng-deep .p-float-label .p-inputwrapper-focus~label,
133+
:host ::ng-deep .p-float-label .p-inputwrapper-filled~label {
134+
color: #ffffff !important;
135+
}
136+
137+
.logo-container {
138+
display: flex;
139+
justify-content: center;
140+
align-items: center;
141+
margin-bottom: 1.5rem;
142+
}
143+
144+
.button-container {
145+
display: flex;
146+
justify-content: flex-end;
147+
align-items: center;
148+
width: 100%;
70149
}

‎src/app/pages/login/login.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<div class="login-container">
22
<p-toast></p-toast>
33
<p-card header="Welcome" [style]="{ width: '100%', maxWidth: '400px' }">
4+
<div class="logo-container">
5+
<img src="/logo_red.png" alt="Pizza Express Logo" height="80" />
6+
</div>
47
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="flex flex-column gap-4">
58

69
<div class="field">
@@ -18,7 +21,9 @@
1821
</p-floatLabel>
1922
</div>
2023

21-
<p-button label="Login" type="submit" [loading]="loading" styleClass="w-full"></p-button>
24+
<div class="button-container">
25+
<p-button label="Login" type="submit" [loading]="loading"></p-button>
26+
</div>
2227

2328
@if (error) {
2429
<div class="error-message">

‎src/app/pages/register/register.css‎

Lines changed: 81 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,22 @@
33
justify-content: center;
44
align-items: center;
55
min-height: 100vh;
6-
background-color: var(--background-color);
6+
background: var(--graph-gradient);
77
padding: 1rem;
88
}
99

1010
:host ::ng-deep .p-card {
1111
background: var(--card-bg);
12-
box-shadow: var(--card-shadow);
12+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
1313
border-radius: 1rem;
14-
border: 1px solid rgba(255, 255, 255, 0.18);
14+
border: 1px solid rgba(227, 27, 35, 0.2);
1515
}
1616

17+
:host ::ng-deep .p-card:hover {
18+
border-color: var(--logo-red);
19+
box-shadow: 0 0 30px var(--logo-red-glow);
20+
transition: all 0.3s ease;
21+
}
1722

1823
.field {
1924
margin-bottom: 2rem;
@@ -33,9 +38,10 @@
3338
}
3439

3540
.error-message {
36-
color: var(--red-500);
41+
color: var(--logo-red);
3742
text-align: center;
3843
margin-top: 1rem;
44+
font-weight: bold;
3945
}
4046

4147
.text-center {
@@ -47,7 +53,12 @@
4753
}
4854

4955
.text-primary {
50-
color: var(--primary-color);
56+
color: var(--logo-red);
57+
transition: color 0.2s;
58+
}
59+
60+
.text-primary:hover {
61+
color: #ff4d4d;
5162
}
5263

5364
.no-underline {
@@ -58,7 +69,12 @@
5869
display: flex;
5970
justify-content: center;
6071
align-items: center;
61-
margin: 0rem 0rem 2rem .5rem;
72+
margin: 0 0 2rem 0;
73+
color: var(--logo-red);
74+
font-size: 1.5rem;
75+
font-weight: bold;
76+
text-transform: uppercase;
77+
letter-spacing: 1px;
6278
}
6379

6480
:host ::ng-deep .p-password input {
@@ -67,4 +83,63 @@
6783

6884
:host ::ng-deep input {
6985
width: 100%;
86+
background: #2a2a2a;
87+
border: 1px solid #444;
88+
color: white;
89+
}
90+
91+
:host ::ng-deep input:enabled:focus,
92+
:host ::ng-deep .p-inputtext:enabled:focus,
93+
:host ::ng-deep .p-password-input:enabled:focus,
94+
:host ::ng-deep input.p-inputtext:enabled:focus {
95+
border-color: #ffffff !important;
96+
box-shadow: 0 0 0 1px #ffffff !important;
97+
outline: none !important;
98+
}
99+
100+
:host ::ng-deep .p-button {
101+
background: var(--logo-red);
102+
border: 1px solid var(--logo-red);
103+
}
104+
105+
:host ::ng-deep .p-button:enabled:hover {
106+
background: #c0151c;
107+
border-color: #c0151c;
108+
box-shadow: 0 0 10px var(--logo-red-glow);
109+
}
110+
111+
:host ::ng-deep .p-float-label label {
112+
color: #aaa;
113+
}
114+
115+
:host ::ng-deep .p-input-icon-right>i:last-of-type {
116+
color: #aaa;
117+
}
118+
119+
:host ::ng-deep .p-float-label input:focus~label,
120+
:host ::ng-deep .p-float-label input.p-filled~label,
121+
:host ::ng-deep .p-float-label textarea:focus~label,
122+
:host ::ng-deep .p-float-label textarea.p-filled~label,
123+
:host ::ng-deep p-floatLabel input:focus+label,
124+
:host ::ng-deep p-floatLabel input.p-filled+label,
125+
/* Fix for p-password and other wrapped inputs */
126+
:host ::ng-deep p-floatLabel .p-inputwrapper-focus~label,
127+
:host ::ng-deep p-floatLabel .p-inputwrapper-filled~label,
128+
:host ::ng-deep .p-float-label .p-inputwrapper-focus~label,
129+
:host ::ng-deep .p-float-label .p-inputwrapper-filled~label {
130+
color: #ffffff !important;
131+
}
132+
133+
.logo-container {
134+
display: flex;
135+
justify-content: center;
136+
align-items: center;
137+
margin-bottom: 1.5rem;
138+
}
139+
140+
.button-container {
141+
display: flex;
142+
justify-content: flex-end;
143+
align-items: center;
144+
width: 100%;
70145
}

‎src/app/pages/register/register.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<div class="register-container">
22
<p-toast></p-toast>
33
<p-card header="Registration" [style]="{ width: '100%', maxWidth: '400px' }">
4+
<div class="logo-container">
5+
<img src="/logo_red.png" alt="Pizza Express Logo" height="80" />
6+
</div>
47
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="flex flex-column gap-4">
58

69
<div class="field">
@@ -25,7 +28,9 @@
2528
</p-floatLabel>
2629
</div>
2730

28-
<p-button label="Register" type="submit" [loading]="loading" styleClass="w-full"></p-button>
31+
<div class="button-container">
32+
<p-button label="Register" type="submit" [loading]="loading"></p-button>
33+
</div>
2934

3035
@if (error) {
3136
<div class="error-message">

‎src/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,7 @@ body {
1414
--card-bg: #1e1e1e;
1515
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1616
--background-color: #0f0f0f;
17+
--logo-red: #e31b23;
18+
--logo-red-glow: rgba(227, 27, 35, 0.5);
19+
--graph-gradient: linear-gradient(135deg, rgba(0, 140, 69, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(227, 27, 35, 0.1) 100%), linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
1720
}

0 commit comments

Comments
 (0)