Avoid using named text-size classes to set specific icon dimensions

In some cases icons are sized relative to local text or containers
(em-based sizing) and that's fine, but using a named text-size
utility directly on an icon can add a layer of unhelpful abstraction if
our intent is simply to size the icon to particular pixel dimensions. It
also entangles icon sizing with text sizing in an unintended way.

In cases where we want to size icons to specific dimensions,
irrespective of local text size, use size utility classes, not text-size
utility classes.

In cases where icons use em-based sizing (e.g. we want to set a text
size on a container such that descendant icons, which are sized at 1em,
have desired dimensions), use arbitrary text sizing classes (e.g.
`text-[16px]` instead of `text-lg`) to be explicit about the intent.

src/annotator/components/NotebookModal.tsx

@@ -119,13 +119,14 @@ export default function NotebookModal({
       data-testid="notebook-outer"
     >
       <div className="relative w-full h-full" data-testid="notebook-inner">
-        <div className="absolute right-0 text-xl m-3">
+        <div className="absolute right-0 m-3">
           <IconButton
-            icon={CancelIcon}
             title="Close the Notebook"
             onClick={onClose}
             variant="dark"
-          />
+          >
+            <CancelIcon className="w-4 h-4" />
+          </IconButton>
         </div>
         <NotebookIframe key={iframeKey} config={config} groupId={groupId} />
       </div>

src/sidebar/components/Annotation/Annotation.tsx

@@ -35,7 +35,7 @@ function SavingMessage() {
       <span
         // Slowly fade in the Spinner such that it only shows up if the saving
         // is slow
-        className="text-xl animate-fade-in-slow"
+        className="text-[16px] animate-fade-in-slow"
       >
         <Spinner size="sm" />
       </span>

src/sidebar/components/Annotation/AnnotationActionBar.tsx

@@ -118,7 +118,7 @@ function AnnotationActionBar({
   };
 
   return (
-    <div className="flex text-xl" data-testid="annotation-action-bar">
+    <div className="flex text-[16px]" data-testid="annotation-action-bar">
       {showEditAction && (
         <IconButton icon={EditIcon} title="Edit" onClick={onEdit} />
       )}

src/sidebar/components/Annotation/AnnotationHeader.tsx

@@ -110,7 +110,7 @@ function AnnotationHeader({
       <div className="flex gap-x-1 items-baseline flex-wrap-reverse">
         {isPrivate(annotation.permissions) && !isEditing && (
           <LockIcon
-            className="text-tiny w-em h-em"
+            className="w-[10px] h-[10px]"
             title="This annotation is visible only to you"
           />
         )}
@@ -152,7 +152,7 @@ function AnnotationHeader({
           {!isEditing && isHighlight(annotation) && (
             <HighlightIcon
               title="This is a highlight. Click 'edit' to add a note or tag."
-              className="text-tiny w-em h-em text-color-text-light"
+              className="w-[10px] h-[10px] text-color-text-light"
             />
           )}
           {showDocumentInfo && (

src/sidebar/components/Annotation/AnnotationLicense.tsx

@@ -17,8 +17,8 @@ export default function AnnotationLicense() {
         target="_blank"
         title="View more information about the Creative Commons Public Domain dedication"
       >
-        <CcStdIcon className="w-em h-em text-tiny" />
-        <CcZeroIcon className="w-em h-em ml-px text-tiny" />
+        <CcStdIcon className="w-[10px] h-[10px]" />
+        <CcZeroIcon className="w-[10px] h-[10px] ml-px" />
         <div className="ml-1">
           Annotations can be freely reused by anyone for any purpose.
         </div>

src/sidebar/components/MarkdownEditor.tsx

@@ -139,7 +139,7 @@ type ToolbarButtonProps = {
 
 function ToolbarButton({
   disabled = false,
-  icon,
+  icon: Icon,
   label,
   onClick,
   shortcutKey,
@@ -154,7 +154,6 @@ function ToolbarButton({
 
   const buttonProps = {
     disabled,
-    icon,
     onClick,
     title: tooltip,
   };
@@ -170,10 +169,11 @@ function ToolbarButton({
     );
   }
   return (
-    <IconButton
-      classes="px-2 py-2.5 text-tiny touch:text-base"
-      {...buttonProps}
-    />
+    <IconButton classes="px-2 py-2.5" {...buttonProps}>
+      {Icon && (
+        <Icon className="w-[10px] h-[10px] touch:w-[13px] touch:h-[13px]" />
+      )}
+    </IconButton>
   );
 }