easier getter function to get themestyle

better dark theme for SideBar.js

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;

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 () {

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>

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>
         );
     }
 }

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;