Remove react-modal-video as a dep and use the sass directly

packages/website/package.json

@@ -52,6 +52,7 @@
         "material-ui": "^0.20.0",
         "moment": "2.21.0",
         "moment-precise-range-plugin": "^1.3.0",
+        "node-sass": "^4.12.0",
         "numeral": "^2.0.6",
         "polished": "^1.9.2",
         "query-string": "^6.0.0",
@@ -66,7 +67,6 @@
         "react-lazyload": "^2.3.0",
         "react-loadable": "^5.5.0",
         "react-markdown": "^4.0.6",
-        "react-modal-video": "^1.2.2",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
         "react-responsive": "^6.0.1",
@@ -80,6 +80,7 @@
         "redux": "^3.6.0",
         "redux-devtools-extension": "^2.13.2",
         "rollbar": "^2.4.7",
+        "sass-loader": "^7.1.0",
         "semver": "5.5.0",
         "semver-sort": "0.0.4",
         "styled-components": "^4.1.1",
@@ -119,11 +120,9 @@
         "css-loader": "0.23.x",
         "less-loader": "^4.1.0",
         "make-promises-safe": "^1.1.0",
-        "node-sass": "^4.12.0",
         "raw-loader": "^0.5.1",
         "react-svg-loader": "^2.1.0",
         "rollbar-sourcemap-webpack-plugin": "^2.4.0",
-        "sass-loader": "^7.1.0",
         "shx": "^0.2.2",
         "source-map-loader": "^0.2.4",
         "style-loader": "0.23.x",

packages/website/sass/modal_video.scss

@@ -0,0 +1,134 @@
+$animation-speed: .3s;
+$animation-function: ease-out;
+$backdrop-color: rgba(0, 0, 0, .5);
+
+@keyframes modal-video {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes modal-video-inner {
+	from {
+		transform: translate(0, 100px);
+	}
+
+	to {
+		transform: translate(0, 0);
+	}
+}
+
+.modal-video {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: $backdrop-color;
+	z-index: 1000000;
+	cursor: pointer;
+	opacity: 1;
+	animation-timing-function: $animation-function;
+	animation-duration: $animation-speed;
+	animation-name: modal-video;
+	-webkit-transition: opacity $animation-speed $animation-function;
+	-moz-transition: opacity $animation-speed $animation-function;
+	-ms-transition: opacity $animation-speed $animation-function;
+	-o-transition: opacity $animation-speed $animation-function;
+	transition: opacity $animation-speed $animation-function;
+}
+
+.modal-video-effect-exit {
+	opacity: 0;
+
+	& .modal-video-movie-wrap {
+		-webkit-transform: translate(0, 100px);
+		-moz-transform: translate(0, 100px);
+		-ms-transform: translate(0, 100px);
+		-o-transform: translate(0, 100px);
+		transform: translate(0, 100px);
+	}
+}
+
+.modal-video-body {
+	max-width: 940px;
+	width: 100%;
+	height: 100%;
+	margin: 0 auto;
+	display: table;
+}
+
+.modal-video-inner {
+	display: table-cell;
+	vertical-align: middle;
+	width: 100%;
+	height: 100%;
+}
+
+.modal-video-movie-wrap {
+	width: 100%;
+	height: 0;
+	position: relative;
+	padding-bottom: 56.25%;
+	background-color: #333;
+	animation-timing-function: $animation-function;
+	animation-duration: $animation-speed;
+	animation-name: modal-video-inner;
+	-webkit-transform: translate(0, 0);
+	-moz-transform: translate(0, 0);
+	-ms-transform: translate(0, 0);
+	-o-transform: translate(0, 0);
+	transform: translate(0, 0);
+	-webkit-transition: -webkit-transform $animation-speed $animation-function;
+	-moz-transition: -moz-transform $animation-speed $animation-function;
+	-ms-transition: -ms-transform $animation-speed $animation-function;
+	-o-transition: -o-transform $animation-speed $animation-function;
+	transition: transform $animation-speed $animation-function;
+
+	& iframe {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.modal-video-close-btn {
+	position: absolute;
+	z-index: 2;
+	top: -35px;
+	right: -35px;
+	display: inline-block;
+	width: 35px;
+	height: 35px;
+	overflow: hidden;
+	border: none;
+	background: transparent;
+
+	&:before {
+		transform: rotate(45deg);
+	}
+
+	&:after {
+		transform: rotate(-45deg);
+	}
+
+	&:before,
+	&:after {
+		content: '';
+		position: absolute;
+		height: 2px;
+		width: 100%;
+		top: 50%;
+		left: 0;
+		margin-top: -1px;
+		background: #fff;
+		border-radius: 5px;
+		margin-top: -6px;
+	}
+}

packages/website/ts/index.tsx

@@ -38,7 +38,7 @@ tradeHistoryStorage.clearIfRequired();
 trackedTokenStorage.clearIfRequired();
 
 import 'less/all.less';
-import 'react-modal-video/scss/modal-video.scss';
+import 'sass/modal_video.scss';
 
 // We pass modulePromise returning lambda instead of module promise,
 // cause we only want to import the module when the user navigates to the page.

packages/website/webpack.config.js

@@ -28,6 +28,7 @@ const config = {
         alias: {
             ts: path.join(__dirname, '/ts'),
             less: path.join(__dirname, '/less'),
+            sass: path.join(__dirname, '/sass'),
             md: path.join(__dirname, '/md'),
         },
     },

yarn.lock

@@ -14445,13 +14445,6 @@ react-markdown@^4.0.6:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-modal-video@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.npmjs.org/react-modal-video/-/react-modal-video-1.2.2.tgz#d45069f112a4e79306470b7e893fbe03252b8e6b"
-  integrity sha512-isfaRFvCZZRWkPvoPRzXL1FaHtI3PQHqkX2UrtOGjGUPNGZeMBDT5xPqON7h4e5CGvpf62XIq3lxT0InPKAUgw==
-  dependencies:
-    react-transition-group "^2.2.1"
-
 react-popper@^1.0.0-beta.6:
   version "1.0.0-beta.6"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0-beta.6.tgz#cb27a2ac56adccbaf5f9c4132387289069240834"
@@ -14595,16 +14588,6 @@ react-transition-group@^1.2.1:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react-transition-group@^4.2.1:
   version "4.2.1"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz#61fc9e36568bff9a1fe4e60fae323c8a6dbc0680"