Skip to content

Commit a6058ff

Browse files
scorebreakerscorebreaker
committed
feat: add Learn path, change menu icons to use the new design
1 parent a336fcd commit a6058ff

24 files changed

+604
-16
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"react-number-format": "^4.4.1",
3030
"react-router-dom": "^5.2.0",
3131
"react-scripts": "3.4.3",
32+
"react-youtube": "7.13.1",
3233
"rxjs": "^6.6.3",
3334
"socket.io-client": "^2.3.1",
3435
"xterm": "^4.9.0",
@@ -44,7 +45,6 @@
4445
"@storybook/preset-create-react-app": "^3.1.6",
4546
"@storybook/react": "^6.1.21",
4647
"@storybook/theming": "^6.1.21",
47-
"storybook-react-router": "^1.0.8",
4848
"@testing-library/jest-dom": "^5.11.4",
4949
"@testing-library/react": "^11.1.0",
5050
"@testing-library/user-event": "^12.1.10",
@@ -61,6 +61,7 @@
6161
"cross-env": "^7.0.2",
6262
"eslint-plugin-jest": "^24.0.2",
6363
"prettier": "^2.1.2",
64+
"storybook-react-router": "^1.0.8",
6465
"ts-jest": "^26.4.0",
6566
"typescript": "^3.7.5"
6667
},

‎public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
<meta name="theme-color" content="#303030" />
88
<meta
99
http-equiv="Content-Security-Policy"
10-
content="script-src 'self' 'unsafe-inline'"
10+
content="script-src 'self' 'unsafe-inline' www.youtube.com;"
1111
/>
12+
1213
<link rel="shortcut icon" href="%PUBLIC_URL%/assets/favicon.ico" />
1314
<link
1415
rel="stylesheet"

‎src/common/components/icons/ConsoleIcon.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react";
2+
3+
export const ConsoleIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g>
16+
<path
17+
d="M0 0H24V24H0z"
18+
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18)"
19+
/>
20+
<path
21+
fill="currentColor"
22+
d="M13 15H18V16H13z"
23+
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18) matrix(-1 0 0 1 31 0)"
24+
/>
25+
<path
26+
stroke="currentColor"
27+
d="M21 2.5l.5 16.5-18.5.5L2.5 3 21 2.5z"
28+
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18)"
29+
/>
30+
<path
31+
fill="currentColor"
32+
d="M6.036 10.5l-.001 4h4v1h-5v-5h1z"
33+
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18) scale(-1 1) rotate(45 0 -5.192)"
34+
/>
35+
<path
36+
stroke="currentColor"
37+
d="M3.5 6.5H20.5V7.5H3.5z"
38+
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18)"
39+
/>
40+
</g>
41+
</g>
42+
</g>
43+
</g>
44+
</g>
45+
</svg>
46+
);
47+
};

‎src/common/components/icons/LearnIcon.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
3+
export const LearnIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g transform="translate(-108 -596) translate(80 50) translate(0 528) translate(28 18)">
16+
<path d="M0 0H24V24H0z" />
17+
<rect
18+
width="19"
19+
height="14"
20+
x="2.5"
21+
y="3.5"
22+
stroke="currentColor"
23+
rx="1"
24+
/>
25+
<path stroke="currentColor" d="M6.5 20.5H17.5V21.5H6.5z" />
26+
<path
27+
stroke="currentColor"
28+
d="M12.865 8.058c.46.09.526.157.57.237h0l2.79 4.96c.069.12.081.257.047.38-.035.123-.116.233-.237.3-.075.043-.159.065-.245.065h0-5.58c-.138 0-.263-.056-.354-.146-.09-.09-.146-.216-.146-.354 0-.086.022-.17.064-.245h0l2.79-4.96c.068-.12.178-.202.301-.237z"
29+
transform="rotate(90 13 10.5)"
30+
/>
31+
</g>
32+
</g>
33+
</g>
34+
</g>
35+
</g>
36+
</svg>
37+
);
38+
};

‎src/common/components/icons/MMBotIcon.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
3+
export const MMBotIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fill-rule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g transform="translate(-108 -296) translate(80 50) translate(13 204) translate(15 42)">
16+
<path d="M0 0H24V24H0z" />
17+
<path stroke="currentColor" d="M4.5 8.5H19.5V19.5H4.5z" />
18+
<path
19+
fill="currentColor"
20+
d="M12 9L7.757 4.757 8.464 4.05 12 7.586 15.536 4.05 16.243 4.757zM2 11H3V17H2zM21 11H22V17H21z"
21+
/>
22+
<circle cx="9" cy="14" r="1.5" stroke="currentColor" />
23+
<circle cx="15" cy="14" r="1.5" stroke="currentColor" />
24+
</g>
25+
</g>
26+
</g>
27+
</g>
28+
</g>
29+
</svg>
30+
);
31+
};

‎src/common/components/icons/OverviewIcon.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
3+
export const OverviewIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<path
16+
d="M30 24h173c13.255 0 24-10.745 24-24v108c0-13.255-10.745-24-24-24H30C13.431 84 0 70.569 0 54c0-16.569 13.431-30 30-30z"
17+
transform="translate(-108 -236) translate(80 50) translate(13 144)"
18+
/>
19+
<g>
20+
<path
21+
fillRule="nonzero"
22+
d="M0 0H24V24H0z"
23+
transform="translate(-108 -236) translate(80 50) translate(13 144) translate(15 42)"
24+
/>
25+
<path
26+
stroke="currentColor"
27+
strokeLinecap="square"
28+
d="M4.5 21L4.5 9 2 11 12 3 22 11 19.5 9 19.5 21z"
29+
transform="translate(-108 -236) translate(80 50) translate(13 144) translate(15 42)"
30+
/>
31+
<path
32+
stroke="currentColor"
33+
d="M12 13.5c.69 0 1.315.28 1.768.732.452.453.732 1.078.732 1.768h0v4.5h-5V16c0-.69.28-1.315.732-1.768.453-.452 1.078-.732 1.768-.732z"
34+
transform="translate(-108 -236) translate(80 50) translate(13 144) translate(15 42)"
35+
/>
36+
</g>
37+
</g>
38+
</g>
39+
</g>
40+
</g>
41+
</svg>
42+
);
43+
};

‎src/common/components/icons/SettingsIcon.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
3+
export const SettingsIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g transform="translate(-108 -784) translate(80 50) translate(0 716) translate(28 18)">
16+
<path d="M0 0H24V24H0z" />
17+
<path
18+
fillRule="nonzero"
19+
stroke="currentColor"
20+
d="M13.14 2.5c.017.002.033.008.046.018.015.012.026.028.03.048h0l.636 2.619c.568.156 1.113.381 1.62.67h0l2.245-1.347c.017-.01.036-.014.055-.012.018.002.036.01.05.025h0l1.657 1.657c.014.014.023.032.025.05.002.019-.001.038-.012.055h0l-1.347 2.245c.289.506.514 1.051.67 1.62h0l2.62.636c.019.004.035.015.047.03.011.015.018.033.018.053h0v2.344c0 .02-.007.038-.018.053-.012.015-.028.026-.048.03h0l-2.619.636c-.156.57-.381 1.114-.67 1.62h0l1.347 2.245c.01.017.014.036.012.055-.002.019-.01.036-.025.05h0l-1.657 1.658c-.014.014-.032.022-.05.024-.019.002-.038-.001-.055-.011h0l-2.245-1.347c-.506.288-1.051.513-1.62.67h0l-.636 2.54c-.005.02-.016.036-.03.048-.015.011-.033.018-.053.018h0-2.344c-.02 0-.038-.007-.053-.018-.015-.012-.026-.028-.03-.047h0l-.636-2.541c-.569-.157-1.114-.382-1.62-.67h0L6.204 19.57c-.017.01-.037.014-.055.012-.019-.002-.036-.01-.05-.024h0L4.442 17.9c-.014-.014-.022-.031-.024-.05-.002-.019.001-.038.011-.055h0l1.347-2.245c-.288-.506-.513-1.051-.67-1.62h0l-2.54-.636c-.02-.004-.036-.015-.048-.03-.011-.015-.018-.033-.018-.053h0v-2.344c0-.02.007-.038.018-.053.012-.014.028-.025.047-.03h0l2.541-.636c.157-.569.382-1.114.67-1.62h0L4.43 6.283c-.01-.017-.013-.036-.011-.055.002-.018.01-.036.024-.05h0L6.1 4.52c.014-.014.031-.023.05-.025.018-.002.038.001.055.012h0L8.45 5.855c.506-.289 1.051-.514 1.62-.67h0l.623-2.572z"
21+
/>
22+
<circle
23+
cx="12"
24+
cy="12"
25+
r="2.5"
26+
fillRule="nonzero"
27+
stroke="currentColor"
28+
/>
29+
</g>
30+
</g>
31+
</g>
32+
</g>
33+
</g>
34+
</svg>
35+
);
36+
};

‎src/common/components/icons/TradeHistoryIcon.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
3+
export const TradeHistoryIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g>
16+
<path
17+
d="M0 0H24V24H0z"
18+
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18)"
19+
/>
20+
<path
21+
fill="currentColor"
22+
fillRule="nonzero"
23+
d="M12.5 3c5.08 0 9.227 3.986 9.487 9h-1.001c-.259-4.461-3.96-8-8.486-8C7.806 4 4 7.806 4 12.5S7.806 21 12.5 21c2.602 0 4.93-1.169 6.49-3.01l.71.709C17.956 20.72 15.377 22 12.5 22 7.253 22 3 17.747 3 12.5S7.253 3 12.5 3z"
24+
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18) matrix(-1 0 0 1 24.987 0)"
25+
/>
26+
<path
27+
fill="currentColor"
28+
d="M12 7L13 7 13 14 12 14zM1 12L6 12 3.5 15.054z"
29+
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18)"
30+
/>
31+
<path
32+
fill="currentColor"
33+
d="M13.5 9.5L14.5 9.5 14.5 15.5 13.5 15.5z"
34+
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18) rotate(90 14 12.5)"
35+
/>
36+
</g>
37+
</g>
38+
</g>
39+
</g>
40+
</g>
41+
</svg>
42+
);
43+
};

‎src/common/components/icons/TradeIcon.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
3+
export const TradeIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g>
16+
<path
17+
d="M0 0H24V24H0z"
18+
transform="translate(-108 -356) translate(80 50) translate(0 288) translate(28 18)"
19+
/>
20+
<path
21+
stroke="currentColor"
22+
d="M8.5 4.207V7.5h9v3H2.207L8.5 4.207z"
23+
transform="translate(-108 -356) translate(80 50) translate(0 288) translate(28 18)"
24+
/>
25+
<path
26+
stroke="currentColor"
27+
d="M12.97 14.16v3.34h9.53v3H6.258l6.712-6.34z"
28+
transform="translate(-108 -356) translate(80 50) translate(0 288) translate(28 18) rotate(180 14 17)"
29+
/>
30+
</g>
31+
</g>
32+
</g>
33+
</g>
34+
</g>
35+
</svg>
36+
);
37+
};

‎src/common/components/icons/WalletIcon.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
3+
export const WalletIcon: React.FunctionComponent = () => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
>
11+
<g fill="none" fillRule="evenodd">
12+
<g>
13+
<g>
14+
<g>
15+
<g>
16+
<path
17+
d="M0 0H24V24H0z"
18+
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18)"
19+
/>
20+
<path
21+
fill="currentColor"
22+
d="M2 8H19V9H2zM5 12H9V13H5zM5 19H21V20H5z"
23+
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18)"
24+
/>
25+
<path
26+
fill="currentColor"
27+
d="M22 8v12h-1V9c0-.552.448-1 1-1z"
28+
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18) rotate(180 21.5 14)"
29+
/>
30+
<path
31+
stroke="currentColor"
32+
d="M18 4.5l.5 11.5-15.5.5L2.5 5 18 4.5z"
33+
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18)"
34+
/>
35+
</g>
36+
</g>
37+
</g>
38+
</g>
39+
</g>
40+
</svg>
41+
);
42+
};

0 commit comments

Comments
 (0)