Convert `ShareLinks` to tailwind

src/sidebar/components/ShareAnnotationsPanel.js

@@ -112,7 +112,9 @@ function ShareAnnotationsPanel({ toastMessenger }) {
                   ) annotations are only visible to you.
                 </span>
               </p>
-              <ShareLinks shareURI={shareURI} />
+              <div className="text-[24px]">
+                <ShareLinks shareURI={shareURI} />
+              </div>
             </>
           ) : (
             <p data-testid="no-sharing">

src/sidebar/components/ShareLinks.js

-import { Icon } from '@hypothesis/frontend-shared';
+import { Icon, Link } from '@hypothesis/frontend-shared';
 
 /**
  * @typedef ShareLinkProps
@@ -14,16 +14,16 @@ import { Icon } from '@hypothesis/frontend-shared';
  */
 function ShareLink({ label, iconName, uri }) {
   return (
-    <li className="ShareLinks__link">
-      <a
+    <li>
+      <Link
         aria-label={label}
+        classes="text-grey-6 hover:text-color-text block"
         href={uri}
         title={label}
         target="_blank"
-        rel="noopener noreferrer"
       >
-        <Icon name={iconName} classes="ShareLinks__icon" />
-      </a>
+        <Icon name={iconName} />
+      </Link>
     </li>
   );
 }
@@ -42,7 +42,7 @@ function ShareLinks({ shareURI }) {
   const encodedURI = encodeURIComponent(shareURI);
 
   return (
-    <ul className="ShareLinks">
+    <ul className="flex flex-row gap-x-4 items-center justify-center border-t pt-2">
       <ShareLink
         iconName="twitter"
         label="Tweet share link"

src/styles/mixins/molecules.scss

@@ -46,26 +46,6 @@
   }
 }
 
-/**
- * horizontally-oriented collection of linked icons
- */
-@mixin footer-links {
-  @include layout.row(center);
-  @include utils.border--top;
-  padding-top: 8px;
-
-  &__icon {
-    @include layout.row;
-    @include utils.icon--medium;
-    margin: 0 8px;
-    color: var.$grey-5;
-
-    &:hover {
-      color: var.$grey-6;
-    }
-  }
-}
-
 /**
  * A pattern for styling a little "pointer" (arrow) icon that attaches to
  * menu content and serves as a visual anchor back to the triggering

src/styles/sidebar/components/AnnotationShareControl.scss

@@ -52,8 +52,4 @@
     right: 0px;
     bottom: -12px;
   }
-
-  .ShareLinks__icon {
-    @include utils.icon--medium;
-  }
 }

src/styles/sidebar/components/ShareLinks.scss

-@use '../../mixins/utils';
-@use '../../mixins/molecules';
-
-.ShareLinks {
-  @include molecules.footer-links;
-
-  &__icon {
-    @include utils.icon--large;
-  }
-}

src/styles/sidebar/components/_index.scss

@@ -32,7 +32,6 @@
 @use './PaginationNavigation';
 @use './SelectionTabs';
 @use './SearchInput';
-@use './ShareLinks';
 @use './TagEditor';
 @use './TagList';
 @use './Thread';