Move login link styling to top-bar.scss

Move the CSS styles into the module that corresponds to the component
where they are used.

src/sidebar/components/test/top-bar-test.js

@@ -86,7 +86,7 @@ describe('TopBar', () => {
   });
 
   describe('login/account actions', () => {
-    const getLoginText = wrapper => wrapper.find('.login-text');
+    const getLoginText = wrapper => wrapper.find('.top-bar__login-links');
 
     it('Shows ellipsis when login state is unknown', () => {
       const wrapper = createTopBar({ auth: { status: 'unknown' } });

src/sidebar/components/top-bar.js

@@ -41,9 +41,11 @@ function TopBar({
 
   const loginControl = (
     <Fragment>
-      {auth.status === 'unknown' && <span className="login-text">⋯</span>}
+      {auth.status === 'unknown' && (
+        <span className="top-bar__login-links">⋯</span>
+      )}
       {auth.status === 'logged-out' && (
-        <span className="login-text">
+        <span className="top-bar__login-links">
           <a href="#" onClick={onSignUp} target="_blank" style={loginLinkStyle}>
             Sign up
           </a>{' '}

src/styles/sidebar/components/login-control.scss

-.login-control {
-  flex-shrink: 0;
-}
-
-.login-text {
-  font-size: $body2-font-size;
-  padding-left: 6px;
-}

src/styles/sidebar/components/top-bar.scss

@@ -21,6 +21,12 @@
   border-bottom: none;
 }
 
+.top-bar__login-links {
+  flex-shrink: 0;
+  font-size: $body2-font-size;
+  padding-left: 6px;
+}
+
 .top-bar__inner {
   // the edges of the top-bar's contents should be aligned
   // with the edges of annotation cards displayed below

src/styles/sidebar/sidebar.scss

@@ -28,7 +28,6 @@ $base-line-height: 20px;
 @import './components/group-list-item';
 @import './components/help-panel';
 @import './components/loggedout-message';
-@import './components/login-control';
 @import './components/markdown';
 @import './components/menu';
 @import './components/menu-item';