Skip to content

Commit 1b99c41

Browse files
samejrsamejr
committed
feat(webapp): update task and cached task span icons
Update the SVG artwork for the main task icon and the cached task variant shown on the run trace span view. The cached icon now lives alongside TaskIcon in TaskIcon.tsx and uses currentColor, so it inherits the text-tasks theme color like the other span icons.
1 parent a90a495 commit 1b99c41

5 files changed

Lines changed: 123 additions & 69 deletions

File tree

‎.server-changes/cached-task-icon-svg.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
area: webapp
3+
type: improvement
4+
---
5+
6+
Refresh the task and cached-task span icons shown in the run trace view with new SVG artwork.

‎apps/webapp/app/assets/icons/TaskCachedIcon.tsx‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎apps/webapp/app/assets/icons/TaskIcon.tsx‎

Lines changed: 115 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,58 +8,157 @@ export function TaskIcon({ className }: { className?: string }) {
88
fill="none"
99
xmlns="http://www.w3.org/2000/svg"
1010
>
11-
<rect x="11" y="16" width="2" height="6" rx="1" fill="currentColor" />
12-
<rect x="11" y="2" width="2" height="6" rx="1" fill="currentColor" />
11+
<rect x="11" y="16" width="2" height="7" rx="1" fill="currentColor" />
12+
<rect x="11" y="1" width="2" height="7" rx="1" fill="currentColor" />
1313
<rect
1414
x="13"
1515
y="11"
1616
width="2"
17-
height="11"
17+
height="12"
1818
rx="1"
1919
transform="rotate(90 13 11)"
2020
fill="currentColor"
2121
/>
2222
<rect
23-
x="22"
23+
x="23"
2424
y="11"
2525
width="2"
26-
height="6"
26+
height="7"
2727
rx="1"
28-
transform="rotate(90 22 11)"
28+
transform="rotate(90 23 11)"
2929
fill="currentColor"
3030
/>
3131
<rect
32-
x="5.63604"
33-
y="19.7782"
32+
x="4.92758"
33+
y="20.4867"
3434
width="2"
35-
height="10.9999"
35+
height="12.0018"
3636
rx="1"
37-
transform="rotate(-135 5.63604 19.7782)"
37+
transform="rotate(-135 4.92758 20.4867)"
3838
fill="currentColor"
3939
/>
4040
<rect
4141
x="15.3185"
4242
y="10.0958"
4343
width="2"
44-
height="6.30698"
44+
height="6.99687"
4545
rx="1"
4646
transform="rotate(-135 15.3185 10.0958)"
4747
fill="currentColor"
4848
/>
4949
<rect
50-
x="19.7781"
51-
y="18.364"
50+
x="20.3488"
51+
y="18.9346"
5252
width="2"
53-
height="6.18952"
53+
height="6.99653"
5454
rx="1"
55-
transform="rotate(135 19.7781 18.364)"
55+
transform="rotate(135 20.3488 18.9346)"
5656
fill="currentColor"
5757
/>
5858
<rect
5959
x="13.4161"
6060
y="12.002"
6161
width="2"
62-
height="11.0027"
62+
height="11.9956"
63+
rx="1"
64+
transform="rotate(135 13.4161 12.002)"
65+
fill="currentColor"
66+
/>
67+
</svg>
68+
);
69+
}
70+
71+
export function TaskCachedIcon({ className }: { className?: string }) {
72+
return (
73+
<svg
74+
className={className}
75+
width="24"
76+
height="24"
77+
viewBox="0 0 24 24"
78+
fill="none"
79+
xmlns="http://www.w3.org/2000/svg"
80+
>
81+
<rect x="11" y="16" width="2" height="3" rx="1" fill="currentColor" />
82+
<rect x="11" y="20" width="2" height="3" rx="1" fill="currentColor" />
83+
<rect x="11" y="5" width="2" height="3" rx="1" fill="currentColor" />
84+
<rect x="11" y="1" width="2" height="3" rx="1" fill="currentColor" />
85+
<rect
86+
x="13"
87+
y="11"
88+
width="2"
89+
height="12"
90+
rx="1"
91+
transform="rotate(90 13 11)"
92+
fill="currentColor"
93+
/>
94+
<rect
95+
x="19"
96+
y="11"
97+
width="2"
98+
height="3"
99+
rx="1"
100+
transform="rotate(90 19 11)"
101+
fill="currentColor"
102+
/>
103+
<rect
104+
x="23"
105+
y="11"
106+
width="2"
107+
height="3"
108+
rx="1"
109+
transform="rotate(90 23 11)"
110+
fill="currentColor"
111+
/>
112+
<rect
113+
x="4.92758"
114+
y="20.4867"
115+
width="2"
116+
height="12.0018"
117+
rx="1"
118+
transform="rotate(-135 4.92758 20.4867)"
119+
fill="currentColor"
120+
/>
121+
<rect
122+
x="15.3185"
123+
y="10.0958"
124+
width="2"
125+
height="2.99815"
126+
rx="1"
127+
transform="rotate(-135 15.3185 10.0958)"
128+
fill="currentColor"
129+
/>
130+
<rect
131+
x="18.1445"
132+
y="7.26978"
133+
width="2"
134+
height="3.00029"
135+
rx="1"
136+
transform="rotate(-135 18.1445 7.26978)"
137+
fill="currentColor"
138+
/>
139+
<rect
140+
x="17.5259"
141+
y="16.1117"
142+
width="2"
143+
height="3.00436"
144+
rx="1"
145+
transform="rotate(135 17.5259 16.1117)"
146+
fill="currentColor"
147+
/>
148+
<rect
149+
x="20.3488"
150+
y="18.9346"
151+
width="2"
152+
height="3.00154"
153+
rx="1"
154+
transform="rotate(135 20.3488 18.9346)"
155+
fill="currentColor"
156+
/>
157+
<rect
158+
x="13.4161"
159+
y="12.002"
160+
width="2"
161+
height="11.9956"
63162
rx="1"
64163
transform="rotate(135 13.4161 12.002)"
65164
fill="currentColor"

‎apps/webapp/app/components/runs/v3/RunIcon.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,10 @@ import {
2323
XAIIcon,
2424
} from "~/assets/icons/AiProviderIcons";
2525
import { AttemptIcon } from "~/assets/icons/AttemptIcon";
26-
import { TaskIcon } from "~/assets/icons/TaskIcon";
26+
import { TaskCachedIcon, TaskIcon } from "~/assets/icons/TaskIcon";
2727
import { cn } from "~/utils/cn";
2828
import { tablerIcons } from "~/utils/tablerIcons";
2929
import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
30-
import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
3130
import { PauseIcon } from "~/assets/icons/PauseIcon";
3231
import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon";
3332
import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon";

‎apps/webapp/app/routes/storybook.icons/route.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,7 @@ import { StarIcon } from "~/assets/icons/StarIcon";
128128
import { StatusIcon } from "~/assets/icons/StatusIcon";
129129
import { StreamsIcon } from "~/assets/icons/StreamsIcon";
130130
import { TableIcon } from "~/assets/icons/TableIcon";
131-
import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
132-
import { TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
131+
import { TaskCachedIcon, TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
133132
import { TestTubeIcon } from "~/assets/icons/TestTubeIcon";
134133
import { TextInlineIcon } from "~/assets/icons/TextInlineIcon";
135134
import { TextWrapIcon } from "~/assets/icons/TextWrapIcon";

0 commit comments

Comments
 (0)