diff --git a/package-lock.json b/package-lock.json
index 96c29275f63d90e697c12f03596a3cdcf96fa6d1..70cf0fc9dc080e9d822784c67c5d1ec746d75869 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1570,6 +1570,18 @@
"loader-utils": "^1.1.0"
}
},
+ "@trendmicro/react-sidenav": {
+ "version": "0.4.5",
+ "resolved": "https://registry.npmjs.org/@trendmicro/react-sidenav/-/react-sidenav-0.4.5.tgz",
+ "integrity": "sha512-smCo/Kdb9VI0Sylk96UhFB0mFKmcUo3oioeNrXy2KZVszO8/eVanNFj06Nw4D8vG+EMJSqnsdUTZ1+Lb0pn5jg==",
+ "requires": {
+ "chained-function": "^0.5.0",
+ "classnames": "^2.2.5",
+ "prop-types": "^15.6.0",
+ "uncontrollable": "^4.1.0",
+ "warning": "^3.0.0"
+ }
+ },
"@types/babel__core": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.2.tgz",
@@ -3163,6 +3175,11 @@
"resolved": "https://registry.npmjs.org/ccount/-/ccount-1.0.4.tgz",
"integrity": "sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w=="
},
+ "chained-function": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/chained-function/-/chained-function-0.5.0.tgz",
+ "integrity": "sha1-JWS73994AxlL6/daayvQQe3iOzo="
+ },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3733,6 +3750,11 @@
}
}
},
+ "classnames": {
+ "version": "2.2.6",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+ "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+ },
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -13056,6 +13078,14 @@
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
"integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
},
+ "uncontrollable": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-4.1.0.tgz",
+ "integrity": "sha1-4DWCkSUuGGUiLZCTmxny9J+Bwak=",
+ "requires": {
+ "invariant": "^2.1.0"
+ }
+ },
"unicode-canonical-property-names-ecmascript": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -13424,6 +13454,14 @@
"makeerror": "1.0.x"
}
},
+ "warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 3ff5ae0cc3f26ac2ddfe912b874f79b4cb4f5d0f..92668a6dece98edfbe4f0154adc18fc99f496d93 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@babel/core": "^7.0.0",
+ "@trendmicro/react-sidenav": "^0.4.5",
"@types/d3-array": "^1.2.6",
"@types/roslib": "^0.18.3",
"bootstrap": "^4.3.1",
@@ -14,7 +15,7 @@
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"prop-types": "^15.7.2",
- "react": "^16.7.0",
+ "react": "^16.8.6",
"react-dom": "^16.7.0",
"react-jsonschema-form": "^1.5.0",
"react-numeric-input": "^2.2.3",
diff --git a/public/LearnMore.css b/public/LearnMore.css
index 5e26f665e8fc3cb94b8ede9f8fa92cc6987e2b25..58cd379e8a90c79317e69d6eb55cc36d958e9f29 100644
--- a/public/LearnMore.css
+++ b/public/LearnMore.css
@@ -11,15 +11,15 @@ h1 {
color: #edc61b;
text-align:center;
font-weight: bold;
- margin-top: 1.2em;
+ margin-top: 1.2vh;
}
h2 {
color:#383838;
font-weight: bold;
text-align: center;
- margin-top: 2em;
- margin-bottom: 2em;
+ margin-top: 2vh;
+ margin-bottom: 2vh;
}
p {
@@ -32,7 +32,7 @@ p {
display:block;
float:left;
width: 500px;
- margin: 0px 1.5em 1.5em 0px;
+ margin: 0px 1.5vw 1.5vh 0px;
border-radius: 10px;
}
@@ -49,7 +49,7 @@ p {
width: auto;
padding: 10px 20px 10px 20px;
position: absolute;
- top: 1em;
+ top: 1vh;
right: 15%;
}
diff --git a/public/dark.css b/public/dark.css
index f5fb6bcd642941b1b89cb640ec90bfb612bf4606..224a214a17cf4b122d673a488b73b60f6d2bc382 100755
--- a/public/dark.css
+++ b/public/dark.css
@@ -134,7 +134,7 @@
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__tab_button_overflow {
@@ -147,7 +147,7 @@
font-size: 10px;
color:lightgray;
font-family: Arial, sans-serif;
- background: transparent url("images/baseline-more_horiz-24px.svg") no-repeat left;
+ background: transparent url("images/icons/more_horiz.svg") no-repeat left;
}
.flexlayout__tabset_header
@@ -205,7 +205,7 @@
height:20px;
border:none;
outline-width: 0;
- background: transparent url("images/baseline-fullscreen-24px.svg") no-repeat center;
+ background: transparent url("images/icons/fullscreen.svg") no-repeat center;
}
.flexlayout__tab_toolbar_button-max {
@@ -213,7 +213,7 @@
height:20px;
border:none;
outline-width: 0;
- background: transparent url("images/baseline-fullscreen_exit-24px.svg") no-repeat center;
+ background: transparent url("images/icons/fullscreen_exit.svg") no-repeat center;
}
.flexlayout__popup_menu {
@@ -336,7 +336,7 @@
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing{
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
}
diff --git a/public/images/baseline-close-24px.svg b/public/images/baseline-close-24px.svg
deleted file mode 100644
index dea86781d3ed7f12339a84930570bc4788e89803..0000000000000000000000000000000000000000
--- a/public/images/baseline-close-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/public/images/icons/1-yellow.svg b/public/images/icons/1-yellow.svg
deleted file mode 100644
index bb75fe8a0a61cbf386dcb711931277015d091252..0000000000000000000000000000000000000000
--- a/public/images/icons/1-yellow.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>numbers/solid/green</title>
- <desc>Created with Sketch.</desc>
- <g id="numbers/solid/green" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="green">
- <circle id="Oval-2" fill="#EDC61B" cx="11" cy="11" r="11"></circle>
- <text id="1" font-family="Roboto-Bold, Roboto" font-size="11" font-weight="bold" letter-spacing="0.1833334" fill="#FFFFFF">
- <tspan x="8.25281572" y="15">1</tspan>
- </text>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/2-yellow.svg b/public/images/icons/2-yellow.svg
deleted file mode 100644
index d563920974bcd0db70653e5e5dc90dde03f13b40..0000000000000000000000000000000000000000
--- a/public/images/icons/2-yellow.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>numbers/solid/orange</title>
- <desc>Created with Sketch.</desc>
- <g id="numbers/solid/orange" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="orange">
- <circle id="Oval-2" fill="#EDC61B" cx="11" cy="11" r="11"></circle>
- <text id="2" font-family="Roboto-Bold, Roboto" font-size="11" font-weight="bold" letter-spacing="0.1833334" fill="#FFFFFF">
- <tspan x="8.25281572" y="15">2</tspan>
- </text>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/3-yellow.svg b/public/images/icons/3-yellow.svg
deleted file mode 100644
index 1e9803fb960e77a2a3341b83f2b2377d6eb1030c..0000000000000000000000000000000000000000
--- a/public/images/icons/3-yellow.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>numbers/solid/blue</title>
- <desc>Created with Sketch.</desc>
- <g id="numbers/solid/blue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="blue">
- <circle id="Oval-2" fill="#EDC61B" cx="11" cy="11" r="11"></circle>
- <text id="3" font-family="Roboto-Bold, Roboto" font-size="11" font-weight="bold" letter-spacing="0.1833334" fill="#FFFFFF">
- <tspan x="8.25281572" y="15">3</tspan>
- </text>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/4-yellow.svg b/public/images/icons/4-yellow.svg
deleted file mode 100644
index e736e0784e1670ff814fae1e9a5b1618191d48ce..0000000000000000000000000000000000000000
--- a/public/images/icons/4-yellow.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>numbers/solid/yellow</title>
- <desc>Created with Sketch.</desc>
- <g id="numbers/solid/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="yellow">
- <circle id="Oval-2" fill="#FFC539" cx="11" cy="11" r="11"></circle>
- <text id="4" font-family="Roboto-Bold, Roboto" font-size="11" font-weight="bold" letter-spacing="0.1833334" fill="#FFFFFF">
- <tspan x="7.25281572" y="15">4</tspan>
- </text>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/about.svg b/public/images/icons/about.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d62ea3bd7fd7092376e3a9e9fe5e1012fe80e587
--- /dev/null
+++ b/public/images/icons/about.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 34 34" height="34px" id="Layer_1" version="1.1" viewBox="0 0 34 34" width="34px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M17.123,9.2c-1.44,0-2.642,0.503-3.604,1.32S11.994,12,11.832,14h2.937c0.064-1,0.303-1.231,0.716-1.611 s0.926-0.618,1.541-0.618c0.615,0,1.116,0.174,1.504,0.571c0.389,0.396,0.583,0.882,0.583,1.48s-0.187,1.094-0.558,1.499 l-1.772,1.769c-0.518,0.518-0.626,0.934-0.78,1.249C15.849,18.654,16,19.133,16,19.78V21h2v-0.832c0-0.646,0.289-1.148,0.581-1.504 c0.112-0.129,0.333-0.287,0.521-0.473c0.186-0.187,0.448-0.405,0.715-0.656c0.267-0.25,0.5-0.457,0.662-0.619 c0.161-0.161,0.404-0.437,0.712-0.825c0.533-0.647,0.805-1.456,0.805-2.427c0-1.408-0.45-2.503-1.356-3.289 C19.732,9.592,18.563,9.2,17.123,9.2z" fill="black"/><path d="M16.94,22.145c-0.51,0-0.946,0.179-1.311,0.534c-0.364,0.356-0.546,0.78-0.546,1.274 c0,0.493,0.186,0.914,0.558,1.262c0.372,0.348,0.813,0.521,1.322,0.521c0.51,0,0.947-0.178,1.311-0.533 c0.363-0.356,0.546-0.781,0.546-1.274s-0.187-0.914-0.559-1.263C17.891,22.318,17.45,22.145,16.94,22.145z" fill="black"/><path d="M17,0C7.611,0,0,7.611,0,17s7.611,17,17,17s17-7.611,17-17S26.389,0,17,0z M17,31C9.268,31,3,24.732,3,17 C3,9.268,9.268,3,17,3c7.732,0,14,6.268,14,14C31,24.732,24.732,31,17,31z" fill="black"/></g></svg>
diff --git a/public/images/icons/add-yellow.svg b/public/images/icons/add-yellow.svg
deleted file mode 100644
index 6e4e71ce7e74be9a193687fd81294188b8941fcb..0000000000000000000000000000000000000000
--- a/public/images/icons/add-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>Icon / Add / yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <polygon id="path-1" points="11 5 11 11 5 11 5 13 11 13 11 19 13 19 13 13 19 13 19 11 13 11 13 5"></polygon>
- </defs>
- <g id="Icon-/-Add-/-yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="Mask" fill="#EDC61B" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/backtostart.svg b/public/images/icons/backtostart.svg
index 3239ab5ed7c917fab875614776d018600d90b527..90503f3afc14786ce8b59905bc7407a2bb0a3db7 100644
--- a/public/images/icons/backtostart.svg
+++ b/public/images/icons/backtostart.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/checkbox-off.svg b/public/images/icons/checkbox-off.svg
index 6e0645c6ae32a35259ac0db0e94f8a6d8b2dd956..c0ce60ac320417b5d57a10d8961a73097af044b3 100644
--- a/public/images/icons/checkbox-off.svg
+++ b/public/images/icons/checkbox-off.svg
@@ -12,9 +12,9 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="ic_check_box_outline_blank_24px" fill-rule="nonzero"></g>
- <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54" fill-rule="evenodd">
+ <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/chevron_left.svg b/public/images/icons/chevron_left.svg
index 967c714012b064d7901c04c58621b8a75096ef3e..4765c50bf7d49da6da3cdfa7e78a50fa172bf5f3 100644
--- a/public/images/icons/chevron_left.svg
+++ b/public/images/icons/chevron_left.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/navigation/chevron_left_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/choice-grey.svg b/public/images/icons/choice-grey.svg
index 4bc70c8a0b986eb879f49146321384ab36c880e8..3afd4c0fe644bae14aead7efdc322bbb1ee9a989 100644
--- a/public/images/icons/choice-grey.svg
+++ b/public/images/icons/choice-grey.svg
@@ -10,6 +10,6 @@
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
- <use id="icon/device/usb_24px" fill-opacity="0.5" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 11.594159) rotate(90.000000) translate(-12.000000, -11.594159) " xlink:href="#path-1"></use>
+ <use id="icon/device/usb_24px" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 11.594159) rotate(90.000000) translate(-12.000000, -11.594159) " xlink:href="#path-1"></use>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/choice-yellow.svg b/public/images/icons/choice-yellow.svg
deleted file mode 100644
index d9f233d70711381b45c79787b88b2cf479609a6f..0000000000000000000000000000000000000000
--- a/public/images/icons/choice-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/device/choice/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M16.995057,7.51947534 L15.1058407,11.0941593 L16.1058407,11.0941593 L16.1058407,13.0941593 L13.1058407,13.0941593 L13.1058407,5.09415935 L15.1058407,5.09415935 L12.1058407,1.09415935 L9.10584065,5.09415935 L11.1058407,5.09415935 L11.1058407,13.0941593 L8.10584065,13.0941593 L8.10584065,11.0941593 L9.10584065,11.0941593 L7.24367516,7.52415935 L4.89415935,11.0941593 L6.10584065,11.0941593 L6.10584065,13.0941593 C6.10584065,14.2041593 6.99584065,15.0941593 8.10584065,15.0941593 L11.1058407,15.0941593 L11.1058407,18.1441593 L11.1058407,22.0941593 L12.1002376,22.0941593 L13.1058407,22.0941593 L13.1058407,18.1441593 L13.1058407,15.0941593 L16.1058407,15.0941593 C17.2158407,15.0941593 18.1058407,14.2041593 18.1058407,13.0941593 L18.1058407,11.0941593 L19.1058407,11.0941593 L16.995057,7.51947534 Z" id="path-1"></path>
- </defs>
- <g id="icon/device/choice/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/device/usb_24px" fill="#EDC61B" fill-rule="nonzero" transform="translate(12.000000, 11.594159) rotate(90.000000) translate(-12.000000, -11.594159) " xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/copy-grey.svg b/public/images/icons/copy-grey.svg
index 25efcd384468530c4a6107a360efc8c0a106704a..cd5fe5a3b589eba1713d14d4a32805951ddd01b5 100644
--- a/public/images/icons/copy-grey.svg
+++ b/public/images/icons/copy-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/content/file_copy_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/copy-yellow.svg b/public/images/icons/copy-yellow.svg
deleted file mode 100644
index 8b977cf992f3cb41070e23086dab4755bf110e4d..0000000000000000000000000000000000000000
--- a/public/images/icons/copy-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/content/file_copy/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M17,1 L5,1 C3.9,1 3,1.9 3,3 L3,17 L5,17 L5,3 L17,3 L17,1 Z M16,5 L22,11 L22,21 C22,22.1 21.1,23 20,23 L8.99,23 C7.89,23 7,22.1 7,21 L7.01,7 C7.01,5.9 7.9,5 9,5 L16,5 Z M15,12 L20.5,12 L15,6.5 L15,12 Z" id="path-1"></path>
- </defs>
- <g id="icon/content/file_copy/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/content/file_copy_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/dashboard-grey.svg b/public/images/icons/dashboard-grey.svg
index 5a3f6fee7a86aac5a12fadc67d922ebcac1989ca..0f07f0589b677f7c26e5bfc3fb714a9ca5a4f6fa 100644
--- a/public/images/icons/dashboard-grey.svg
+++ b/public/images/icons/dashboard-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/dashboard_24px" fill-rule="nonzero"></g>
- <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/dashboard-yellow.svg b/public/images/icons/dashboard-yellow.svg
deleted file mode 100644
index 61d515144d62444b97f40836647a088c0976b729..0000000000000000000000000000000000000000
--- a/public/images/icons/dashboard-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/action/dashboard/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M3,13 L11,13 L11,3 L3,3 L3,13 Z M3,21 L11,21 L11,15 L3,15 L3,21 Z M13,21 L21,21 L21,11 L13,11 L13,21 Z M13,3 L13,9 L21,9 L21,3 L13,3 Z" id="path-1"></path>
- </defs>
- <g id="icon/action/dashboard/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/action/dashboard_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/delete-grey.svg b/public/images/icons/delete-grey.svg
index a482ebd73823e55410a4179012fb9cd5d05ba042..c3b913531b177d145d0d49a52453624534dc2cdb 100644
--- a/public/images/icons/delete-grey.svg
+++ b/public/images/icons/delete-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/delete_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/delete-yellow.svg b/public/images/icons/delete-yellow.svg
deleted file mode 100644
index 1599b40f8f56b332c16b90a15d72c07cfa8ede89..0000000000000000000000000000000000000000
--- a/public/images/icons/delete-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/action/delete/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M6,19 C6,20.1 6.9,21 8,21 L16,21 C17.1,21 18,20.1 18,19 L18,7 L6,7 L6,19 Z M19,4 L15.5,4 L14.5,3 L9.5,3 L8.5,4 L5,4 L5,6 L19,6 L19,4 Z" id="path-1"></path>
- </defs>
- <g id="icon/action/delete/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/action/delete_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/download.svg b/public/images/icons/download.svg
index 62620731fc33fb979b466bdb1367f8abb69a6a3e..f52d9bc90c183bb1136dec397950626afc108441 100644
--- a/public/images/icons/download.svg
+++ b/public/images/icons/download.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/edit-grey.svg b/public/images/icons/edit-grey.svg
index e3f220d739dd4bce78599f4dbe8418dc0e72e496..7e0357452f28068e62f90f86b4d4ceda3a8ab240 100644
--- a/public/images/icons/edit-grey.svg
+++ b/public/images/icons/edit-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/content/create_24px" fill-rule="nonzero"></g>
- <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/edit-yellow.svg b/public/images/icons/edit-yellow.svg
deleted file mode 100644
index 329d9347dca4ba75840e54fb584080535b98e2ff..0000000000000000000000000000000000000000
--- a/public/images/icons/edit-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/content/create/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M3,17.25 L3,21 L6.75,21 L17.81,9.94 L14.06,6.19 L3,17.25 Z M20.71,7.04 C21.1,6.65 21.1,6.02 20.71,5.63 L18.37,3.29 C17.98,2.9 17.35,2.9 16.96,3.29 L15.13,5.12 L18.88,8.87 L20.71,7.04 Z" id="path-1"></path>
- </defs>
- <g id="icon/content/create/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/content/create_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/fast_forward-grey.svg b/public/images/icons/fast_forward-grey.svg
index 023c160b78f00e61f41b76d12a9d72459fbd29d7..3c7dc343c4aac2c4d93e6b4d19227578f74c9a89 100644
--- a/public/images/icons/fast_forward-grey.svg
+++ b/public/images/icons/fast_forward-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/fast_forward_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/fast_rewing-grey.svg b/public/images/icons/fast_rewing-grey.svg
index 50df25a6d576c2bee938d4cfe82a8e879a5e8e7c..0bed253da56392e9e10e52a08bb20088e7b9df9b 100644
--- a/public/images/icons/fast_rewing-grey.svg
+++ b/public/images/icons/fast_rewing-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/fast_rewind_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/fingerprint-grey.svg b/public/images/icons/fingerprint-grey.svg
index 57164f295f13ec07ca1f0ba1502ad0fc928a41c8..64bf46c2d48a1e219b72c260a39267fcd7ec2831 100644
--- a/public/images/icons/fingerprint-grey.svg
+++ b/public/images/icons/fingerprint-grey.svg
@@ -12,9 +12,9 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/fingerprint_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" stroke-width="1" fill-rule="evenodd" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" stroke-width="1" fill-rule="evenodd" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/baseline-fullscreen-24px.svg b/public/images/icons/fullscreen.svg
similarity index 100%
rename from public/images/baseline-fullscreen-24px.svg
rename to public/images/icons/fullscreen.svg
diff --git a/public/images/baseline-fullscreen_exit-24px.svg b/public/images/icons/fullscreen_exit.svg
similarity index 100%
rename from public/images/baseline-fullscreen_exit-24px.svg
rename to public/images/icons/fullscreen_exit.svg
diff --git a/public/images/icons/info-grey-outline.svg b/public/images/icons/info-grey-outline.svg
index 6e7287b7d09ff9967998695bfb2f8125647e5969..9abe9087b1192be9c3103fc8918e29b6e19ed8d7 100644
--- a/public/images/icons/info-grey-outline.svg
+++ b/public/images/icons/info-grey-outline.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/info_outline_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/info-grey.svg b/public/images/icons/info-grey.svg
index 5fa9663b8c5164f4aff63c11ab3313fcaddfad9b..c6d6246f738cda49488f5f23d29e9e16b75eecf5 100644
--- a/public/images/icons/info-grey.svg
+++ b/public/images/icons/info-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/info_24px" fill-rule="nonzero"></g>
- <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/info-yellow.svg b/public/images/icons/info-yellow.svg
deleted file mode 100644
index 9059507667b438e788c56176b91400aa32ecea6d..0000000000000000000000000000000000000000
--- a/public/images/icons/info-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/action/info/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z M13,17 L11,17 L11,11 L13,11 L13,17 Z M13,9 L11,9 L11,7 L13,7 L13,9 Z" id="path-1"></path>
- </defs>
- <g id="icon/action/info/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/action/info_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/learning-grey.svg b/public/images/icons/learning-grey.svg
index 49c2d0d441b3f8fceb0c639aed5ac0329cf8ba3c..34e83e6708f38eb9319cf78446594c0b8fe90c77 100644
--- a/public/images/icons/learning-grey.svg
+++ b/public/images/icons/learning-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/social/school_24px" fill-rule="nonzero"></g>
- <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="✱-/-Color-/-Icons-/-Black-/-Inactive" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/learning-yellow.svg b/public/images/icons/learning-yellow.svg
deleted file mode 100644
index 57f0bcb078358f51148b3f5c4e0bf6d45a9e9ab4..0000000000000000000000000000000000000000
--- a/public/images/icons/learning-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/social/school/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M5,13.18 L5,17.18 L12,21 L19,17.18 L19,13.18 L12,17 L5,13.18 Z M12,3 L1,9 L12,15 L21,10.09 L21,17 L23,17 L23,9 L12,3 Z" id="path-1"></path>
- </defs>
- <g id="icon/social/school/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/social/school_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/lock_closed-grey.svg b/public/images/icons/lock_closed-grey.svg
index 05d3797905c4c5d6ec1a122f12f01081c20d8713..3d97ede95e8ebdcaadf46db97f0fbe6ac301d51b 100644
--- a/public/images/icons/lock_closed-grey.svg
+++ b/public/images/icons/lock_closed-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/lock_outline_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/lock_open-grey.svg b/public/images/icons/lock_open-grey.svg
index 716255c04439209b4241f909ed999485b2337b23..485acf90d6c096d54227bd2baf37c3a9b20b7295 100644
--- a/public/images/icons/lock_open-grey.svg
+++ b/public/images/icons/lock_open-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/lock_open_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/memory-grey.svg b/public/images/icons/memory-grey.svg
index feba2419bc49491fa61ebe2e40a3ba93b5737495..84b090d0e7328a21120a270dfab6156f2356dfd7 100644
--- a/public/images/icons/memory-grey.svg
+++ b/public/images/icons/memory-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/hardware/memory_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/memory-yellow.svg b/public/images/icons/memory-yellow.svg
deleted file mode 100644
index 06e64be3c48363f33482d3c8b1821c85ba18cf68..0000000000000000000000000000000000000000
--- a/public/images/icons/memory-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/hardware/memory/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M15,9 L9,9 L9,15 L15,15 L15,9 Z M13,13 L11,13 L11,11 L13,11 L13,13 Z M21,11 L21,9 L19,9 L19,7 C19,5.9 18.1,5 17,5 L15,5 L15,3 L13,3 L13,5 L11,5 L11,3 L9,3 L9,5 L7,5 C5.9,5 5,5.9 5,7 L5,9 L3,9 L3,11 L5,11 L5,13 L3,13 L3,15 L5,15 L5,17 C5,18.1 5.9,19 7,19 L9,19 L9,21 L11,21 L11,19 L13,19 L13,21 L15,21 L15,19 L17,19 C18.1,19 19,18.1 19,17 L19,15 L21,15 L21,13 L19,13 L19,11 L21,11 Z M17,17 L7,17 L7,7 L17,7 L17,17 Z" id="path-1"></path>
- </defs>
- <g id="icon/hardware/memory/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/hardware/memory_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/microphone-grey.svg b/public/images/icons/microphone-grey.svg
index e69479563f7e90f200b9c200371815821f9a2504..b91d4063a8ae1c5019579d1fec13368198c0f041 100644
--- a/public/images/icons/microphone-grey.svg
+++ b/public/images/icons/microphone-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/hardware/keyboard_voice_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/microphone-yellow.svg b/public/images/icons/microphone-yellow.svg
deleted file mode 100644
index dece27872de578fb2c306237cfde826c11a5d31c..0000000000000000000000000000000000000000
--- a/public/images/icons/microphone-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/hardware/keyboard_voice/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M12,15 C13.66,15 14.99,13.66 14.99,12 L15,6 C15,4.34 13.66,3 12,3 C10.34,3 9,4.34 9,6 L9,12 C9,13.66 10.34,15 12,15 Z M17.3,12 C17.3,15 14.76,17.1 12,17.1 C9.24,17.1 6.7,15 6.7,12 L5,12 C5,15.42 7.72,18.23 11,18.72 L11,22 L13,22 L13,18.72 C16.28,18.24 19,15.42 19,12 L17.3,12 Z" id="path-1"></path>
- </defs>
- <g id="icon/hardware/keyboard_voice/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/hardware/keyboard_voice_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/mood-grey.svg b/public/images/icons/mood-grey.svg
index fc91f8f996987020112850c853f2e8d73603b89a..90a6ba67ced35fcbef83c107868e9d37d5ebf7de 100644
--- a/public/images/icons/mood-grey.svg
+++ b/public/images/icons/mood-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/communication/sentiment_satisfied_alt_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/mood-yellow.svg b/public/images/icons/mood-yellow.svg
deleted file mode 100644
index ac7619956eebbf072bd4f2bf5f026d4599b994f4..0000000000000000000000000000000000000000
--- a/public/images/icons/mood-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/communication/sentiment_satisfied_alt/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M15.5,11 C16.3284271,11 17,10.3284271 17,9.5 C17,8.67157288 16.3284271,8 15.5,8 C14.6715729,8 14,8.67157288 14,9.5 C14,10.3284271 14.6715729,11 15.5,11 Z M8.5,11 C9.32842712,11 10,10.3284271 10,9.5 C10,8.67157288 9.32842712,8 8.5,8 C7.67157288,8 7,8.67157288 7,9.5 C7,10.3284271 7.67157288,11 8.5,11 Z M11.99,2 C6.47,2 2,6.48 2,12 C2,17.52 6.47,22 11.99,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 11.99,2 Z M12,20 C7.58,20 4,16.42 4,12 C4,7.58 7.58,4 12,4 C16.42,4 20,7.58 20,12 C20,16.42 16.42,20 12,20 Z M12,16 C10.52,16 9.25,15.19 8.55,14 L6.88,14 C7.68,16.05 9.67,17.5 12,17.5 C14.33,17.5 16.32,16.05 17.12,14 L15.45,14 C14.76,15.19 13.48,16 12,16 Z" id="path-1"></path>
- </defs>
- <g id="icon/communication/sentiment_satisfied_alt/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/communication/sentiment_satisfied_alt_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/baseline-more_horiz-24px.svg b/public/images/icons/more_horiz.svg
similarity index 100%
rename from public/images/baseline-more_horiz-24px.svg
rename to public/images/icons/more_horiz.svg
diff --git a/public/images/icons/pause-grey.svg b/public/images/icons/pause-grey.svg
index ed780e2a3119548a163c2f23c7b8596a03ddab28..5abdedf4e7afbef193aa475e5f9465982cac578e 100644
--- a/public/images/icons/pause-grey.svg
+++ b/public/images/icons/pause-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/pause_circle_outline_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/play-grey.svg b/public/images/icons/play-grey.svg
index 3d6012f45c3ef3c0f55bbc462421a9871b4d8ad7..ea438b27e2f6f1008576f6dcf584385336bbd202 100644
--- a/public/images/icons/play-grey.svg
+++ b/public/images/icons/play-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/play_circle_outline_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/question.svg b/public/images/icons/question.svg
index 1b8d3c779cc50876555708784d07705f6159341f..ecbb96c1404ea43da20e5dc6a91010e175bceeb2 100644
--- a/public/images/icons/question.svg
+++ b/public/images/icons/question.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/record_stop-grey.svg b/public/images/icons/record_stop-grey.svg
index 38f57be2ac06b0fed3da55ef0014c1880b96bd2d..b4a95566dc27b35b9682096269f3a3493c57a5cc 100644
--- a/public/images/icons/record_stop-grey.svg
+++ b/public/images/icons/record_stop-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/replay-grey.svg b/public/images/icons/replay-grey.svg
index b930273ee879f18be5be2e772d1f1925b458d6e5..9169e5987a477608926a414c1b20ef0fadab8119 100644
--- a/public/images/icons/replay-grey.svg
+++ b/public/images/icons/replay-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/replay_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/baseline-settings-20px.svg b/public/images/icons/settings.svg
similarity index 100%
rename from public/images/baseline-settings-20px.svg
rename to public/images/icons/settings.svg
diff --git a/public/images/icons/skip_next-grey.svg b/public/images/icons/skip_next-grey.svg
index d49f63722d41ebb1d62ac0333b646a131cc1cbd6..8a35d264cc9b1f540c1603d7a2c197036bb8fb1e 100644
--- a/public/images/icons/skip_next-grey.svg
+++ b/public/images/icons/skip_next-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/skip_next_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/skip_previous-grey.svg b/public/images/icons/skip_previous-grey.svg
index 741ad920e6f8c6567543a9db268ac84c864e4ec5..95f2d2929bcab47738f0fb8b8d92fbd642bca18a 100644
--- a/public/images/icons/skip_previous-grey.svg
+++ b/public/images/icons/skip_previous-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/skip_previous_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/touch-grey.svg b/public/images/icons/touch-grey.svg
index c8efcfe4c870afdaf1641c24061504d7e29f54fb..2eb5c2b96b212f29137f22af12d9004e4158a812 100644
--- a/public/images/icons/touch-grey.svg
+++ b/public/images/icons/touch-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/fingerprint_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/touch-yellow.svg b/public/images/icons/touch-yellow.svg
deleted file mode 100644
index 0df91a07e4b2c8c0a4bbef8b158ae8c8cd901846..0000000000000000000000000000000000000000
--- a/public/images/icons/touch-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/action/fingerprint/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M17.81,4.47 C17.73,4.47 17.65,4.45 17.58,4.41 C15.66,3.42 14,3 12.01,3 C10.03,3 8.15,3.47 6.44,4.41 C6.2,4.54 5.9,4.45 5.76,4.21 C5.63,3.97 5.72,3.66 5.96,3.53 C7.82,2.52 9.86,2 12.01,2 C14.14,2 16,2.47 18.04,3.52 C18.29,3.65 18.38,3.95 18.25,4.19 C18.16,4.37 17.99,4.47 17.81,4.47 Z M3.5,9.72 C3.4,9.72 3.3,9.69 3.21,9.63 C2.98,9.47 2.93,9.16 3.09,8.93 C4.08,7.53 5.34,6.43 6.84,5.66 C9.98,4.04 14,4.03 17.15,5.65 C18.65,6.42 19.91,7.51 20.9,8.9 C21.06,9.12 21.01,9.44 20.78,9.6 C20.55,9.76 20.24,9.71 20.08,9.48 C19.18,8.22 18.04,7.23 16.69,6.54 C13.82,5.07 10.15,5.07 7.29,6.55 C5.93,7.25 4.79,8.25 3.89,9.51 C3.81,9.65 3.66,9.72 3.5,9.72 Z M9.75,21.79 C9.62,21.79 9.49,21.74 9.4,21.64 C8.53,20.77 8.06,20.21 7.39,19 C6.7,17.77 6.34,16.27 6.34,14.66 C6.34,11.69 8.88,9.27 12,9.27 C15.12,9.27 17.66,11.69 17.66,14.66 C17.66,14.94 17.44,15.16 17.16,15.16 C16.88,15.16 16.66,14.94 16.66,14.66 C16.66,12.24 14.57,10.27 12,10.27 C9.43,10.27 7.34,12.24 7.34,14.66 C7.34,16.1 7.66,17.43 8.27,18.51 C8.91,19.66 9.35,20.15 10.12,20.93 C10.31,21.13 10.31,21.44 10.12,21.64 C10.01,21.74 9.88,21.79 9.75,21.79 Z M16.92,19.94 C15.73,19.94 14.68,19.64 13.82,19.05 C12.33,18.04 11.44,16.4 11.44,14.66 C11.44,14.38 11.66,14.16 11.94,14.16 C12.22,14.16 12.44,14.38 12.44,14.66 C12.44,16.07 13.16,17.4 14.38,18.22 C15.09,18.7 15.92,18.93 16.92,18.93 C17.16,18.93 17.56,18.9 17.96,18.83 C18.23,18.78 18.49,18.96 18.54,19.24 C18.59,19.51 18.41,19.77 18.13,19.82 C17.56,19.93 17.06,19.94 16.92,19.94 Z M14.91,22 C14.87,22 14.82,21.99 14.78,21.98 C13.19,21.54 12.15,20.95 11.06,19.88 C9.66,18.49 8.89,16.64 8.89,14.66 C8.89,13.04 10.27,11.72 11.97,11.72 C13.67,11.72 15.05,13.04 15.05,14.66 C15.05,15.73 15.98,16.6 17.13,16.6 C18.28,16.6 19.21,15.73 19.21,14.66 C19.21,10.89 15.96,7.83 11.96,7.83 C9.12,7.83 6.52,9.41 5.35,11.86 C4.96,12.67 4.76,13.62 4.76,14.66 C4.76,15.44 4.83,16.67 5.43,18.27 C5.53,18.53 5.4,18.82 5.14,18.91 C4.88,19.01 4.59,18.87 4.5,18.62 C4.01,17.31 3.77,16.01 3.77,14.66 C3.77,13.46 4,12.37 4.45,11.42 C5.78,8.63 8.73,6.82 11.96,6.82 C16.51,6.82 20.21,10.33 20.21,14.65 C20.21,16.27 18.83,17.59 17.13,17.59 C15.43,17.59 14.05,16.27 14.05,14.65 C14.05,13.58 13.12,12.71 11.97,12.71 C10.82,12.71 9.89,13.58 9.89,14.65 C9.89,16.36 10.55,17.96 11.76,19.16 C12.71,20.1 13.62,20.62 15.03,21.01 C15.3,21.08 15.45,21.36 15.38,21.62 C15.33,21.85 15.12,22 14.91,22 Z" id="path-1"></path>
- </defs>
- <g id="icon/action/fingerprint/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/action/fingerprint_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/trace-grey.svg b/public/images/icons/trace-grey.svg
index 480213a04aad6b24fa751c158f3bb26e7e355e7c..e2786c50c84b490d56731db839e3a861c575ab31 100644
--- a/public/images/icons/trace-grey.svg
+++ b/public/images/icons/trace-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/action/pets_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/trace-yellow.svg b/public/images/icons/trace-yellow.svg
deleted file mode 100644
index 79b4e6f6a8489717d0b4dbb4262a88fb98a06bf6..0000000000000000000000000000000000000000
--- a/public/images/icons/trace-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/action/pets/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M4.5,11.9979059 C5.88071187,11.9979059 7,10.8788782 7,9.49848758 C7,8.11809697 5.88071187,6.99906928 4.5,6.99906928 C3.11928813,6.99906928 2,8.11809697 2,9.49848758 C2,10.8788782 3.11928813,11.9979059 4.5,11.9979059 Z M9,7.9988366 C10.3807119,7.9988366 11.5,6.87980891 11.5,5.4994183 C11.5,4.11902769 10.3807119,3 9,3 C7.61928813,3 6.5,4.11902769 6.5,5.4994183 C6.5,6.87980891 7.61928813,7.9988366 9,7.9988366 Z M15,7.9988366 C16.3807119,7.9988366 17.5,6.87980891 17.5,5.4994183 C17.5,4.11902769 16.3807119,3 15,3 C13.6192881,3 12.5,4.11902769 12.5,5.4994183 C12.5,6.87980891 13.6192881,7.9988366 15,7.9988366 Z M19.5,11.9979059 C20.8807119,11.9979059 22,10.8788782 22,9.49848758 C22,8.11809697 20.8807119,6.99906928 19.5,6.99906928 C18.1192881,6.99906928 17,8.11809697 17,9.49848758 C17,10.8788782 18.1192881,11.9979059 19.5,11.9979059 Z M17.34,14.8572404 C16.47,13.8374777 15.74,12.9676802 14.86,11.9479175 C14.4,11.4080432 13.81,10.8681688 13.11,10.6282246 C13,10.588234 12.89,10.5582409 12.78,10.5382456 C12.53,10.4982549 12.26,10.4982549 12,10.4982549 C11.74,10.4982549 11.47,10.4982549 11.21,10.5482433 C11.1,10.5682386 10.99,10.5982316 10.88,10.6382223 C10.18,10.8781665 9.6,11.4180408 9.13,11.9579152 C8.26,12.9776778 7.53,13.8474754 6.65,14.8672381 C5.34,16.1769333 3.73,17.6265959 4.03,19.6561235 C4.32,20.6758862 5.05,21.6856512 6.36,21.9755837 C7.09,22.1255488 9.42,21.5356861 11.9,21.5356861 L12.08,21.5356861 C14.56,21.5356861 16.89,22.1155512 17.62,21.9755837 C18.93,21.6856512 19.66,20.6658885 19.95,19.6561235 C20.26,17.6165982 18.65,16.1669356 17.34,14.8572404 Z" id="path-1"></path>
- </defs>
- <g id="icon/action/pets/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/action/pets_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/icons/upload.svg b/public/images/icons/upload.svg
index b4089ff7e41ad48e8183b5d7e121efc36a26b97b..6417b9cf4442789e8ad263854a7216317ec95d1d 100644
--- a/public/images/icons/upload.svg
+++ b/public/images/icons/upload.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/video-grey.svg b/public/images/icons/video-grey.svg
index 69b094ed9c4abde2fc6feab5ec478a82b606f7c4..9e7f4f143ffb706cf91575442830827e7a390a4f 100644
--- a/public/images/icons/video-grey.svg
+++ b/public/images/icons/video-grey.svg
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<g id="icon/av/videocam_24px" fill-rule="nonzero"></g>
- <g id="↳-Color" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
+ <g id="↳-Color" mask="url(#mask-2)" fill="#000000">
<rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/images/icons/video-yellow.svg b/public/images/icons/video-yellow.svg
deleted file mode 100644
index 21480f0291bb437bdbe4168b9164ca9f34212be2..0000000000000000000000000000000000000000
--- a/public/images/icons/video-yellow.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
- <title>icon/av/videocam/yellow</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <path d="M17,10.5 L17,7 C17,6.45 16.55,6 16,6 L4,6 C3.45,6 3,6.45 3,7 L3,17 C3,17.55 3.45,18 4,18 L16,18 C16.55,18 17,17.55 17,17 L17,13.5 L21,17.5 L21,6.5 L17,10.5 Z" id="path-1"></path>
- </defs>
- <g id="icon/av/videocam/yellow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <mask id="mask-2" fill="white">
- <use xlink:href="#path-1"></use>
- </mask>
- <use id="icon/av/videocam_24px" fill="#EDC61B" fill-rule="nonzero" xlink:href="#path-1"></use>
- </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/readme-grey.svg b/public/images/readme-grey.svg
deleted file mode 100644
index 1e077e9d01995b93233caaeb2517ba4fd6d91698..0000000000000000000000000000000000000000
--- a/public/images/readme-grey.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
- <defs>
- <path id="a" d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
- </defs>
- <g fill="none" fill-rule="evenodd">
- <mask id="b" fill="#fff">
- <use xlink:href="#a"/>
- </mask>
- <g fill="#000" fill-opacity=".54" mask="url(#b)">
- <path d="M0 0h24v24H0z"/>
- </g>
- </g>
-</svg>
diff --git a/public/light-flat.css b/public/light-flat.css
index a94a76e701acac20729f91122d0152589285d0b5..a42b7d940cc63a848c85e849523ea057932df727 100755
--- a/public/light-flat.css
+++ b/public/light-flat.css
@@ -45,7 +45,17 @@ html,body
::-webkit-scrollbar-corner { background-color: #fff;}
::-webkit-resizer { background-color: #999;}
-#outer
+#level-1
+{
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-grow:1;
+}
+
+#level-2
{
display:flex;
flex-direction: column;
@@ -224,13 +234,13 @@ html,body
/* margin-top: 3px; */
width:10px;
height:10px;
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
}
/* .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
} */
.flexlayout__tab_button_overflow {
@@ -287,6 +297,7 @@ html,body
top:0;
bottom:0;
right:0;
+ filter: invert(14%) sepia(1%) saturate(2442%) hue-rotate(316deg) brightness(98%) contrast(77%);
}
.flexlayout__tab_toolbar_button-min {
@@ -294,19 +305,23 @@ html,body
height:20px;
border:none;
outline-width: 0;
- background: transparent url("images/baseline-fullscreen-24px.svg") no-repeat center;
+ background: transparent url("images/icons/fullscreen.svg") no-repeat center;
+}
+.flexlayout__tab_toolbar_button-min:hover {
+ filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(200%) contrast(86%);
}
+
.flexlayout__tab_toolbar_button-max {
width:20px;
height:20px;
border:none;
outline-width: 0;
- background: transparent url("images/baseline-fullscreen_exit-24px.svg") no-repeat center;
+ background: transparent url("images/icons/fullscreen_exit.svg") no-repeat center;
}
-.flexlayout__popup_menu {
-
+.flexlayout__tab_toolbar_button-max:hover {
+ filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(200%) contrast(86%);
}
.flexlayout__popup_menu_item {
@@ -423,7 +438,7 @@ html,body
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing{
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__border_toolbar_left {
diff --git a/public/light.css b/public/light.css
index 4b6deac00cb8614d1582e6cb7c05650544dd7848..ccba849f62215909e3f423bc668219585c441946 100755
--- a/public/light.css
+++ b/public/light.css
@@ -139,7 +139,7 @@
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__tab_button_overflow {
@@ -151,7 +151,7 @@
border:none;
font-size: 10px;
font-family: Arial, sans-serif;
- background: transparent url("images/baseline-more_horiz-24px.svg") no-repeat left;
+ background: transparent url("images/icons/more_horiz.svg") no-repeat left;
}
.flexlayout__tabset_header
@@ -206,7 +206,7 @@
height:20px;
border:none;
outline-width: 0;
- background: transparent url("images/baseline-fullscreen-24px.svg") no-repeat center;
+ background: transparent url("images/icons/fullscreen.svg") no-repeat center;
}
.flexlayout__tab_toolbar_button-max {
@@ -214,7 +214,7 @@
height:20px;
border:none;
outline-width: 0;
- background: transparent url("images/baseline-fullscreen_exit-24px.svg") no-repeat center;
+ background: transparent url("images/icons/fullscreen_exit.svg") no-repeat center;
}
.flexlayout__popup_menu {
@@ -335,7 +335,7 @@
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing{
- background: transparent url("images/baseline-close-24px.svg") no-repeat center;
+ background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__border_toolbar_left {
diff --git a/src/Board.js b/src/Board.js
index 6ce96b201a8341c2c616a9bbffc1c3c8b698116f..654d11c3cb5f659f201ec8c0024b17b00c2b8070 100755
--- a/src/Board.js
+++ b/src/Board.js
@@ -138,16 +138,16 @@ class Board extends React.Component {
// is the active (selected) tab configurable?
if ('configSchema' in component) {
renderValues.buttons.push(
- <img src="images/baseline-settings-20px.svg"
- alt="settings-test"
- key="settings-test"
+ <img src="images/icons/settings.svg"
+ alt="settings"
+ key="settings"
onClick={modeToggle("settings").bind(this)}/>
);
}
// does the active (selected) tab have a readme?
if ('readme' in component) {
renderValues.buttons.push(
- <img src="images/readme-grey.svg"
+ <img src="images/icons/info-grey-outline.svg"
alt="readme"
key="readme"
onClick={modeToggle("readme").bind(this)}/>
diff --git a/src/Common.css b/src/Common.css
index 9bef6693b4ecf9d24a8674226d7408573a7db958..517d051a856cfb874cdf1096b1c6c404b39eb209 100644
--- a/src/Common.css
+++ b/src/Common.css
@@ -34,4 +34,7 @@ i.glyphicon { display: none; }
.btn-add::after { content: 'Add'; }
.array-item-move-up::after { content: 'Move Up'; }
.array-item-move-down::after { content: 'Move Down'; }
-.array-item-remove::after { content: 'Remove'; }
\ No newline at end of file
+.array-item-remove::after { content: 'Remove'; }
+.tabset-button:hover {
+ filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(200%) contrast(86%);
+}
diff --git a/src/Header/Header.css b/src/Header/Header.css
index 6085593da83916cb205aee57a70f8f17fbe3d4f3..d9738c4ca7ee7aefbee55487ed5086ce8024b4c5 100644
--- a/src/Header/Header.css
+++ b/src/Header/Header.css
@@ -3,17 +3,10 @@
height: 110px;
}
-#header .logo {
- margin-left: 25px;
- padding-top: 5px;
- height: 90px;
- float: left;
-}
-
/* Name of this piece of software */
#header .title {
- width: 10%;
+ width: 10vw;
font-size: 35px;
font-weight: bold;
letter-spacing: 0.3px;
@@ -21,20 +14,20 @@
color: #edc61b;
line-height: 100px;
float: left;
- margin-left: 25px;
+ margin-left: 1vw;
}
/* Name of the algorithm being run */
#header .algo-name {
- width: 26%;
+ width: 26vw;
color: #383838;
font-size: 25px;
font-weight: bold;
text-align: center;
letter-spacing: 0.3px;
padding-top: 25px;
- padding-right: 9%;
+ padding-right: 8vw;
float:left;
}
@@ -50,7 +43,7 @@
#header .sleep {
vertical-align: center;
- width: 20.5% ;
+ width: 20.5vw ;
float:left;
padding-top: 20px;
line-height: 30px;
@@ -58,41 +51,15 @@
font-weight: bold;
color: #383838;
}
-/* About us button */
-.lavizu_btn {
- font-family: sans-serif;
- width:auto;
- display: inline-block;
- background: #edc71b;
- color:#fff;
- font-size: 25px;
- padding:10px 20px 10px 20px;
- border-radius: 10px;
- border:none;
- border-bottom:5px solid #ba9d1a;
- transition: all 0.2s;
- margin-left: 5%;
- text-decoration: none;
- margin-top: 30px;
-}
-.lavizu_btn:hover {
- border-bottom:7px solid #ba9d1a;
- transform: translateY(-2px);
- cursor: pointer;
-}
-.lavizu_btn:active {
- transition: all 0s;
- border-bottom:2px solid #ba9d1a;
- transform: translateY(2px);
-}
/* Buttons to control the algorithm's lifecycle : play/pause, restart, next step, etc. */
#header .controls {
- padding-right:4%;
- padding-left:4%;
+ padding-right:7vw;
+ padding-left:4vw;
padding-top: 20px;
float: left;
+ filter: invert(26%) sepia(0%) saturate(0%) hue-rotate(98deg) brightness(99%) contrast(91%);
}
#header .controls img {
diff --git a/src/Header/index.js b/src/Header/index.js
index 025a8ee1abba2c5668c51a712eb2dc48032fd966..41e6f238d9c025238b70f6139f37a52efc08286d 100644
--- a/src/Header/index.js
+++ b/src/Header/index.js
@@ -17,8 +17,6 @@ export function Header(props) {
})
return (
<div id="header">
- <img src={window.location.origin + "/images/logoBehaviors.png"} alt="logo of the Behaviors.ai project"
- className="logo"/>
<div className="title">
Lavizu
</div>
@@ -32,7 +30,6 @@ export function Header(props) {
<div className="block sleep">
<SleepDuration ros={props.ros}/>
</div>
- <a className="lavizu_btn" href="more.html">?</a>
</div>);
}
diff --git a/src/Menu/Menu.css b/src/Menu/Menu.css
new file mode 100644
index 0000000000000000000000000000000000000000..766d2accd01319ae911152c130edfefa1aef8a3b
--- /dev/null
+++ b/src/Menu/Menu.css
@@ -0,0 +1,417 @@
+/*! react-sidenav v0.4.5 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-sidenav */
+
+/* Menu level 1 title */
+.menu-title-level1 {
+ width: 100%;
+ height: 24px;
+ font-family: Lato;
+ font-size: 19px;
+ font-weight: 900;
+ font-style: bold;
+ font-stretch: normal;
+ line-height: normal;
+ letter-spacing: 0.2px;
+ color: #484848;
+ background-color:#d8d8d8;
+ padding-left: 20px;
+ margin: 1.2vh 0px 0.5vh 0px;
+ border-radius: 4px;
+}
+
+/* Menu level 2 title */
+.menu-title-level2 {
+ width: 100%;
+ height: 27px;
+ font-family: Lato;
+ font-size: 18px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ letter-spacing: 0.2px;
+ color: #484848;
+ padding-left: 20px;
+ margin: 1.5vh 0px 0.5vh 0px;
+}
+
+/*Menu icons*/
+.menu-button {
+ height: 25px;
+ margin: 0.9vh 0px 0px 7px;
+ filter: invert(14%) sepia(1%) saturate(2442%) hue-rotate(316deg) brightness(98%) contrast(77%);
+}
+
+.sidenav---navitem---9uL5T:hover .menu-button {
+ filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
+}
+
+.sidenav---selected---1EK3y .menu-button {
+ filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
+}
+
+/* Behaviors logo */
+.logo {
+ margin: 5px 5px 1vh 5px;
+ height: 100px;
+}
+
+/* Footer with About us and lock button */
+.footer {
+ position: fixed;
+ bottom:1vh;
+ display:inline-block;
+}
+
+.footer:hover {
+ filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
+}
+
+.lock-button {
+ margin-left:70px;
+}
+
+.about-button {
+ margin-left:30px;
+}
+
+/* Side navigation menu */
+.sidenav---sidenav---_2tBP {
+ z-index: 1006;
+ min-width: 115px;
+ height: 100%;
+ background: #edecec;
+ -webkit-transition: min-width 0.15s;
+ -moz-transition: min-width 0.15s;
+ -o-transition: min-width 0.15s;
+ -ms-transition: min-width 0.15s;
+ transition: min-width 0.15s;
+ border-right: solid #f5f5f6 4px;
+}
+
+.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ- .sidenav---sidenav-subnav---1EN61 {
+ display: none;
+}
+.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---sidenav-subnav---1EN61 {
+ display: block;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL {
+ min-width: 220px;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
+ display: inline-block;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---expandable---3_dr7 > .sidenav---navitem---9uL5T {
+ cursor: pointer;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
+ position: static;
+ border: none;
+ float: left;
+ clear: both;
+ width: 100%;
+ background: transparent;
+ overflow: hidden;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
+ display: block;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
+ display: none;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 {
+ position: relative;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47::before {
+ content: " ";
+ width: 100%;
+ height: 28px;
+ position: absolute;
+ top: 0;
+ z-index: -1;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:first-child {
+ display: none;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:hover::before {
+ background: #fff;
+ opacity: 0.15;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
+ filter: alpha(opacity=15);
+}
+
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47::before {
+ content: " ";
+ width: 100%;
+ height: 28px;
+ position: absolute;
+ top: 0;
+ z-index: -1;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T {
+ color: #fff;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T::before {
+ content: " ";
+ width: 2px;
+ height: 20px;
+ left: 10px;
+ top: 4px;
+ position: absolute;
+ border-left: 2px #fff solid;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:hover > .sidenav---navitem---9uL5T {
+ background: transparent;
+ color: #fff;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T {
+ color: #f9dcdd;
+ padding: 0 0 0 30px;
+}
+.sidenav---sidenav-toggle---1KRjR {
+ display: block;
+ position: relative;
+ float: left;
+ width: 64px;
+ height: 64px;
+ padding: 0;
+ margin: 0;
+ background-color: transparent;
+ background-image: none;
+ border: 0;
+ border-radius: 0;
+ cursor: pointer;
+}
+.sidenav---sidenav-toggle---1KRjR:focus {
+ outline: none;
+}
+.sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 {
+ display:block;
+ width: 20px;
+ height: 2px;
+ margin: 0 auto;
+ background-color: #484848;
+ border-radius: 1px;
+ -webkit-transition: all 0.15s;
+ -moz-transition: all 0.15s;
+ -o-transition: all 0.15s;
+ -ms-transition: all 0.15s;
+ transition: all 0.15s;
+ opacity: 0.7;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+}
+.sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 + .sidenav---icon-bar---u1f02 {
+ margin-top: 4px;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 {
+ width: 25px;
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(1) {
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(2) {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(3) {
+ margin-top: -8px;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+.sidenav---sidenav-nav---3tvij {
+ float: left;
+ padding: 0;
+ margin: 0;
+ clear: both;
+ list-style: none;
+ width: 100%;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- {
+ clear: both;
+ position: relative;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T {
+ cursor: default;
+ background-color: #383838;
+ border-right: 10px solid #edc61b;
+ border-radius: 4px;
+ color: #edc61b;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T::after {
+ background: #fff;
+ opacity: 0.15;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
+ filter: alpha(opacity=15);
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T::after,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T::after {
+ background: #000;
+ opacity: 0.2;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+ filter: alpha(opacity=20);
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after {
+ background: #000;
+ opacity: 0.25;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
+ filter: alpha(opacity=25);
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u.sidenav---selected---1EK3y.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u.sidenav---selected---1EK3y.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after {
+ background: #000;
+ opacity: 0.2;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+ filter: alpha(opacity=20);
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f {
+ color: #edc61b;
+ font-weight: bold;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > *,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > * {
+ color: #fff;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T {
+ position: relative;
+ display: block;
+ line-height: 50px;
+ height: 50px;
+ white-space: nowrap;
+ text-decoration: none;
+ color: #484848;
+ font-size: 14px;
+ cursor: pointer;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T:focus {
+ outline: 0;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ background: #fff;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ z-index: -1;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f {
+ color: #383838;
+ padding-left: 40px;
+ height: 50px;
+ line-height: 50px;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > * {
+ color: #f9dcdd;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo {
+ display: block;
+ float: left;
+ width: 64px;
+ height: 50px;
+ margin-right: -6px;
+ vertical-align: top;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-color: transparent;
+ opacity: 0.7;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+ line-height: 50px;
+ text-align: center;
+}
+.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
+ display: none;
+}
+.sidenav---sidenav-subnav---1EN61 {
+ /* min-width: 200px;
+ position: absolute; */
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ top: 0;
+ left: 64px;
+ background: #fff;
+ border: 1px #bbb solid;
+ -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
+ box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:first-child {
+ margin: 0 24px;
+ line-height: 48px;
+ border-bottom: 1px #ccc solid;
+ font-size: 14px;
+ font-weight: normal;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:nth-child(2) {
+ margin-top: 8px;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:last-child {
+ margin-bottom: 8px;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T {
+ color: #d8d8d8;
+ font-weight: bold;
+ background: none;
+ cursor: default;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T:hover {
+ background: #fff;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T {
+ display: block;
+ text-decoration: none;
+ color: #222;
+ font-size: 13px;
+ line-height: 30px;
+ padding: 0 24px;
+ cursor: pointer;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T:hover {
+ background: #eee;
+}
+.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T:focus {
+ outline: 0;
+}
+.sidenav---sidenav---_2tBP {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ line-height: 20px;
+}
+.sidenav---sidenav---_2tBP *,
+.sidenav---sidenav---_2tBP *:before,
+.sidenav---sidenav---_2tBP *:after {
+ -webkit-box-sizing: inherit;
+ -moz-box-sizing: inherit;
+ box-sizing: inherit;
+}
+
+/*# sourceMappingURL=react-sidenav.css.map*/
diff --git a/src/Menu/index.js b/src/Menu/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a448c58da96dbde52bd5a7f550fd1e9d1d5fa6e5
--- /dev/null
+++ b/src/Menu/index.js
@@ -0,0 +1,167 @@
+import React from "react";
+
+import SideNav, { NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
+import './Menu.css'
+
+
+export function Menu(props) {
+ return(
+
+ <SideNav
+ onSelect={(selected) => {
+ // Add your code here
+ }}
+ >
+ <img className="logo"
+ src={window.location.origin + "/images/logoBehaviors.png"}
+ alt="logo of the Behaviors.ai project"
+ />
+ <br></br>
+ <SideNav.Toggle />
+
+ <SideNav.Nav defaultSelected="demo">
+ <div className="menu-title-level1">
+ Custom
+ </div>
+
+ <NavItem eventKey="demo">
+ <NavIcon>
+ {/* <a href="#"> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/dashboard-grey.svg"}
+ alt="Demo mode"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Demo
+ </NavText>
+ </NavItem>
+
+ <div className="menu-title-level1">
+ Default
+ </div>
+
+ <div className="menu-title-level2">
+ Algorithm
+ </div>
+
+ <NavItem eventKey="memory">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/memory-grey.svg"}
+ alt="memory dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Memory
+ </NavText>
+ </NavItem>
+
+ <NavItem eventKey="traces">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/trace-grey.svg"}
+ alt="trace dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Traces
+ </NavText>
+ </NavItem>
+
+ <NavItem eventKey="mental-states">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/mood-grey.svg"}
+ alt="mood dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Mental states
+ </NavText>
+ </NavItem>
+
+ <NavItem eventKey="decision-making">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/choice-grey.svg"}
+ alt="choice dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Decision making
+ </NavText>
+ </NavItem>
+
+ <div className="menu-title-level2">
+ Robot
+ </div>
+
+ <NavItem eventKey="video">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/video-grey.svg"}
+ alt="video dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Video
+ </NavText>
+ </NavItem>
+
+ <NavItem eventKey="audio">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/microphone-grey.svg"}
+ alt="microphone dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Audio
+ </NavText>
+ </NavItem>
+
+ <NavItem eventKey="sensory">
+ <NavIcon>
+ {/* <a> */}
+ <img className="menu-button"
+ src={window.location.origin + "/images/icons/fingerprint-grey.svg"}
+ alt="sensory dashboard"
+ />
+ {/* </a> */}
+ </NavIcon>
+ <NavText>
+ Sensory
+ </NavText>
+ </NavItem>
+
+ <a href="more.html">
+ <img className="footer menu-button about-button"
+ src={window.location.origin + "/images/icons/about.svg"}
+ alt="about this dashboard"
+ />
+ </a>
+
+ {/* <a> */}
+ <img className="footer menu-button lock-button"
+ src={window.location.origin + "/images/icons/lock_closed-grey.svg"}
+ alt="lock/unlock the dashboard"
+ />
+ {/* </a> */}
+ </SideNav.Nav>
+ </SideNav>
+ )
+}
diff --git a/src/index.js b/src/index.js
index 966bb929f9f431d5d3c34146d0abdac715f16aea..73d63ae0e86e7f6b56f1f6815751746913e11138 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import RosLib from 'roslib';
// React Components to be displayed
import {Board} from './Board';
import {Header} from './Header';
+import {Menu} from "./Menu";
import {Modal} from './utils/modeModal';
import 'bootstrap/dist/css/bootstrap.min.css'
@@ -50,15 +51,15 @@ class Main extends React.Component {
url : 'ws://localhost:9090'
// url : 'ws://192.168.1.61:9090'
});
-
+
this.ros.on('connection', function() {
console.log('Connected to websocket server.');
});
-
+
this.ros.on('error', function(error) {
console.log('Error connecting to websocket server: ', error);
});
-
+
this.ros.on('close', function() {
console.log('Connection to websocket server closed.');
});
@@ -70,7 +71,7 @@ class Main extends React.Component {
this.ros.close()
}
}
-
+
render() {
let modal = null;
if (this.store.modal.enabled) {
@@ -81,12 +82,17 @@ class Main extends React.Component {
}
return (
- <div id="outer">
- <div id="header">
- <Header ros={this.ros}/>
+ <div id="level-1">
+ <div id="menu">
+ <Menu ros={this.ros}/>
</div>
- <div id="board">
- <Board ros={this.ros} store={this.store}/>
+ <div id="level-2">
+ <div id="header">
+ <Header ros={this.ros}/>
+ </div>
+ <div id="board">
+ <Board ros={this.ros} store={this.store}/>
+ </div>
</div>
{modal}
</div>
@@ -94,4 +100,4 @@ class Main extends React.Component {
}
})
-ReactDOM.render(<Main ros={true}/>, document.getElementById("container"));
\ No newline at end of file
+ReactDOM.render(<Main ros={true}/>, document.getElementById("container"));