Convert `ShareAnnotationsPanel` to tailwind

This component needed some adjustment after a CSS reset was applied, so
it has been converted to Tailwind.

src/sidebar/components/ShareAnnotationsPanel.js

@@ -56,15 +56,18 @@ function ShareAnnotationsPanel({ toastMessenger }) {
   return (
     <SidebarPanel title={panelTitle} panelName="shareGroupAnnotations">
       {!sharingReady && (
-        <div className="hyp-u-layout-row--center">
+        <div className="flex flex-row items-center justify-center">
           <Spinner />
         </div>
       )}
       {sharingReady && (
-        <div className="ShareAnnotationsPanel">
+        <div className="text-color-text-light space-y-3">
           {shareURI ? (
             <>
-              <div className="ShareAnnotationsPanel__intro">
+              <div
+                className="text-color-text font-medium"
+                data-testid="sharing-intro"
+              >
                 {notNull(focusedGroup).type === 'private' ? (
                   <p>
                     Use this link to share these annotations with other group
@@ -74,7 +77,7 @@ function ShareAnnotationsPanel({ toastMessenger }) {
                   <p>Use this link to share these annotations with anyone:</p>
                 )}
               </div>
-              <div className="hyp-u-layout-row">
+              <div>
                 <TextInputWithButton>
                   <TextInput
                     aria-label="Use this URL to share these annotations"
@@ -90,7 +93,7 @@ function ShareAnnotationsPanel({ toastMessenger }) {
                   />
                 </TextInputWithButton>
               </div>
-              <p>
+              <p data-testid="sharing-details">
                 {notNull(focusedGroup).type === 'private' ? (
                   <span>
                     Annotations in the private group{' '}
@@ -105,14 +108,14 @@ function ShareAnnotationsPanel({ toastMessenger }) {
                 )}{' '}
                 <span>
                   Private (
-                  <Icon name="lock" classes="u-inline" /> <em>Only Me</em>)
+                  <Icon name="lock" classes="inline" /> <em>Only Me</em>)
                   annotations are only visible to you.
                 </span>
               </p>
               <ShareLinks shareURI={shareURI} />
             </>
           ) : (
-            <p>
+            <p data-testid="no-sharing">
               These annotations cannot be shared because this document is not
               available on the web.
             </p>

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

@@ -95,7 +95,6 @@ describe('ShareAnnotationsPanel', () => {
 
     it('renders panel content if needed info available', () => {
       const wrapper = createShareAnnotationsPanel();
-      assert.isTrue(wrapper.exists('.ShareAnnotationsPanel'));
       assert.isFalse(wrapper.find('Spinner').exists());
     });
   });
@@ -130,12 +129,12 @@ describe('ShareAnnotationsPanel', () => {
       const wrapper = createShareAnnotationsPanel();
 
       assert.match(
-        wrapper.find('.ShareAnnotationsPanel__intro').text(),
+        wrapper.find('[data-testid="sharing-intro"]').text(),
         testCase.introPattern
       );
 
       assert.match(
-        wrapper.find('.ShareAnnotationsPanel').text(),
+        wrapper.find('[data-testid="sharing-details"]').text(),
         testCase.visibilityPattern
       );
     });
@@ -146,7 +145,7 @@ describe('ShareAnnotationsPanel', () => {
 
         const wrapper = createShareAnnotationsPanel();
 
-        const panelEl = wrapper.find('.ShareAnnotationsPanel');
+        const panelEl = wrapper.find('[data-testid="no-sharing"]');
         assert.include(panelEl.text(), 'These annotations cannot be shared');
       });
     });

src/styles/sidebar/components/ShareAnnotationsPanel.scss

-@use '../../variables' as var;
-@use '../../mixins/buttons';
-@use '../../mixins/forms';
-@use '../../mixins/molecules';
-@use '../../mixins/utils';
-
-.ShareAnnotationsPanel {
-  color: var.$color-text--light;
-
-  &__intro {
-    color: var.$color-text;
-    font-weight: 500;
-  }
-}

src/styles/sidebar/sidebar.scss

@@ -34,7 +34,6 @@
 @use './components/NotebookResultCount';
 @use './components/PaginationNavigation';
 @use './components/SelectionTabs';
-@use './components/ShareAnnotationsPanel';
 @use './components/SearchInput';
 @use './components/ShareLinks';
 @use './components/TagEditor';