correct theme style at settings page
This commit is contained in:
		@@ -1,3 +1,7 @@
 | 
			
		||||
/**
 | 
			
		||||
 * The coloring elements for dark theme
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
.backgroundcolor{
 | 
			
		||||
    background-color: #141520;
 | 
			
		||||
}
 | 
			
		||||
@@ -6,6 +10,10 @@
 | 
			
		||||
    color: white;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subtextcolor{
 | 
			
		||||
    color: #dedad6;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.navitem::after {
 | 
			
		||||
    background: white;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,3 +1,7 @@
 | 
			
		||||
/**
 | 
			
		||||
 * The coloring elements for light theme
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
.navitem::after {
 | 
			
		||||
    background: black;
 | 
			
		||||
}
 | 
			
		||||
@@ -10,10 +14,14 @@
 | 
			
		||||
    color: black;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subtextcolor {
 | 
			
		||||
    color: #212529;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.hrcolor {
 | 
			
		||||
    border-color: rgba(0, 0, 0, 0.1);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.previewhover:hover{
 | 
			
		||||
.previewhover:hover {
 | 
			
		||||
    box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,13 @@
 | 
			
		||||
class GlobalInfos {
 | 
			
		||||
    #darktheme = false;
 | 
			
		||||
 | 
			
		||||
    isDarkTheme() {
 | 
			
		||||
        return true;
 | 
			
		||||
        return this.#darktheme;
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    enableDarkTheme(enable = true){
 | 
			
		||||
        this.#darktheme = enable;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const StaticInfos = new GlobalInfos();
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,9 @@
 | 
			
		||||
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) {
 | 
			
		||||
@@ -37,9 +40,10 @@ class GeneralSettings extends React.Component {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    render() {
 | 
			
		||||
        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
 | 
			
		||||
        return (
 | 
			
		||||
            <>
 | 
			
		||||
                <div className={style.GeneralForm}>
 | 
			
		||||
                <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
 | 
			
		||||
                    <Form data-testid='mainformsettings' onSubmit={(e) => {
 | 
			
		||||
                        e.preventDefault();
 | 
			
		||||
                        this.saveSettings();
 | 
			
		||||
 
 | 
			
		||||
@@ -3,8 +3,11 @@
 | 
			
		||||
    float: left;
 | 
			
		||||
    width: 10%;
 | 
			
		||||
    background-color: #d3dcef;
 | 
			
		||||
    min-height: calc(100vh - 56px);
 | 
			
		||||
    min-height: calc(100vh - 62px);
 | 
			
		||||
    min-width: 110px;
 | 
			
		||||
 | 
			
		||||
    border-top-right-radius: 10px;
 | 
			
		||||
    border-bottom-right-radius: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.SettingsSidebarTitle {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user