correct theme style at settings page

This commit is contained in:
lukas 2020-07-27 21:14:56 +02:00
parent aa741c5a90
commit 0ec4954ec5
5 changed files with 34 additions and 5 deletions

View File

@ -1,3 +1,7 @@
/**
* The coloring elements for dark theme
*/
.backgroundcolor{ .backgroundcolor{
background-color: #141520; background-color: #141520;
} }
@ -6,6 +10,10 @@
color: white; color: white;
} }
.subtextcolor{
color: #dedad6;
}
.navitem::after { .navitem::after {
background: white; background: white;
} }

View File

@ -1,3 +1,7 @@
/**
* The coloring elements for light theme
*/
.navitem::after { .navitem::after {
background: black; background: black;
} }
@ -10,10 +14,14 @@
color: black; color: black;
} }
.subtextcolor {
color: #212529;
}
.hrcolor { .hrcolor {
border-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.1);
} }
.previewhover:hover{ .previewhover:hover {
box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px; box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
} }

View File

@ -1,7 +1,13 @@
class GlobalInfos { class GlobalInfos {
#darktheme = false;
isDarkTheme() { isDarkTheme() {
return true; return this.#darktheme;
}; };
enableDarkTheme(enable = true){
this.#darktheme = enable;
}
} }
const StaticInfos = new GlobalInfos(); const StaticInfos = new GlobalInfos();

View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import {Button, Col, Form} from "react-bootstrap"; import {Button, Col, Form} from "react-bootstrap";
import style from "./GeneralSettings.module.css" 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 { class GeneralSettings extends React.Component {
constructor(props) { constructor(props) {
@ -37,9 +40,10 @@ class GeneralSettings extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<> <>
<div className={style.GeneralForm}> <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
<Form data-testid='mainformsettings' onSubmit={(e) => { <Form data-testid='mainformsettings' onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
this.saveSettings(); this.saveSettings();

View File

@ -3,8 +3,11 @@
float: left; float: left;
width: 10%; width: 10%;
background-color: #d3dcef; background-color: #d3dcef;
min-height: calc(100vh - 56px); min-height: calc(100vh - 62px);
min-width: 110px; min-width: 110px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
} }
.SettingsSidebarTitle { .SettingsSidebarTitle {
@ -37,4 +40,4 @@
box-shadow: #7d8dd4 0 0 0 5px; box-shadow: #7d8dd4 0 0 0 5px;
transition: all 300ms; transition: all 300ms;
cursor: pointer; cursor: pointer;
} }