From 74e5e1d27238d8f09fcc9f715ff13617c7c566e2 Mon Sep 17 00:00:00 2001
From: Christopher Grebs <cg@webshox.org>
Date: Fri, 13 Jan 2017 18:02:20 +0100
Subject: [PATCH] Add separate 'Sign Out' link to navigation, link user
 profile.

Fixes #4288
---
 .../devhub/new-landing/components/navigation.html      | 10 ++++++----
 static/css/devhub/new-landing/navigation.less          | 10 ++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/olympia/devhub/templates/devhub/new-landing/components/navigation.html b/src/olympia/devhub/templates/devhub/new-landing/components/navigation.html
index a1596e17c9..45a37d2c96 100644
--- a/src/olympia/devhub/templates/devhub/new-landing/components/navigation.html
+++ b/src/olympia/devhub/templates/devhub/new-landing/components/navigation.html
@@ -29,13 +29,15 @@
       </a></li>
 
       {% if user_authenticated %}
-        {# TODO: Not so sure this should be the logout link but where else to put it?
-                 Should probably be user.get_url_path() to point to the user profile #}
-        <li class="avatar"><a href="{{ url('users.logout') }}">
+        <li class="DevHub-Navigation-LogOut"><a href="{{ url('users.logout') }}">
+          {{ _('Sign Out') }}
+        </a></li>
+
+        <li class="avatar"><a href="{{ user.get_url_path() }}">
           <img src="{{ request.user.picture_url }}" alt="{% if not request.user.picture_type %}{{ _('No Photo') }}{% else %}{{ _('User Photo') }}{% endif %}" />
         </a></li>
       {% else %}
-        <li class="show-on-desktop"><a href="{{ login_link() }}">{{ _('Sign In') }}</a></li>
+        <li class="show-on-desktop DevHub-Navigation-LogIn"><a href="{{ login_link() }}">{{ _('Sign In') }}</a></li>
       {% endif %}
     </ul>
   </div>
diff --git a/static/css/devhub/new-landing/navigation.less b/static/css/devhub/new-landing/navigation.less
index ec94404eec..b471b1d67d 100644
--- a/static/css/devhub/new-landing/navigation.less
+++ b/static/css/devhub/new-landing/navigation.less
@@ -35,6 +35,16 @@
         }
       }
 
+      &.DevHub-Navigation-LogIn,
+      &.DevHub-Navigation-LogOut {
+        margin-left: 40px;
+
+        html[dir=rtl] & {
+          margin-right: 40px;
+          margin-left: 10px;
+        }
+      }
+
       a {
         color: @color-text;
         text-decoration: none;