From aa741c5a900429873c5f47df4d0534c1dae98ed0 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Sun, 26 Jul 2020 18:17:29 +0200
Subject: [PATCH] only two style files

---
 src/App.js                                    | 12 ++++++-----
 src/App.module.css                            | 11 ++++++----
 src/AppDarkTheme.module.css                   | 14 ++++++++++++-
 src/AppLightTheme.module.css                  | 21 ++++++++++++++-----
 src/elements/PageTitle/PageTitle.js           | 15 +++++++------
 src/elements/PageTitle/PageTitle.module.css   |  5 +----
 .../PageTitle/PageTitleDarkTheme.module.css   | 11 ----------
 .../PageTitle/PageTitleLightTheme.module.css  |  0
 src/elements/Preview/Preview.js               |  6 +++++-
 src/elements/Preview/Preview.module.css       |  2 +-
 src/pages/Player/Player.js                    |  7 ++++++-
 11 files changed, 63 insertions(+), 41 deletions(-)
 delete mode 100644 src/elements/PageTitle/PageTitleDarkTheme.module.css
 delete mode 100644 src/elements/PageTitle/PageTitleLightTheme.module.css

diff --git a/src/App.js b/src/App.js
index 959241e..cc76a36 100644
--- a/src/App.js
+++ b/src/App.js
@@ -83,21 +83,23 @@ class App extends React.Component {
 
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        // add the main theme to the page body
+        document.body.className += ' ' + themeStyle.backgroundcolor;
         return (
             <div className="App">
-                <div className={[style.navcontainer, themeStyle.navcontainer].join(' ')}>
+                <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
                     <div className={style.navbrand}>{this.state.mediacentername}</div>
 
-                    <div className={[style.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "default"})}>Home
                     </div>
-                    <div className={[style.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "random"})}>Random Video
                     </div>
-                    <div className={[style.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "categories"})}>Categories
                     </div>
-                    <div className={[style.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "settings"})}>Settings
                     </div>
                 </div>
diff --git a/src/App.module.css b/src/App.module.css
index 0ae8d7b..adb0857 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -20,7 +20,6 @@
     display: block;
     width: 0;
     height: 2px;
-    background: #FFF;
     transition: width .3s;
 }
 
@@ -29,14 +28,18 @@
 }
 
 
-.navitemselected{
+.navitemselected {
     opacity: 0.85;
 }
 
 .navcontainer {
     padding-top: 20px;
     width: 100%;
-    padding-bottom: 30px;
+    padding-bottom: 40px;
+
+    border-width: 0;
+    border-style: dotted;
+    border-bottom-width: 2px;
 }
 
 .navbrand {
@@ -45,7 +48,7 @@
     font-size: large;
     font-weight: bold;
     text-transform: capitalize;
-    float:left;
+    float: left;
 }
 
 
diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index 52d9939..e319acf 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -1,8 +1,20 @@
-.navcontainer{
+.backgroundcolor{
     background-color: #141520;
+}
+
+.textcolor{
     color: white;
 }
 
 .navitem::after {
     background: white;
 }
+
+.hrcolor{
+    border-color: rgba(255,255,255,.1);
+}
+
+.previewhover:hover{
+    box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
+}
+
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index 7424440..95b7e55 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -1,8 +1,19 @@
-.navcontainer{
-    background-color: white;
-    color: black;
-}
-
 .navitem::after {
     background: black;
 }
+
+.backgroundcolor {
+    background-color: white;
+}
+
+.textcolor {
+    color: black;
+}
+
+.hrcolor {
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.previewhover:hover{
+    box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
+}
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index 67b55df..360fcd1 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,7 +1,7 @@
 import React from "react";
 import style from "./PageTitle.module.css"
-import darktheme from "./PageTitleDarkTheme.module.css"
-import lighttheme from "./PageTitleLightTheme.module.css"
+import darktheme from "../../AppDarkTheme.module.css"
+import lighttheme from "../../AppLightTheme.module.css"
 import StaticInfos from "../../GlobalInfos";
 
 class PageTitle extends React.Component {
@@ -15,16 +15,15 @@ class PageTitle extends React.Component {
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.pageheader + ' ' + themeStyle.pageheader}>
-                <span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span>
-                <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
+            <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
+                <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
+                <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
                 <>
                     {this.props.children}
                 </>
-                <hr/>
+                <hr className={themeStyle.hrcolor}/>
             </div>
-        )
-            ;
+        );
     }
 }
 
diff --git a/src/elements/PageTitle/PageTitle.module.css b/src/elements/PageTitle/PageTitle.module.css
index 1739eab..76b3fcb 100644
--- a/src/elements/PageTitle/PageTitle.module.css
+++ b/src/elements/PageTitle/PageTitle.module.css
@@ -1,8 +1,5 @@
 .pageheader {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding-left: 22%;
-    padding-right: 12%;
+    padding: 20px 12% 20px 22%;
 }
 
 .pageheadertitle {
diff --git a/src/elements/PageTitle/PageTitleDarkTheme.module.css b/src/elements/PageTitle/PageTitleDarkTheme.module.css
deleted file mode 100644
index d41632e..0000000
--- a/src/elements/PageTitle/PageTitleDarkTheme.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.pageheader {
-    background-color: #141520;
-}
-
-.pageheadertitle {
-    color:white;
-}
-
-.pageheadersubtitle {
-    color:white;
-}
diff --git a/src/elements/PageTitle/PageTitleLightTheme.module.css b/src/elements/PageTitle/PageTitleLightTheme.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index a373f8d..f854ce2 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -2,6 +2,9 @@ import React from "react";
 import style from "./Preview.module.css";
 import Player from "../../pages/Player/Player";
 import {Spinner} from "react-bootstrap";
+import StaticInfos from "../../GlobalInfos";
+import darktheme from "../../AppDarkTheme.module.css";
+import lighttheme from "../../AppLightTheme.module.css";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -33,8 +36,9 @@ class Preview extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.videopreview} onClick={() => this.itemClick()}>
+            <div className={style.videopreview + ' ' + themeStyle.previewhover} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle}>{this.state.name}</div>
                 <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css
index 3db50f6..ebfce87 100644
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -45,7 +45,7 @@
 
 .videopreview:hover {
     opacity: 1;
-    box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
+    /*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
     transition: all 300ms;
 }
 
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index c486804..1310d81 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -1,10 +1,14 @@
 import React from "react";
 import style from "./Player.module.css"
+import darktheme from "../../AppDarkTheme.module.css"
+import lighttheme from "../../AppLightTheme.module.css"
+
 import {PlyrComponent} from 'plyr-react';
 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";
+import StaticInfos from "../../GlobalInfos";
 
 
 class Player extends React.Component {
@@ -45,6 +49,7 @@ class Player extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <div id='videocontainer'>
                 <PageTitle
@@ -53,7 +58,7 @@ class Player extends React.Component {
 
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
-                    <hr/>
+                    <hr className={themeStyle.hrcolor}/>
                     <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
                     {this.state.quality !== 0 ?
                         <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}