Skip to content

Commit be02439

Browse files
samejrsamejr
authored
Icons: updates and new icons for the side menu, run page and general improvements to the way they work (#1825)
* New format for the functions instead of “onWait() task” * Make the icon sizes match the hero icons * Updating icons for the new task hooks * Adds new icons to the RunIcon.tsx component * Improves the size of the menu icons * Fixes the missaligned environment dropdown and dev connected button * Changes the button colours so they are all unique * More icon updates * Adds new variables for main page icons * Improves icons sizes * Using new color variables in the side menu and blank states * Adds preview environment color variable * Align the env icon in the menu * Updates the env icons to be the correct size and padding to match hero icons * Label uses new colors, removes unused cases and new env icons * Lower case env label * Removes unused code * Use full env title * Organize imports * More variants of the runs icon to work at smaller sizes * small padding adjustment * reformat init function span * Fix last init formatting * New colour for settings * Organize switch statement for icons nicely * Use new color variable * Update icon svgs * Renamed lifecycle hook icon to Function icon * Renamed function icon file name
1 parent d745bb6 commit be02439

File tree

29 files changed

+479
-412
lines changed

29 files changed

+479
-412
lines changed

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

+9-19
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,18 @@ export function AttemptIcon({ className }: { className?: string }) {
22
return (
33
<svg
44
className={className}
5-
width="16"
6-
height="16"
7-
viewBox="0 0 16 16"
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
88
fill="none"
99
xmlns="http://www.w3.org/2000/svg"
1010
>
11-
<g clipPath="url(#clip0_9964_113464)">
12-
<path
13-
fillRule="evenodd"
14-
clipRule="evenodd"
15-
d="M16 0H0V16H16V0ZM7.09906 4.4L4.53906 11.5H6.11906L6.63906 10H9.35906L9.87906 11.5H11.4591L8.89906 4.4H7.09906ZM7.99906 6L8.92906 8.73H7.06906L7.99906 6Z"
16-
fill="currentColor"
17-
/>
18-
</g>
19-
<defs>
20-
<clipPath id="clip0_9964_113464">
21-
<path
22-
d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
23-
fill="white"
24-
/>
25-
</clipPath>
26-
</defs>
11+
<path
12+
fillRule="evenodd"
13+
clipRule="evenodd"
14+
d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM7.65398 16.4367C7.64829 16.4871 7.64671 16.5374 7.64905 16.5873C7.66648 16.959 7.90169 17.3021 8.27281 17.4389C8.7645 17.6202 9.31042 17.3713 9.49607 16.8813L10.2088 15H13.8788L14.5915 16.8813C14.7772 17.3713 15.3231 17.6202 15.8148 17.4389C16.3096 17.2565 16.5628 16.7075 16.3804 16.2127L13.2478 7.71625C13.1255 7.30217 12.7423 7 12.2886 7H11.8041C11.5337 7 11.2884 7.10733 11.1084 7.28171C11.0015 7.38343 10.9157 7.51053 10.8613 7.65817L7.70722 16.2126C7.67996 16.2865 7.66243 16.3617 7.65398 16.4367ZM12.0438 10.1564L10.9665 13H13.1211L12.0438 10.1564Z"
15+
fill="currentColor"
16+
/>
2717
</svg>
2818
);
2919
}

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

+8-13
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
export function ConnectedIcon({ className }: { className?: string }) {
22
return (
3-
<svg className={className} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
44
<rect
55
x="0.5"
66
y="-0.5"
77
width="19"
88
height="1"
99
rx="0.5"
10-
transform="matrix(1 0 0 -1 0 17)"
10+
transform="matrix(1 0 0 -1 1.99998 20)"
1111
stroke="#878C99"
1212
/>
1313
<path
1414
fillRule="evenodd"
1515
clipRule="evenodd"
16-
d="M12.4187 2L4 2C2.89543 2 2 2.89543 2 4L2 12C2 13.1046 2.89543 14 4 14L16 14C17.1046 14 18 13.1046 18 12L18 4.9816L16.5 6.4816L16.5 12C16.5 12.2761 16.2761 12.5 16 12.5L4 12.5C3.72386 12.5 3.5 12.2761 3.5 12L3.5 4C3.5 3.72386 3.72386 3.5 4 3.5L10.9187 3.5L12.4187 2Z"
16+
d="M14.4187 5L6.00002 5C4.89545 5 4.00002 5.89543 4.00002 7L4.00001 15C4.00002 16.1046 4.89545 17 6.00002 17L18 17C19.1046 17 20 16.1046 20 15L20 7.9816L18.5 9.4816L18.5 15C18.5 15.2761 18.2762 15.5 18 15.5L6.00001 15.5C5.72387 15.5 5.50001 15.2761 5.50001 15L5.50002 7C5.50002 6.72386 5.72387 6.5 6.00002 6.5L12.9187 6.5L14.4187 5Z"
1717
fill="#878C99"
1818
/>
1919
<path
20-
d="M6.5 6.75L9.5 9.75L16 3"
20+
d="M8.50002 9.75L11.5 12.75L18 6"
2121
stroke="#28BF5C"
2222
strokeWidth="1.5"
2323
strokeLinecap="round"
@@ -29,25 +29,20 @@ export function ConnectedIcon({ className }: { className?: string }) {
2929

3030
export function DisconnectedIcon({ className }: { className?: string }) {
3131
return (
32-
<svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
32+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3333
<path
3434
fillRule="evenodd"
3535
clipRule="evenodd"
36-
d="M11.2279 14.8334L1.50037 14.8334C1.04013 14.8334 0.667035 15.2065 0.667035 15.6667C0.667035 16.1269 1.04013 16.5 1.50037 16.5L12.8945 16.5L11.2279 14.8334Z"
36+
d="M14.673 19L2.99998 19C2.44769 19 1.99998 19.4477 1.99998 20C1.99998 20.5523 2.44769 21 2.99998 21L16.673 21L14.673 19Z"
3737
fill="#878C99"
3838
/>
3939
<path
4040
fillRule="evenodd"
4141
clipRule="evenodd"
42-
d="M2.33268 5.93927L2.33268 11.1667C2.33268 12.2713 3.22811 13.1667 4.33268 13.1667L9.56016 13.1667L8.06016 11.6667L4.33268 11.6667C4.05654 11.6667 3.83268 11.4429 3.83268 11.1667L3.83268 7.43927L2.33268 5.93927ZM14.166 10.6369L14.166 5.16675C14.166 4.8906 13.9422 4.66675 13.666 4.66675L8.19589 4.66675L6.69589 3.16675L13.666 3.16675C14.7706 3.16675 15.666 4.06218 15.666 5.16675L15.666 11.1667C15.666 11.4522 15.6062 11.7237 15.4985 11.9693L14.166 10.6369Z"
42+
d="M3.99999 8.32703L3.99999 15C3.99999 16.1046 4.89542 17 5.99999 17L12.673 17L11.173 15.5L5.99999 15.5C5.72385 15.5 5.49999 15.2761 5.49999 15L5.49999 9.82703L3.99999 8.32703ZM18.5 14.2641L18.5 7C18.5 6.72386 18.2761 6.5 18 6.5L10.7358 6.5L9.23585 5L18 5C19.1046 5 20 5.89543 20 7L20 15C20 15.2292 19.9614 15.4495 19.8904 15.6546L18.5 14.2641Z"
4343
fill="#878C99"
4444
/>
45-
<path
46-
d="M1.5 1.50006L16.5 16.5001"
47-
stroke="#E11D48"
48-
strokeWidth="1.5"
49-
strokeLinecap="round"
50-
/>
45+
<path d="M3.00001 3L21 21" stroke="#E11D48" strokeWidth="1.5" strokeLinecap="round" />
5146
</svg>
5247
);
5348
}

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

+126-65
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,153 @@
11
export function DevEnvironmentIcon({ className }: { className?: string }) {
22
return (
3-
<svg className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
4-
<g clipPath="url(#clip0_15347_71059)">
5-
<circle cx="7" cy="7" r="2" fill="currentColor" />
6-
<path
7-
d="M4.5 0.75H2.75C1.64543 0.75 0.75 1.64543 0.75 2.75V4.5"
8-
stroke="currentColor"
9-
strokeWidth="1.5"
10-
strokeLinecap="round"
11-
strokeLinejoin="round"
12-
/>
13-
<path
14-
d="M13.25 4.5L13.25 2.75C13.25 1.64543 12.3546 0.75 11.25 0.75L9.5 0.75"
15-
stroke="currentColor"
16-
strokeWidth="1.5"
17-
strokeLinecap="round"
18-
strokeLinejoin="round"
19-
/>
20-
<path
21-
d="M9.5 13.25L11.25 13.25C12.3546 13.25 13.25 12.3546 13.25 11.25L13.25 9.5"
22-
stroke="currentColor"
23-
strokeWidth="1.5"
24-
strokeLinecap="round"
25-
strokeLinejoin="round"
26-
/>
27-
<path
28-
d="M0.75 9.5L0.75 11.25C0.75 12.3546 1.64543 13.25 2.75 13.25L4.5 13.25"
29-
stroke="currentColor"
30-
strokeWidth="1.5"
31-
strokeLinecap="round"
32-
strokeLinejoin="round"
33-
/>
34-
</g>
35-
<defs>
36-
<clipPath id="clip0_15347_71059">
37-
<rect width="14" height="14" fill="currentColor" />
38-
</clipPath>
39-
</defs>
3+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<circle cx="12" cy="12" r="3" fill="currentColor" />
5+
<path
6+
d="M8.35714 3H5C3.89543 3 3 3.89543 3 5V8.35714"
7+
stroke="currentColor"
8+
strokeWidth="2"
9+
strokeLinecap="round"
10+
strokeLinejoin="round"
11+
/>
12+
<path
13+
d="M21 8.35714L21 5C21 3.89543 20.1046 3 19 3L15.6429 3"
14+
stroke="currentColor"
15+
strokeWidth="2"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path
20+
d="M15.6429 21L19 21C20.1046 21 21 20.1046 21 19L21 15.6429"
21+
stroke="currentColor"
22+
strokeWidth="2"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
/>
26+
<path
27+
d="M3 15.6429L3 19C3 20.1046 3.89543 21 5 21L8.35714 21"
28+
stroke="currentColor"
29+
strokeWidth="2"
30+
strokeLinecap="round"
31+
strokeLinejoin="round"
32+
/>
33+
</svg>
34+
);
35+
}
36+
37+
export function DevEnvironmentIconSmall({ className }: { className?: string }) {
38+
return (
39+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
40+
<circle cx="10" cy="10" r="2" fill="currentColor" />
41+
<path
42+
d="M7 3H5C3.89543 3 3 3.89543 3 5V7"
43+
stroke="currentColor"
44+
strokeWidth="2"
45+
strokeLinecap="round"
46+
strokeLinejoin="round"
47+
/>
48+
<path
49+
d="M17 7L17 5C17 3.89543 16.1046 3 15 3L13 3"
50+
stroke="currentColor"
51+
strokeWidth="2"
52+
strokeLinecap="round"
53+
strokeLinejoin="round"
54+
/>
55+
<path
56+
d="M13 17L15 17C16.1046 17 17 16.1046 17 15L17 13"
57+
stroke="currentColor"
58+
strokeWidth="2"
59+
strokeLinecap="round"
60+
strokeLinejoin="round"
61+
/>
62+
<path
63+
d="M3 13L3 15C3 16.1046 3.89543 17 5 17L7 17"
64+
stroke="currentColor"
65+
strokeWidth="2"
66+
strokeLinecap="round"
67+
strokeLinejoin="round"
68+
/>
4069
</svg>
4170
);
4271
}
4372

4473
export function ProdEnvironmentIcon({ className }: { className?: string }) {
4574
return (
46-
<svg className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
75+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
76+
<path
77+
d="M12.5037 7.33603C12.3174 6.88799 11.6827 6.88799 11.4963 7.33603L10.4338 9.89064L7.6759 10.1117C7.1922 10.1505 6.99606 10.7542 7.36459 11.0698L9.46583 12.8698L8.82387 15.561C8.71128 16.033 9.22477 16.4061 9.63888 16.1532L12 14.711L14.3612 16.1532C14.7753 16.4061 15.2888 16.0331 15.1762 15.561L14.5343 12.8698L16.6355 11.0698C17.004 10.7542 16.8079 10.1505 16.3242 10.1117L13.5663 9.89064L12.5037 7.33603Z"
78+
fill="white"
79+
/>
4780
<rect
48-
x="0.75"
49-
y="0.75"
50-
width="12.5"
51-
height="12.5"
52-
rx="3.25"
81+
x="3"
82+
y="3"
83+
width="18"
84+
height="18"
85+
rx="2"
5386
stroke="currentColor"
54-
strokeWidth="1.5"
87+
strokeWidth="2"
5588
strokeLinecap="round"
5689
strokeLinejoin="round"
5790
/>
58-
<g clipPath="url(#clip0_15515_83281)">
59-
<path
60-
fillRule="evenodd"
61-
clipRule="evenodd"
62-
d="M7.34731 4.15348C7.21887 3.84467 6.78141 3.84467 6.65298 4.15348L5.92066 5.91419L4.01982 6.06658C3.68644 6.0933 3.55126 6.50935 3.80526 6.72693L5.2535 7.96749L4.81104 9.82238C4.73344 10.1477 5.08735 10.4048 5.37277 10.2305L7.00014 9.23651L8.62752 10.2305C8.91294 10.4048 9.26685 10.1477 9.18925 9.82238L8.74679 7.96749L10.195 6.72693C10.449 6.50935 10.3138 6.0933 9.98046 6.06658L8.07963 5.91419L7.34731 4.15348Z"
63-
fill="currentColor"
64-
/>
65-
</g>
66-
<defs>
67-
<clipPath id="clip0_15515_83281">
68-
<rect width="8" height="8" fill="currentColor" transform="translate(3 3)" />
69-
</clipPath>
70-
</defs>
91+
</svg>
92+
);
93+
}
94+
95+
export function ProdEnvironmentIconSmall({ className }: { className?: string }) {
96+
return (
97+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
98+
<rect
99+
x="3"
100+
y="3"
101+
width="14"
102+
height="14"
103+
rx="3"
104+
stroke="currentColor"
105+
strokeWidth="2"
106+
strokeLinecap="round"
107+
strokeLinejoin="round"
108+
/>
109+
<path
110+
d="M10.4174 6.23514C10.263 5.86384 9.73701 5.86384 9.58258 6.23514L8.70207 8.35213L6.4166 8.53536C6.01575 8.56749 5.85322 9.06773 6.15862 9.32934L7.89991 10.8209L7.36792 13.0512C7.27461 13.4423 7.70014 13.7515 8.04332 13.5419L10 12.3467L11.9567 13.5419C12.2999 13.7515 12.7254 13.4423 12.6321 13.0512L12.1001 10.8209L13.8414 9.32934C14.1468 9.06773 13.9842 8.56749 13.5834 8.53536L11.2979 8.35213L10.4174 6.23514Z"
111+
fill="currentColor"
112+
/>
71113
</svg>
72114
);
73115
}
74116

75117
export function DeployedEnvironmentIcon({ className }: { className?: string }) {
76118
return (
77-
<svg className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
119+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
120+
<circle cx="12" cy="12" r="3" fill="currentColor" />
121+
<rect
122+
x="3"
123+
y="3"
124+
width="18"
125+
height="18"
126+
rx="2"
127+
stroke="currentColor"
128+
strokeWidth="2"
129+
strokeLinecap="round"
130+
strokeLinejoin="round"
131+
/>
132+
</svg>
133+
);
134+
}
135+
136+
export function DeployedEnvironmentIconSmall({ className }: { className?: string }) {
137+
return (
138+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
139+
<circle cx="10" cy="10" r="2" fill="currentColor" />
78140
<rect
79-
x="0.75"
80-
y="0.75"
81-
width="12.5"
82-
height="12.5"
83-
rx="3.25"
141+
x="3"
142+
y="3"
143+
width="14"
144+
height="14"
145+
rx="3"
84146
stroke="currentColor"
85-
strokeWidth="1.5"
147+
strokeWidth="2"
86148
strokeLinecap="round"
87149
strokeLinejoin="round"
88150
/>
89-
<circle cx="7" cy="7" r="2" fill="currentColor" />
90151
</svg>
91152
);
92153
}

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function FunctionIcon({ className }: { className?: string }) {
2+
return (
3+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<rect
5+
x="2.5"
6+
y="2.5"
7+
width="19"
8+
height="19"
9+
rx="2.5"
10+
stroke="currentColor"
11+
strokeOpacity={0.5}
12+
/>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
d="M14.9987 7.99477C13.8955 7.99477 13.0012 8.88907 13.0012 9.99225V10.6649H14.3363H15.3375V12.6675H14.3363H13.0012V14.0084C13.0012 16.2171 11.2107 18.0077 9.0019 18.0077H8.00061V16.0051H9.0019C10.1047 16.0051 10.9986 15.1111 10.9986 14.0084V12.6675H9.66357H8.66228V10.6649H9.66357H10.9986V9.99225C10.9986 7.78308 12.7895 5.99219 14.9987 5.99219H16V7.99477H14.9987Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
20+
);
21+
}

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function MiddlewareIcon({ className }: { className?: string }) {
2+
return (
3+
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<rect
5+
x="2.5"
6+
y="2.5"
7+
width="19"
8+
height="19"
9+
rx="2.5"
10+
stroke="currentColor"
11+
strokeOpacity={0.5}
12+
/>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
d="M8.72775 14.8717V11.1087C8.72775 10.4761 9.24051 9.96338 9.87303 9.96338C10.5056 9.96338 11.0183 10.4761 11.0183 11.1087V15.5262V16.5079H12.9817V15.5262V11.1087C12.9817 10.4761 13.4944 9.96334 14.1269 9.96334C14.7594 9.96334 15.2722 10.4761 15.2722 11.1086V15.5262V16.5079H17.2356V15.5262V11.1086C17.2356 9.39177 15.8438 8 14.1269 8C13.3041 8 12.556 8.31966 12 8.84155C11.4439 8.31968 10.6958 8.00004 9.87303 8.00004C9.46858 8.00004 9.08217 8.07728 8.72775 8.21781V8.00004H6.7644V8.98171V11.1087V14.8717V15.5262V15.8534V16.5079H8.72775V15.8534V15.5262V14.8717Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
20+
);
21+
}

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
export function PauseIcon({ className }: { className?: string }) {
22
return (
3-
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
411
<path
512
fillRule="evenodd"
613
clipRule="evenodd"
7-
d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM6.5 6C6.5 5.44772 6.94772 5 7.5 5C8.05229 5 8.5 5.44772 8.5 6V14C8.5 14.5523 8.05229 15 7.5 15C6.94772 15 6.5 14.5523 6.5 14V6ZM12.5 5C11.9477 5 11.5 5.44772 11.5 6V14C11.5 14.5523 11.9477 15 12.5 15C13.0523 15 13.5 14.5523 13.5 14V6C13.5 5.44772 13.0523 5 12.5 5Z"
14+
d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM8 8.25C8 7.55964 8.55964 7 9.25 7C9.94036 7 10.5 7.55964 10.5 8.25V15.75C10.5 16.4404 9.94036 17 9.25 17C8.55964 17 8 16.4404 8 15.75V8.25ZM14.75 7C14.0596 7 13.5 7.55964 13.5 8.25V15.75C13.5 16.4404 14.0596 17 14.75 17C15.4404 17 16 16.4404 16 15.75V8.25C16 7.55964 15.4404 7 14.75 7Z"
815
fill="currentColor"
916
/>
1017
</svg>

0 commit comments

Comments
 (0)