provider logout link placement

src/generic-provider-views/Browser.js

@@ -13,9 +13,6 @@ module.exports = (props) => {
 
   return html`
     <div class="Browser">
-      <div>
-        <button onclick=${props.logout} class="UppyDashboardTab-btn">Sign out</button>
-      </div>
       <header>
         <input
           type="text"
@@ -29,6 +26,7 @@ module.exports = (props) => {
           getFolder: props.getFolder,
           directories: props.directories
         })}
+        <button onclick=${props.logout} class="Browser-userLogout">Log out</button>
       </div>
       <div class="Browser-body">
         <main class="Browser-content">

src/scss/_provider.scss

@@ -206,6 +206,20 @@
   width: 718px;
 }
 
+.Browser-user {
+  margin: 16px 0;
+}
+
+.Browser-userLogout {
+  @include reset-button();
+  margin-right: 16px;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .Browser header {
   align-items: center;
   border-bottom: 1px solid #e5e5e5;
@@ -254,13 +268,14 @@
 }
 
 .Browser-subHeader {
+  justify-content: space-between;
   align-items: center;
   background-color: #fafafa;
   display: flex;
   flex-direction: row;
   height: 55px;
--webkit-box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
-  -moz-box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
+  // -webkit-box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
+  // -moz-box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
   box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
   z-index: 1000;
 }