Merge pull request #248 from dod-ccpo/ui/logout-button

Ui/logout button

static/icons/logout.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><clipPath id="a"><path d="M16 0v16H0V0h16z"/></clipPath><g clip-path="url(#a)"><path d="M0 16V0h6v2H2v12h4v2H0zm14-9v2H4V7h10zm-4 5c0-.256.098-.512.293-.707L13.586 8l-3.293-3.293c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l4 4c.391.391.391 1.023 0 1.414l-4 4c-.391.391-1.023.391-1.414 0-.195-.195-.293-.451-.293-.707z" fill-rule="nonzero"/></g></svg>

styles/components/_topbar.scss

@@ -49,7 +49,13 @@
       flex-grow: 1;
       flex-direction: row;
       align-items: stretch;
-      justify-content: space-between;
+      justify-content: flex-end;
+
+      .topbar__link {
+        &:first-child {
+          margin-right: auto;
+        }
+      }
 
       &.topbar__context--workspace {
         background-color: $color-primary;

templates/header.html

@@ -1,11 +0,0 @@
-<header class="topbar">
-  <nav class="topbar__navigation">
-    <a href="/" class="topbar__link topbar__link--primary">
-      <span>JEDI</span>
-    </a>
-
-    <a href="/" class="topbar__link topbar__link--secondary">
-      <span>{{ current_user.get("atat_role") }}</span>
-    </a>
-  </nav>
-</header>

templates/navigation/topbar.html

@@ -9,13 +9,17 @@
     <div class="topbar__context {% if workspace %}topbar__context--workspace{% endif %}">
       {% set topbar_link = url_for("workspaces.show_workspace", workspace_id=workspace.id) if workspace else url_for("atst.home") %}
       <a href="{{ topbar_link }}" class="topbar__link">
-        <span class="topbar__link-label">{{ ("Workspace " + workspace.name) if workspace else "JEDI" }}</span>
+        <span class="topbar__link-label">{{ ("Workspace " + workspace.name) if workspace else "JEDI Cloud" }}</span>
       </a>
 
       <a href="/" class="topbar__link">
         <span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
         {{ Icon('avatar', classes='topbar__link-icon') }}
       </a>
+
+      <a href="/" class="topbar__link" title='Log out of JEDI Cloud'>
+        {{ Icon('logout', classes='topbar__link-icon') }}
+      </a>
     </div>
   </nav>
 </header>