From 828b1f48377e8ff23c723b1e18829ae09fc339a0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 15 Jan 2016 12:35:30 +0000
Subject: [PATCH] fix up look and feel of UserSettings a bit more

---
 src/components/structures/UserSettings.js | 25 ++++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ddf4229170..def215ceb3 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -83,6 +83,12 @@ module.exports = React.createClass({
         }
     },
 
+    onAvatarPickerClick: function(ev) {
+        if (this.refs.file_label) {
+            this.refs.file_label.click();
+        }
+    },
+
     onAvatarSelected: function(ev) {
         var self = this;
         var changeAvatar = this.refs.changeAvatar;
@@ -175,7 +181,7 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get().isGuest()) {
             accountJsx = (
                 <div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
-                    Upgrade (It's free!)
+                    Create an account
                 </div>
             );
         }
@@ -224,14 +230,14 @@ module.exports = React.createClass({
                         })}
                     </div>
 
-                    <div className="mx_UserSettings_avatarPicker">
+                    <div className="mx_UserSettings_avatarPicker" onClick={ this.onAvatarPickerClick } >
                         <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
                             showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
                         <div className="mx_UserSettings_avatarPicker_edit">
-                            <label htmlFor="avatarInput">
-                                <img src="img/upload.svg"
+                            <label htmlFor="avatarInput" ref="file_label">
+                                <img src="img/camera.svg"
                                     alt="Upload avatar" title="Upload avatar"
-                                    width="19" height="24" />
+                                    width="17" height="15" />
                             </label>
                             <input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
                         </div>
@@ -241,13 +247,12 @@ module.exports = React.createClass({
                 <h2>Account</h2>
 
                 <div className="mx_UserSettings_section">
-                    {accountJsx}
-                </div>
-
-                <div className="mx_UserSettings_logout">
-                    <div className="mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    
+                    <div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Log out
                     </div>
+
+                    {accountJsx}
                 </div>
 
                 <h2>Notifications</h2>