style: update styles when mask amounts is true

uigywnkiub · Feb 15, 2025 · e53ef7c · e53ef7c
1 parent fc7af97
commit e53ef7c
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 9 deletions.
diff --git a/app/lib/helpers.ts b/app/lib/helpers.ts
@@ -151,6 +151,14 @@ export const toNumber = (value: number | string | null) => {
   return value === null ? NaN : Number(value)
 }
 
+export const convertToNumber = (value: string | number): number => {
+  if (typeof value === 'string') {
+    return Number(value.replace(/\s/g, ''))
+  }
+
+  return value
+}
+
 export const isLocalStorageAvailable = (): boolean => {
   return typeof localStorage !== 'undefined'
 }

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -9,7 +9,7 @@ import { useRouter } from 'next/navigation'
 
 import { HeroUIProvider } from '@heroui/react'
 
-import { DANGER, SUCCESS } from '@/config/constants/colors'
+import { BASE, DANGER, SUCCESS } from '@/config/constants/colors'
 import { LOCAL_STORAGE_KEY } from '@/config/constants/local-storage'
 import { DEFAULT_THEME } from '@/config/constants/main'
 import {
@@ -36,8 +36,11 @@ export default function Providers({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   const [theme, setTheme] = useState<TTheme | undefined>(undefined)
   // Getting only when reloading the page.
-  const [isPositiveBalance] = useState(
-    getBooleanFromLocalStorage(LOCAL_STORAGE_KEY.IS_POSITIVE_BALANCE),
+  const isPositiveBalance = getBooleanFromLocalStorage(
+    LOCAL_STORAGE_KEY.IS_POSITIVE_BALANCE,
+  )
+  const isAmountHidden = getBooleanFromLocalStorage(
+    LOCAL_STORAGE_KEY.IS_AMOUNT_HIDDEN,
   )
 
   const toastOptions =
@@ -54,7 +57,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
         {children}
         <Next13ProgressBar
           height='3px'
-          color={isPositiveBalance ? SUCCESS : DANGER}
+          color={
+            !isAmountHidden ? (isPositiveBalance ? SUCCESS : DANGER) : BASE
+          }
           options={{ showSpinner: false }}
           showOnShallow={true}
         />

diff --git a/app/ui/balance-card.tsx b/app/ui/balance-card.tsx
@@ -14,6 +14,7 @@ import { getAllTransactions } from '../lib/actions'
 import { getTransactionsTotals } from '../lib/data'
 import {
   cn,
+  getBooleanFromLocalStorage,
   getFormattedBalance,
   getFormattedCurrency,
   getGreeting,
@@ -43,6 +44,9 @@ function BalanceCard({ user, balance, currency, hasTransactions }: TProps) {
   const userId = user?.email
   const isTotalLoaded = Boolean(total.income) || Boolean(total.expense)
   const isPositiveBalance = Number(balance) > 0
+  const isAmountHidden = getBooleanFromLocalStorage(
+    LOCAL_STORAGE_KEY.IS_AMOUNT_HIDDEN,
+  )
   const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
   const greetingMsg = `${getGreeting(currentTimeZone || DEFAULT_TIME_ZONE)}, ${user?.name} 👋🏼`
 
@@ -87,7 +91,7 @@ function BalanceCard({ user, balance, currency, hasTransactions }: TProps) {
     <Card
       className={cn(
         'p-2',
-        isShowTotals && isTotalLoaded
+        isShowTotals && isTotalLoaded && !isAmountHidden
           ? isPositiveBalance
             ? 'bg-gradient-radial from-success/10 to-content1'
             : 'bg-gradient-radial from-danger/10 to-content1'
@@ -158,7 +162,10 @@ function BalanceCard({ user, balance, currency, hasTransactions }: TProps) {
               animate={{ opacity: 1, scale: 1 }}
               transition={{ ...DIV.TRANSITION_SPRING }}
             >
-              {getFormattedBalance(balance)} {currency.code}
+              {getFormattedBalance(balance).slice(
+                isAmountHidden && !hasTransactions ? 1 : 0,
+              )}{' '}
+              {currency.code}
             </motion.p>
           )}
         </div>

diff --git a/app/ui/chart/radar-chart.tsx b/app/ui/chart/radar-chart.tsx
@@ -74,7 +74,11 @@ function RadarChart({ transactionsRaw, currency }: TProps) {
         <RechartRadarChart cx='50%' cy='50%' outerRadius='75%' data={chartData}>
           <PolarGrid
             className={cn(
-              isPositiveBalance ? 'fill-success-50/20' : 'fill-danger-50/20',
+              !getBooleanFromLocalStorage(LOCAL_STORAGE_KEY.IS_AMOUNT_HIDDEN)
+                ? isPositiveBalance
+                  ? 'fill-success-50/20'
+                  : 'fill-danger-50/20'
+                : 'fill-content1/20',
             )}
           />
           <PolarAngleAxis
@@ -148,7 +152,7 @@ function RadarChart({ transactionsRaw, currency }: TProps) {
           withAsterisk={false}
         />
         <InfoText
-          text={`${toWords.convert(transactions.length)} (${getFormattedCurrency(transactions.length)}) entries.`}
+          text={`${toWords.convert(transactions.length)} (${getFormattedCurrency(transactions.length, false)}) entries.`}
           withAsterisk={false}
         />
       </div>

diff --git a/app/ui/subscriptions/subscriptions.tsx b/app/ui/subscriptions/subscriptions.tsx
@@ -47,6 +47,7 @@ import {
 } from '@/app/lib/actions'
 import {
   capitalizeFirstLetter,
+  convertToNumber,
   createFormData,
   formatAmount,
   getCategoriesMap,
@@ -414,7 +415,8 @@ export default function Subscriptions({
                 </div>
                 <div className='flex items-center gap-2'>
                   <p className='text-center'>
-                    {amount} {currency.code}
+                    {getFormattedCurrency(convertToNumber(amount))}{' '}
+                    {currency.code}
                   </p>
                   <Dropdown>
                     <Badge

diff --git a/config/constants/colors.ts b/config/constants/colors.ts
@@ -1,6 +1,7 @@
 // Default base colors from https://nextui.org/docs/customization/colors
 export const DANGER = '#f31260'
 export const SUCCESS = '#17c964'
+export const BASE = '#3f3f46'
 
 // Custom
 export const CUSTOM_DARK = '#080808'