fix: use correct font

Author: scriptcoded

packages/ui-react/.storybook/style.css

@@ -5,5 +5,7 @@
   html {
     /* Use a bold color to clearly show cases where we've forgotten to set text color. */
     color: #ff00ff;
+
+    @apply font-sans;
   }
 }

packages/ui-react/src/components/menu/menu.tsx

@@ -169,7 +169,7 @@ const Item = ({
       {icon && <span className="flex items-center justify-center">{icon}</span>}
 
       {/* This 2px padding is there to fix some issues with the font not being correctly centered. */}
-      <span className="col-start-2 pb-[2px]">{children}</span>
+      <span className="col-start-2 pt-[2px]">{children}</span>
 
       <ChevronRightIcon className="size-4 hidden group-aria-[haspopup]/item:block" />
     </MenuPrimitive.Item>

packages/ui-react/src/overview.mdx

@@ -24,10 +24,10 @@ To use the provided styles yourself, setup your Tailwind CSS like this:
 // Import the Scouterna UI theme
 @import "@scouterna/ui-react/theme.css";
 
-// Set base text color to make your own text coherent with the theme
+// Set base font-family and text color to make your own text coherent with the theme
 @layer base {
   html {
-    @apply text-gray-dark;
+    @apply font-sans text-gray-dark;
   }
 }
 ```