Merge branch 'master' into csstheming

# Conflicts:
#	src/elements/PageTitle/PageTitle.module.css
#	src/elements/Preview/Preview.module.css
#	src/elements/SideBar/SideBar.module.css
#	src/index.css
#	src/pages/Player/Player.js
#	src/pages/Player/Player.module.css
#	src/pages/SettingsPage/SettingsPage.module.css

src/elements/Preview/Preview.js

@@ -39,7 +39,7 @@ class Preview extends React.Component {
             <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
                 <div className={style.previewpic}>
-                    {this.state.previewpicture != null ?
+                    {this.state.previewpicture !== null ?
                         <img className={style.previewimage}
                              src={this.state.previewpicture}
                              alt='Pic loading.'/> :

src/elements/Preview/Preview.module.css

@@ -1,15 +1,17 @@
 .previewtitle {
     height: 20px;
     text-align: center;
-    font-weight: bold;
-    max-width: 266px;
     font-size: smaller;
+    font-weight: bold;
+    height: 20px;
+    max-width: 266px;
+    text-align: center;
 }
 
 .previewpic {
-    min-width: 266px;
-    min-height: 150px;
     height: 80%;
+    min-height: 150px;
+    min-width: 266px;
     overflow: hidden;
     text-align: center;
 }
@@ -17,14 +19,14 @@
 .loadAnimation {
     display: inline-block;
     line-height: 150px;
-    vertical-align: center;
+    vertical-align: middle;
 }
 
 .previewimage {
-    min-height: 150px;
     max-height: 400px;
-    min-width: 266px;
     max-width: 410px;
+    min-height: 150px;
+    min-width: 266px;
 }
 
 .previewbottom {
@@ -32,12 +34,12 @@
 }
 
 .videopreview {
+    border-radius: 20px;
+    cursor: pointer;
     float: left;
     margin-left: 25px;
     margin-top: 25px;
-    cursor: pointer;
     opacity: 0.85;
-    border-radius: 20px;
 }
 
 .videopreview:hover {
@@ -46,11 +48,11 @@
 }
 
 .tagpreview {
-    text-transform: uppercase;
-    font-weight: bolder;
     font-size: x-large;
-    text-align: center;
+    font-weight: bolder;
     height: 150px;
+    text-align: center;
+    text-transform: uppercase;
     width: 266px;
 }
 

src/elements/SideBar/SideBar.module.css

@@ -1,22 +1,22 @@
 .sideinfo {
-    width: 20%;
-    float: left;
-    padding: 20px;
-    margin-top: 25px;
-    margin-left: 15px;
-    border-radius: 20px;
     border: 2px #3574fe solid;
+    border-radius: 20px;
+    float: left;
+    margin-left: 15px;
+    margin-top: 25px;
     overflow: hidden;
+    padding: 20px;
+    width: 20%;
 }
 
 .sidebartitle {
-    font-weight: bold;
     font-size: larger;
+    font-weight: bold;
 }
 
 .sidebarinfo {
-    margin-top: 5px;
     border-radius: 5px;
+    margin-top: 5px;
     padding: 2px 10px 2px 15px;
     width: 220px;
 }

src/elements/Tag/Tag.module.css

@@ -1,12 +1,12 @@
 .tagbtn {
-    color: white;
-    margin: 10px;
     background-color: #3574fe;
     border: none;
     border-radius: 10px;
-    padding: 5px 15px 5px 15px;
-    /*font-weight: bold;*/
+    color: white;
     display: block;
+    margin: 10px;
+    /*font-weight: bold;*/
+    padding: 5px 15px 5px 15px;
 }
 
 .tagbtn:focus {

src/elements/Tag/Tag.test.js

@@ -5,14 +5,6 @@ import "@testing-library/jest-dom"
 import {shallow} from 'enzyme'
 
 describe('<Tag/>', function () {
-    function prepareFetchApi(response) {
-        const mockJsonPromise = Promise.resolve(response);
-        const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise,
-        });
-        return (jest.fn().mockImplementation(() => mockFetchPromise));
-    }
-
     it('renders without crashing ', function () {
         const wrapper = shallow(<Tag>test</Tag>);
         wrapper.unmount();
@@ -24,7 +16,7 @@ describe('<Tag/>', function () {
     });
 
     it('click event triggered and setvideo callback called', function () {
-        global.fetch = prepareFetchApi({});
+        global.fetch = global.prepareFetchApi({});
         const func = jest.fn();
         const elem = {
             changeRootElement: () => func()

src/elements/VideoContainer/VideoContainer.js

@@ -3,6 +3,9 @@ import Preview from "../Preview/Preview";
 import style from "./VideoContainer.module.css"
 
 class VideoContainer extends React.Component {
+    // stores current index of loaded elements
+    loadindex = 0;
+
     constructor(props, context) {
         super(props, context);
 
@@ -14,9 +17,6 @@ class VideoContainer extends React.Component {
         };
     }
 
-    // stores current index of loaded elements
-    loadindex = 0;
-
     componentDidMount() {
         document.addEventListener('scroll', this.trackScrolling);