Transition LoggedOutMessage to Tailwind

src/sidebar/components/LoggedOutMessage.js

-import { LinkButton, Icon } from '@hypothesis/frontend-shared';
+import { Link, LinkButton, Icon } from '@hypothesis/frontend-shared';
 
 import { useStoreProxy } from '../store/use-store';
 
@@ -18,36 +18,32 @@ function LoggedOutMessage({ onLogin }) {
   const store = useStoreProxy();
 
   return (
-    <div className="LoggedOutMessage">
-      <span>
+    <div className="flex flex-col items-center m-6 space-y-6">
+      <span className="text-center">
         This is a public annotation created with Hypothesis. <br />
         To reply or make your own annotations on this document,{' '}
-        <a
-          className="LoggedOutMessage__link"
+        <Link
+          classes="inline text-color-text underline hover:underline"
           href={store.getLink('signup')}
           target="_blank"
-          rel="noopener noreferrer"
         >
           create a free account
-        </a>{' '}
+        </Link>{' '}
         or{' '}
-        <LinkButton
-          classes="InlineLinkButton InlineLinkButton--underlined"
-          onClick={onLogin}
-          variant="dark"
-        >
+        <LinkButton classes="inline underline" onClick={onLogin} variant="dark">
           log in
         </LinkButton>
         .
       </span>
-      <div className="LoggedOutMessage__logo">
-        <a
+      <div>
+        <Link
           href="https://hypothes.is"
           aria-label="Hypothesis homepage"
+          target="_blank"
           title="Hypothesis homepage"
         >
-          <Icon name="logo" classes="w-16 h-16 hyp-u-color--grey-7" />
-        </a>
+          <Icon name="logo" classes="w-16 h-16 text-grey-7" />
+        </Link>
       </div>
     </div>
   );

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

@@ -30,7 +30,7 @@ describe('LoggedOutMessage', () => {
   it('should link to signup', () => {
     const wrapper = createLoggedOutMessage();
 
-    const signupLink = wrapper.find('.LoggedOutMessage__link').at(0);
+    const signupLink = wrapper.find('Link').at(0);
 
     assert.calledWith(fakeStore.getLink, 'signup');
     assert.equal(signupLink.prop('href'), 'signup_link');

src/styles/sidebar/components/LoggedOutMessage.scss

-@use '../../mixins/buttons';
-@use '../../mixins/layout';
-@use '../../variables' as var;
-
-.LoggedOutMessage {
-  @include layout.column;
-  margin: 25px auto;
-  width: 70%;
-  text-align: center;
-  color: var.$color-text;
-}
-
-.LoggedOutMessage__link {
-  padding: 0;
-  display: inline;
-  color: var.$color-text;
-  text-decoration: underline;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.LoggedOutMessage__logo {
-  @include layout.row(center);
-  margin-top: 25px;
-}

src/styles/sidebar/components/_index.scss

@@ -16,7 +16,6 @@
 @use './GroupListItem';
 @use './HypothesisApp';
 @use './LaunchErrorPanel';
-@use './LoggedOutMessage';
 @use './Menu';
 @use './MenuItem';
 @use './MenuSection';