Skip to content

Commit

Permalink
feat: add Learn path, change menu icons to use the new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@scorebreaker
scorebreaker committed Mar 30, 2021
1 parent a336fcd commit a6058ff
Show file tree
Hide file tree
Showing 24 changed files with 604 additions and 16 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"react-number-format": "^4.4.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-youtube": "7.13.1",
"rxjs": "^6.6.3",
"socket.io-client": "^2.3.1",
"xterm": "^4.9.0",
Expand All @@ -44,7 +45,6 @@
"@storybook/preset-create-react-app": "^3.1.6",
"@storybook/react": "^6.1.21",
"@storybook/theming": "^6.1.21",
"storybook-react-router": "^1.0.8",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
Expand All @@ -61,6 +61,7 @@
"cross-env": "^7.0.2",
"eslint-plugin-jest": "^24.0.2",
"prettier": "^2.1.2",
"storybook-react-router": "^1.0.8",
"ts-jest": "^26.4.0",
"typescript": "^3.7.5"
},
Expand Down
3 changes: 2 additions & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
<meta name="theme-color" content="#303030" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
content="script-src 'self' 'unsafe-inline' www.youtube.com;"
/>

<link rel="shortcut icon" href="%PUBLIC_URL%/assets/favicon.ico" />
<link
rel="stylesheet"
Expand Down
47 changes: 47 additions & 0 deletions src/common/components/icons/ConsoleIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from "react";

export const ConsoleIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<g>
<path
d="M0 0H24V24H0z"
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18)"
/>
<path
fill="currentColor"
d="M13 15H18V16H13z"
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18) matrix(-1 0 0 1 31 0)"
/>
<path
stroke="currentColor"
d="M21 2.5l.5 16.5-18.5.5L2.5 3 21 2.5z"
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18)"
/>
<path
fill="currentColor"
d="M6.036 10.5l-.001 4h4v1h-5v-5h1z"
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18) scale(-1 1) rotate(45 0 -5.192)"
/>
<path
stroke="currentColor"
d="M3.5 6.5H20.5V7.5H3.5z"
transform="translate(-108 -536) translate(80 50) translate(0 468) translate(28 18)"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
38 changes: 38 additions & 0 deletions src/common/components/icons/LearnIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";

export const LearnIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<g transform="translate(-108 -596) translate(80 50) translate(0 528) translate(28 18)">
<path d="M0 0H24V24H0z" />
<rect
width="19"
height="14"
x="2.5"
y="3.5"
stroke="currentColor"
rx="1"
/>
<path stroke="currentColor" d="M6.5 20.5H17.5V21.5H6.5z" />
<path
stroke="currentColor"
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"
transform="rotate(90 13 10.5)"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
31 changes: 31 additions & 0 deletions src/common/components/icons/MMBotIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react";

export const MMBotIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g transform="translate(-108 -296) translate(80 50) translate(13 204) translate(15 42)">
<path d="M0 0H24V24H0z" />
<path stroke="currentColor" d="M4.5 8.5H19.5V19.5H4.5z" />
<path
fill="currentColor"
d="M12 9L7.757 4.757 8.464 4.05 12 7.586 15.536 4.05 16.243 4.757zM2 11H3V17H2zM21 11H22V17H21z"
/>
<circle cx="9" cy="14" r="1.5" stroke="currentColor" />
<circle cx="15" cy="14" r="1.5" stroke="currentColor" />
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
43 changes: 43 additions & 0 deletions src/common/components/icons/OverviewIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react";

export const OverviewIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<path
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"
transform="translate(-108 -236) translate(80 50) translate(13 144)"
/>
<g>
<path
fillRule="nonzero"
d="M0 0H24V24H0z"
transform="translate(-108 -236) translate(80 50) translate(13 144) translate(15 42)"
/>
<path
stroke="currentColor"
strokeLinecap="square"
d="M4.5 21L4.5 9 2 11 12 3 22 11 19.5 9 19.5 21z"
transform="translate(-108 -236) translate(80 50) translate(13 144) translate(15 42)"
/>
<path
stroke="currentColor"
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"
transform="translate(-108 -236) translate(80 50) translate(13 144) translate(15 42)"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
36 changes: 36 additions & 0 deletions src/common/components/icons/SettingsIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from "react";

export const SettingsIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<g transform="translate(-108 -784) translate(80 50) translate(0 716) translate(28 18)">
<path d="M0 0H24V24H0z" />
<path
fillRule="nonzero"
stroke="currentColor"
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"
/>
<circle
cx="12"
cy="12"
r="2.5"
fillRule="nonzero"
stroke="currentColor"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
43 changes: 43 additions & 0 deletions src/common/components/icons/TradeHistoryIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react";

export const TradeHistoryIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<g>
<path
d="M0 0H24V24H0z"
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18)"
/>
<path
fill="currentColor"
fillRule="nonzero"
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"
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18) matrix(-1 0 0 1 24.987 0)"
/>
<path
fill="currentColor"
d="M12 7L13 7 13 14 12 14zM1 12L6 12 3.5 15.054z"
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18)"
/>
<path
fill="currentColor"
d="M13.5 9.5L14.5 9.5 14.5 15.5 13.5 15.5z"
transform="translate(-108 -416) translate(80 50) translate(0 348) translate(28 18) rotate(90 14 12.5)"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
37 changes: 37 additions & 0 deletions src/common/components/icons/TradeIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from "react";

export const TradeIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<g>
<path
d="M0 0H24V24H0z"
transform="translate(-108 -356) translate(80 50) translate(0 288) translate(28 18)"
/>
<path
stroke="currentColor"
d="M8.5 4.207V7.5h9v3H2.207L8.5 4.207z"
transform="translate(-108 -356) translate(80 50) translate(0 288) translate(28 18)"
/>
<path
stroke="currentColor"
d="M12.97 14.16v3.34h9.53v3H6.258l6.712-6.34z"
transform="translate(-108 -356) translate(80 50) translate(0 288) translate(28 18) rotate(180 14 17)"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
42 changes: 42 additions & 0 deletions src/common/components/icons/WalletIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from "react";

export const WalletIcon: React.FunctionComponent = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<g>
<g>
<g>
<g>
<path
d="M0 0H24V24H0z"
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18)"
/>
<path
fill="currentColor"
d="M2 8H19V9H2zM5 12H9V13H5zM5 19H21V20H5z"
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18)"
/>
<path
fill="currentColor"
d="M22 8v12h-1V9c0-.552.448-1 1-1z"
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18) rotate(180 21.5 14)"
/>
<path
stroke="currentColor"
d="M18 4.5l.5 11.5-15.5.5L2.5 5 18 4.5z"
transform="translate(-108 -476) translate(80 50) translate(0 408) translate(28 18)"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
Loading

0 comments on commit a6058ff

Please sign in to comment.