Tweak button styles, add browse button

css/app.css

@@ -94,11 +94,12 @@ table th {
 }
 
 #bar {
-    background:#fff;
+    background:#e8e8e8;
+    border-bottom:1px solid #aaa;
     position:absolute;
     left:0px;
     top:0px;
-    height:45px;
+    height:44px;
     right:0;
 }
 
@@ -127,46 +128,51 @@ div.geocode-control input {
     font-weight:bold;
     font-size:14px;
     line-height:19px;
-    border:1px solid #ccc;
     border-radius:3px;
+    border:1px solid #ccc;
     padding:0 10px;
     height:35px;
     margin:0;
 }
 
 div.buttons-joined {
-    padding:5px;
+    margin:3px;
+    padding:1px;
+    background:#fff;
     display:inline-block;
+    border-radius:3px;
+    border:1px solid #ccc;
 }
 
 #bar div.buttons-joined button:first-child {
     border-radius:3px 0 0 3px;
-    border-right:0;
 }
 #bar div.buttons-joined button:last-child {
-    border-right:1px solid #ccc;
+    border-right:0;
     border-radius:0 3px 3px 0;
 }
 
 #bar div.buttons-joined button {
-    border-right:0;
+    height:31px;
+    border:0;
+    border-right:1px solid #ccc;
     border-radius:0;
 }
 
 #bar .messages {
-    padding:10px;
-    overflow:hidden;
-    width:100px;
-    display:inline-block;
+    display:none;
 }
 
-#bar .user {
+.user {
     width:150px;
-    display:inline-block;
+    position:absolute;
+    bottom:10px;
+    left:10px;
+    background:#fff;
     padding:10px;
 }
 
-#bar .user .logout {
+.user .logout {
     margin-left:10px;
 }
 
@@ -182,6 +188,7 @@ div.buttons-joined {
 
 #bar button.save {
     display:inline-block;
+    color:#6dc643;
 }
 
 #bar button.mini,

js/id/id.js

@@ -29,7 +29,7 @@ window.iD = function(container) {
             .attr('class', 'buttons-joined');
 
         var buttons = buttons_joined.selectAll('button.add-button')
-            .data([iD.modes.AddPlace(), iD.modes.AddRoad(), iD.modes.AddArea()])
+            .data([iD.modes.Browse(), iD.modes.AddPlace(), iD.modes.AddRoad(), iD.modes.AddArea()])
             .enter().append('button')
                 .attr('class', 'add-button')
             .text(function (mode) { return mode.title; })
@@ -65,7 +65,7 @@ window.iD = function(container) {
             map.center([resp.results[0][0].lon, resp.results[0][0].lat]);
         };
 
-        bar.append('div')
+        this.append('div')
             .attr('class', 'user')
             .append('div')
             .attr('class', 'hello');

js/id/modes/browse.js

@@ -1,5 +1,9 @@
 iD.modes.Browse = function() {
-    var mode = {};
+    var mode = {
+        id: 'browse',
+        title: 'Browse',
+        description: 'Pan and zoom the map'
+    };
 
     mode.enter = function() {
         mode.map.surface.on('click.browse', function () {