correct theme style at settings page
This commit is contained in:
		@@ -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;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,3 +1,7 @@
 | 
				
			|||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * The coloring elements for light theme
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.navitem::after {
 | 
					.navitem::after {
 | 
				
			||||||
    background: black;
 | 
					    background: black;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@@ -10,6 +14,10 @@
 | 
				
			|||||||
    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);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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();
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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();
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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 {
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user