feat: Improve Currency component

emerald-dao · Jun 9, 2023 · 1b7d675 · 1b7d675
1 parent 562faa9
commit 1b7d675
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/src/lib/components/Currency/Currency.svelte b/src/lib/components/Currency/Currency.svelte
@@ -8,17 +8,23 @@
 </script>
 
 <div style={`font-size: ${fontSize}; color: var(--clr-${color}-main)`}>
+	{#if amount < 0}
+		<span>-</span>
+	{/if}
+	{#if moneyPrefix}
+		<span class="prefix">$</span>
+	{/if}
 	{#if amount >= 0}
 		<span class="amount"
-			>{`${moneyPrefix ? '$' : ''}${amount.toLocaleString('en-US', {
+			>{`${amount.toLocaleString('en-US', {
 				style: 'decimal',
 				maximumFractionDigits: decimalNumbers,
 				minimumFractionDigits: decimalNumbers
 			})}`}</span
 		>
 	{:else}
 		<span class="amount"
-			>{`-$${Math.abs(amount).toLocaleString('en-US', {
+			>{`${Math.abs(amount).toLocaleString('en-US', {
 				style: 'decimal',
 				maximumFractionDigits: decimalNumbers,
 				minimumFractionDigits: decimalNumbers
@@ -31,6 +37,10 @@
 </div>
 
 <style type="scss">
+	.prefix {
+		--font-weight: var(--font-weight-thin);
+	}
+
 	.currency {
 		font-size: 0.6em;
 	}