added more functionality to name edit and added styling

app/client/app.css

@@ -1486,3 +1486,11 @@ input[type="checkbox"]:checked + #two-label:after {
 .unread-messages {
     background-color: orange;
 }
+
+.profile-action{
+    float: right;
+}
+
+#submit-name{
+    margin-left: 10px;
+}

app/client/client.js

@@ -99,15 +99,27 @@ Template.profile.events({
     "click #edit-name": function(){
         $("#name").hide();
         $("#name-div").show();
+        $("#edit-name").hide();
+        $("#cancel-edit").show();
     },
     "click #submit-name": function(){
         var user = Meteor.user();
         $("#name").show();
         $("#name-div").hide();
+        $("#edit-name").show();
+        $("#cancel-edit").hide();
         var realname = $("#input-name").val();
         var username = user.profile.username;
         $("#name").text("Name: " + realname);
+        $("#input-name").val("")
         Meteor.call("updateRealName", username, realname);
+    },
+    "click #cancel-edit": function(){
+        $("#name").show();
+        $("#name-div").hide();
+        $("#edit-name").show();
+        $("#cancel-edit").hide();
+        $("#input-name").val("");
     }
 })
 

app/client/templates/profile.html

@@ -12,13 +12,16 @@
                     <div class="panel-heading">Basic Info</div>
                     <div class="panel-body">
                         <ul>
-                            <li id="name">Name: {{realname}}</li>
+                            {{#if currentUser}}
+                                <a href="#" id="edit-name" class="profile-action">Edit</a>
+                                <a href="#" id="cancel-edit" class="profile-action" style="display:none;">Cancel</a>
+                            {{/if}}
+                            <li class="user-stat" id="name">Name: {{realname}}</li>
                             <div id="name-div" style="display: none">
-                                <input type="text" id="input-name"><button id="submit-name" class="btn btn-primary">Submit</button>
+                                <input type="text" id="input-name"><button id="submit-name" class="btn btn-primary btn-sm">Submit</button>
                             </div>
-                            <a href="#" id="edit-name">Edit</a>
-                            <li class="user-stat"><b>Joined: </b>{{first_joined}}</li>
-                            <li class="user-stat"><b>Rank: </b>{{rank}}</li>
+                            <li class="user-stat">Joined: {{first_joined}}</li>
+                            <li class="user-stat">Rank: {{rank}}</li>
                         </ul>
                     </div>
                 </div>