moved all css files to module files to seperate into namespaces and prevent name overlaps

src/elements/PageTitle/PageTitle.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./PageTitle.css"
+import style from "./PageTitle.module.css"
 
 class PageTitle extends React.Component {
     constructor(props) {
@@ -11,9 +11,9 @@ class PageTitle extends React.Component {
 
     render() {
         return (
-            <div className='pageheader'>
-                <span className='pageheadertitle'>{this.props.title}</span>
-                <span className='pageheadersubtitle'>{this.props.subtitle}</span>
+            <div className={style.pageheader}>
+                <span className={style.pageheadertitle}>{this.props.title}</span>
+                <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
                 <>
                     {this.props.children}
                 </>

src/elements/Preview/Preview.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Preview.css";
+import style from "./Preview.module.css";
 import Player from "../../pages/Player/Player";
 import {Spinner} from "react-bootstrap";
 
@@ -38,17 +38,17 @@ class Preview extends React.Component {
 
     render() {
         return (
-            <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle'>{this.state.name}</div>
-                <div className='previewpic'>
+            <div className={style.videopreview} onClick={() => this.itemClick()}>
+                <div className={style.previewtitle}>{this.state.name}</div>
+                <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
-                        <img className='previewimage'
+                        <img className={style.previewimage}
                              src={this.state.previewpicture}
                              alt='Pic loading.'/> :
-                        <span className='loadAnimation'><Spinner animation="border"/></span>}
+                        <span className={style.loadAnimation}><Spinner animation="border"/></span>}
 
                 </div>
-                <div className='previewbottom'>
+                <div className={style.previewbottom}>
 
                 </div>
             </div>
@@ -68,8 +68,8 @@ class Preview extends React.Component {
 export class TagPreview extends React.Component {
     render() {
         return (
-            <div className='videopreview tagpreview' onClick={() => this.itemClick()}>
-                <div className='tagpreviewtitle'>
+            <div className={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}>
+                <div className={style.tagpreviewtitle}>
                     {this.props.name}
                 </div>
             </div>

src/elements/SideBar/SideBar.js

@@ -1,12 +1,28 @@
 import React from "react";
-import "./SideBar.css"
+import style from "./SideBar.module.css"
 
 class SideBar extends React.Component {
     render() {
-        return (<div className='sideinfo'>
+        return (<div className={style.sideinfo}>
             {this.props.children}
         </div>);
     }
 }
 
+export class SideBarTitle extends React.Component {
+    render() {
+        return (
+            <div className={style.sidebartitle}>{this.props.children}</div>
+        );
+    }
+}
+
+export class SideBarItem extends React.Component {
+    render() {
+        return (
+            <div className={style.sidebarinfo}>{this.props.children}</div>
+        );
+    }
+}
+
 export default SideBar;

src/elements/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React from "react";
 
-import "./Tag.css"
+import styles from "./Tag.module.css"
 import CategoryPage from "../../pages/CategoryPage/CategoryPage";
 
 class Tag extends React.Component {
     render() {
         return (
-            <button className='tagbtn' onClick={() => this.TagClick()}
+            <button className={styles.tagbtn} onClick={() => this.TagClick()}
                     data-testid="Test-Tag">{this.props.children}</button>
         );
     }

src/elements/VideoContainer/VideoContainer.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Preview from "../Preview/Preview";
+import style from "./VideoContainer.module.css"
 
 class VideoContainer extends React.Component {
     constructor(props, context) {
@@ -24,7 +25,7 @@ class VideoContainer extends React.Component {
 
     render() {
         return (
-            <div className='maincontent'>
+            <div className={style.maincontent}>
                 {this.state.loadeditems.map(elem => (
                     <Preview
                         key={elem.movie_id}

src/elements/VideoContainer/VideoContainer.module.css

@@ -0,0 +1,4 @@
+.maincontent {
+    float: left;
+    width: 70%;
+}