Skip to content

Commit 63c82a8

Browse files
HopeyCodeDSHopeyCodeDS
committed
style: update UI styling for chat interface
1 parent fd17339 commit 63c82a8

8 files changed

Lines changed: 445 additions & 99 deletions

‎frontend/src/styles/App.module.css‎

Lines changed: 109 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,138 @@
22
display: flex;
33
flex-direction: column;
44
height: 100%;
5-
max-width: 800px;
5+
max-width: 860px;
66
margin: 0 auto;
7-
background: var(--color-surface);
8-
box-shadow: var(--shadow-md);
7+
background: var(--color-bg);
8+
position: relative;
9+
overflow: hidden;
10+
}
11+
12+
/* Subtle side glow lines */
13+
.shell::before,
14+
.shell::after {
15+
content: "";
16+
position: absolute;
17+
top: 0;
18+
bottom: 0;
19+
width: 1px;
20+
background: linear-gradient(
21+
to bottom,
22+
transparent,
23+
var(--color-electric-glow) 20%,
24+
var(--color-electric-glow-strong) 50%,
25+
var(--color-electric-glow) 80%,
26+
transparent
27+
);
28+
z-index: 1;
29+
pointer-events: none;
30+
}
31+
.shell::before {
32+
left: 0;
33+
}
34+
.shell::after {
35+
right: 0;
936
}
1037

38+
/* ── Header ── */
1139
.header {
1240
padding: 1rem 1.5rem;
13-
border-bottom: 1px solid var(--color-border);
1441
background: var(--color-surface);
42+
border-bottom: 1px solid var(--color-border);
1543
position: sticky;
1644
top: 0;
1745
z-index: 10;
46+
display: flex;
47+
align-items: center;
48+
gap: 0.75rem;
49+
}
50+
51+
.logo {
52+
width: 32px;
53+
height: 32px;
54+
flex-shrink: 0;
55+
}
56+
57+
.headerText {
58+
display: flex;
59+
flex-direction: column;
60+
}
61+
62+
.headerText h1 {
63+
font-family: var(--font-display);
64+
font-size: 1.25rem;
65+
font-weight: 700;
66+
letter-spacing: 0.04em;
67+
color: var(--color-electric);
68+
line-height: 1.2;
69+
}
70+
71+
.headerSubtitle {
72+
font-size: 0.6875rem;
73+
color: var(--color-text-muted);
74+
letter-spacing: 0.12em;
75+
text-transform: uppercase;
76+
font-weight: 500;
77+
}
78+
79+
.headerStatus {
80+
margin-left: auto;
81+
display: flex;
82+
align-items: center;
83+
gap: 0.4rem;
84+
font-size: 0.6875rem;
85+
color: var(--color-text-muted);
86+
letter-spacing: 0.05em;
87+
}
88+
89+
.statusDot {
90+
width: 6px;
91+
height: 6px;
92+
border-radius: 50%;
93+
background: #22c55e;
94+
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
95+
animation: pulse 2s ease-in-out infinite;
1896
}
1997

20-
.header h1 {
21-
font-size: 1.125rem;
22-
font-weight: 600;
23-
letter-spacing: -0.01em;
24-
color: var(--color-text-primary);
98+
@keyframes pulse {
99+
0%,
100+
100% {
101+
opacity: 1;
102+
}
103+
50% {
104+
opacity: 0.5;
105+
}
25106
}
26107

108+
/* ── Main ── */
27109
.main {
28110
flex: 1;
29111
overflow-y: auto;
30112
display: flex;
31113
flex-direction: column;
114+
background: radial-gradient(
115+
ellipse at 50% 0%,
116+
rgba(0, 240, 255, 0.03) 0%,
117+
transparent 60%
118+
),
119+
var(--color-bg);
32120
}
33121

122+
/* ── Footer ── */
34123
.footer {
35124
border-top: 1px solid var(--color-border);
36125
background: var(--color-surface);
37-
padding: 0.75rem 1rem;
126+
padding: 0.875rem 1.25rem;
38127
position: sticky;
39128
bottom: 0;
129+
z-index: 10;
130+
}
131+
132+
@media (max-width: 480px) {
133+
.header {
134+
padding: 0.875rem 1rem;
135+
}
136+
.footer {
137+
padding: 0.75rem 0.75rem;
138+
}
40139
}

‎frontend/src/styles/ChatMessage.module.css‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.row {
22
display: flex;
33
width: 100%;
4+
animation: messageIn 0.3s ease;
45
}
56

67
.userRow {
@@ -11,33 +12,66 @@
1112
justify-content: flex-start;
1213
}
1314

15+
/* ── Bubbles ── */
1416
.bubble {
15-
max-width: 75%;
16-
padding: 0.75rem 1rem;
17+
max-width: 78%;
18+
padding: 0.875rem 1.125rem;
1719
border-radius: var(--radius-lg);
1820
font-size: 0.9375rem;
19-
line-height: 1.6;
21+
line-height: 1.7;
22+
position: relative;
2023
}
2124

2225
.userBubble {
23-
background: var(--color-accent);
24-
color: var(--color-accent-fg);
26+
background: linear-gradient(135deg, #f5a623 0%, #e8911a 100%);
27+
color: #1a1000;
2528
border-bottom-right-radius: var(--radius-sm);
29+
box-shadow: var(--shadow-glow-amber), var(--shadow-deep);
2630
}
2731

2832
.assistantBubble {
29-
background: var(--color-assistant-bg);
33+
background: var(--color-surface-raised);
3034
color: var(--color-text-primary);
35+
border: 1px solid var(--color-border);
3136
border-bottom-left-radius: var(--radius-sm);
37+
box-shadow: var(--shadow-deep);
38+
}
39+
40+
/* Cyan left accent bar on assistant messages */
41+
.assistantBubble::before {
42+
content: "";
43+
position: absolute;
44+
left: 0;
45+
top: 12px;
46+
bottom: 12px;
47+
width: 2px;
48+
background: linear-gradient(
49+
to bottom,
50+
var(--color-electric),
51+
var(--color-electric-dim)
52+
);
53+
border-radius: 1px;
54+
opacity: 0.6;
3255
}
3356

3457
.text {
3558
white-space: pre-wrap;
3659
word-break: break-word;
3760
}
3861

62+
@keyframes messageIn {
63+
from {
64+
opacity: 0;
65+
transform: translateY(8px);
66+
}
67+
to {
68+
opacity: 1;
69+
transform: translateY(0);
70+
}
71+
}
72+
3973
@media (max-width: 480px) {
4074
.bubble {
41-
max-width: 90%;
75+
max-width: 92%;
4276
}
4377
}

‎frontend/src/styles/ChatWindow.module.css‎

Lines changed: 79 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,89 @@
11
.window {
22
flex: 1;
3-
padding: 1.5rem 1rem;
3+
padding: 1.5rem 1.25rem;
44
display: flex;
55
flex-direction: column;
6-
gap: 0.75rem;
6+
gap: 1rem;
77
}
88

9+
/* ── Empty State ── */
910
.empty {
10-
text-align: center;
11-
color: var(--color-text-secondary);
12-
font-size: 0.9375rem;
1311
margin: auto;
1412
padding: 2rem;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
gap: 1.5rem;
17+
animation: fadeIn 0.6s ease;
18+
}
19+
20+
.emptyBolt {
21+
width: 80px;
22+
height: 80px;
23+
opacity: 0.15;
24+
animation: floatBolt 4s ease-in-out infinite;
25+
}
26+
27+
.emptyTitle {
28+
font-family: var(--font-display);
29+
font-size: 1.25rem;
30+
font-weight: 600;
31+
color: var(--color-text-secondary);
32+
letter-spacing: 0.02em;
33+
}
34+
35+
.emptyHint {
36+
font-size: 0.8125rem;
37+
color: var(--color-text-muted);
38+
text-align: center;
39+
max-width: 320px;
40+
line-height: 1.6;
41+
}
42+
43+
.emptyPrompts {
44+
display: flex;
45+
flex-wrap: wrap;
46+
gap: 0.5rem;
47+
justify-content: center;
48+
max-width: 420px;
49+
}
50+
51+
.promptChip {
52+
font-family: var(--font-body);
53+
font-size: 0.75rem;
54+
color: var(--color-text-secondary);
55+
background: var(--color-surface-raised);
56+
border: 1px solid var(--color-border);
57+
border-radius: var(--radius-lg);
58+
padding: 0.4rem 0.875rem;
59+
cursor: pointer;
60+
transition: all 0.2s ease;
61+
}
62+
63+
.promptChip:hover {
64+
color: var(--color-electric);
65+
border-color: var(--color-border-active);
66+
background: var(--color-surface);
67+
box-shadow: var(--shadow-glow-cyan);
68+
}
69+
70+
@keyframes floatBolt {
71+
0%,
72+
100% {
73+
transform: translateY(0);
74+
}
75+
50% {
76+
transform: translateY(-8px);
77+
}
78+
}
79+
80+
@keyframes fadeIn {
81+
from {
82+
opacity: 0;
83+
transform: translateY(12px);
84+
}
85+
to {
86+
opacity: 1;
87+
transform: translateY(0);
88+
}
1589
}

‎frontend/src/styles/ErrorBanner.module.css‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@
33
align-items: center;
44
justify-content: space-between;
55
gap: 0.75rem;
6-
margin: 0.75rem 1rem 0;
6+
margin: 0.75rem 1.25rem 0;
77
padding: 0.75rem 1rem;
88
background: var(--color-error-bg);
99
border: 1px solid var(--color-error-border);
1010
border-radius: var(--radius-md);
11-
font-size: 0.875rem;
11+
font-size: 0.8125rem;
1212
color: var(--color-error);
13-
animation: slideIn 0.15s ease;
13+
animation: slideIn 0.25s ease;
14+
backdrop-filter: blur(8px);
1415
}
1516

1617
@keyframes slideIn {
1718
from {
1819
opacity: 0;
19-
transform: translateY(-6px);
20+
transform: translateY(-8px);
2021
}
2122
to {
2223
opacity: 1;
@@ -26,20 +27,27 @@
2627

2728
.message {
2829
flex: 1;
30+
line-height: 1.5;
2931
}
3032

3133
.dismiss {
3234
background: none;
33-
border: none;
35+
border: 1px solid var(--color-error-border);
3436
color: var(--color-error);
3537
cursor: pointer;
36-
font-size: 1rem;
37-
padding: 0.125rem 0.375rem;
38+
font-size: 0.875rem;
39+
width: 24px;
40+
height: 24px;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
3844
border-radius: var(--radius-sm);
3945
opacity: 0.7;
40-
transition: opacity 0.1s ease;
46+
transition: all 0.15s ease;
47+
flex-shrink: 0;
4148
}
4249

4350
.dismiss:hover {
4451
opacity: 1;
52+
background: var(--color-error-border);
4553
}

0 commit comments

Comments
 (0)