Add `md` text size and apply to components currently using `lg`

Update all cases using `text-lg` to use `text-md` (a new text size).
This allows a text size between `base` and `lg`.

src/sidebar/components/Annotation/AnnotationShareControl.tsx

@@ -151,7 +151,7 @@ function AnnotationShareControl({
             )}
             width="custom"
           >
-            <h2 className="text-brand text-lg font-medium">
+            <h2 className="text-brand text-md font-medium">
               Share this annotation
             </h2>
             <div

src/sidebar/components/FilterSelect.tsx

@@ -35,7 +35,7 @@ function FilterSelect({
       className={classnames(
         // Don't allow the label text to wrap
         'shrink-0 flex items-center gap-x-2',
-        'text-color-text font-bold text-lg'
+        'text-color-text font-bold text-md'
       )}
     >
       {Icon && <Icon className="w-4 h-4" />}

src/sidebar/components/GroupList/GroupList.js

@@ -90,7 +90,7 @@ function GroupList({ settings }) {
       <span
         className={classnames(
           // Don't allow this label to shrink (wrap to next line)
-          'shrink-0 flex items-center gap-x-1 text-lg text-color-text font-bold'
+          'shrink-0 flex items-center gap-x-1 text-md text-color-text font-bold'
         )}
       >
         {icon && (

src/sidebar/components/HelpPanel.tsx

@@ -53,7 +53,7 @@ function HelpPanelTab({ linkText, url }: HelpPanelTabProps) {
     <div
       // Set this element's flex-basis and also establish
       // a flex container (centered on both axes)
-      className="flex-1 flex items-center justify-center border-r last-of-type:border-r-0 text-lg font-medium"
+      className="flex-1 flex items-center justify-center border-r last-of-type:border-r-0 text-md font-medium"
     >
       <Link color="text-light" href={url} target="_blank">
         <div className="flex items-center gap-x-2">
@@ -144,7 +144,7 @@ function HelpPanel({ session }: HelpPanelProps) {
     >
       <div className="space-y-4">
         <div className="flex items-center">
-          <h3 className="grow text-lg font-medium" data-testid="subpanel-title">
+          <h3 className="grow text-md font-medium" data-testid="subpanel-title">
             {subPanelTitles[activeSubPanel]}
           </h3>
           {activeSubPanel === 'versionInfo' && (

src/sidebar/components/Menu.js

@@ -214,7 +214,7 @@ export default function Menu({
               'focus-visible-ring',
               // Position menu content near bottom of menu label/toggle control
               'absolute top-[calc(100%+5px)] z-1 border shadow',
-              'bg-white text-lg',
+              'bg-white text-md',
               {
                 'left-0': align === 'left',
                 'right-0': align === 'right',

src/sidebar/components/NotebookView.js

@@ -138,7 +138,7 @@ function NotebookView({ loadAnnotationsService, streamer }) {
       <div className="justify-self-start">
         <NotebookFilters />
       </div>
-      <div className="flex items-center lg:justify-self-end text-lg font-medium">
+      <div className="flex items-center lg:justify-self-end text-md font-medium">
         {pendingUpdateCount > 0 && !hasAppliedFilter && (
           <IconButton
             icon="refresh"

src/sidebar/components/PaginationNavigation.tsx

@@ -66,7 +66,7 @@ function PaginationNavigation({
 
   return (
     <div
-      className="flex items-center text-lg"
+      className="flex items-center text-md"
       data-testid="pagination-navigation"
     >
       <div className="w-28 h-10">

src/sidebar/components/TopBar.tsx

@@ -146,7 +146,7 @@ function TopBar({
             <UserMenu onLogout={onLogout} />
           ) : (
             <div
-              className="flex items-center text-lg font-medium space-x-1"
+              className="flex items-center text-md font-medium space-x-1"
               data-testid="login-links"
             >
               {!isLoggedIn && !hasFetchedProfile && <span>⋯</span>}

tailwind.config.mjs

@@ -83,6 +83,7 @@ export default {
         // are descriptive, not aspirational or prescriptive.
         sm: ['11px', '1.4'],
         base: ['13px', '1.4'], // Current base font size for sidebar
+        md: ['14px'],
         lg: ['14px'],
         xl: ['16px'],
         '2xl': ['18px'],