Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add Learn path, change menu icons to use the new design #32

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add Learn path, change menu icons to use the new design #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf52f71
feat: add Learn path, change menu icons to use the new design
scorebreaker Mar 30, 2021
9fec7ee
feat: fetch youtube videos dynamically, move menu icons into one story
scorebreaker Apr 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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