chore: improve rendering amount and symbol

TODO: externalize to own component

src/components/CurrencySymbol.tsx

@@ -10,13 +10,13 @@ type CurrencySymbolProps = {
 
 export function CurrencySymbol({ currency, isPrivate, size = 'lg' }: CurrencySymbolProps) {
   if (isPrivate) {
-    return <EyeOff size={size === 'sm' ? 16 : 24} className="inline-block align-middle" />
+    return <EyeOff size={size === 'sm' ? 14 : 24} className="mx-1 inline-block align-middle" />
   }
 
   if (currency === 'btc') {
     return (
       <span
-        className={cn('px-1', {
+        className={cn('mx-1', {
           'text-md': size === 'sm',
           'text-4xl': size === 'lg',
         })}
@@ -30,12 +30,13 @@ export function CurrencySymbol({ currency, isPrivate, size = 'lg' }: CurrencySym
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={size === 'sm' ? '16px' : '48px'}
-      height={size === 'sm' ? '18px' : '48px'}
+      height={size === 'sm' ? '16px' : '48px'}
       viewBox="0 0 24 24"
       fill="none"
       style={{
         display: 'inline',
         verticalAlign: 'middle',
+        margin: size === 'sm' ? '0 -1px' : '0 -8px',
       }}
     >
       <path d="M7 7.90906H17" stroke="currentColor" />

src/components/JamLanding.tsx

@@ -16,18 +16,8 @@ interface JamLandingProps {
 export default function JamLanding({ walletFileName }: JamLandingProps) {
   const { t } = useTranslation()
 
-  const {
-    currency,
-    toggleDisplayMode,
-    isPrivate,
-    formatAmount,
-    currencySymbol,
-    jars,
-    totalBalance,
-    isLoading,
-    error,
-    refetchWalletData,
-  } = useJamDisplayContext()
+  const { toggleDisplayMode, formatAmount, currencySymbol, jars, totalBalance, isLoading, error, refetchWalletData } =
+    useJamDisplayContext()
 
   return (
     <div className="flex flex-col items-center justify-center py-8">
@@ -39,7 +29,7 @@ export default function JamLanding({ walletFileName }: JamLandingProps) {
               <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
             </div>
           ) : (
-            <div onClick={() => toggleDisplayMode()} className="flex cursor-pointer items-center gap-1">
+            <div onClick={() => toggleDisplayMode()} className="flex cursor-pointer items-center">
               <span className="tabular-nums">{formatAmount(totalBalance)} </span>
               <span className="flex items-center">{currencySymbol('lg')}</span>
             </div>
@@ -93,8 +83,7 @@ export default function JamLanding({ walletFileName }: JamLandingProps) {
                       name={jar.name}
                       amount={jar.balance}
                       color={jar.color}
-                      currency={currency}
-                      isPrivate={isPrivate}
+                      currencySymbol={currencySymbol}
                       formatAmount={formatAmount}
                       totalBalance={totalBalance}
                     />

src/components/Navbar.tsx

@@ -70,7 +70,7 @@ export function Navbar({ theme, toggleTheme, formatAmount, currencySymbol, jars,
                 <Skeleton className="h-4 w-full bg-neutral-200 dark:bg-neutral-600" />
               ) : (
                 <>
-                  <div className="tabular-nums">{formatAmount(totalBalance)}</div>
+                  <span className="tabular-nums">{formatAmount(totalBalance)}</span>
                   {currencySymbol('sm')}
                 </>
               )}

src/components/layout/Jar.tsx

@@ -1,27 +1,25 @@
-import type { Currency } from '@/hooks/useDisplaySettings'
-import { CurrencySymbol } from '../CurrencySymbol'
 import { JarIcon } from '../ui/JarIcon'
 
 interface JarProps {
   name: string
   amount: number
   color: '#e2b86a' | '#3b5ba9' | '#c94f7c' | '#a67c52' | '#7c3fa6'
-  currency: Currency
-  isPrivate: boolean
   formatAmount: (amount: number) => string
+  currencySymbol: (size: 'sm' | 'lg') => React.ReactNode
   totalBalance?: number
 }
 
-export function Jar({ name, amount, color, currency, isPrivate, formatAmount, totalBalance = 0 }: JarProps) {
+export function Jar({ name, amount, color, currencySymbol, formatAmount, totalBalance = 0 }: JarProps) {
   return (
     <div className="flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105">
       <div className="mb-2">
         <JarIcon amount={amount} totalBalance={totalBalance} color={color} />
       </div>
       <p className="text-center text-sm">{name}</p>
-      <p className="min-w-[110px] text-center text-xs tabular-nums">
-        {formatAmount(amount)} <CurrencySymbol currency={currency} isPrivate={isPrivate} size="sm" />
-      </p>
+      <div className="flex min-w-[110px] items-center justify-center text-sm">
+        <span className="tabular-nums">{formatAmount(amount)}</span>
+        {currencySymbol('sm')}
+      </div>
     </div>
   )
 }

src/stories/Jar.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { CurrencySymbol } from '@/components/CurrencySymbol'
 import { Jar } from '@/components/layout/Jar'
 import type { Currency } from '@/hooks/useDisplaySettings'
 
@@ -27,8 +28,7 @@ export const Sats: Story = {
     name: 'Savings Jar',
     amount: 15000000,
     color: '#e2b86a',
-    currency: 'sats',
-    isPrivate: false,
+    currencySymbol: (size: 'sm' | 'lg') => <CurrencySymbol size={size} currency="sats" />,
     formatAmount: () => formatAmount(15000000, 'sats'),
     totalBalance: 50000000,
   },
@@ -39,8 +39,7 @@ export const BTC: Story = {
     name: 'Main Jar',
     amount: 20000000,
     color: '#3b5ba9',
-    currency: 'btc',
-    isPrivate: false,
+    currencySymbol: (size: 'sm' | 'lg') => <CurrencySymbol size={size} currency="btc" />,
     formatAmount: () => formatAmount(20000000, 'btc'),
     totalBalance: 50000000,
   },
@@ -51,8 +50,7 @@ export const Empty: Story = {
     name: 'Empty Jar',
     amount: 0,
     color: '#c94f7c',
-    currency: 'sats',
-    isPrivate: false,
+    currencySymbol: (size: 'sm' | 'lg') => <CurrencySymbol size={size} currency="sats" />,
     formatAmount: () => formatAmount(0, 'sats'),
     totalBalance: 50000000,
   },
@@ -63,8 +61,7 @@ export const Full: Story = {
     name: 'Full Jar',
     amount: 50000000,
     color: '#a67c52',
-    currency: 'sats',
-    isPrivate: false,
+    currencySymbol: (size: 'sm' | 'lg') => <CurrencySymbol size={size} currency="sats" />,
     formatAmount: () => formatAmount(50000000, 'sats'),
     totalBalance: 100000000,
   },