Skip to content

Commit 89c9d1b

Browse files
Copilotmuke1908
Copilot
and
muke1908
authored
feat: hacker/terminal dark theme UI for client (#448)
* feat: apply hacker/terminal dark theme to client UI - Switch font from Outfit to JetBrains Mono (monospace) - New color palette: matrix green (#00ff41) primary, near-black (#080808) bg - Terminal grid background + CRT scanline overlay on body - Replace glassmorphism with sharp terminal-surface styling - Outlined/glow buttons with uppercase letter-spacing - Terminal-style inputs with > label prefix, green focus glow - SetupOverlay: terminal window chrome, CHAT_E2EE title - ChatHeader: pulsing status dot animation, monospace hash badge - MessageBubble: sent=dark-green, received=near-black with left border marker - ChatFooter: > prompt prefix, terminal input - CallOverlay: pulsing green avatar glow instead of shimmer - Updated legacy style.css root variables to match new palette Agent-Logs-Url: https://github.com/muke1908/chat-e2ee/sessions/ea673779-4e43-42ec-9eb3-4f5bcb37241e Co-authored-by: muke1908 <20297989+muke1908@users.noreply.github.com> * fix: replace hardcoded rgba green with CSS variables in animations Agent-Logs-Url: https://github.com/muke1908/chat-e2ee/sessions/ea673779-4e43-42ec-9eb3-4f5bcb37241e Co-authored-by: muke1908 <20297989+muke1908@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: muke1908 <20297989+muke1908@users.noreply.github.com>
1 parent 1dfa1a8 commit 89c9d1b

16 files changed

Lines changed: 460 additions & 280 deletions

‎client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Chat E2EE - Minimal & Secure</title>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
1111
</head>
1212

1313
<body>

‎client/src/components/CallOverlay/CallOverlay.css‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,92 @@
11
/**
2-
* Call overlay styles
2+
* Call overlay styles – terminal theme
33
*/
44

55
.blur-overlay {
66
position: fixed;
7-
top: 0;
8-
left: 0;
9-
right: 0;
10-
bottom: 0;
7+
inset: 0;
118
z-index: 200;
129
display: flex;
1310
justify-content: center;
1411
align-items: center;
15-
background: rgba(15, 23, 42, 0.8);
12+
background: rgba(0, 0, 0, 0.88);
1613
padding: 1rem;
1714
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
18-
animation: fadeIn 0.3s ease;
15+
animation: fadeIn 0.25s ease;
1916
}
2017

2118
@keyframes fadeIn {
22-
from {
23-
opacity: 0;
24-
}
25-
26-
to {
27-
opacity: 1;
28-
}
19+
from { opacity: 0; }
20+
to { opacity: 1; }
2921
}
3022

3123
.call-info {
3224
text-align: center;
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
gap: 0.5rem;
3329
}
3430

31+
/* Terminal-style pulsing avatar */
3532
.call-avatar {
36-
width: 120px;
37-
height: 120px;
33+
width: 110px;
34+
height: 110px;
3835
border-radius: 50%;
39-
background: var(--glass);
40-
margin: 0 auto 1.5rem;
36+
background: rgba(0, 10, 0, 0.9);
37+
margin-bottom: 1rem;
4138
border: 2px solid var(--primary);
39+
box-shadow: var(--glow-md), inset var(--glow-sm);
40+
position: relative;
41+
overflow: hidden;
4242
}
4343

44-
.shimmer {
45-
background: linear-gradient(90deg, var(--glass) 25%, rgba(99, 102, 241, 0.2) 50%, var(--glass) 75%);
46-
background-size: 200% 100%;
47-
animation: shimmer 1.5s infinite;
44+
.call-avatar::after {
45+
content: '';
46+
position: absolute;
47+
inset: 0;
48+
border-radius: 50%;
49+
background: radial-gradient(circle at 40% 35%, var(--primary-dim), transparent 60%);
4850
}
4951

50-
@keyframes shimmer {
51-
0% {
52-
background-position: 200% 0;
53-
}
52+
.shimmer {
53+
animation: callPulse 1.8s ease-in-out infinite;
54+
}
5455

55-
100% {
56-
background-position: -200% 0;
57-
}
56+
@keyframes callPulse {
57+
0%, 100% { box-shadow: var(--glow-md), inset var(--glow-sm); }
58+
50% { box-shadow: var(--glow-lg), inset var(--glow-md); }
5859
}
5960

6061
.call-status {
61-
font-size: 1.5rem;
62-
margin-bottom: 0.5rem;
63-
color: white;
62+
font-size: 1.25rem;
63+
font-weight: 700;
64+
letter-spacing: 0.08em;
65+
text-transform: uppercase;
66+
color: var(--primary);
67+
text-shadow: var(--glow-md);
6468
}
6569

6670
.call-duration {
6771
color: var(--text-muted);
68-
margin-bottom: 2rem;
69-
font-size: 1.1rem;
72+
margin-bottom: 1.75rem;
73+
font-size: 0.95rem;
74+
letter-spacing: 0.12em;
75+
font-variant-numeric: tabular-nums;
7076
}
7177

7278
/* Mobile responsive */
7379
@media (max-width: 480px) {
74-
.blur-overlay {
75-
padding: 1rem;
76-
}
77-
7880
.call-avatar {
79-
width: 100px;
80-
height: 100px;
81+
width: 90px;
82+
height: 90px;
8183
}
8284

8385
.call-status {
84-
font-size: 1.25rem;
86+
font-size: 1.05rem;
8587
}
8688

8789
.call-duration {
88-
margin-bottom: 1.5rem;
90+
margin-bottom: 1.25rem;
8991
}
90-
}
92+
}

‎client/src/components/ChatContainer/ChatContainer.css‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
/**
2-
* Chat container styles
2+
* Chat container styles – terminal theme
33
*/
44

55
#chat-container {
66
width: 100%;
7-
max-width: 800px;
7+
max-width: 820px;
88
height: 100%;
9-
max-height: 800px;
9+
max-height: 820px;
1010
display: flex;
1111
flex-direction: column;
12-
border-radius: 2rem;
12+
border-radius: 0.25rem;
1313
overflow: hidden;
14-
opacity: 1;
15-
transition: all 0.3s ease;
14+
border: 1px solid var(--glass-border);
15+
box-shadow: var(--glow-sm), 0 0 60px rgba(0, 0, 0, 0.8);
16+
background: rgba(0, 8, 0, 0.95);
1617
}
1718

1819
#chat-container.hidden {
1920
display: none;
20-
opacity: 0;
2121
}
2222

2323
/* Mobile responsive */
@@ -26,5 +26,6 @@
2626
max-width: 100%;
2727
max-height: 100%;
2828
border-radius: 0;
29+
border: none;
2930
}
30-
}
31+
}

‎client/src/components/ChatContainer/ChatFooter.css‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,65 @@
11
/**
2-
* Chat footer styles
2+
* Chat footer styles – terminal theme
33
*/
44

55
.chat-footer {
6-
padding: 1.5rem;
6+
padding: 0.875rem 1.25rem;
7+
border-top: 1px solid var(--glass-border);
8+
background: rgba(0, 10, 0, 0.98);
9+
flex-shrink: 0;
710
}
811

912
.input-container {
1013
display: flex;
11-
gap: 0.75rem;
14+
gap: 0.625rem;
1215
align-items: center;
1316
}
1417

18+
/* Terminal prompt prefix */
19+
.input-container::before {
20+
content: '>';
21+
color: var(--primary);
22+
font-size: 1rem;
23+
font-weight: 700;
24+
flex-shrink: 0;
25+
text-shadow: var(--glow-sm);
26+
user-select: none;
27+
}
28+
1529
.message-input {
1630
flex: 1;
17-
padding: 0.75rem 1rem;
18-
background: rgba(0, 0, 0, 0.2);
19-
border: 1px solid var(--glass-border);
20-
border-radius: 0.75rem;
21-
color: white;
31+
padding: 0.65rem 0.9rem;
32+
background: rgba(0, 5, 0, 0.85);
33+
border: 1px solid rgba(0, 255, 65, 0.2);
34+
border-radius: 0.2rem;
35+
color: var(--text);
2236
font-family: inherit;
23-
font-size: 1rem;
24-
transition: all 0.2s;
37+
font-size: 0.9rem;
38+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
39+
caret-color: var(--primary);
40+
min-width: 0;
41+
}
42+
43+
.message-input::placeholder {
44+
color: var(--text-muted);
45+
opacity: 0.6;
2546
}
2647

2748
.message-input:focus {
2849
outline: none;
2950
border-color: var(--primary);
30-
background: rgba(0, 0, 0, 0.4);
31-
}
32-
33-
.message-input::placeholder {
34-
color: var(--text-muted);
51+
box-shadow: var(--glow-sm);
3552
}
3653

3754
.message-input:disabled {
38-
opacity: 0.6;
55+
opacity: 0.4;
3956
cursor: not-allowed;
4057
}
4158

4259
/* Mobile responsive */
4360
@media (max-width: 480px) {
4461
.chat-footer {
45-
padding: 0.75rem;
62+
padding: 0.75rem 1rem;
4663
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
4764
}
4865

@@ -52,6 +69,6 @@
5269

5370
.message-input {
5471
font-size: 16px;
55-
/* Prevents zoom on iOS */
72+
/* Prevents iOS zoom */
5673
}
57-
}
74+
}

0 commit comments

Comments
 (0)