ui: style navbar login indicator

Adds some initial styling to the login indicator on the navigation sidebar. Release note: None
cockroachdb · May 29, 2018 · 893f64d · 893f64d
1 parent fd7491e
commit 893f64d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/pkg/ui/src/views/app/components/layoutSidebar/index.tsx b/pkg/ui/src/views/app/components/layoutSidebar/index.tsx
@@ -73,9 +73,15 @@ function LoginIndicator({ loginState }: { loginState: LoginState }) {
   }
 
   return (
-    <div className="login-indicator">
-        Logged in as {user}
-    </div>
+    <li className="login-indicator">
+        <div
+          className="login-indicator__initial"
+          title={`Signed in as ${user}`}
+        >
+          { user[0] }
+        </div>
+        <Link to="/logout">Sign Out</Link>
+    </li>
   );
 }
 
@@ -101,10 +107,8 @@ export default class Sidebar extends React.Component {
           <IconLink to="/databases" icon={databasesIcon} title="Databases" activeFor="/database" />
           <IconLink to="/jobs" icon={jobsIcon} title="Jobs" />
         </ul>
-        <div className="logged-in-user">
-          <LoginIndicatorConnected />
-        </div>
         <ul className="navigation-bar__list navigation-bar__list--bottom">
+          <LoginIndicatorConnected />
           <IconLink to="/" icon={cockroachIcon} className="cockroach" />
         </ul>
       </nav>

diff --git a/pkg/ui/styl/layout/navigation-bar.styl b/pkg/ui/styl/layout/navigation-bar.styl
@@ -67,8 +67,27 @@ $subnav-underline-height = 3px
         polyline, rect, path, ellipse
           stroke $link-color
 
-    &.cockroach
+    &.login-indicator
       padding-top 10px
+      text-align center
+
+      .login-indicator__initial
+        border 2px solid $link-color
+        width 32px
+        height 32px
+        border-radius 5px
+        color $link-color
+        font-size 18px
+        line-height 32px
+        text-align center
+        margin 0 auto
+
+      a
+        display inline
+        padding 0
+
+        &:hover
+          color $link-color
 
     &.active
       background-color $navbar-bg