Skip to content

Commit 7efdbc8

Browse files
samejrsamejr
authored
feat(webapp): update task and tasks dashboard icons (#4013)
## Summary Updates the task icons used across the dashboard. `TaskIcon` and its small variant now use a new burst glyph, and `TasksIcon` adopts the previous task glyph (the rounded square). Both still render with `currentColor`, so they inherit text color exactly as before. Export names are unchanged, so every existing usage (side menu, task and queue views, run filters) picks up the new artwork with no other code changes.
1 parent c6f0769 commit 7efdbc8

3 files changed

Lines changed: 116 additions & 36 deletions

File tree

‎.server-changes/swap-task-icons.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+
Update the dashboard task icons with a new glyph design.

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

Lines changed: 104 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,60 @@ export function TaskIcon({ className }: { className?: string }) {
88
fill="none"
99
xmlns="http://www.w3.org/2000/svg"
1010
>
11-
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" />
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" />
1213
<rect
13-
width="8.993"
14-
height="2"
14+
x="13"
15+
y="11"
16+
width="2"
17+
height="11"
1518
rx="1"
16-
transform="matrix(1 0 0 -1 7.5035 9)"
19+
transform="rotate(90 13 11)"
1720
fill="currentColor"
1821
/>
19-
<path
20-
d="M11 8.49536L11 16.4954C11 17.0476 11.4477 17.4954 12 17.4954C12.5523 17.4954 13 17.0476 13 16.4954L13 8.49536L11 8.49536Z"
22+
<rect
23+
x="22"
24+
y="11"
25+
width="2"
26+
height="6"
27+
rx="1"
28+
transform="rotate(90 22 11)"
29+
fill="currentColor"
30+
/>
31+
<rect
32+
x="5.63604"
33+
y="19.7782"
34+
width="2"
35+
height="10.9999"
36+
rx="1"
37+
transform="rotate(-135 5.63604 19.7782)"
38+
fill="currentColor"
39+
/>
40+
<rect
41+
x="15.3185"
42+
y="10.0958"
43+
width="2"
44+
height="6.30698"
45+
rx="1"
46+
transform="rotate(-135 15.3185 10.0958)"
47+
fill="currentColor"
48+
/>
49+
<rect
50+
x="19.7781"
51+
y="18.364"
52+
width="2"
53+
height="6.18952"
54+
rx="1"
55+
transform="rotate(135 19.7781 18.364)"
56+
fill="currentColor"
57+
/>
58+
<rect
59+
x="13.4161"
60+
y="12.002"
61+
width="2"
62+
height="11.0027"
63+
rx="1"
64+
transform="rotate(135 13.4161 12.002)"
2165
fill="currentColor"
2266
/>
2367
</svg>
@@ -27,14 +71,60 @@ export function TaskIcon({ className }: { className?: string }) {
2771
export function TaskIconSmall({ className }: { className?: string }) {
2872
return (
2973
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
30-
<path
31-
d="M4 3H16C16.5523 3 17 3.44772 17 4V16C17 16.5523 16.5523 17 16 17H4C3.44772 17 3 16.5523 3 16V4L3.00488 3.89746C3.05621 3.39333 3.48232 3 4 3Z"
32-
stroke="currentColor"
33-
strokeWidth="2"
34-
/>
35-
<rect width="8" height="2" rx="1" transform="matrix(1 0 0 -1 6 8)" fill="currentColor" />
36-
<path
37-
d="M10 6C9.44772 6 9 6.44772 9 7L9 14C9 14.5523 9.44772 15 10 15C10.5523 15 11 14.5523 11 14L11 7C11 6.44772 10.5523 6 10 6Z"
74+
<rect x="9" y="14" width="2" height="4" rx="1" fill="currentColor" />
75+
<rect x="9" y="2" width="2" height="4" rx="1" fill="currentColor" />
76+
<rect
77+
x="11"
78+
y="9"
79+
width="2"
80+
height="9"
81+
rx="1"
82+
transform="rotate(90 11 9)"
83+
fill="currentColor"
84+
/>
85+
<rect
86+
x="18"
87+
y="9"
88+
width="2"
89+
height="4"
90+
rx="1"
91+
transform="rotate(90 18 9)"
92+
fill="currentColor"
93+
/>
94+
<rect
95+
x="5.0531"
96+
y="16.3611"
97+
width="2"
98+
height="8.99589"
99+
rx="1"
100+
transform="rotate(-135 5.0531 16.3611)"
101+
fill="currentColor"
102+
/>
103+
<rect
104+
x="13.3185"
105+
y="8.09583"
106+
width="2"
107+
height="4"
108+
rx="1"
109+
transform="rotate(-135 13.3185 8.09583)"
110+
fill="currentColor"
111+
/>
112+
<rect
113+
x="16.2304"
114+
y="14.8163"
115+
width="2"
116+
height="4.00064"
117+
rx="1"
118+
transform="rotate(135 16.2304 14.8163)"
119+
fill="currentColor"
120+
/>
121+
<rect
122+
x="11.4161"
123+
y="10.002"
124+
width="2"
125+
height="8.99796"
126+
rx="1"
127+
transform="rotate(135 11.4161 10.002)"
38128
fill="currentColor"
39129
/>
40130
</svg>

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

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,16 @@ export function TasksIcon({ className }: { className?: string }) {
88
fill="none"
99
xmlns="http://www.w3.org/2000/svg"
1010
>
11-
<rect x="11" y="2" width="2" height="20" rx="1" fill="currentColor" />
11+
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" />
1212
<rect
13-
x="22"
14-
y="11"
15-
width="2"
16-
height="20"
13+
width="8.993"
14+
height="2"
1715
rx="1"
18-
transform="rotate(90 22 11)"
16+
transform="matrix(1 0 0 -1 7.5035 9)"
1917
fill="currentColor"
2018
/>
21-
<rect
22-
x="5.63604"
23-
y="19.7782"
24-
width="2"
25-
height="20"
26-
rx="1"
27-
transform="rotate(-135 5.63604 19.7782)"
28-
fill="currentColor"
29-
/>
30-
<rect
31-
x="19.7781"
32-
y="18.364"
33-
width="2"
34-
height="20"
35-
rx="1"
36-
transform="rotate(135 19.7781 18.364)"
19+
<path
20+
d="M11 8.49536L11 16.4954C11 17.0476 11.4477 17.4954 12 17.4954C12.5523 17.4954 13 17.0476 13 16.4954L13 8.49536L11 8.49536Z"
3721
fill="currentColor"
3822
/>
3923
</svg>

0 commit comments

Comments
 (0)