fix(ui/admin_pane): fix user pane layout

public/static/css/style.css

@@ -532,6 +532,9 @@ tr button {
   color: white;
   fill: #f1c40f;
 }
+.font-size-s {
+  font-size: 1.2rem;
+}
 .font-size-m {
   font-size: 1.4rem;
 }
@@ -635,6 +638,10 @@ div.hr {
   padding: 1rem 0;
 } */
 
+.block {
+  display: block;
+}
+
 .inline-block {
   display: inline-block;
 }

src/client/web/src/components/pane_admin.tsx

@@ -128,27 +128,49 @@ export class UserForm extends React.Component<
 
   render() {
     return (
-      <span>
-        <span className="flex-list-container">
-          <div className="flex-list-item-l">
-            <span className="vbar green0-bg"></span>
       <div
-              className="margin-l-m"
+        style={{
+          border: "dashed 2px #ccc",
+          padding: "1rem",
+        }}
+      >
+        <div className="flex-list-container">
+          <div className="flex-list-item-l">
+            <div
               style={{
                 flexDirection: "column",
               }}
             >
               <div className="bold item-name">
-                Name: {this.props.name} / ID: {this.props.id} / Role:{" "}
+                Name: {this.props.name} / ID: {this.props.id}
-                {this.props.role}
               </div>
-              <div className="grey1-font item-name">
-                SpaceLimit: {this.props.quota.spaceLimit} / UploadSpeedLimit:{" "}
-                {this.props.quota.uploadSpeedLimit} / DownloadSpeedLimit:{" "}
-                {this.props.quota.downloadSpeedLimit}
             </div>
-              <div className="margin-t-m">
+          </div>
-                <div className="flex-list-item-l">
+
+          <div
+            className="flex-list-item-r"
+            style={{
+              flexDirection: "column",
+              flexBasis: "80%",
+              alignItems: "flex-end",
+            }}
+          >
+            <button
+              onClick={this.delUser}
+              className="grey1-bg white-font margin-r-m"
+            >
+              Delete User
+            </button>
+          </div>
+        </div>
+
+        <div className="hr margin-t-m margin-b-m"></div>
+
+        <div className="flex-list-container">
+          <div className="flex-list-item-l" style={{ flex: "70%" }}>
+            <div>
+              <div>
+                <div className="margin-r-m font-size-s grey1-font">Role</div>
                 <input
                   name={`${this.props.id}-role`}
                   type="text"
@@ -157,6 +179,12 @@ export class UserForm extends React.Component<
                   className="black0-font margin-r-m"
                   placeholder={this.state.role}
                 />
+              </div>
+
+              <div className="margin-t-m">
+                <div className="margin-r-m font-size-s grey1-font">
+                  Space Limit
+                </div>
                 <input
                   name={`${this.props.id}-spaceLimit`}
                   type="text"
@@ -165,6 +193,12 @@ export class UserForm extends React.Component<
                   className="black0-font margin-r-m"
                   placeholder={`${this.state.quota.spaceLimit}`}
                 />
+              </div>
+
+              <div className="margin-t-m">
+                <div className="margin-r-m font-size-s grey1-font">
+                  Upload Speed Limit
+                </div>
                 <input
                   name={`${this.props.id}-uploadSpeedLimit`}
                   type="text"
@@ -173,6 +207,12 @@ export class UserForm extends React.Component<
                   className="black0-font margin-r-m"
                   placeholder={`${this.state.quota.uploadSpeedLimit}`}
                 />
+              </div>
+
+              <div className="margin-t-m">
+                <div className="margin-r-m font-size-s grey1-font">
+                  Download Speed Limit
+                </div>
                 <input
                   name={`${this.props.id}-downloadSpeedLimit`}
                   type="text"
@@ -182,6 +222,8 @@ export class UserForm extends React.Component<
                   placeholder={`${this.state.quota.downloadSpeedLimit}`}
                 />
               </div>
+            </div>
+          </div>
           <div className="flex-list-item-r">
             <button
               onClick={this.setUser}
@@ -191,34 +233,22 @@ export class UserForm extends React.Component<
             </button>
           </div>
         </div>
-            </div>
-          </div>
-          <div
-            className="flex-list-item-r"
-            style={{
-              flexDirection: "column",
-              flexBasis: "80%",
-              alignItems: "flex-end",
-            }}
-          >
-            <div className="margin-t-m">
-              <button
-                onClick={this.delUser}
-                className="grey1-bg white-font margin-r-m"
-              >
-                Delete User
-              </button>
-            </div>
-          </div>
-        </span>
 
-        <div className="margin-t-m">
+        <div className="hr margin-t-m margin-b-m"></div>
+
+        <div className="flex-list-container margin-t-m">
+          <div
+            className="flex-list-item-l"
+            style={{ flexDirection: "column", alignItems: "flex-start" }}
+          >
+            <div className="font-size-s grey1-font">Password</div>
+
             <input
               name={`${this.props.id}-pwd1`}
               type="password"
               onChange={this.changePwd1}
               value={this.state.newPwd1}
-            className="black0-font margin-r-m"
+              className="black0-font margin-b-m"
               placeholder="new password"
             />
             <input
@@ -226,9 +256,12 @@ export class UserForm extends React.Component<
               type="password"
               onChange={this.changePwd2}
               value={this.state.newPwd2}
-            className="black0-font margin-r-m"
+              className="black0-font margin-b-m"
               placeholder="repeat password"
             />
+          </div>
+
+          <div className="flex-list-item-r">
             <button
               onClick={this.setPwd}
               className="grey1-bg white-font margin-r-m"
@@ -236,7 +269,8 @@ export class UserForm extends React.Component<
               Update
             </button>
           </div>
-      </span>
+        </div>
+      </div>
     );
   }
 }
@@ -380,9 +414,16 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
     return (
       <div className="font-size-m">
-        <div className="container">
+        <div className="container padding-l">
-          <div className="flex-list-container padding-l">
+          <div className="flex-list-container bold">
-            {/* <span className="inline-block margin-t-m margin-b-m"> */}
+            <span className="flex-list-item-l">
+              <span className="dot black-bg"></span>
+              <span>Add New User</span>
+            </span>
+            <span className="flex-list-item-r padding-r-m"></span>
+          </div>
+
+          <div className="flex-list-container margin-t-m">
             <div
               className="flex-list-item-l"
               style={{
@@ -427,7 +468,6 @@ export class AdminPane extends React.Component<Props, State, {}> {
                 Create User
               </button>
             </div>
-            {/* </span> */}
           </div>
         </div>
 
@@ -444,8 +484,16 @@ export class AdminPane extends React.Component<Props, State, {}> {
           </div>
         </div>
 
-        <div className="container">
+        <div className="container padding-l">
-          <div className="flex-list-container padding-l">
+          <div className="flex-list-container bold">
+            <span className="flex-list-item-l">
+              <span className="dot black-bg"></span>
+              <span>Add New Role</span>
+            </span>
+            <span className="flex-list-item-r padding-r-m"></span>
+          </div>
+
+          <div className="flex-list-container">
             <div className="flex-list-item-l">
               <span className="inline-block margin-t-m margin-b-m">
                 <input