From 747f3005c8a3fd0654671ec5b8c80e915bafe3f1 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner 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 (
{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 -
+