From d396d9038b86f751225e514ab4ea1dc8afbb74a8 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 15 Nov 2018 15:55:54 +0200
Subject: [PATCH] breaking changes in app styles

---
 src/app/app.js              |  11 ++--
 src/app/styles.less         | 118 ++----------------------------------
 src/common/Router/Router.js |   6 +-
 src/index.html              | 103 +++++++++++++++++++++++++++++++
 4 files changed, 116 insertions(+), 122 deletions(-)

diff --git a/src/app/app.js b/src/app/app.js
index 9ced69b7b..2ef3ecba1 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -6,13 +6,10 @@ import styles from './styles';
 class App extends PureComponent {
     render() {
         return (
-            <div className={styles['app']}>
-                <Router
-                    routerContainerClassName={styles['router-container']}
-                    routeContainerClassName={styles['route-container']}
-                    config={routerConfig}
-                />
-            </div>
+            <Router
+                routeContainerClassName={styles['route-container']}
+                config={routerConfig}
+            />
         );
     }
 }
diff --git a/src/app/styles.less b/src/app/styles.less
index 0cc4298a7..6c5663653 100644
--- a/src/app/styles.less
+++ b/src/app/styles.less
@@ -1,116 +1,10 @@
 @import 'stremio-colors';
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-Light.ttf') format('truetype');
-    font-weight: 300;
-    font-style: normal;
-}
 
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-LightItalic.ttf') format('truetype');
-    font-weight: 300;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-Italic.ttf') format('truetype');
-    font-weight: 400;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-SemiBold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
-    font-weight: 600;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-Bold.ttf') format('truetype');
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-BoldItalic.ttf') format('truetype');
-    font-weight: 700;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-ExtraBold.ttf') format('truetype');
-    font-weight: 800;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: url('/fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
-    font-weight: 800;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Lato';
-    src: url('/fonts/Lato.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'LatoLight';
-    src: url('/fonts/Lato-Light.ttf') format('truetype');
-}
-
-* {
-    margin: 0px;
-    padding: 0px;
-    border: none;
-    list-style: none;
-    user-select: none;
-    box-sizing: border-box;
-    text-decoration: none;
-    font-weight: normal;
-}
-
-html, body, .app {
-    position: relative;
-    width: 100vw;
-    height: 100vh;
-    min-width: 1000px;
-    min-height: 650px;
-    overflow: hidden;
+.route-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     background-color: @colorbgmain;
-    font: 13px / 18px 'Open Sans', 'LatoLight', 'Arial', 'Helvetica', 'sans-serif';
-}
-
-.router-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    .route-container {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: @colorbgmain;
-    }
 }
\ No newline at end of file
diff --git a/src/common/Router/Router.js b/src/common/Router/Router.js
index 492cb42fb..ec07216d1 100644
--- a/src/common/Router/Router.js
+++ b/src/common/Router/Router.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import pathToRegexp from 'path-to-regexp';
 import PathUtils from 'path';
 import UrlUtils from 'url';
@@ -95,13 +95,13 @@ class Router extends Component {
 
     render() {
         return (
-            <div className={this.props.routerContainerClassName}>
+            <Fragment>
                 {
                     this.state.views
                         .filter(({ element }) => React.isValidElement(element))
                         .map(({ path, element }) => <div key={path} className={this.props.routeContainerClassName}>{element}</div>)
                 }
-            </div>
+            </Fragment>
         );
     }
 }
diff --git a/src/index.html b/src/index.html
index dcb80a620..26dca7829 100755
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,109 @@
 <head>
     <meta charset="UTF-8">
     <title>Stremio - All you can watch!</title>
+    <style>
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-Light.ttf') format('truetype');
+            font-weight: 300;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-LightItalic.ttf') format('truetype');
+            font-weight: 300;
+            font-style: italic;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
+            font-weight: 400;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-Italic.ttf') format('truetype');
+            font-weight: 400;
+            font-style: italic;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-SemiBold.ttf') format('truetype');
+            font-weight: 600;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
+            font-weight: 600;
+            font-style: italic;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-Bold.ttf') format('truetype');
+            font-weight: 700;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-BoldItalic.ttf') format('truetype');
+            font-weight: 700;
+            font-style: italic;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-ExtraBold.ttf') format('truetype');
+            font-weight: 800;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Open Sans';
+            src: url('/fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
+            font-weight: 800;
+            font-style: italic;
+        }
+
+        @font-face {
+            font-family: 'Lato';
+            src: url('/fonts/Lato.ttf') format('truetype');
+        }
+
+        @font-face {
+            font-family: 'LatoLight';
+            src: url('/fonts/Lato-Light.ttf') format('truetype');
+        }
+
+        * {
+            margin: 0px;
+            padding: 0px;
+            border: none;
+            list-style: none;
+            user-select: none;
+            box-sizing: border-box;
+            text-decoration: none;
+            font-weight: normal;
+        }
+
+        html, body, #app {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            min-width: 1000px;
+            min-height: 650px;
+            overflow: hidden;
+            font: 13px / 18px 'Open Sans', 'LatoLight', 'Arial', 'Helvetica', 'sans-serif';
+            z-index: 0;
+        }
+    </style>
 </head>
 
 <body>