Skip to content

Commit 1e353c8

Browse files
acharneskiacharneski
committed
styles
1 parent f8e0705 commit 1e353c8

File tree

6 files changed

+132
-44
lines changed

6 files changed

+132
-44
lines changed

‎webapp/src/App.css‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -41,31 +41,51 @@
4141

4242
/* Improve tab button accessibility */
4343
.tab-button {
44-
padding: 0.75rem 1.25rem;
44+
padding: 0.85rem 1.5rem;
4545
min-width: 100px;
46-
transition: all 0.3s ease;
47-
font-family: inherit;
46+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
47+
font-family: var(--font-display);
4848
border: none;
49-
background: none;
49+
background: transparent;
5050
cursor: pointer;
5151
position: relative;
52-
font-weight: bold;
52+
font-weight: var(--font-weight-semibold);
5353
color: var(--primary-color);
54+
font-size: var(--font-size-md);
55+
letter-spacing: var(--letter-spacing-wide);
56+
text-transform: uppercase;
57+
border-radius: 8px;
58+
margin: 0 0.25rem;
59+
white-space: nowrap;
60+
user-select: none;
61+
backdrop-filter: blur(8px);
62+
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
5463
}
5564

5665
/* Active tab state */
5766
.tab-button.active {
58-
background-color: var(--color-primary-dark);
67+
background-color: var(--color-primary-alpha);
5968
color: var(--color-light);
6069
transform: translateY(-2px);
61-
box-shadow: var(--shadow-md);
70+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
71+
position: relative;
72+
z-index: 1;
73+
font-weight: var(--font-weight-bold);
74+
letter-spacing: var(--letter-spacing-wider);
75+
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
76+
}
77+
.tab-button:hover {
78+
transform: translateY(-.5em);
79+
background-color: var(--color-primary-alpha);
80+
transition: all .5s cubic-bezier(0.1, 0, 0.5, 1);
6281
}
6382

6483
/* Focus state - now separate from active state */
6584

6685
.tab-button:focus-visible {
67-
outline: 3px solid var(--primary-color);
86+
outline: 2px solid var(--primary-color);
6887
outline-offset: 2px;
88+
box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
6989
}
7090

7191
/* Improve button states */
@@ -143,12 +163,6 @@
143163
}
144164

145165

146-
.tab-button:hover {
147-
background: var(--hover-background);
148-
transform: translateY(-1px);
149-
box-shadow: var(--shadow-sm);
150-
}
151-
152166
.tab-content {
153167
flex: 1;
154168
overflow: visible;
@@ -212,15 +226,12 @@
212226
/* CSS variables for consistent theming */
213227
:root {
214228
/* Color palette */
215-
--color-primary: #3498db;
216-
--color-primary-dark: #2980b9;
217-
--color-success: #2ecc71;
218-
--color-error: #e74c3c;
219-
--color-light: #ffffff;
220-
--color-dark: #1a1a1a;
221-
--color-primary-alpha: rgba(52, 152, 219, 0.1);
229+
--color-primary-rgb: 52, 152, 219;
230+
--color-primary-alpha: rgba(52, 152, 219, 0.08);
222231
/* Semantic variables */
223232
/* Shadows */
224-
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
225-
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
233+
/* Typography */
234+
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
235+
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
236+
--font-mono: 'Fira Code', Consolas, Monaco, monospace;
226237
}

‎webapp/src/hooks/useWebSocket.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,6 @@ export const useWebSocket = (sessionId: string) => {
104104
readyState: WebSocketService.ws?.readyState,
105105
send: (message: string) => {
106106
console.log('[WebSocket] Attempting to send message:', message);
107-
if (!isConnected) {
108-
console.warn('[WebSocket] Cannot send message - not connected');
109-
return;
110-
}
111107
return WebSocketService.send(message);
112108
},
113109
isConnected

‎webapp/src/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
body {
22
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
3+
font-family: var(--font-primary);
64
background-color: #f5f5f5;
75
color: #333;
86
line-height: 1.6;
97
transition: background-color 0.3s ease;
108
overflow: clip;
9+
-webkit-font-smoothing: antialiased;
10+
-moz-osx-font-smoothing: grayscale;
1111
}
1212

1313
.chat-input {

‎webapp/src/services/websocket.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,26 @@ export class WebSocketService {
4343
);
4444
this.ws.send(message);
4545
} else {
46-
console.warn('[WebSocket] Cannot send message - connection not open');
46+
console.warn('[WebSocket] Connection not open, attempting reconnect before sending');
47+
this.reconnectAndSend(message);
4748
}
4849
}
50+
private reconnectAndSend(message: string): void {
51+
if (this.isReconnecting) {
52+
console.warn('[WebSocket] Already attempting to reconnect');
53+
return;
54+
}
55+
console.log('[WebSocket] Attempting to reconnect before sending message');
56+
const onConnect = (connected: boolean) => {
57+
if (connected) {
58+
console.log('[WebSocket] Reconnected successfully, sending queued message');
59+
this.removeConnectionHandler(onConnect);
60+
this.send(message);
61+
}
62+
};
63+
this.addConnectionHandler(onConnect);
64+
this.connect(this.sessionId);
65+
}
4966

5067
public addConnectionHandler(handler: (connected: boolean) => void): void {
5168
this.connectionHandlers.push(handler);

‎webapp/src/styles/GlobalStyles.ts‎

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,46 @@ const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
2828
}
2929
}
3030
31-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
31+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
32+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
33+
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
34+
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap');
3235
/* Theme CSS variables */
3336
:root {
3437
/* Theme variables are now set dynamically in ThemeProvider */
38+
/* Font weights */
39+
--font-weight-light: 300;
40+
--font-weight-regular: 400;
41+
--font-weight-medium: 500;
42+
--font-weight-semibold: 600;
43+
--font-weight-bold: 700;
44+
--font-weight-extrabold: 800;
45+
/* Font families */
46+
--font-primary: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
47+
--font-heading: 'Space Grotesk', system-ui, sans-serif;
48+
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
49+
--font-display: 'Syne', system-ui, sans-serif;
50+
/* Font sizes */
51+
--font-size-xs: clamp(0.75rem, 1.5vw, 0.875rem);
52+
--font-size-sm: clamp(0.875rem, 1.75vw, 1rem);
53+
--font-size-md: clamp(1rem, 2vw, 1.125rem);
54+
--font-size-lg: clamp(1.25rem, 2.5vw, 1.75rem);
55+
--font-size-xl: clamp(1.75rem, 3.5vw, 2.5rem);
56+
--font-size-2xl: clamp(2.5rem, 5vw, 3.5rem);
57+
/* Line heights */
58+
--line-height-tight: 1.15;
59+
--line-height-normal: 1.65;
60+
--line-height-relaxed: 1.85;
61+
/* Letter spacing */
62+
--letter-spacing-tight: -0.04em;
63+
--letter-spacing-normal: -0.02em;
64+
--letter-spacing-wide: 0.04em;
65+
--letter-spacing-wider: 0.08em;
3566
}
67+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
68+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Raleway:wght@600;700;800&display=swap');
69+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
70+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');
3671
3772
/* Override Prism.js theme colors to match current theme */
3873
.token.comment,
@@ -117,15 +152,44 @@ const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
117152
}
118153
119154
body {
120-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
155+
font-family: var(--font-primary);
156+
font-weight: var(--font-weight-regular);
121157
background-color: var(--theme-background);
122158
color: var(--theme-text);
123-
line-height: 1.5;
124-
font-size: var(--theme-font-size-md);
125-
letter-spacing: -0.011em;
159+
line-height: var(--line-height-normal);
160+
font-size: var(--font-size-md);
161+
letter-spacing: var(--letter-spacing-normal);
126162
text-rendering: optimizeLegibility;
127163
overflow-x: hidden;
128164
min-height: 100vh;
165+
font-feature-settings: "liga" 1, "kern" 1;
166+
}
167+
/* Heading styles */
168+
h1, h2, h3, h4, h5, h6 {
169+
font-family: var(--font-display);
170+
font-weight: var(--font-weight-extrabold);
171+
letter-spacing: var(--letter-spacing-tight);
172+
line-height: var(--line-height-tight);
173+
margin-bottom: 0.5em;
174+
text-transform: uppercase;
175+
background: linear-gradient(135deg, ${({theme}) => theme.colors.primary}, ${({theme}) => theme.colors.secondary});
176+
-webkit-background-clip: text;
177+
-webkit-text-fill-color: transparent;
178+
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
179+
position: relative;
180+
z-index: 1;
181+
}
182+
/* Code styles */
183+
code, pre {
184+
font-family: var(--font-mono);
185+
font-weight: 600;
186+
font-feature-settings: "liga" 0;
187+
font-size: 0.9em;
188+
line-height: var(--line-height-relaxed);
189+
letter-spacing: -0.01em;
190+
font-variant-ligatures: contextual;
191+
border-radius: 6px;
192+
padding: 0.2em 0.4em;
129193
}
130194
131195
border-radius:

‎webapp/src/themes/themes.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -229,24 +229,24 @@ interface ExtendedTheme extends BaseTheme {
229229
},
230230
},
231231
typography: {
232-
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
232+
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
233233
monoFontFamily: "'Fira Code', 'Consolas', monospace",
234234
fontSize: {
235-
xs: '0.75rem',
236-
sm: '0.875rem',
237-
md: '1rem',
238-
lg: '1.25rem',
239-
xl: '1.5rem',
235+
xs: '0.75rem', // 12px
236+
sm: '0.875rem', // 14px
237+
md: '1rem', // 16px
238+
lg: '1.125rem', // 18px
239+
xl: '1.25rem', // 20px
240240
},
241241
fontWeight: {
242242
regular: 400,
243243
medium: 500,
244244
bold: 700,
245245
},
246246
console: {
247-
fontFamily: "'Fira Code', 'Consolas', monospace",
247+
fontFamily: "'Fira Code', Consolas, Monaco, 'Courier New', monospace",
248248
fontSize: '0.9rem',
249-
lineHeight: '1.5',
249+
lineHeight: '1.6',
250250
},
251251
},
252252
};

0 commit comments

Comments
 (0)