refactor: Remove unnecessary Typography component

src/components/AudioFilePreview.tsx

@@ -1,7 +1,6 @@
 import {useRef, type FC} from "react"
-import Typography, {TypographyVariant} from "./Typography"
 import {IoCloseCircle, IoPause, IoPlay} from "react-icons/io5"
-import {fileSizeToString, getFileExtension} from "./FileMessage"
+import {getFileExtension} from "./FileMessage"
 import {ReactSVG} from "react-svg"
 import {StaticAssetPath} from "@/utils/util"
 import {useWavesurfer} from "@wavesurfer/react"
@@ -19,14 +18,13 @@ export type AudioFilePreviewProps = {
 
 const AudioFilePreview: FC<AudioFilePreviewProps> = ({
   fileName,
-  fileSize,
   audioUrl,
   onClose,
   onSend,
 }) => {
   const {t} = useTranslation()
 
-  const fileExtension = getFileExtension(fileName).toUpperCase()
+  const _fileExtension = getFileExtension(fileName).toUpperCase()
 
   const waveformRef = useRef(null)
 
@@ -46,23 +44,26 @@ const AudioFilePreview: FC<AudioFilePreviewProps> = ({
   return (
     <div className="flex w-messageMaxWidth flex-col rounded border bg-slate-50 shadow-lg">
       <div className="flex h-16 w-full items-center rounded-t border-b bg-slate-100 px-5">
-        <Typography
+        {/* TODO: Use ui/typography.tsx */}
+        {/* <Typography
           variant={TypographyVariant.HeadingMedium}
           className="w-full">
           {t(LangKey.UploadAudio)}
-        </Typography>
+        </Typography> */}
 
         <IoCloseCircle size={20} color="gray" role="button" onClick={onClose} />
       </div>
 
       <div className="flex size-full flex-col gap-3 p-4">
         <div className="flex w-full flex-col items-center gap-2 rounded border bg-white p-2">
           <div className="flex w-full">
-            <Typography
+            {/* TODO: Use ui/typography.tsx */}
+
+            {/* <Typography
               className="line-clamp-1 font-light text-slate-700"
               variant={TypographyVariant.Body}>
               {fileName}
-            </Typography>
+            </Typography> */}
           </div>
 
           <div className="flex w-full items-center gap-2 rounded bg-slate-100 p-2 shadow">
@@ -92,7 +93,9 @@ const AudioFilePreview: FC<AudioFilePreviewProps> = ({
           </div>
 
           <div className="flex w-full">
-            <Typography
+            {/* TODO: Use ui/typography.tsx */}
+
+            {/* <Typography
               className="w-full font-semibold text-gray-400"
               variant={TypographyVariant.BodySmall}>
               {fileExtension}
@@ -102,7 +105,7 @@ const AudioFilePreview: FC<AudioFilePreviewProps> = ({
               className="min-w-20 text-right font-semibold text-gray-400"
               variant={TypographyVariant.BodySmall}>
               {fileSizeToString(fileSize)}
-            </Typography>
+            </Typography> */}
           </div>
         </div>
 

src/components/DropdownActions.tsx

@@ -2,8 +2,8 @@ import {type FC, useState} from "react"
 import {type IconType} from "react-icons"
 import {IoMdCheckmark} from "react-icons/io"
 import Dropdown from "./Dropdown"
-import Typography from "./Typography"
 import {assert} from "@/utils/util"
+import {Text} from "./ui/typography"
 
 export type DropdownOption = {
   text: string
@@ -37,7 +37,7 @@ const DropdownActions: FC<DropdownActionsProps> = ({
             <optionSelected.Icon size={20} />
           </div>
 
-          <Typography className="font-medium">{optionSelected.text}</Typography>
+          <Text weight="medium">{optionSelected.text}</Text>
         </button>
       }>
       <>
@@ -78,7 +78,7 @@ const DropdownItem: FC<DropdownOptionProps> = ({
         <Icon size={20} />
       </div>
 
-      <Typography className="font-medium">{text}</Typography>
+      <Text weight="medium">{text}</Text>
 
       {isSelected && <IoMdCheckmark className="ml-auto text-slate-300" />}
     </button>

src/components/Loader.tsx

@@ -1,6 +1,6 @@
 import {type FC} from "react"
-import Typography from "./Typography"
 import {twMerge} from "tailwind-merge"
+import {Text} from "./ui/typography"
 
 export type LoaderProps = {
   text: string
@@ -16,7 +16,7 @@ const Loader: FC<LoaderProps> = ({text, className}) => {
       )}>
       <div className="size-8 animate-rotation rounded-full border-4 border-white border-t-slate-500" />
 
-      <Typography>{text}</Typography>
+      <Text>{text}</Text>
     </div>
   )
 }

src/components/Notification.tsx

@@ -3,7 +3,6 @@ import {type FC} from "react"
 import {IoCheckbox, IoTrash} from "react-icons/io5"
 import {twMerge} from "tailwind-merge"
 import AvatarImage, {AvatarType} from "./AvatarImage"
-import Typography, {TypographyVariant} from "./Typography"
 import {notificationsBody, type NotificationType} from "@/utils/notifications"
 import {Button, IconButton} from "./ui/button"
 import useTranslation from "@/hooks/util/useTranslation"

src/components/ProgressBar.tsx

@@ -1,9 +1,9 @@
 import {type FC} from "react"
 import {twMerge} from "tailwind-merge"
 import {IoIosAlert, IoIosCheckmarkCircle} from "react-icons/io"
-import Typography from "./Typography"
 import useTranslation from "@/hooks/util/useTranslation"
 import {LangKey} from "@/lang/allKeys"
+import {Text} from "./ui/typography"
 
 export enum ProgressBarState {
   Progress,
@@ -130,13 +130,9 @@ const CircularProgressBar: FC<CircularProgressBarProps> = ({
         !(isCompleted || isError) && "border-purple-500 shadow-circleProgress",
         className
       )}>
-      <Typography
-        className={twMerge(
-          "font-semibold",
-          isError ? "text-red-500" : "text-black"
-        )}>
+      <Text color={isError ? "destructive" : "default"} weight="medium">
         {isError ? t(LangKey.Error) : `${progress}%`}
-      </Typography>
+      </Text>
     </div>
   )
 }