Skip to content

Commit 3b013be

Browse files
samejrsamejr
committed
feat(webapp): update task and tasks dashboard icons
TaskIcon (and its small variant) now use a new burst glyph, and TasksIcon adopts the previous task glyph. Export names are unchanged, so existing usages pick up the new artwork automatically.
1 parent 65c545d commit 3b013be

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)