Adjust icon alignment

CSS reset via tailwind preflight changes SVG default display. Adjust to
make things look as before.

See https://tailwindcss.com/docs/preflight#images-are-block-level

src/sidebar/components/SelectionTabs.js

@@ -171,7 +171,7 @@ function SelectionTabs({ annotationsService, isLoading, settings }) {
             <br />
             Create one by selecting some text and clicking the{' '}
             <Icon
-              classes="hyp-u-margin--1 u-inline"
+              classes="m-0.5 inline -mt-0.5"
               name="annotate"
               title="Annotate"
             />{' '}

src/sidebar/components/ShareAnnotationsPanel.js

@@ -108,8 +108,8 @@ function ShareAnnotationsPanel({ toastMessenger }) {
                 )}{' '}
                 <span>
                   Private (
-                  <Icon name="lock" classes="inline" /> <em>Only Me</em>)
-                  annotations are only visible to you.
+                  <Icon name="lock" classes="inline -mt-0.5" /> <em>Only Me</em>
+                  ) annotations are only visible to you.
                 </span>
               </p>
               <ShareLinks shareURI={shareURI} />

src/styles/sidebar/components/MenuItem.scss

@@ -81,7 +81,6 @@ a.MenuItem:hover {
 .MenuItem__icon {
   @include utils.icon--medium;
   color: inherit;
-  display: inline-block;
   margin-right: 4px;
   position: relative;
   &-container {