From 48cabf9a7100b1a66613395cd6e4bf3ed1d9986e Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sat, 19 Mar 2022 19:33:33 +0800
Subject: [PATCH] fix(fe/bg): dialog bg is always fixed

---
 public/static/css/dark.css                        |  4 +++-
 public/static/css/white.css                       |  6 ++++--
 src/client/web/src/components/dialog_settings.tsx | 10 +++++-----
 src/client/web/src/components/pane_admin.tsx      |  2 +-
 src/client/web/src/components/root_frame.tsx      | 11 +++++++++--
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/public/static/css/dark.css b/public/static/css/dark.css
index 19498f8..9ba18a4 100644
--- a/public/static/css/dark.css
+++ b/public/static/css/dark.css
@@ -126,7 +126,9 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background: url("/static/img/textured_paper.png") repeat fixed center;
+  background-color: rgba(20, 20, 20, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   overflow: scroll;
   z-index: 100;
 }
diff --git a/public/static/css/white.css b/public/static/css/white.css
index e9bf58b..363c5e1 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -52,7 +52,7 @@
 }
 
 .theme-default #bg {
-  background: url("/static/img/textured_paper.png") repeat fixed center;
+  /* background: url("/static/img/textured_paper.png") repeat fixed center; */
   position: fixed;
   left: 0;
   right: 0;
@@ -123,7 +123,9 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background: url("/static/img/textured_paper.png") repeat fixed center;
+  background-color: rgba(200, 200, 200, 0.5);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(9.5px);
   overflow: scroll;
   z-index: 100;
 }
diff --git a/src/client/web/src/components/dialog_settings.tsx b/src/client/web/src/components/dialog_settings.tsx
index 7aa3bd5..b832e0e 100644
--- a/src/client/web/src/components/dialog_settings.tsx
+++ b/src/client/web/src/components/dialog_settings.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Map } from "immutable";
 
 import { ICoreState, MsgProps, UIProps } from "./core_state";
-import { IconProps } from "./visual/icons";
+import { IconProps, iconSize } from "./visual/icons";
 
 import { PaneSettings } from "./pane_settings";
 import { AdminPane, AdminProps } from "./pane_admin";
@@ -43,13 +43,13 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
             tabIcons={Map<string, IconProps>({
               preferencePane: {
                 name: "RiSettings3Fill",
-                size: "1.6rem",
-                color: "cyan1",
+                size: iconSize("s"),
+                color: "focus",
               },
               managementPane: {
                 name: "RiWindowFill",
-                size: "1.6rem",
-                color: "cyan1",
+                size: iconSize("s"),
+                color: "focus",
               },
             })}
             ui={this.props.ui}
diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx
index c9b237a..44665af 100644
--- a/src/client/web/src/components/pane_admin.tsx
+++ b/src/client/web/src/components/pane_admin.tsx
@@ -765,7 +765,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
 
   setClientCfg = async () => {
     const bgURL = this.props.ui.bg.url;
-    if (bgURL.length === 0 || bgURL.length >= 4096) {
+    if (bgURL.length >= 4096) {
       alertMsg(this.props.msg.pkg.get("bg.url.alert"));
       return;
     }
diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx
index 7a13950..ceff4dd 100644
--- a/src/client/web/src/components/root_frame.tsx
+++ b/src/client/web/src/components/root_frame.tsx
@@ -31,6 +31,13 @@ export class RootFrame extends React.Component<Props, State, {}> {
   }
 
   makeBgStyle = (): Object => {
+    if (
+      this.props.login.preferences.bg.url === "" &&
+      this.props.ui.bg.url === ""
+    ) {
+      return {};
+    }
+
     let bgStyle = undefined;
     if (
       this.props.login.preferences != null &&
@@ -66,7 +73,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
 
     return (
       <div id="root-frame" className={`${theme} ${fontSizeClass}`}>
-        <div id="bg" style={{}}>
+        <div id="bg" style={bgStyle}>
           <Layers
             login={this.props.login}
             admin={this.props.admin}
@@ -76,7 +83,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
             update={this.props.update}
           />
 
-        <TopBar
+          <TopBar
             login={this.props.login}
             msg={this.props.msg}
             ui={this.props.ui}