feat: improve dark mode UI (casibase#1438)

Author: LeTeddy

web/src/ActivityPage.js

@@ -350,8 +350,6 @@ class ActivityPage extends BaseListPage {
                     showLoading={this.state["activities" + dataName] === undefined}
                     loadingOption={{
                       color: localStorage.getItem("themeColor"),
-                      textColor: "#000",
-                      maskColor: "rgba(255, 255, 255, 0.8)",
                       fontSize: "16px",
                       spinnerRadius: 6,
                       lineWidth: 3,
@@ -386,8 +384,6 @@ class ActivityPage extends BaseListPage {
               showLoading={activitiesAction === undefined}
               loadingOption={{
                 color: localStorage.getItem("themeColor"),
-                textColor: "#000",
-                maskColor: "rgba(255, 255, 255, 0.8)",
                 fontSize: "16px",
                 spinnerRadius: 6,
                 lineWidth: 3,
@@ -408,8 +404,6 @@ class ActivityPage extends BaseListPage {
               showLoading={activitiesAction === undefined}
               loadingOption={{
                 color: localStorage.getItem("themeColor"),
-                textColor: "#000",
-                maskColor: "rgba(255, 255, 255, 0.8)",
                 fontSize: "16px",
                 spinnerRadius: 6,
                 lineWidth: 3,

web/src/App.js

@@ -336,15 +336,11 @@ class App extends Component {
   setLogoAndThemeAlgorithm = (nextThemeAlgorithm) => {
     this.setState({
       themeAlgorithm: nextThemeAlgorithm,
-      logo: this.getLogo(nextThemeAlgorithm),
+      logo: Setting.getLogo(nextThemeAlgorithm),
     });
     localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
   };
 
-  getLogo(themes) {
-    return Setting.getLogo(themes);
-  }
-
   renderAvatar() {
     if (this.state.account.avatar === "") {
       return (
@@ -821,7 +817,7 @@ class App extends Component {
         <div style={{display: "flex", alignItems: "center", flex: 1, overflow: "hidden"}}>
           {Setting.isMobile() ? null : (
             <Link to={"/"}>
-              <img className="logo" src={this.getLogo(this.state.themeAlgorithm)} alt="logo" />
+              <img className="logo" src={Setting.getLogo(this.state.themeAlgorithm)} alt="logo" />
             </Link>
           )}
           {Setting.isMobile() ? (
@@ -868,7 +864,7 @@ class App extends Component {
             height: "67px",
           }
         }>
-          <div dangerouslySetInnerHTML={{__html: Conf.FooterHtml}} />
+          <div dangerouslySetInnerHTML={{__html: Setting.getFooterHtml(this.state.themeAlgorithm)}} />
         </Footer>
       </React.Fragment>
     );

web/src/Setting.js

@@ -2058,3 +2058,13 @@ export function getLogo(themes) {
     return defaultLogoUrl;
   }
 }
+
+export function getFooterHtml(themes) {
+  let FooterHtml = Conf.FooterHtml;
+  FooterHtml = FooterHtml.replace("https://cdn.casibase.org", Conf.StaticBaseUrl);
+  if (themes.includes("dark")) {
+    return FooterHtml.replace(/(\.png)/g, "_white$1");
+  } else {
+    return FooterHtml;
+  }
+}

web/src/UsagePage.js

@@ -521,9 +521,6 @@ class UsagePage extends BaseListPage {
         trigger: "axis",
         axisPointer: {
           type: "cross",
-          crossStyle: {
-            color: "#999",
-          },
         },
       },
       legend: {
@@ -661,13 +658,10 @@ class UsagePage extends BaseListPage {
                   height: "400px",
                   width: "100%",
                   display: "inline-block",
-                  backgroundColor: "#fff",
                 }}
                 showLoading={this.state.usages === null}
                 loadingOption={{
                   color: localStorage.getItem("themeColor"),
-                  textColor: "#000",
-                  maskColor: "rgba(255, 255, 255, 0.8)",
                   fontSize: "16px",
                   spinnerRadius: 6,
                   lineWidth: 3,
@@ -683,13 +677,10 @@ class UsagePage extends BaseListPage {
                   height: "400px",
                   width: "100%",
                   display: "inline-block",
-                  backgroundColor: "#fff",
                 }}
                 showLoading={this.state.usages === null}
                 loadingOption={{
                   color: localStorage.getItem("themeColor"),
-                  textColor: "#000",
-                  maskColor: "rgba(255, 255, 255, 0.8)",
                   fontSize: "16px",
                   spinnerRadius: 6,
                   lineWidth: 3,
@@ -714,13 +705,10 @@ class UsagePage extends BaseListPage {
               height: "400px",
               width: "48%",
               display: "inline-block",
-              backgroundColor: "#fff",
             }}
             showLoading={rangeUsages === null}
             loadingOption={{
               color: localStorage.getItem("themeColor"),
-              textColor: "#000",
-              maskColor: "rgba(255, 255, 255, 0.8)",
               fontSize: "16px",
               spinnerRadius: 6,
               lineWidth: 3,
@@ -734,13 +722,10 @@ class UsagePage extends BaseListPage {
               height: "400px",
               width: "48%",
               display: "inline-block",
-              backgroundColor: "#fff",
             }}
             showLoading={rangeUsages === null}
             loadingOption={{
               color: localStorage.getItem("themeColor"),
-              textColor: "#000",
-              maskColor: "rgba(255, 255, 255, 0.8)",
               fontSize: "16px",
               spinnerRadius: 6,
               lineWidth: 3,
@@ -755,7 +740,7 @@ class UsagePage extends BaseListPage {
 
   render() {
     return (
-      <div style={{backgroundColor: "white"}}>
+      <div>
         <Row style={{marginTop: "20px"}} >
           <Col span={1} />
           <Col span={17} >