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

package.json

@@ -27,7 +27,7 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.248",
+  "proxy": "http://192.168.0.42",
   "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"

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'>
+            <div className={style.pageheader}>
-                <span className='pageheadertitle'>{this.props.title}</span>
+                <span className={style.pageheadertitle}>{this.props.title}</span>
-                <span className='pageheadersubtitle'>{this.props.subtitle}</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={style.videopreview} onClick={() => this.itemClick()}>
-                <div className='previewtitle'>{this.state.name}</div>
+                <div className={style.previewtitle}>{this.state.name}</div>
-                <div className='previewpic'>
+                <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={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}>
-                <div className='tagpreviewtitle'>
+                <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%;
+}

src/pages/CategoryPage/CategoryPage.js

@@ -1,6 +1,7 @@
 import React from "react";
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
+import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.module.css"
 
 import {TagPreview} from "../../elements/Preview/Preview";
 import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
@@ -34,7 +35,7 @@ class CategoryPage extends React.Component {
                     subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
 
                 <SideBar>
-                    <div className='sidebartitle'>Default Tags:</div>
+                    <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={{
                         changeRootElement: (e) => {
                             this.loadTag(e.props.category)
@@ -72,7 +73,7 @@ class CategoryPage extends React.Component {
                                 onClick={this.loadCategoryPageDefault}>Back
                         </button>
                     </> :
-                    <div className='maincontent'>
+                    <div className={videocontainerstyle.maincontent}>
                         {this.state.loadedtags ?
                             this.state.loadedtags.map((m) => (
                                 <TagPreview

src/pages/HomePage/HomePage.js

@@ -1,9 +1,9 @@
 import React from "react";
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
-import "./HomePage.css"
+import style from "./HomePage.module.css"
 import PageTitle from "../../elements/PageTitle/PageTitle";
 
 class HomePage extends React.Component {
@@ -120,11 +120,11 @@ class HomePage extends React.Component {
 
     render() {
         return (
-            <div>
+            <>
                 <PageTitle
                     title='Home Page'
                     subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
-                    <form className="form-inline searchform" onSubmit={(e) => {
+                    <form className={"form-inline " + style.searchform} onSubmit={(e) => {
                         e.preventDefault();
                         this.searchVideos(this.keyword);
                     }}>
@@ -137,15 +137,15 @@ class HomePage extends React.Component {
                     </form>
                 </PageTitle>
                 <SideBar>
-                    <div className='sidebartitle'>Infos:</div>
+                    <SideBarTitle>Infos:</SideBarTitle>
                     <hr/>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
+                    <SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
+                    <SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
+                    <SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
+                    <SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
+                    <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
                     <hr/>
-                    <div className='sidebartitle'>Default Tags:</div>
+                    <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={this.props.viewbinding}>All</Tag>
                     <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
                     <Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
@@ -156,11 +156,11 @@ class HomePage extends React.Component {
                         data={this.state.data}
                         viewbinding={this.props.viewbinding}/> :
                     <div>No Data found!</div>}
-                <div className='rightinfo'>
+                <div className={style.rightinfo}>
 
                 </div>
 
-            </div>
+            </>
         );
     }
 }

src/pages/HomePage/HomePage.module.css

@@ -1,8 +1,3 @@
-.maincontent {
-    float: left;
-    width: 70%;
-}
-
 .rightinfo {
     float: left;
     width: 10%;

src/pages/Player/Player.js

@@ -1,7 +1,7 @@
 import React from "react";
-import "./Player.css"
+import style from "./Player.module.css"
 import {PlyrComponent} from 'plyr-react';
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
 import PageTitle from "../../elements/PageTitle/PageTitle";
@@ -52,17 +52,15 @@ class Player extends React.Component {
                     subtitle={this.state.movie_name}/>
 
                 <SideBar>
-                    <div className='sidebartitle'>Infos:</div>
+                    <SideBarTitle>Infos:</SideBarTitle>
                     <hr/>
-                    <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
+                    <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
                     {this.state.quality !== 0 ?
-                        <div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
+                        <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
-                        </div> : null}
                     {this.state.length !== 0 ?
-                        <div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
+                        <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
-                        </div> : null}
                     <hr/>
-                    <div className='sidebartitle'>Tags:</div>
+                    <SideBarTitle>Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
                         <Tag
                             key={m.tag_name}
@@ -70,14 +68,14 @@ class Player extends React.Component {
                     ))}
                 </SideBar>
 
-                <div className="videowrapper">
+                <div className={style.videowrapper}>
                     {/* video component is added here */}
                     {this.state.sources ? <PlyrComponent
                             className='myvideo'
                             sources={this.state.sources}
                             options={this.options}/> :
                         <div>not loaded yet</div>}
-                    <div className='videoactions'>
+                    <div className={style.videoactions}>
                         <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
                         <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
                             Video a Tag
@@ -94,7 +92,7 @@ class Player extends React.Component {
 
                     </div>
                 </div>
-                <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
+                <button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
             </div>
         );
     }

src/pages/Player/Player.module.css

@@ -8,17 +8,6 @@
     margin-left: 25px;
 }
 
-.likefield {
-    margin-top: 15px;
-    margin-left: 15px;
-    margin-right: 15px;
-    height: 30px;
-    background-color: #9e5353;
-    border-radius: 10px;
-    text-align: center;
-    color: white;
-}
-
 .videowrapper {
     margin-left: 20px;
     display: block;

src/pages/RandomPage/RandomPage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Preview from "../../elements/Preview/Preview";
-import "./RandomPage.css"
+import style from "./RandomPage.module.css"
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import PageTitle from "../../elements/PageTitle/PageTitle";
 
@@ -27,7 +27,7 @@ class RandomPage extends React.Component {
                     subtitle='4pc'/>
 
                 <SideBar>
-                    <div className='sidebartitle'>Visible Tags:</div>
+                    <SideBarTitle>Visible Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
                         <Tag
                             key={m.tag_name}
@@ -43,8 +43,8 @@ class RandomPage extends React.Component {
                             movie_id={elem.movie_id}
                             viewbinding={this.props.viewbinding}/>
                     ))}
-                    <div className='Shufflebutton'>
+                    <div className={style.Shufflebutton}>
-                        <button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
+                        <button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
                     </div>
                 </div>
             </div>