fix(fe/bg): dialog bg is always fixed

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;
 }

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;
 }

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",
+                size: iconSize("s"),
-                color: "cyan1",
+                color: "focus",
               },
               managementPane: {
                 name: "RiWindowFill",
-                size: "1.6rem",
+                size: iconSize("s"),
-                color: "cyan1",
+                color: "focus",
               },
             })}
             ui={this.props.ui}

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;
     }

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}