From 4fd9bd9c332a2bbc719e9d1f16573a50efddee31 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sat, 25 Dec 2021 20:04:47 +0800
Subject: [PATCH] fix(fe/panes): refine styles of panes

---
 public/static/css/default.css                 |   4 +
 public/static/css/white.css                   |  14 +-
 .../web/src/components/control/tabs.tsx       |   2 +-
 src/client/web/src/components/pane_admin.tsx  | 391 ++++++++++--------
 .../web/src/components/pane_settings.tsx      | 345 ++++++++--------
 5 files changed, 397 insertions(+), 359 deletions(-)

diff --git a/public/static/css/default.css b/public/static/css/default.css
index 8c5e853..e9deb48 100644
--- a/public/static/css/default.css
+++ b/public/static/css/default.css
@@ -494,3 +494,7 @@
 .full-width {
   width: 100%;
 }
+
+.bold {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/public/static/css/white.css b/public/static/css/white.css
index 6d1c140..f824a49 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -113,7 +113,7 @@
   background-color: white;
   border-radius: 0.8rem;
   margin-bottom: 2rem;
-  box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);  
+  box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
 }
 
 .container-padding {
@@ -182,6 +182,7 @@
   font-size: 1.4rem;
   line-height: 2rem;
   display: block;
+  overflow-wrap: break-word;
 }
 
 .theme-default #item-rows .hr {
@@ -370,7 +371,7 @@
 
 .theme-default .pane-title {
   color: black;
-  line-height: 4rem;
+  font-size: 1.6rem;
 }
 
 .theme-default #pane-settings {
@@ -382,9 +383,14 @@
 }
 
 .theme-default .user-form {
-  border: dashed 2px #ccc;
-  padding: 1rem;
+  font-size: 1.4rem;
+  padding: 1rem 0;
   margin-top: 1rem;
+  border-bottom: dashed 1px #000;
+}
+
+.theme-default .more {
+  border: dashed 1px #ccc;
 }
 
 .theme-default .role-list-item {
diff --git a/src/client/web/src/components/control/tabs.tsx b/src/client/web/src/components/control/tabs.tsx
index e636890..83e4a47 100644
--- a/src/client/web/src/components/control/tabs.tsx
+++ b/src/client/web/src/components/control/tabs.tsx
@@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
 const defaultIconProps: IconProps = {
   name: "RiFolder2Fill",
   size: "1.6rem",
-  color: `${colorClass("1")}-font`,
+  color: `${colorClass("cyan1")}-font`,
 };
 
 export interface Props {
diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx
index bbe1d3d..4e6d789 100644
--- a/src/client/web/src/components/pane_admin.tsx
+++ b/src/client/web/src/components/pane_admin.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import { List, Map, Set } from "immutable";
 import FileSize from "filesize";
 
+import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
+
 import { alertMsg, confirmMsg } from "../common/env";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { User, Quota } from "../client";
@@ -39,6 +41,7 @@ export interface UserFormState {
   newPwd2: string;
   role: string;
   quota: Quota;
+  folded: boolean;
 }
 
 export class UserForm extends React.Component<
@@ -59,6 +62,7 @@ export class UserForm extends React.Component<
         uploadSpeedLimit: p.quota.uploadSpeedLimit,
         downloadSpeedLimit: p.quota.downloadSpeedLimit,
       },
+      folded: true,
     };
   }
 
@@ -150,25 +154,40 @@ export class UserForm extends React.Component<
       });
   };
 
+  toggle = () => {
+    this.setState({ folded: !this.state.folded });
+  };
+
   render() {
+    const foldedClass = this.state.folded ? "hidden" : "";
+    const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
+
     return (
       <div className="user-form">
         <Flexbox
           children={List([
             <div>
-              <div className="key-value">
-                {`${this.props.msg.pkg.get("user.name")}: `}
-                <span className="value">{this.props.name}</span>
-              </div>
-              <div className="key-value">
-                {`${this.props.msg.pkg.get("user.id")}: `}
-                <span className="value">{this.props.id}</span>
-              </div>
+              <span className="bold">{`${this.props.msg.pkg.get(
+                "user.name"
+              )}: `}</span>
+              <span className="margin-r-m">{this.props.name}</span>
+              <span className="bold">{`${this.props.msg.pkg.get(
+                "user.id"
+              )}: `}</span>
+              <span>{this.props.id}</span>
             </div>,
 
-            <button onClick={this.delUser}>
-              {this.props.msg.pkg.get("delete")}
-            </button>,
+            <span>
+              <RiMore2Fill
+                size="1.2rem"
+                className={`margin-r-m ${foldIconColor}`}
+                onClick={this.toggle}
+              />
+
+              <button onClick={this.delUser}>
+                {this.props.msg.pkg.get("delete")}
+              </button>
+            </span>,
           ])}
           childrenStyles={List([
             { alignItems: "flex-start", flexBasis: "70%" },
@@ -178,130 +197,134 @@ export class UserForm extends React.Component<
           ])}
         />
 
-        <div className="hr"></div>
+        <div className={foldedClass}>
+          <div className="hr"></div>
 
-        <Flexbox
-          children={List([
-            <div>
-              <span className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("user.role")}
-                </div>
-                <input
-                  name={`${this.props.id}-role`}
-                  type="text"
-                  onChange={this.changeRole}
-                  value={this.state.role}
-                  placeholder={this.state.role}
-                />
-              </span>
+          <Flexbox
+            className="margin-t-m"
+            children={List([
+              <div>
+                <span className="float-input">
+                  <div className="label">
+                    {this.props.msg.pkg.get("user.role")}
+                  </div>
+                  <input
+                    name={`${this.props.id}-role`}
+                    type="text"
+                    onChange={this.changeRole}
+                    value={this.state.role}
+                    placeholder={this.state.role}
+                  />
+                </span>
 
-              <span className="float-input">
-                <div className="label">
-                  {`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
-                    parseInt(this.state.quota.spaceLimit, 10),
-                    { round: 0 }
-                  )})`}
-                </div>
-                <input
-                  name={`${this.props.id}-spaceLimit`}
-                  type="number"
-                  onChange={this.changeSpaceLimit}
-                  value={this.state.quota.spaceLimit}
-                  placeholder={`${this.state.quota.spaceLimit}`}
-                />
-              </span>
+                <span className="float-input">
+                  <div className="label">
+                    {`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
+                      parseInt(this.state.quota.spaceLimit, 10),
+                      { round: 0 }
+                    )})`}
+                  </div>
+                  <input
+                    name={`${this.props.id}-spaceLimit`}
+                    type="number"
+                    onChange={this.changeSpaceLimit}
+                    value={this.state.quota.spaceLimit}
+                    placeholder={`${this.state.quota.spaceLimit}`}
+                  />
+                </span>
 
-              <span className="float-input">
-                <div className="label">
-                  {`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
-                    this.state.quota.uploadSpeedLimit,
-                    { round: 0 }
-                  )})`}
-                </div>
-                <input
-                  name={`${this.props.id}-uploadSpeedLimit`}
-                  type="number"
-                  onChange={this.changeUploadSpeedLimit}
-                  value={this.state.quota.uploadSpeedLimit}
-                  placeholder={`${this.state.quota.uploadSpeedLimit}`}
-                />
-              </span>
+                <span className="float-input">
+                  <div className="label">
+                    {`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
+                      this.state.quota.uploadSpeedLimit,
+                      { round: 0 }
+                    )})`}
+                  </div>
+                  <input
+                    name={`${this.props.id}-uploadSpeedLimit`}
+                    type="number"
+                    onChange={this.changeUploadSpeedLimit}
+                    value={this.state.quota.uploadSpeedLimit}
+                    placeholder={`${this.state.quota.uploadSpeedLimit}`}
+                  />
+                </span>
 
-              <span className="float-input">
-                <div className="label">
-                  {`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
-                    this.state.quota.downloadSpeedLimit,
-                    { round: 0 }
-                  )})`}
-                </div>
-                <input
-                  name={`${this.props.id}-downloadSpeedLimit`}
-                  type="number"
-                  onChange={this.changeDownloadSpeedLimit}
-                  value={this.state.quota.downloadSpeedLimit}
-                  placeholder={`${this.state.quota.downloadSpeedLimit}`}
-                />
-              </span>
-            </div>,
+                <span className="float-input">
+                  <div className="label">
+                    {`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
+                      this.state.quota.downloadSpeedLimit,
+                      { round: 0 }
+                    )})`}
+                  </div>
+                  <input
+                    name={`${this.props.id}-downloadSpeedLimit`}
+                    type="number"
+                    onChange={this.changeDownloadSpeedLimit}
+                    value={this.state.quota.downloadSpeedLimit}
+                    placeholder={`${this.state.quota.downloadSpeedLimit}`}
+                  />
+                </span>
+              </div>,
 
-            <button onClick={this.setUser}>
-              {this.props.msg.pkg.get("update")}
-            </button>,
-          ])}
-          childrenStyles={List([
-            { alignItems: "flex-start", flexBasis: "70%" },
-            {
-              justifyContent: "flex-end",
-              flexBasis: "30%",
-            },
-          ])}
-        />
+              <button onClick={this.setUser}>
+                {this.props.msg.pkg.get("update")}
+              </button>,
+            ])}
+            childrenStyles={List([
+              { alignItems: "flex-start", flexBasis: "70%" },
+              {
+                justifyContent: "flex-end",
+                flexBasis: "30%",
+              },
+            ])}
+          />
 
-        <div className="hr"></div>
+          <div className="hr"></div>
 
-        <Flexbox
-          children={List([
-            <div>
-              <div className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("settings.pwd.new1")}
+          <Flexbox
+            className="margin-t-m"
+            children={List([
+              <div>
+                <div className="float-input">
+                  <div className="label">
+                    {this.props.msg.pkg.get("settings.pwd.new1")}
+                  </div>
+
+                  <input
+                    name={`${this.props.id}-pwd1`}
+                    type="password"
+                    onChange={this.changePwd1}
+                    value={this.state.newPwd1}
+                    placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
+                  />
                 </div>
 
-                <input
-                  name={`${this.props.id}-pwd1`}
-                  type="password"
-                  onChange={this.changePwd1}
-                  value={this.state.newPwd1}
-                  placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
-                />
-              </div>
-
-              <div className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("settings.pwd.new2")}
+                <div className="float-input">
+                  <div className="label">
+                    {this.props.msg.pkg.get("settings.pwd.new2")}
+                  </div>
+                  <input
+                    name={`${this.props.id}-pwd2`}
+                    type="password"
+                    onChange={this.changePwd2}
+                    value={this.state.newPwd2}
+                    placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
+                  />
                 </div>
-                <input
-                  name={`${this.props.id}-pwd2`}
-                  type="password"
-                  onChange={this.changePwd2}
-                  value={this.state.newPwd2}
-                  placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
-                />
-              </div>
-            </div>,
+              </div>,
 
-            <button onClick={this.setPwd}>
-              {this.props.msg.pkg.get("update")}
-            </button>,
-          ])}
-          childrenStyles={List([
-            { alignItems: "flex-start", flexBasis: "70%" },
-            {
-              justifyContent: "flex-end",
-            },
-          ])}
-        />
+              <button onClick={this.setPwd}>
+                {this.props.msg.pkg.get("update")}
+              </button>,
+            ])}
+            childrenStyles={List([
+              { alignItems: "flex-start", flexBasis: "70%" },
+              {
+                justifyContent: "flex-end",
+              },
+            ])}
+          />
+        </div>
       </div>
     );
   }
@@ -343,19 +366,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
   };
 
   addRole = async () => {
-    return updater()
-      .addRole(this.state.newRole)
-      .then((status: string) => {
-        if (status !== "") {
-          alertMsg(this.props.msg.pkg.get("add.fail"));
-        } else {
-          alertMsg(this.props.msg.pkg.get("add.ok"));
-        }
-        return updater().listRoles();
-      })
-      .then(() => {
-        this.props.update(updater().updateAdmin);
-      });
+    const status = await updater().addRole(this.state.newRole);
+    if (status !== "") {
+      alertMsg(this.props.msg.pkg.get("add.fail"));
+    } else {
+      alertMsg(this.props.msg.pkg.get("add.ok"));
+      await updater().listRoles();
+      this.props.update(updater().updateAdmin);
+    }
   };
 
   delRole = async (role: string) => {
@@ -363,19 +381,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
       return;
     }
 
-    return updater()
-      .delRole(role)
-      .then((status: string) => {
-        if (status !== "") {
-          this.props.msg.pkg.get("delete.fail");
-        } else {
-          this.props.msg.pkg.get("delete.ok");
-        }
-        return updater().listRoles();
-      })
-      .then(() => {
-        this.props.update(updater().updateAdmin);
-      });
+    const status = await updater().delRole(role);
+    if (status !== "") {
+      this.props.msg.pkg.get("delete.fail");
+    } else {
+      this.props.msg.pkg.get("delete.ok");
+      await updater().listRoles();
+      this.props.update(updater().updateAdmin);
+    }
   };
 
   addUser = async () => {
@@ -384,33 +397,29 @@ export class AdminPane extends React.Component<Props, State, {}> {
       return;
     }
 
-    return updater()
-      .addUser({
-        id: "", // backend will fill it
-        name: this.state.newUserName,
-        pwd: this.state.newUserPwd1,
-        role: this.state.newUserRole,
-        quota: undefined,
-        usedSpace: "0",
-        preferences: undefined,
-      })
-      .then((status: string) => {
-        if (status !== "") {
-          alertMsg(this.props.msg.pkg.get("add.fail"));
-        } else {
-          alertMsg(this.props.msg.pkg.get("add.ok"));
-        }
-        this.setState({
-          newUserName: "",
-          newUserPwd1: "",
-          newUserPwd2: "",
-          newUserRole: "",
-        });
-        return updater().listUsers();
-      })
-      .then(() => {
-        this.props.update(updater().updateAdmin);
+    const status = await updater().addUser({
+      id: "", // backend will fill it
+      name: this.state.newUserName,
+      pwd: this.state.newUserPwd1,
+      role: this.state.newUserRole,
+      quota: undefined,
+      usedSpace: "0",
+      preferences: undefined,
+    });
+
+    if (status !== "") {
+      alertMsg(this.props.msg.pkg.get("add.fail"));
+    } else {
+      alertMsg(this.props.msg.pkg.get("add.ok"));
+      this.setState({
+        newUserName: "",
+        newUserPwd1: "",
+        newUserPwd2: "",
+        newUserRole: "",
       });
+      await updater().listUsers();
+      this.props.update(updater().updateAdmin);
+    }
   };
 
   render() {
@@ -464,7 +473,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>,
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("user.add")}
+              </h5>,
               <button onClick={this.addUser}>
                 {this.props.msg.pkg.get("add")}
               </button>,
@@ -472,6 +483,8 @@ export class AdminPane extends React.Component<Props, State, {}> {
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
 
+          <div className="hr"></div>
+
           <span className="float-input">
             <div className="label">{this.props.msg.pkg.get("user.name")}</div>
             <input
@@ -520,12 +533,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="title">
+              <h5 className="pane-title">
                 {this.props.msg.pkg.get("admin.users")}
               </h5>,
               <span></span>,
             ])}
           />
+
+          <div className="hr"></div>
+
           {userList}
         </Container>
 
@@ -533,11 +549,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
           <div>
             <Flexbox
               children={List([
-                <h5 className="title">{this.props.msg.pkg.get("role.add")}</h5>,
+                <h5 className="pane-title">
+                  {this.props.msg.pkg.get("role.add")}
+                </h5>,
                 <span></span>,
               ])}
             />
 
+            <div className="hr"></div>
+
             <Flexbox
               children={List([
                 <input
@@ -553,17 +573,20 @@ export class AdminPane extends React.Component<Props, State, {}> {
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
           </div>
+        </Container>
 
-          <div className="hr"></div>
-
+        <Container>
           <Flexbox
             children={List([
-              <h5 className="title">
+              <h5 className="pane-title">
                 {this.props.msg.pkg.get("admin.roles")}
               </h5>,
               <span></span>,
             ])}
           />
+
+          <div className="hr"></div>
+
           {roleList}
         </Container>
       </div>
@@ -698,7 +721,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
       <div>
         <Flexbox
           children={List([
-            <h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
+            <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
 
             <span>
               <button onClick={this.resetClientCfg} className="margin-r-m">
@@ -712,6 +735,8 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
           childrenStyles={List([{}, { justifyContent: "flex-end" }])}
         />
 
+        <div className="hr"></div>
+
         <div>
           <div className="float-input">
             <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index ca79c5b..9ccf74b 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -177,196 +177,200 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </div>
           </div>
+        </Container>
+
+        <Container>
+          <Flexbox
+            children={List([
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("settings.pwd.update")}
+              </h5>,
+              <button onClick={this.setPwd}>
+                {this.props.msg.pkg.get("update")}
+              </button>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
 
           <div className="hr"></div>
 
-          <div>
-            <Flexbox
-              children={List([
-                <h5 className="pane-title">
-                  {this.props.msg.pkg.get("settings.pwd.update")}
-                </h5>,
-                <button onClick={this.setPwd}>
-                  {this.props.msg.pkg.get("update")}
-                </button>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-            />
-
-            <span className="float-input">
-              <div className="label">
-                {this.props.msg.pkg.get("settings.pwd.old")}
-              </div>
-              <input
-                name="old_pwd"
-                type="password"
-                onChange={this.changeOldPwd}
-                value={this.state.oldPwd}
-                placeholder={this.props.msg.pkg.get("settings.pwd.old")}
-              />
-            </span>
-
-            <span className="float-input">
-              <div className="label">
-                {this.props.msg.pkg.get("settings.pwd.new1")}
-              </div>
-              <input
-                name="new_pwd1"
-                type="password"
-                onChange={this.changeNewPwd1}
-                value={this.state.newPwd1}
-                placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
-              />
-            </span>
-
-            <span className="float-input">
-              <div className="label">
-                {this.props.msg.pkg.get("settings.pwd.new2")}
-              </div>
-              <input
-                name="new_pwd2"
-                type="password"
-                onChange={this.changeNewPwd2}
-                value={this.state.newPwd2}
-                placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
-              />
-            </span>
-          </div>
-
-          <div className="hr"></div>
-
-          <div>
-            <Flexbox
-              children={List([
-                <h5 className="pane-title">
-                  {this.props.msg.pkg.get("settings.chooseLan")}
-                </h5>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-            />
-            <div>
-              <button
-                onClick={() => {
-                  this.setLan("en_US");
-                }}
-                className="float-input"
-              >
-                {this.props.msg.pkg.get("enUS")}
-              </button>
-              <button
-                onClick={() => {
-                  this.setLan("zh_CN");
-                }}
-                className="float-input"
-              >
-                {this.props.msg.pkg.get("zhCN")}
-              </button>
+          <span className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.pwd.old")}
             </div>
-          </div>
+            <input
+              name="old_pwd"
+              type="password"
+              onChange={this.changeOldPwd}
+              value={this.state.oldPwd}
+              placeholder={this.props.msg.pkg.get("settings.pwd.old")}
+            />
+          </span>
+
+          <span className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.pwd.new1")}
+            </div>
+            <input
+              name="new_pwd1"
+              type="password"
+              onChange={this.changeNewPwd1}
+              value={this.state.newPwd1}
+              placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
+            />
+          </span>
+
+          <span className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.pwd.new2")}
+            </div>
+            <input
+              name="new_pwd2"
+              type="password"
+              onChange={this.changeNewPwd2}
+              value={this.state.newPwd2}
+              placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
+            />
+          </span>
+        </Container>
+
+        <Container>
+          <Flexbox
+            children={List([
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("settings.chooseLan")}
+              </h5>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
 
           <div className="hr"></div>
 
           <div>
-            <Flexbox
-              children={List([
-                <h5 className="pane-title">
-                  {this.props.msg.pkg.get("settings.customLan")}
-                </h5>,
+            <button
+              onClick={() => {
+                this.setLan("en_US");
+              }}
+              className="float-input"
+            >
+              {this.props.msg.pkg.get("enUS")}
+            </button>
+            <button
+              onClick={() => {
+                this.setLan("zh_CN");
+              }}
+              className="float-input"
+            >
+              {this.props.msg.pkg.get("zhCN")}
+            </button>
+          </div>
+        </Container>
 
-                <span>
-                  <button onClick={this.syncPreferences}>
-                    {this.props.msg.pkg.get("update")}
-                  </button>
-                </span>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+        <Container>
+          <Flexbox
+            children={List([
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("settings.customLan")}
+              </h5>,
+
+              <span>
+                <button onClick={this.syncPreferences}>
+                  {this.props.msg.pkg.get("update")}
+                </button>
+              </span>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
+
+          <div className="hr"></div>
+
+          <div className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.lanPackURL")}
+            </div>
+            <input
+              type="text"
+              onChange={this.changeLanPackURL}
+              value={this.props.login.preferences.lanPackURL}
+              className="black0-font"
+              style={{ width: "20rem" }}
+              placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
             />
+          </div>
+        </Container>
+
+        <Container>
+          <Flexbox
+            children={List([
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("cfg.bg")}
+              </h5>,
+
+              <button onClick={this.syncPreferences}>
+                {this.props.msg.pkg.get("update")}
+              </button>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
+
+          <div className="hr"></div>
+
+          <div>
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.url")}
+              </div>
+              <input
+                name="bg_url"
+                type="text"
+                onChange={this.changeBgUrl}
+                value={this.props.login.preferences.bg.url}
+                placeholder={this.props.msg.pkg.get("cfg.bg.url")}
+              />
+            </div>
 
             <div className="float-input">
               <div className="label">
-                {this.props.msg.pkg.get("settings.lanPackURL")}
+                {this.props.msg.pkg.get("cfg.bg.repeat")}
               </div>
               <input
+                name="bg_repeat"
                 type="text"
-                onChange={this.changeLanPackURL}
-                value={this.props.login.preferences.lanPackURL}
-                className="black0-font"
-                style={{ width: "20rem" }}
-                placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
+                onChange={this.changeBgRepeat}
+                value={this.props.login.preferences.bg.repeat}
+                placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
+              />
+            </div>
+
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.pos")}
+              </div>
+              <input
+                name="bg_pos"
+                type="text"
+                onChange={this.changeBgPos}
+                value={this.props.login.preferences.bg.position}
+                placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
+              />
+            </div>
+
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.align")}
+              </div>
+              <input
+                name="bg_align"
+                type="text"
+                onChange={this.changeBgAlign}
+                value={this.props.login.preferences.bg.align}
+                placeholder={this.props.msg.pkg.get("cfg.bg.align")}
               />
             </div>
           </div>
+        </Container>
 
-          <div className="hr"></div>
-
-          <div>
-            <Flexbox
-              children={List([
-                <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
-
-                <button onClick={this.syncPreferences}>
-                  {this.props.msg.pkg.get("update")}
-                </button>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-            />
-
-            <div>
-              <div className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("cfg.bg.url")}
-                </div>
-                <input
-                  name="bg_url"
-                  type="text"
-                  onChange={this.changeBgUrl}
-                  value={this.props.login.preferences.bg.url}
-                  placeholder={this.props.msg.pkg.get("cfg.bg.url")}
-                />
-              </div>
-
-              <div className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("cfg.bg.repeat")}
-                </div>
-                <input
-                  name="bg_repeat"
-                  type="text"
-                  onChange={this.changeBgRepeat}
-                  value={this.props.login.preferences.bg.repeat}
-                  placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
-                />
-              </div>
-
-              <div className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("cfg.bg.pos")}
-                </div>
-                <input
-                  name="bg_pos"
-                  type="text"
-                  onChange={this.changeBgPos}
-                  value={this.props.login.preferences.bg.position}
-                  placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
-                />
-              </div>
-
-              <div className="float-input">
-                <div className="label">
-                  {this.props.msg.pkg.get("cfg.bg.align")}
-                </div>
-                <input
-                  name="bg_align"
-                  type="text"
-                  onChange={this.changeBgAlign}
-                  value={this.props.login.preferences.bg.align}
-                  placeholder={this.props.msg.pkg.get("cfg.bg.align")}
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* <div className="hr"></div>
+        {/* <div className="hr"></div>
           <div>
             <Flexbox
               children={List([
@@ -400,7 +404,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               ])}
             />
           </div> */}
-        </Container>
       </div>
     );
   }