User setting redesign (#3443)

* [user settings] modification

* [user setting] side nav: show current item & improvement

* [user stting] webdav password: redesigned it

* [user settings] language setting: redesigned it

frontend/src/components/user-settings/user-avatar-form.js

@@ -11,7 +11,8 @@ class UserAvatarForm extends React.Component {
     this.fileInput = React.createRef();
     this.form = React.createRef();
     this.state = {
-      avatarSrc: avatarURL
+      avatarSrc: avatarURL,
+      isEditShown: false
     };
   }
 
@@ -56,15 +57,27 @@ class UserAvatarForm extends React.Component {
     this.fileInput.current.click();
   }
 
+  handleMouseOver = () => {
+    this.setState({
+      isEditShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isEditShown: false
+    });
+  }
+
   render() {
     return (
       <form ref={this.form} className="form-group row" encType="multipart/form-data" method="post" action={`${siteRoot}avatar/add/`}>
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <label className="col-sm-1 col-form-label">{gettext('Avatar:')}</label>
-        <div className="col-sm-11">
-          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar mr-2 align-text-top" />
-          <button type="button" className="btn btn-secondary align-text-top" onClick={this.openFileInput}>{gettext('Change')}</button>
+        <div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar" />
           <input type="file" name="avatar" className="d-none" onChange={this.fileInputChange} ref={this.fileInput} />
+          <span className={`avatar-edit fas fa-edit ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput}></span>
         </div>
       </form>
     );