From 747f3005c8a3fd0654671ec5b8c80e915bafe3f1 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Mon, 3 Aug 2020 23:31:43 +0000
Subject: [PATCH] easier getter function to get themestyle better dark theme
 for SideBar.js

---
 src/App.js                                |  4 +---
 src/AppDarkTheme.module.css               |  4 ++++
 src/AppLightTheme.module.css              |  4 ++++
 src/GlobalInfos.js                        |  7 +++++++
 src/elements/PageTitle/PageTitle.js       | 21 +++++++++++++++++----
 src/elements/PageTitle/PageTitle.test.js  |  2 +-
 src/elements/Preview/Preview.js           |  9 ++++-----
 src/elements/SideBar/SideBar.js           |  9 ++++-----
 src/elements/SideBar/SideBar.module.css   |  2 --
 src/pages/CategoryPage/CategoryPage.js    |  4 ++--
 src/pages/HomePage/HomePage.js            |  6 +++---
 src/pages/Player/Player.js                | 10 +++-------
 src/pages/SettingsPage/GeneralSettings.js |  4 +---
 src/pages/SettingsPage/SettingsPage.js    |  4 +++-
 14 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/App.js b/src/App.js
index 067e9f4..b1fb897 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,8 +6,6 @@ import StaticInfos from "./GlobalInfos";
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
 import style from './App.module.css'
-import lighttheme from './AppLightTheme.module.css'
-import darktheme from './AppDarkTheme.module.css'
 
 import SettingsPage from "./pages/SettingsPage/SettingsPage";
 import CategoryPage from "./pages/CategoryPage/CategoryPage";
@@ -83,7 +81,7 @@ class App extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         // add the main theme to the page body
         document.body.className = themeStyle.backgroundcolor;
         return (
diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index ffc2e7d..d951ea9 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -30,6 +30,10 @@
     background-color: #3c3d48;
 }
 
+.thirdbackground {
+    background-color: #141520;
+}
+
 .preview: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 a3edaf0..72ace73 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -30,6 +30,10 @@
     background-color: #a8c3ff;
 }
 
+.thirdbackground {
+    background-color: #8ca3fc;
+}
+
 .preview:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 }
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index fa10022..b1cbf57 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,3 +1,6 @@
+import darktheme from "./AppDarkTheme.module.css";
+import lighttheme from "./AppLightTheme.module.css";
+
 class GlobalInfos {
     #darktheme = true;
 
@@ -8,6 +11,10 @@ class GlobalInfos {
     enableDarkTheme(enable = true){
         this.#darktheme = enable;
     }
+
+    getThemeStyle(){
+        return this.isDarkTheme() ? darktheme : lighttheme;
+    }
 }
 
 const StaticInfos = new GlobalInfos();
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index 360fcd1..9e55b68 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,7 +1,5 @@
 import React from "react";
 import style from "./PageTitle.module.css"
-import darktheme from "../../AppDarkTheme.module.css"
-import lighttheme from "../../AppLightTheme.module.css"
 import StaticInfos from "../../GlobalInfos";
 
 class PageTitle extends React.Component {
@@ -13,7 +11,7 @@ class PageTitle extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
                 <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
@@ -21,10 +19,25 @@ class PageTitle extends React.Component {
                 <>
                     {this.props.children}
                 </>
-                <hr className={themeStyle.hrcolor}/>
+                <Line/>
             </div>
         );
     }
 }
 
+/**
+ * class to override default <hr> color and styling
+ * use this for horizontal lines to use the current active theming
+ */
+export class Line extends React.Component {
+    render() {
+        const themeStyle = StaticInfos.getThemeStyle();
+        return (
+            <>
+                <hr className={themeStyle.hrcolor}/>
+            </>
+        );
+    }
+}
+
 export default PageTitle;
diff --git a/src/elements/PageTitle/PageTitle.test.js b/src/elements/PageTitle/PageTitle.test.js
index 5d57908..6ed16c2 100644
--- a/src/elements/PageTitle/PageTitle.test.js
+++ b/src/elements/PageTitle/PageTitle.test.js
@@ -19,7 +19,7 @@ describe('<Preview/>', function () {
     it('renders pagetitle prop', function () {
         const wrapper = shallow(<PageTitle title='testtitle'/>);
 
-        expect(wrapper.find(".pageheader").text()).toBe("testtitle");
+        expect(wrapper.find(".pageheader").text()).toBe("testtitle<Line />");
     });
 
     it('renders subtitle prop', function () {
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index 0d316a1..7b05016 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -3,8 +3,6 @@ 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) {
@@ -36,7 +34,7 @@ class Preview extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
@@ -67,9 +65,10 @@ class Preview extends React.Component {
 
 export class TagPreview extends React.Component {
     render() {
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
-            <div className={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}>
-                <div className={style.tagpreviewtitle}>
+            <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
+                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
                     {this.props.name}
                 </div>
             </div>
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index 6ae2ac0..738391c 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,12 +1,10 @@
 import React from "react";
 import style from "./SideBar.module.css"
 import StaticInfos from "../../GlobalInfos";
-import darktheme from "../../AppDarkTheme.module.css";
-import lighttheme from "../../AppLightTheme.module.css";
 
 class SideBar extends React.Component {
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
             {this.props.children}
         </div>);
@@ -15,7 +13,7 @@ class SideBar extends React.Component {
 
 export class SideBarTitle extends React.Component {
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
         );
@@ -24,8 +22,9 @@ export class SideBarTitle extends React.Component {
 
 export class SideBarItem extends React.Component {
     render() {
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
-            <div className={style.sidebarinfo}>{this.props.children}</div>
+            <div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
         );
     }
 }
diff --git a/src/elements/SideBar/SideBar.module.css b/src/elements/SideBar/SideBar.module.css
index 4120c44..fcb93c9 100644
--- a/src/elements/SideBar/SideBar.module.css
+++ b/src/elements/SideBar/SideBar.module.css
@@ -4,7 +4,6 @@
     padding: 20px;
     margin-top: 25px;
     margin-left: 15px;
-    background-color: #b4c7fe;
     border-radius: 20px;
     border: 2px #3574fe solid;
     overflow: hidden;
@@ -17,7 +16,6 @@
 
 .sidebarinfo {
     margin-top: 5px;
-    background-color: #8ca3fc;
     border-radius: 5px;
     padding: 2px 10px 2px 15px;
     width: 220px;
diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js
index 8ca56d1..2e26468 100644
--- a/src/pages/CategoryPage/CategoryPage.js
+++ b/src/pages/CategoryPage/CategoryPage.js
@@ -5,7 +5,7 @@ import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.mo
 
 import {TagPreview} from "../../elements/Preview/Preview";
 import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
-import PageTitle from "../../elements/PageTitle/PageTitle";
+import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
 import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
 class CategoryPage extends React.Component {
@@ -56,7 +56,7 @@ class CategoryPage extends React.Component {
                             this.loadTag(e.props.category)
                         }
                     }}>HD</Tag>
-                    <hr/>
+                    <Line/>
                     <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
                         this.setState({popupvisible: true})
                     }}>Add a new Tag!
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index 9b1f056..5f92a23 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -4,7 +4,7 @@ import Tag from "../../elements/Tag/Tag";
 import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
 import style from "./HomePage.module.css"
-import PageTitle from "../../elements/PageTitle/PageTitle";
+import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
 
 class HomePage extends React.Component {
     constructor(props, context) {
@@ -138,13 +138,13 @@ class HomePage extends React.Component {
                 </PageTitle>
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
-                    <hr/>
+                    <Line/>
                     <SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
-                    <hr/>
+                    <Line/>
                     <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={this.props.viewbinding}>All</Tag>
                     <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index 1310d81..03bd5af 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -1,14 +1,11 @@
 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";
+import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
 
 
 class Player extends React.Component {
@@ -49,7 +46,6 @@ class Player extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <div id='videocontainer'>
                 <PageTitle
@@ -58,13 +54,13 @@ class Player extends React.Component {
 
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
-                    <hr className={themeStyle.hrcolor}/>
+                    <Line/>
                     <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
                     {this.state.quality !== 0 ?
                         <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
                     {this.state.length !== 0 ?
                         <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
-                    <hr/>
+                    <Line/>
                     <SideBarTitle>Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
                         <Tag
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 3eb2113..75eecbc 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -2,8 +2,6 @@ import React from "react";
 import {Button, Col, Form} from "react-bootstrap";
 import style from "./GeneralSettings.module.css"
 import StaticInfos from "../../GlobalInfos";
-import darktheme from "../../AppDarkTheme.module.css";
-import lighttheme from "../../AppLightTheme.module.css";
 
 class GeneralSettings extends React.Component {
     constructor(props) {
@@ -40,7 +38,7 @@ class GeneralSettings extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <>
                 <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index d93954b..064c38d 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/src/pages/SettingsPage/SettingsPage.js
@@ -2,6 +2,7 @@ import React from "react";
 import MovieSettings from "./MovieSettings";
 import GeneralSettings from "./GeneralSettings";
 import style from "./SettingsPage.module.css"
+import StaticInfos from "../../GlobalInfos";
 
 
 class SettingsPage extends React.Component {
@@ -27,9 +28,10 @@ class SettingsPage extends React.Component {
     }
 
     render() {
+        const themestyle = StaticInfos.getThemeStyle();
         return (
             <div>
-                <div className={style.SettingsSidebar}>
+                <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}> {/* todo: test style */}
                     <div className={style.SettingsSidebarTitle}>Settings</div>
                     <div onClick={() => this.setState({currentpage: "general"})}
                          className={style.SettingSidebarElement}>General