easier getter function to get themestyle

better dark theme for SideBar.js
This commit is contained in:
2020-08-03 23:31:43 +00:00
parent 8bea726e98
commit 747f3005c8
14 changed files with 54 additions and 36 deletions

View File

@ -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!

View File

@ -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>

View File

@ -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

View File

@ -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}>

View File

@ -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