style(InfoBadge component): rename, add props and use everywhere

app/lib/utils.ts

@@ -1,6 +1,8 @@
 import toast from 'react-hot-toast'
 
+import config from '@/tailwind.config'
 import { CalendarDate } from '@internationalized/date'
+import { type ClassValue, clsx } from 'clsx'
 import {
   format,
   getDate,
@@ -10,11 +12,25 @@ import {
   isYesterday,
 } from 'date-fns'
 import emojiRegex from 'emoji-regex'
+import { extendTailwindMerge } from 'tailwind-merge'
 
 import { CURRENCY_CODE, DEFAULT_CATEGORY } from '@/config/constants/main'
 
 import type { TGetTransactions, THTMLElement, TTransaction } from './types'
 
+export const customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': Object.keys(config?.theme?.extend?.fontSize!).map(
+        (key) => `text-${key}`,
+      ),
+    },
+  },
+})
+export function cn(...args: ClassValue[]) {
+  return customTwMerge(clsx(args))
+}
+
 export const capitalizeFirstLetter = (str: string): string => {
   if (!str) return str
   return str.charAt(0).toUpperCase() + str.slice(1)

app/page.tsx

@@ -32,7 +32,7 @@ import {
   pluralize,
 } from './lib/utils'
 import BalanceLine from './ui/balance-line'
-import InfoBadge from './ui/info-badge'
+import InfoText from './ui/info-text'
 import NoTransactionsPlug from './ui/no-transaction-text'
 import PaginationList from './ui/pagination/pagination-list'
 import Search from './ui/search'
@@ -143,8 +143,8 @@ export default async function Home({
             <>
               <NoTransactionsPlug />
               <div className='mt-2 flex flex-col gap-2'>
-                <InfoBadge text='The first written transaction means creating your account.' />
-                <InfoBadge text='The last deleted transaction means deleting your account.' />
+                <InfoText text='The first written transaction means creating your account.' />
+                <InfoText text='The last deleted transaction means deleting your account.' />
               </div>
             </>
           ) : (

app/settings/page.tsx

@@ -11,7 +11,7 @@ import {
   getTransactionLimit,
   signOutAccount,
 } from '../lib/actions'
-import InfoBadge from '../ui/info-badge'
+import InfoText from '../ui/info-text'
 import NoTransactionsPlug from '../ui/no-transaction-text'
 import Currency from '../ui/settings/currency'
 import DeleteAccount from '../ui/settings/delete-account'
@@ -50,8 +50,8 @@ export default async function Page() {
         >
           <>
             <div className='my-2 flex flex-col gap-2'>
-              <InfoBadge text='Will reload the page.' />
-              <InfoBadge text='When you select the system theme, the general pop-up will always be dark.' />
+              <InfoText text='Will reload the page.' />
+              <InfoText text='When you select the system theme, the general pop-up will always be dark.' />
             </div>
             <div className='max-w-xs'>
               <ThemeSwitcher />

app/ui/categories/categories.tsx

@@ -33,7 +33,7 @@ import {
 import { capitalizeFirstLetter, deepCompareArrays } from '@/app/lib/utils'
 
 import { HoverableElement } from '../hoverables'
-import InfoBadge from '../info-badge'
+import InfoText from '../info-text'
 import Category from './category'
 
 type TProps = {
@@ -232,10 +232,10 @@ function Categories({ userId, userCategories }: TProps) {
         </Button>
       </div>
       <div className='mt-4 flex flex-col gap-2 md:mt-8'>
-        <InfoBadge text='If necessary, it is better to customize all categories at once for yourself and not edit them in the future to avoid overlapping transaction category names.' />
-        <InfoBadge text='Once editing, you will need to manually update your previous transactions with previous categories to new categories. You will see a badge on them.' />
-        <InfoBadge text='The emoji picker may appear with a slight delay.' />
-        <InfoBadge
+        <InfoText text='If necessary, it is better to customize all categories at once for yourself and not edit them in the future to avoid overlapping transaction category names.' />
+        <InfoText text='Once editing, you will need to manually update your previous transactions with previous categories to new categories. You will see a badge on them.' />
+        <InfoText text='The emoji picker may appear with a slight delay.' />
+        <InfoText
           id='hint-1'
           text='1. The category subject does not affect the category data.'
           withAsterisk={false}
@@ -263,7 +263,7 @@ function Categories({ userId, userCategories }: TProps) {
                   state? This action is irreversible and will reset all your
                   current category data to default.
                 </p>
-                <InfoBadge text='Once reset, you will need to manually update your previous transactions with previous categories to new default categories. You will see a badge on them.' />
+                <InfoText text='Once reset, you will need to manually update your previous transactions with previous categories to new default categories. You will see a badge on them.' />
               </ModalBody>
               <ModalFooter>
                 <Button

app/ui/categories/category-item.tsx

@@ -19,7 +19,7 @@ import type {
 } from '@/app/lib/types'
 
 import { HoverableElement } from '../hoverables'
-import InfoBadge from '../info-badge'
+import InfoText from '../info-text'
 import CustomEmojiPicker from './custom-emoji-picker'
 
 type TProps = {
@@ -127,7 +127,7 @@ function CategoryItem({
             <div className='overflow-hidden text-ellipsis whitespace-nowrap text-balance'>
               {item.name}
               {item.name === DEFAULT_CATEGORY && (
-                <InfoBadge text='Default category' withAsterisk={false} />
+                <InfoText text='Default category' withAsterisk={false} />
               )}
             </div>
           </div>

app/ui/hoverables.tsx

@@ -5,11 +5,11 @@ import { useHover } from 'react-use'
 import Link from 'next/link'
 
 import { motion } from 'framer-motion'
-import { twMerge } from 'tailwind-merge'
 
 import { DIV } from '@/config/constants/framer'
 
 import type { TNavLink, TSelect } from '../lib/types'
+import { cn } from '../lib/utils'
 
 type THoverableElement = {
   element: TSelect['icon'] | string
@@ -51,7 +51,7 @@ export const HoverableNavLink = ({
   return useHover((hovered: boolean) => (
     <Link
       href={link.url}
-      className={twMerge(
+      className={cn(
         'flex w-full items-center gap-4 rounded-medium py-2 text-2xl md:text-base',
         !isActiveLink && 'text-default-500 hover:text-foreground',
         idx === 0 && 'mt-8 md:mt-4',

app/ui/info-badge.tsx → app/ui/info-text.tsx

@@ -1,20 +1,27 @@
+import { cn } from '../lib/utils'
+
 type TProps = {
   id?: string
   text: string
   withAsterisk?: boolean
   withDoubleAsterisk?: boolean
+  isSm?: boolean
 }
 
-export default function InfoBadge({
+export default function InfoText({
   id,
   text,
   withAsterisk = true,
   withDoubleAsterisk = false,
+  isSm = false,
 }: TProps) {
   return (
     <p
       id={id}
-      className='text-xxs text-default-300 md:text-xs md:hover:cursor-none md:hover:text-foreground'
+      className={cn(
+        'text-default-300 hover:cursor-none hover:text-foreground',
+        isSm ? 'text-sm' : 'text-xxs md:text-xs',
+      )}
     >
       {withDoubleAsterisk && ' ** '}
       {!withDoubleAsterisk && withAsterisk && ' * '}

app/ui/logo.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { Badge } from '@nextui-org/react'
-import { twMerge } from 'tailwind-merge'
+
+import { cn } from '../lib/utils'
 
 type TSize = 'sm' | 'md' | 'lg'
 
@@ -52,7 +53,7 @@ export default function Logo({
     >
       <div className='flex items-center justify-center'>
         <div
-          className={twMerge(
+          className={cn(
             'flex bg-logo-gradient text-background',
             logoSizeClass,
             'items-center justify-center',
@@ -62,9 +63,9 @@ export default function Logo({
           )}
         >
           <span
-            className={twMerge(
-              textSizeClass,
+            className={cn(
               '-skew-x-6 transform-gpu cursor-default font-inter font-bold drop-shadow-lg',
+              textSizeClass,
             )}
           >
             Ex

app/ui/sign-in/sign-in.tsx

@@ -35,7 +35,7 @@ import {
 
 import ClientButton from '../default-button'
 import { HoverableElement } from '../hoverables'
-import InfoBadge from '../info-badge'
+import InfoText from '../info-text'
 import Logo from '../logo'
 
 const ACCORDION_ITEM_KEY = 'More'
@@ -217,8 +217,8 @@ function SignIn() {
         </div>
       </div>
       <div className='mt-4 flex flex-col gap-2 text-center'>
-        <InfoBadge text='Your name and email will be visible on the site and serve as your primary identifiers.' />
-        <InfoBadge text='Signing in does not create an account.' />
+        <InfoText text='Your name and email will be visible on the site and serve as your primary identifiers.' />
+        <InfoText text='Signing in does not create an account.' />
       </div>
     </div>
   )

app/ui/transaction-form-edit.tsx

@@ -32,7 +32,7 @@ import {
   getTransactionsWithChangedCategory,
 } from '../lib/utils'
 import Loading from '../loading'
-import InfoBadge from './info-badge'
+import InfoText from './info-text'
 
 const AMOUNT_LENGTH = 6
 
@@ -269,8 +269,8 @@ function TransactionFormEdit({ transaction }: TProps) {
       </form>
       {isTransactionWithChangedCategory && (
         <div className='mt-2 flex flex-col gap-2'>
-          <InfoBadge text='Looks like you have changed the category data. Please select an existing one.' />
-          <InfoBadge text={`Your previous category was: ${prevCategory}.`} />
+          <InfoText text='Looks like you have changed the category data. Please select an existing one.' />
+          <InfoText text={`Your previous category was: ${prevCategory}.`} />
         </div>
       )}
     </>

app/ui/transaction-list.tsx

@@ -12,6 +12,7 @@ import type {
   TTransaction,
 } from '../lib/types'
 import { getFormattedCurrency } from '../lib/utils'
+import InfoText from './info-text'
 
 type TProps = {
   groupedTransactionsByDate: TGroupedTransactions
@@ -26,34 +27,40 @@ function TransactionList({
   transactionsWithChangedCategory,
   currency,
 }: TProps) {
-  const totalsWrapper =
-    'flex items-center gap-1 text-default-300 md:hover:text-foreground'
-
   return (
     <>
       {Object.keys(groupedTransactionsByDate)?.map((date) => {
         const { income, expense } = totalsTransactionsByDate[date]
 
+        const incomeIcon = <PiArrowCircleUpFill className='fill-success' />
+        const expenseIcon = <PiArrowCircleDownFill className='fill-danger' />
+        const totalsWrapper = 'flex items-center gap-1'
+        const totalsCurrency = currency?.code || DEFAULT_CURRENCY_CODE
+
         return (
           <div key={date} className='mx-auto max-w-3xl'>
             <div className='flex items-center justify-between p-2 text-default-500'>
-              <p className='text-sm text-default-300 md:hover:cursor-none md:hover:text-foreground'>
-                {date}
-              </p>
-              <div className='flex gap-2 text-sm md:hover:cursor-none'>
+              <InfoText text={date} withAsterisk={false} isSm />
+              <div className='flex gap-2 text-sm hover:cursor-none'>
                 {income > 0 && (
-                  <p className={totalsWrapper}>
-                    <PiArrowCircleUpFill className='fill-success' />
-                    {getFormattedCurrency(income)}{' '}
-                    {currency?.code || DEFAULT_CURRENCY_CODE}
-                  </p>
+                  <div className={totalsWrapper}>
+                    {incomeIcon}
+                    <InfoText
+                      text={`${getFormattedCurrency(income)} ${totalsCurrency}`}
+                      withAsterisk={false}
+                      isSm
+                    />
+                  </div>
                 )}
                 {expense > 0 && (
-                  <p className={totalsWrapper}>
-                    <PiArrowCircleDownFill className='fill-danger' />
-                    {getFormattedCurrency(expense)}{' '}
-                    {currency?.code || DEFAULT_CURRENCY_CODE}
-                  </p>
+                  <div className={totalsWrapper}>
+                    {expenseIcon}
+                    <InfoText
+                      text={`${getFormattedCurrency(expense)} ${totalsCurrency}`}
+                      withAsterisk={false}
+                      isSm
+                    />
+                  </div>
                 )}
               </div>
             </div>