Skip to content

Commit 6e2b056

Browse files
acharneskiacharneski
committed
wip
1 parent 2ef9352 commit 6e2b056

File tree

16 files changed

+2289
-23
lines changed

16 files changed

+2289
-23
lines changed

‎webapp/src/App.css‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@
44
flex-direction: column;
55
transition: all 0.3s ease;
66
}
7+
/* List styles for dark mode */
8+
@media (prefers-color-scheme: dark) {
9+
ol li::before {
10+
color: var(--primary-color);
11+
}
12+
ol ol li::before {
13+
color: var(--hover-color);
14+
}
15+
}
16+
717

818
/* Dark mode improvements */
919
/* Improve dark mode media query placement */
@@ -226,12 +236,16 @@
226236
/* CSS variables for consistent theming */
227237
:root {
228238
/* Color palette */
229-
--color-primary-rgb: 52, 152, 219;
230-
--color-primary-alpha: rgba(52, 152, 219, 0.08);
239+
--color-gradient-start: var(--color-primary);
240+
--color-gradient-end: var(--color-secondary);
231241
/* Semantic variables */
232242
/* Shadows */
243+
--shadow-text: 0 2px 4px rgba(0,0,0,0.15);
244+
--shadow-heading: 0 4px 8px rgba(0,0,0,0.2);
233245
/* 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;
246+
/* Gradients */
247+
--gradient-heading: linear-gradient(135deg,
248+
var(--color-gradient-start),
249+
var(--color-gradient-end)
250+
);
237251
}

‎webapp/src/components/Menu/Menu.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const Menu: React.FC = () => {
138138
<DropButton>App</DropButton>
139139
<DropdownContent>
140140
<DropdownItem onClick={() => openModal('sessions')}>Session List</DropdownItem>
141-
<DropdownItem onClick={() => console.log('[Menu] Creating new session')}>New</DropdownItem>
141+
<DropButton href="./#new">New</DropButton>
142142
</DropdownContent>
143143
</Dropdown>
144144

@@ -180,7 +180,6 @@ export const Menu: React.FC = () => {
180180
</DropdownContent>
181181
</Dropdown>
182182
)}
183-
184183
</ToolbarLeft>
185184

186185
<Dropdown>

‎webapp/src/styles/GlobalStyles.ts‎

Lines changed: 268 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import {createGlobalStyle} from 'styled-components';
55
const logStyleChange = (component: string, property: string, value: any) => {
66
const timestamp = new Date().toISOString();
77
console.log(`[${timestamp}] GlobalStyles: ${component} - ${property}:`, value);
8+
89
};
910

10-
const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
11+
export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
1112
/* Improved scrollbar styling */
1213
::-webkit-scrollbar {
1314
width: 10px;
@@ -110,12 +111,180 @@ const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
110111
padding: 0;
111112
box-sizing: border-box;
112113
}
114+
/* Enhanced list styling */
115+
ul, ol {
116+
padding-left: 2em;
117+
margin: 1em 0;
118+
list-style-position: outside;
119+
color: ${({theme}) => theme.colors.text.primary};
120+
font-size: 0.95em;
121+
}
122+
/* Improve nested list spacing and styling */
123+
ul ul, ul ol, ol ul, ol ol {
124+
margin: 0.75em 0 0.75em 0.5em;
125+
padding-left: 1.5em;
126+
border-left: 1px solid ${({theme}) => theme.colors.border + '40'};
127+
position: relative;
128+
font-size: 0.95em;
129+
}
130+
/* List item styling */
131+
li {
132+
margin: 0.5em 0;
133+
line-height: 1.6;
134+
position: relative;
135+
padding-left: 0.5em;
136+
transition: all 0.2s ease;
137+
}
138+
/* List item hover effect */
139+
li:hover {
140+
color: ${({theme}) => theme.colors.primary};
141+
transform: translateX(2px);
142+
}
143+
/* Custom bullets for unordered lists */
144+
ul {
145+
list-style: none;
146+
}
147+
ul li::before {
148+
position: absolute;
149+
left: -1.5em;
150+
top: 0.7em;
151+
border-radius: 50%;
152+
transition: all 0.3s ease;
153+
box-shadow: 0 0 2px ${({theme}) => theme.colors.primary + '40'};
154+
color: ${({theme}) => theme.colors.primary};
155+
}
156+
/* Nested unordered list bullets */
157+
ul ul li::before {
158+
width: 5px;
159+
height: 5px;
160+
left: -1.3em;
161+
opacity: 0.9;
162+
box-shadow: none;
163+
}
164+
ul ul ul li::before {
165+
width: 4px;
166+
height: 4px;
167+
left: -1.2em;
168+
opacity: 0.7;
169+
}
170+
/* Ordered list styling */
171+
ol {
172+
counter-reset: item;
173+
list-style: none;
174+
padding-left: 2.5em;
175+
}
176+
ol li {
177+
counter-increment: item;
178+
padding-left: 0.25em;
179+
}
180+
ol li::before {
181+
content: counter(item) ".";
182+
position: absolute;
183+
left: -2.25em;
184+
width: 1.5em;
185+
text-align: right;
186+
color: ${({theme}) => theme.colors.primary + 'E6'};
187+
font-weight: 600;
188+
font-feature-settings: "tnum";
189+
transition: all 0.3s ease;
190+
font-size: 0.9em;
191+
}
192+
/* Nested ordered list counters */
193+
ol ol {
194+
counter-reset: subitem;
195+
border-left: 1px solid ${({theme}) => theme.colors.border + '40'};
196+
margin-left: 0.5em;
197+
padding-left: 2em;
198+
list-style-type: none;
199+
}
200+
ol ol li {
201+
counter-increment: subitem;
202+
position: relative;
203+
padding-left: 0.5em;
204+
list-style-type: none;
205+
&::marker {
206+
display: none;
207+
}
208+
}
209+
ol ol li::before {
210+
content: counter(item) "." counter(subitem);
211+
position: absolute;
212+
left: -2.75em;
213+
width: 2.75em;
214+
text-align: right;
215+
color: ${({theme}) => theme.colors.secondary + 'CC'};
216+
font-size: 0.85em;
217+
opacity: 0.9;
218+
top: 0;
219+
display: inline-block;
220+
font-variant-numeric: tabular-nums;
221+
font-feature-settings: "tnum";
222+
}
223+
/* Third level ordered lists */
224+
ol ol ol {
225+
counter-reset: subsubitem;
226+
padding-left: 2.5em;
227+
list-style-type: none;
228+
&::marker {
229+
display: none;
230+
}
231+
}
232+
ol ol ol li {
233+
counter-increment: subsubitem;
234+
padding-left: 0.5em;
235+
list-style-type: none;
236+
&::marker {
237+
display: none;
238+
}
239+
}
240+
ol ol ol li::before {
241+
content: counter(item) "." counter(subitem) "." counter(subsubitem);
242+
width: 4em;
243+
left: -4em;
244+
top: 0;
245+
display: inline-block;
246+
font-variant-numeric: tabular-nums;
247+
font-feature-settings: "tnum";
248+
white-space: nowrap;
249+
}
250+
/* List spacing in content areas */
251+
.message-content ul,
252+
.message-content ol {
253+
margin: 1em 0;
254+
padding: 1em 1.25em 1em 2.5em;
255+
background: ${({theme}) => theme.colors.background + '08'};
256+
border-radius: 8px;
257+
border: 1px solid ${({theme}) => theme.colors.border + '20'};
258+
box-shadow: 0 2px 4px ${({theme}) => theme.colors.border + '10'};
259+
}
260+
/* List item hover effects */
261+
ul li:hover::before {
262+
transform: scale(1.3);
263+
background-color: ${({theme}) => theme.colors.primary};
264+
box-shadow: 0 0 4px ${({theme}) => theme.colors.primary + '40'};
265+
}
266+
/* Improve nested list visual hierarchy */
267+
ul ul, ol ol {
268+
opacity: 1;
269+
background: ${({theme}) => theme.colors.background + '05'};
270+
}
271+
ul ul ul, ol ol ol {
272+
opacity: 1;
273+
background: ${({theme}) => theme.colors.background + '03'};
274+
}
275+
/* Improve list item text selection */
276+
li::selection {
277+
background-color: ${({theme}) => theme.colors.primary + '40'};
278+
}
279+
/* List animations on theme change */
280+
ul li::before,
281+
ol li::before {
282+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
283+
}
113284
114285
/* Theme variables */
115286
116287
:root {
117-
--transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
118-
--transition-duration: 0.3s;
119288
}
120289
121290
/* Improve focus styles globally */
@@ -170,14 +339,107 @@ const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
170339
font-weight: var(--font-weight-extrabold);
171340
letter-spacing: var(--letter-spacing-tight);
172341
line-height: var(--line-height-tight);
173-
margin-bottom: 0.5em;
342+
margin: 2em 0 1em;
174343
text-transform: uppercase;
175-
background: linear-gradient(135deg, ${({theme}) => theme.colors.primary}, ${({theme}) => theme.colors.secondary});
344+
background: ${({theme}) => `
345+
linear-gradient(135deg,
346+
${theme.colors.primary},
347+
${theme.colors.secondary}
348+
)
349+
`};
176350
-webkit-background-clip: text;
177351
-webkit-text-fill-color: transparent;
178352
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
179353
position: relative;
180354
z-index: 1;
355+
display: inline-block;
356+
357+
/* Add decorative underline */
358+
&::after {
359+
content: '';
360+
position: absolute;
361+
bottom: -0.35em;
362+
left: 0;
363+
width: 100%;
364+
height: 0.12em;
365+
background: ${({theme}) => `
366+
linear-gradient(90deg,
367+
${theme.colors.primary}40,
368+
${theme.colors.secondary}40
369+
)
370+
`};
371+
border-radius: 4px;
372+
transition: all 0.3s ease;
373+
transform: scaleX(0.3);
374+
transform-origin: left;
375+
}
376+
377+
&:hover::after {
378+
transform: scaleX(1);
379+
background: ${({theme}) => `
380+
linear-gradient(90deg,
381+
${theme.colors.primary},
382+
${theme.colors.secondary}
383+
)
384+
`};
385+
}
386+
}
387+
/* Individual heading sizes */
388+
h1 {
389+
font-size: var(--font-size-2xl);
390+
margin-top: 1em;
391+
padding-bottom: 0.5em;
392+
}
393+
h2 {
394+
font-size: var(--font-size-xl);
395+
padding-bottom: 0.4em;
396+
}
397+
h3 {
398+
font-size: var(--font-size-lg);
399+
padding-bottom: 0.3em;
400+
}
401+
h4 {
402+
font-size: var(--font-size-md);
403+
font-weight: var(--font-weight-bold);
404+
padding-bottom: 0.2em;
405+
text-transform: none;
406+
}
407+
h5 {
408+
font-size: var(--font-size-sm);
409+
font-weight: var(--font-weight-semibold);
410+
text-transform: none;
411+
}
412+
h6 {
413+
font-size: var(--font-size-xs);
414+
font-weight: var(--font-weight-medium);
415+
letter-spacing: var(--letter-spacing-wide);
416+
text-transform: none;
417+
}
418+
/* Add hover effect for headings */
419+
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
420+
transform: translateX(4px);
421+
transition: transform 0.3s ease;
422+
}
423+
424+
/* Improve heading accessibility */
425+
h1:focus-visible,
426+
h2:focus-visible,
427+
h3:focus-visible,
428+
h4:focus-visible,
429+
h5:focus-visible,
430+
h6:focus-visible {
431+
outline: none;
432+
box-shadow: 0 0 0 3px ${({theme}) => theme.colors.primary}40;
433+
border-radius: 4px;
434+
}
435+
/* Add spacing after headings when followed by text */
436+
h1 + p,
437+
h2 + p,
438+
h3 + p,
439+
h4 + p,
440+
h5 + p,
441+
h6 + p {
442+
margin-top: 1em;
181443
}
182444
/* Code styles */
183445
code, pre {
@@ -341,5 +603,4 @@ const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
341603
transform: translateY(0);
342604
box-shadow: ${({theme}) => theme.shadows.medium};
343605
}
344-
`;
345-
export {GlobalStyles};
606+
`;

‎webapp/src/themes/ThemeProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {useSelector} from 'react-redux';
44
import {RootState} from '../store';
55
import {logThemeChange, ThemeName, themes} from './themes';
66
import Prism from 'prismjs';
7-
import {GlobalStyles} from '../styles/GlobalStyles';
7+
import {GlobalStyles} from "../styles/GlobalStyles";
88

99
interface ThemeProviderProps {
1010
children: React.ReactNode;

0 commit comments

Comments
 (0)