refactoring of account settings into multiple screens

src/widgets/avatar-upload.jsx

@@ -41,9 +41,10 @@ export default class AvatarUpload extends React.Component {
   render() {
     // Randomize id value in case more than one AvatarUpload is shown
     // at the same time.
-    var randId = "file-input-avatar-" + (Math.random() + '').substr(2);
+    const randId = 'file-input-avatar-' + (Math.random() + '').substr(2);
+    const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');
     return (
-      <div className="avatar-upload">
+      <div className={className}>
         {this.props.readOnly || !this.state.dataUrl ?
           null :
           <a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageChanged(null);}}>

src/widgets/button-back.jsx

@@ -0,0 +1,12 @@
+// The <- button to be displayed in title bars.
+import React from 'react';
+
+export default class ButtonBack extends React.PureComponent {
+  render() {
+    return (
+      <a href="#" onClick={(e) => {e.preventDefault(); this.props.onBack();}}>
+        <i className="material-icons">arrow_back</i>
+      </a>
+    );
+  }
+}

src/widgets/menu-cancel.jsx

@@ -4,7 +4,9 @@ import React from 'react';
 export default class MenuCancel extends React.PureComponent {
   render() {
     return (
-      <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}><i className="material-icons">close</i></a>
+      <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}>
+        <i className="material-icons">close</i>
+      </a>
     );
   }
 }

src/widgets/side-navbar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
-import MenuCancel from './menu-cancel.jsx';
+import ButtonBack from './button-back.jsx';
 import MenuContacts from './menu-contacts.jsx';
 import MenuStart from './menu-start.jsx';
 
@@ -9,20 +9,22 @@ export default class SideNavbar extends React.PureComponent {
   render() {
     return (
         <div id="side-caption-panel" className="caption-panel">
-          <div id="self-avatar" className="avatar-box">
-            <LetterTile
-              avatar={this.props.avatar}
-              topic={this.props.myUserId}
-              title={this.props.title} />
-          </div>
+          {this.props.onCancel ? <ButtonBack onBack={this.props.onCancel} /> : null}
+          {this.props.avatar ?
+            <div id="self-avatar" className="avatar-box">
+              <LetterTile
+                avatar={this.props.avatar}
+                topic={this.props.myUserId}
+                title={this.props.title} />
+            </div>
+            :
+            null}
           <div id="sidepanel-title" className="panel-title">{this.props.title}</div>
           {this.props.state === 'login' ?
               <MenuStart onSignUp={this.props.onSignUp} onSettings={this.props.onSettings} /> :
             this.props.state === 'contacts' ?
               <MenuContacts onNewTopic={this.props.onNewTopic} onSettings={this.props.onSettings} /> :
             null}
-          {this.props.onCancel ?
-             <MenuCancel onCancel={this.props.onCancel} /> : null}
         </div>
     );
   }