Skip to content

Commit bb92935

Browse files
samejrsamejr
authored
feat(webapp): update task and cached task span icons (#4014)
## Summary Refreshes the SVG artwork for the main task icon and the cached task variant shown on the run trace span view. The cached icon (previously a hardcoded blue "T" in a dashed border) now lives alongside `TaskIcon` in `TaskIcon.tsx` and is drawn with `currentColor`, so it inherits the `text-tasks` theme color like the other span icons instead of ignoring it. The standalone `TaskCachedIcon.tsx` file is removed and its two import sites updated.
1 parent a90a495 commit bb92935

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)