fix: font styles (#1157)

Fixes various font styles on wallet & transaction list

Author: rolznz

frontend/src/components/TransactionItem.tsx

@@ -152,24 +152,27 @@ function TransactionItem({ tx }: Props) {
           </div>
           <div className="flex ml-auto space-x-3 shrink-0">
             <div className="flex flex-col items-end md:text-xl">
-              <div className="flex gap-2">
+              <div className="flex flex-row gap-1">
                 <p
                   className={cn(
-                    "font-semibold",
                     type == "incoming" && "text-green-600 dark:text-emerald-500"
                   )}
                 >
                   {type == "outgoing" ? "-" : "+"}
-                  {new Intl.NumberFormat().format(
-                    Math.floor(tx.amount / 1000)
-                  )}{" "}
+                  <span className="font-medium">
+                    {new Intl.NumberFormat().format(
+                      Math.floor(tx.amount / 1000)
+                    )}
+                  </span>
                 </p>
-                <p className="text-foreground">
+                <p className="text-muted-foreground">
                   {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
                 </p>
               </div>
-
-              <FormattedFiatAmount amount={Math.floor(tx.amount / 1000)} />
+              <FormattedFiatAmount
+                className="text-xs md:text-base"
+                amount={Math.floor(tx.amount / 1000)}
+              />
             </div>
           </div>
         </div>

frontend/src/screens/wallet/index.tsx

@@ -81,14 +81,14 @@ function Wallet() {
       <BreezRedeem />
       <div className="flex flex-col xl:flex-row justify-between xl:items-center gap-5">
         <div className="flex flex-col gap-1 text-center xl:text-left">
-          <div className="text-5xl font-semibold balance sensitive slashed-zero">
+          <div className="text-5xl font-medium balance sensitive slashed-zero">
             {new Intl.NumberFormat().format(
               Math.floor(balances.lightning.totalSpendable / 1000)
             )}{" "}
             sats
           </div>
           <FormattedFiatAmount
-            className="text-xl font-semibold"
+            className="text-xl"
             amount={balances.lightning.totalSpendable / 1000}
           />
         </div>