refine help nav.

css/app.css

@@ -489,9 +489,11 @@ button.save.has-count .count::before {
 .icon.inspect.light    { background-position: -220px -20px;}
 .icon.geocode.light    { background-position: -280px -20px;}
 .icon.help.light       { background-position: -460px -20px;}
+.icon.avatar.light     { background-position: -320px -20px;}
+.icon.nearby.light     { background-position: -340px -20px;}
 
-.fillD .icon.avatar           { background-position: -320px -20px;}
-.fillD .icon.nearby           { background-position: -340px -20px;}
+.icon.back.blue        { background-position: -420px -20px;}
+.icon.forward.blue     { background-position: -440px -20px;}
 
 button[disabled] .icon.browse     { background-position:   0 -40px;}
 button[disabled] .icon.add-point  { background-position: -20px -40px;}
@@ -534,14 +536,6 @@ button[disabled] .icon.nearby     { background-position: -340px -40px;}
 .icon.note       { background-position: -120px -200px;}
 .icon.wheelchair { background-position: -140px -200px;}
 
-/* Toggle icon is special */
-
-.toggle.icon                   { background-position: 0 -180px;}
-a:hover .toggle.icon           { background-position: -20px -180px;}
-.selected .toggle.icon,
-a.selected:hover .toggle.icon  { background-position: -40px -180px;}
-
-
 /* ToolBar / Persistent UI Elements
 ------------------------------------------------------- */
 
@@ -1586,11 +1580,6 @@ img.wiki-image {
     margin-bottom: 20px;
 }
 
-.help-wrap p:last-child {
-    border-bottom: 1px solid #CCC;
-    padding-bottom: 20px;
-}
-
 .help-wrap .left-content .body p code {
     padding:2px 4px;
     background:#eee;
@@ -1605,11 +1594,20 @@ img.wiki-image {
     padding-left: 5px
 }
 
-.help-wrap .toc li a {
+.help-wrap .toc li a,
+.help-wrap .nav a {
     display: block;
     border: 1px solid #CCC;
+    padding: 5px 10px;
+}
+
+.help-wrap .toc li a {
     border-bottom: 0;
-    padding: 5px;
+}
+
+.help-wrap .toc li a:hover,
+.help-wrap .nav a:hover  {
+    background: #ececec;
 }
 
 .help-wrap .toc li a.selected {
@@ -1625,20 +1623,28 @@ img.wiki-image {
     border-radius: 0 0 4px 4px
 }
 
+.help-wrap .nav {
+    position: relative;
+}
+
 .help-wrap .nav a {
+    float: left;
     width: 50%;
-    display: inline-block;
+    text-align: center;
 }
 
-.help-wrap .nav a.previous {
+.help-wrap .nav a:first-child {
+    border-radius: 4px 0 0 4px;
 }
 
-.help-wrap .nav a span {
-    padding: 10px;
+.help-wrap .nav a:last-child:not(:only-child) {
+    border-radius: 0 4px 4px 0;
+    border-left: 0;
 }
 
-.help-wrap .nav a.next {
-    text-align: right;
+.help-wrap .nav a:only-child {
+    width: 100%;
+    border-radius: 4px;
 }
 
 /* Map

img/source/sprite.svg

@@ -15,9 +15,9 @@
    version="1.1"
    inkscape:version="0.48.2 r9819"
    sodipodi:docname="sprite.svg"
-   inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite2x.png"
-   inkscape:export-xdpi="180"
-   inkscape:export-ydpi="180">
+   inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
   <defs
      id="defs12395">
     <clipPath
@@ -39,8 +39,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="227.49172"
-     inkscape:cy="279.42802"
+     inkscape:cx="415.70951"
+     inkscape:cy="302.57793"
      inkscape:document-units="px"
      inkscape:current-layer="layer12"
      showgrid="false"
@@ -2565,5 +2565,17 @@
          d="M 32,66.5 C 32,67.328427 31.328427,68 30.5,68 29.671573,68 29,67.328427 29,66.5 29,65.671573 29.671573,65 30.5,65 c 0.828427,0 1.5,0.671573 1.5,1.5 z"
          transform="translate(370,12.362188)" />
     </g>
+    <path
+       sodipodi:nodetypes="cccccc"
+       inkscape:connector-curvature="0"
+       id="path10391"
+       d="m 450,29.999997 8,7 1,-1 0,-12 -1,-1 z"
+       style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 479,29.999997 -8,7 -1,-1 0,-12 1,-1 z"
+       id="path10393"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccc" />
   </g>
 </svg>

js/id/ui/account.js

@@ -27,7 +27,7 @@ iD.ui.Account = function(context) {
                     .attr('src', details.image_url);
             } else {
                 userLink.append('span')
-                    .attr('class', 'icon avatar icon-pre-text');
+                    .attr('class', 'icon avatar light icon-pre-text');
             }
 
             // Add user name

js/id/ui/contributors.js

@@ -13,7 +13,7 @@ iD.ui.Contributors = function(context) {
 
         selection.html('')
             .append('span')
-            .attr('class', 'icon nearby icon-pre-text');
+            .attr('class', 'icon nearby light icon-pre-text');
 
         var userList = d3.select(document.createElement('span'));
 

js/id/ui/help.js

@@ -25,24 +25,23 @@ iD.ui.Help = function(context) {
 
                 nav.html('');
 
-                var prevLink = nav.append('a')
-                        .attr('class', 'previous')
-                        .on('click', function() {
-                            clickHelp(docs[i - 1], i - 1);
-                        }),
-                    nextLink = nav.append('a')
+                if (i > 0) {
+                    var prevLink = nav.append('a')
+                            .attr('class', 'previous')
+                            .on('click', function() {
+                                clickHelp(docs[i - 1], i - 1);
+                            });
+                    prevLink.append('span').attr('class', 'icon back blue');
+                    prevLink.append('span').text(docs[i - 1].title);
+                }
+                if (i < docs.length - 1) {
+                    var nextLink = nav.append('a')
                         .attr('class', 'next')
                         .on('click', function() {
                             clickHelp(docs[i + 1], i + 1);
                         });
-
-                if (i > 0) {
-                    prevLink.append('span').attr('class', 'icon back');
-                    prevLink.append('span').text(docs[i - 1].title);
-                }
-                if (i < docs.length - 1) {
                     nextLink.append('span').text(docs[i + 1].title);
-                    nextLink.append('span').attr('class', 'icon forward');
+                    nextLink.append('span').attr('class', 'icon forward blue');
                 }
             }