Use `LinkButton` instead of `Button`

src/sidebar/components/Annotation/AnnotationHeader.js

@@ -13,7 +13,7 @@ import {
 import { annotationDisplayName } from '../../helpers/annotation-user';
 import { isPrivate } from '../../helpers/permissions';
 
-import Button from '../Button';
+import { LinkButton } from '../../../shared/components/buttons';
 
 import AnnotationDocumentInfo from './AnnotationDocumentInfo';
 import AnnotationShareInfo from './AnnotationShareInfo';
@@ -133,12 +133,9 @@ function AnnotationHeader({
           displayName={authorDisplayName}
         />
         {showReplyButton && (
-          <Button
-            className="AnnotationHeader__reply-toggle"
-            buttonText={replyButtonText}
-            onClick={onReplyCountClick}
-            title="Expand replies"
-          />
+          <LinkButton onClick={onReplyCountClick} title="Expand replies">
+            {replyButtonText}
+          </LinkButton>
         )}
 
         {showTimestamps && (

src/sidebar/components/Annotation/test/AnnotationHeader-test.js

@@ -149,7 +149,7 @@ describe('AnnotationHeader', () => {
 
   describe('expand replies toggle button', () => {
     const findReplyButton = wrapper =>
-      wrapper.find('Button').filter('.AnnotationHeader__reply-toggle');
+      wrapper.find('LinkButton[title="Expand replies"]');
 
     it('should render if annotation is a collapsed reply and there are replies to show', () => {
       fakeIsReply.returns(true);
@@ -223,7 +223,7 @@ describe('AnnotationHeader', () => {
           threadIsCollapsed: true,
         });
         const replyCollapseButton = findReplyButton(wrapper);
-        assert.equal(replyCollapseButton.props().buttonText, testCase.expected);
+        assert.equal(replyCollapseButton.props().children, testCase.expected);
       });
     });
   });

src/sidebar/components/LoggedOutMessage.js

@@ -2,7 +2,7 @@ import { SvgIcon } from '@hypothesis/frontend-shared';
 
 import { withServices } from '../service-context';
 
-import Button from './Button';
+import { LinkButton } from '../../shared/components/buttons';
 
 /** @typedef {import('../services/service-url').ServiceUrlGetter} ServiceUrlGetter */
 
@@ -34,11 +34,13 @@ function LoggedOutMessage({ onLogin, serviceUrl }) {
           create a free account
         </a>{' '}
         or{' '}
-        <Button
-          className="LoggedOutMessage__link"
+        <LinkButton
+          className="InlineLinkButton"
           onClick={onLogin}
-          buttonText="log in"
-        />
+          variant="dark"
+        >
+          log in
+        </LinkButton>
         .
       </span>
       <div className="LoggedOutMessage__logo">

src/sidebar/components/test/LoggedOutMessage-test.js

@@ -39,7 +39,7 @@ describe('LoggedOutMessage', () => {
     const fakeOnLogin = sinon.stub();
     const wrapper = createLoggedOutMessage({ onLogin: fakeOnLogin });
 
-    const loginLink = wrapper.find('.LoggedOutMessage__link').at(1);
+    const loginLink = wrapper.find('LinkButton');
 
     assert.equal(loginLink.prop('onClick'), fakeOnLogin);
   });

src/styles/sidebar/components/AnnotationHeader.scss

@@ -16,11 +16,6 @@
     color: var.$color-text;
   }
 
-  &__reply-toggle {
-    @include buttons.button--link;
-    padding: 0 var.$layout-space--xsmall;
-  }
-
   // Timestamps are right aligned in a flex row
   &__timestamps {
     flex-grow: 1;

src/styles/sidebar/components/LoggedOutMessage.scss

@@ -11,11 +11,13 @@
 }
 
 .LoggedOutMessage__link {
-  @include buttons.button--link;
   padding: 0;
   display: inline;
   color: var.$color-text;
   text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .LoggedOutMessage__logo {