asifagaria/OpenMediaCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

easier getter function to get themestyle

Browse Source 
better dark theme for SideBar.js
This commit is contained in:
Lukas Heiligenbrunner
2020-08-03 23:31:43 +00:00
parent 8bea726e98
commit 747f3005c8
14 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/elements/SideBar/SideBar.js
View File

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

2
src/elements/SideBar/SideBar.module.css
View File

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