Skip to content

Commit 0f5340b

Browse files
mrubensmrubens
committed
More visual tweaks
1 parent f18d007 commit 0f5340b

File tree

2 files changed

+69
-199
lines changed

2 files changed

+69
-199
lines changed

‎webview-ui/src/components/chat/TodoListDisplay.tsx‎

Lines changed: 50 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -44,37 +44,15 @@ export function TodoListDisplay({ todos }: { todos: any[] }) {
4444
<span
4545
style={{
4646
display: "inline-block",
47-
width: 14,
48-
height: 14,
47+
width: 8,
48+
height: 8,
4949
borderRadius: "50%",
50-
border: "2px solid var(--vscode-charts-green)",
5150
background: "var(--vscode-charts-green)",
52-
verticalAlign: "middle",
5351
marginRight: 8,
54-
position: "relative",
52+
marginLeft: 2,
5553
flexShrink: 0,
56-
}}>
57-
<svg
58-
width="10"
59-
height="10"
60-
viewBox="0 0 14 14"
61-
style={{
62-
position: "absolute",
63-
top: 1,
64-
left: 1,
65-
}}>
66-
<polyline
67-
points="2,7 6,11 12,3"
68-
style={{
69-
fill: "none",
70-
stroke: "#fff",
71-
strokeWidth: 2,
72-
strokeLinecap: "round",
73-
strokeLinejoin: "round",
74-
}}
75-
/>
76-
</svg>
77-
</span>
54+
}}
55+
/>
7856
)
7957
}
8058

@@ -85,6 +63,25 @@ export function TodoListDisplay({ todos }: { todos: any[] }) {
8563
style={{
8664
color: "var(--vscode-foreground)",
8765
marginRight: 8,
66+
marginLeft: 2,
67+
flexShrink: 0,
68+
fontSize: 14,
69+
}}
70+
/>
71+
)
72+
}
73+
74+
if (mostImportantTodo.status === "completed") {
75+
return (
76+
<span
77+
style={{
78+
display: "inline-block",
79+
width: 8,
80+
height: 8,
81+
borderRadius: "50%",
82+
background: "var(--vscode-charts-green)",
83+
marginRight: 8,
84+
marginLeft: 2,
8885
flexShrink: 0,
8986
}}
9087
/>
@@ -96,39 +93,15 @@ export function TodoListDisplay({ todos }: { todos: any[] }) {
9693
<span
9794
style={{
9895
display: "inline-block",
99-
width: 14,
100-
height: 14,
96+
width: 8,
97+
height: 8,
10198
borderRadius: "50%",
102-
border: "2px solid var(--vscode-charts-yellow)",
103-
background: "rgba(255, 221, 51, 0.15)",
104-
verticalAlign: "middle",
99+
background: "var(--vscode-charts-yellow)",
105100
marginRight: 8,
106-
position: "relative",
101+
marginLeft: 2,
107102
flexShrink: 0,
108-
}}>
109-
<svg
110-
width="10"
111-
height="10"
112-
viewBox="0 0 14 14"
113-
style={{
114-
position: "absolute",
115-
top: 1,
116-
left: 1,
117-
}}>
118-
<circle cx="7" cy="7" r="5" stroke="var(--vscode-charts-yellow)" strokeWidth="2" fill="none" />
119-
<polyline
120-
points="3,7 6,10 11,4"
121-
style={{
122-
fill: "none",
123-
stroke: "var(--vscode-charts-yellow)",
124-
strokeWidth: 2,
125-
strokeLinecap: "round",
126-
strokeLinejoin: "round",
127-
opacity: 0.7,
128-
}}
129-
/>
130-
</svg>
131-
</span>
103+
}}
104+
/>
132105
)
133106
}
134107

@@ -137,13 +110,13 @@ export function TodoListDisplay({ todos }: { todos: any[] }) {
137110
<span
138111
style={{
139112
display: "inline-block",
140-
width: 14,
141-
height: 14,
113+
width: 8,
114+
height: 8,
142115
borderRadius: "50%",
143-
border: "2px solid #bbb",
116+
border: "1px solid var(--vscode-descriptionForeground)",
144117
background: "transparent",
145-
verticalAlign: "middle",
146118
marginRight: 8,
119+
marginLeft: 2,
147120
flexShrink: 0,
148121
}}
149122
/>
@@ -163,7 +136,7 @@ export function TodoListDisplay({ todos }: { todos: any[] }) {
163136
style={{
164137
display: "flex",
165138
alignItems: "center",
166-
gap: 6,
139+
gap: 2,
167140
marginBottom: 0,
168141
cursor: "pointer",
169142
userSelect: "none",
@@ -302,96 +275,43 @@ export function TodoListDisplay({ todos }: { todos: any[] }) {
302275
<span
303276
style={{
304277
display: "inline-block",
305-
width: 14,
306-
height: 14,
278+
width: 8,
279+
height: 8,
307280
borderRadius: "50%",
308-
border: "2px solid var(--vscode-charts-green)",
309281
background: "var(--vscode-charts-green)",
310-
verticalAlign: "middle",
311282
marginRight: 8,
312-
position: "relative",
283+
marginTop: 7,
313284
flexShrink: 0,
314-
}}>
315-
<svg
316-
width="10"
317-
height="10"
318-
viewBox="0 0 14 14"
319-
style={{
320-
position: "absolute",
321-
top: 1,
322-
left: 1,
323-
}}>
324-
<polyline
325-
points="2,7 6,11 12,3"
326-
style={{
327-
fill: "none",
328-
stroke: "#fff",
329-
strokeWidth: 2,
330-
strokeLinecap: "round",
331-
strokeLinejoin: "round",
332-
}}
333-
/>
334-
</svg>
335-
</span>
285+
}}
286+
/>
336287
)
337288
} else if (todo.status === "in_progress") {
338289
icon = (
339290
<span
340291
style={{
341292
display: "inline-block",
342-
width: 14,
343-
height: 14,
293+
width: 8,
294+
height: 8,
344295
borderRadius: "50%",
345-
border: "2px solid var(--vscode-charts-yellow)",
346-
background: "rgba(255, 221, 51, 0.15)",
347-
verticalAlign: "middle",
296+
background: "var(--vscode-charts-yellow)",
348297
marginRight: 8,
349-
position: "relative",
298+
marginTop: 7,
350299
flexShrink: 0,
351-
}}>
352-
<svg
353-
width="10"
354-
height="10"
355-
viewBox="0 0 14 14"
356-
style={{
357-
position: "absolute",
358-
top: 1,
359-
left: 1,
360-
}}>
361-
<circle
362-
cx="7"
363-
cy="7"
364-
r="5"
365-
stroke="var(--vscode-charts-yellow)"
366-
strokeWidth="2"
367-
fill="none"
368-
/>
369-
<polyline
370-
points="3,7 6,10 11,4"
371-
style={{
372-
fill: "none",
373-
stroke: "var(--vscode-charts-yellow)",
374-
strokeWidth: 2,
375-
strokeLinecap: "round",
376-
strokeLinejoin: "round",
377-
opacity: 0.7,
378-
}}
379-
/>
380-
</svg>
381-
</span>
300+
}}
301+
/>
382302
)
383303
} else {
384304
icon = (
385305
<span
386306
style={{
387307
display: "inline-block",
388-
width: 14,
389-
height: 14,
308+
width: 8,
309+
height: 8,
390310
borderRadius: "50%",
391-
border: "2px solid #bbb",
311+
border: "1px solid var(--vscode-descriptionForeground)",
392312
background: "transparent",
393-
verticalAlign: "middle",
394313
marginRight: 8,
314+
marginTop: 7,
395315
flexShrink: 0,
396316
}}
397317
/>

‎webview-ui/src/components/chat/UpdateTodoListToolBlock.tsx‎

Lines changed: 19 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -215,94 +215,44 @@ const UpdateTodoListToolBlock: React.FC<UpdateTodoListToolBlockProps> = ({
215215
<span
216216
style={{
217217
display: "inline-block",
218-
width: 14,
219-
height: 14,
218+
width: 8,
219+
height: 8,
220220
borderRadius: "50%",
221-
border: "2px solid var(--vscode-charts-green)",
222221
background: "var(--vscode-charts-green)",
223-
verticalAlign: "middle",
224222
marginRight: 6,
225-
position: "relative",
226-
}}>
227-
<svg
228-
width="10"
229-
height="10"
230-
viewBox="0 0 14 14"
231-
style={{
232-
position: "absolute",
233-
top: 1,
234-
left: 1,
235-
}}>
236-
<polyline
237-
points="2,7 6,11 12,3"
238-
style={{
239-
fill: "none",
240-
stroke: "#fff",
241-
strokeWidth: 2,
242-
strokeLinecap: "round",
243-
strokeLinejoin: "round",
244-
}}
245-
/>
246-
</svg>
247-
</span>
223+
marginTop: 7,
224+
flexShrink: 0,
225+
}}
226+
/>
248227
)
249228
} else if (todo.status === "in_progress") {
250229
icon = (
251230
<span
252231
style={{
253232
display: "inline-block",
254-
width: 14,
255-
height: 14,
233+
width: 8,
234+
height: 8,
256235
borderRadius: "50%",
257-
border: "2px solid var(--vscode-charts-yellow)",
258-
background: "rgba(255, 221, 51, 0.15)",
259-
verticalAlign: "middle",
236+
background: "var(--vscode-charts-yellow)",
260237
marginRight: 6,
261-
position: "relative",
262-
}}>
263-
<svg
264-
width="10"
265-
height="10"
266-
viewBox="0 0 14 14"
267-
style={{
268-
position: "absolute",
269-
top: 1,
270-
left: 1,
271-
}}>
272-
<circle
273-
cx="7"
274-
cy="7"
275-
r="5"
276-
stroke="var(--vscode-charts-yellow)"
277-
strokeWidth="2"
278-
fill="none"
279-
/>
280-
<polyline
281-
points="3,7 6,10 11,4"
282-
style={{
283-
fill: "none",
284-
stroke: "var(--vscode-charts-yellow)",
285-
strokeWidth: 2,
286-
strokeLinecap: "round",
287-
strokeLinejoin: "round",
288-
opacity: 0.7,
289-
}}
290-
/>
291-
</svg>
292-
</span>
238+
marginTop: 7,
239+
flexShrink: 0,
240+
}}
241+
/>
293242
)
294243
} else {
295244
icon = (
296245
<span
297246
style={{
298247
display: "inline-block",
299-
width: 14,
300-
height: 14,
248+
width: 8,
249+
height: 8,
301250
borderRadius: "50%",
302-
border: "2px solid #bbb",
251+
border: "1px solid var(--vscode-descriptionForeground)",
303252
background: "transparent",
304-
verticalAlign: "middle",
305253
marginRight: 6,
254+
marginTop: 7,
255+
flexShrink: 0,
306256
}}
307257
/>
308258
)
@@ -313,7 +263,7 @@ const UpdateTodoListToolBlock: React.FC<UpdateTodoListToolBlockProps> = ({
313263
style={{
314264
marginBottom: 2,
315265
display: "flex",
316-
alignItems: "center",
266+
alignItems: "flex-start",
317267
minHeight: 20,
318268
}}>
319269
{icon}

0 commit comments

Comments
 (0)