Fixes currency code not showing on product detail page and in cart (#1104)

components/cart/modal.tsx

@@ -127,7 +127,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                                   {item.merchandise.product.title}
                                 </span>
                                 {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="text-sm text-neutral-800">
+                                  <p className="text-sm text-neutral-400 dark:text-neutral-600">
                                     {item.merchandise.title}
                                   </p>
                                 ) : null}
@@ -135,7 +135,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                             </Link>
                             <div className="flex h-16 flex-col justify-between">
                               <Price
-                                className="flex flex-col justify-between space-y-2 text-sm"
+                                className="flex justify-end space-y-2 text-right text-sm"
                                 amount={item.cost.totalAmount.amount}
                                 currencyCode={item.cost.totalAmount.currencyCode}
                               />

components/label.tsx

@@ -24,6 +24,7 @@ const Label = ({
           className="flex-none rounded-full bg-blue-600 p-2 text-white"
           amount={amount}
           currencyCode={currencyCode}
+          currencyCodeClassName="hidden @[275px]/label:inline"
         />
       </div>
     </div>

components/price.tsx

@@ -1,18 +1,23 @@
+import clsx from 'clsx';
+
 const Price = ({
   amount,
+  className,
   currencyCode = 'USD',
-  ...props
+  currencyCodeClassName
 }: {
   amount: string;
+  className?: string;
   currencyCode: string;
+  currencyCodeClassName?: string;
 } & React.ComponentProps<'p'>) => (
-  <p suppressHydrationWarning={true} {...props}>
+  <p suppressHydrationWarning={true} className={className}>
     {`${new Intl.NumberFormat(undefined, {
       style: 'currency',
       currency: currencyCode,
       currencyDisplay: 'narrowSymbol'
     }).format(parseFloat(amount))}`}
-    <span className="hidden @[275px]/label:inline">{` ${currencyCode}`}</span>
+    <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
   </p>
 );