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 (
{this.props.title}
@@ -21,10 +19,25 @@ class PageTitle extends React.Component {
<>
{this.props.children}
>
-
+
);
}
}
+/**
+ * class to override default
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 (
+ <>
+
+ >
+ );
+ }
+}
+
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('', function () {
it('renders pagetitle prop', function () {
const wrapper = shallow();
- expect(wrapper.find(".pageheader").text()).toBe("testtitle");
+ expect(wrapper.find(".pageheader").text()).toBe("testtitle");
});
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 (
this.itemClick()}>
{this.state.name}
@@ -67,9 +65,10 @@ class Preview extends React.Component {
export class TagPreview extends React.Component {
render() {
+ const themeStyle = StaticInfos.getThemeStyle();
return (
-
this.itemClick()}>
-
+
this.itemClick()}>
+
{this.props.name}
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 (
{this.props.children}
);
@@ -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 (
{this.props.children}
);
@@ -24,8 +22,9 @@ export class SideBarTitle extends React.Component {
export class SideBarItem extends React.Component {
render() {
+ const themeStyle = StaticInfos.getThemeStyle();
return (
-
{this.props.children}
+
{this.props.children}
);
}
}
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
-
+