feat(ui): update to custom typography comps

src/components/cards/defaultCard.tsx

@@ -3,6 +3,8 @@ import { Link } from "@tanstack/react-router";
 import { format } from "date-fns";
 import { useMemo } from "react";
 import IGDBImage from "../IGDBImage";
+import { H5 } from "../typography/h5";
+import { TypographyMuted } from "../typography/muted";
 import { Card, CardContent } from "../ui/card";
 
 type DefaultCardProps = (IGDBReturnDataType | SimilarGame) & {
@@ -37,30 +39,33 @@ const DefaultCard = ({
           <div className="absolute inset-0 z-20 flex flex-col items-center justify-center transition duration-300 ease-out translate-y-full rounded opacity-0 cursor-pointer bg-slate-700 bg-opacity-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-hover:translate-y-0 group-hover:opacity-100">
             <div className="flex flex-col items-center justify-center w-full gap-4 p-2">
               <div className="flex flex-col w-full gap-1">
-                <h4 className="font-medium text-center text-white whitespace-pre-line break-before-avoid text-balance">
+                <H5 className="text-center text-white whitespace-pre-line break-before-avoid text-balance">
                   {name}
-                </h4>
+                </H5>
 
                 {!!findReleaseDate && !!findReleaseDate?.date && (
                   <div className="flex items-center justify-center">
-                    <p className="text-xs text-slate-400">
+                    <TypographyMuted>
                       {format(
                         new Date(findReleaseDate?.date * 1000),
                         "MMMM d, yyyy"
                       )}
-                    </p>
+                    </TypographyMuted>
                   </div>
                 )}
 
-                <ul className="flex items-center justify-center w-full gap-1 px-2 text-xs text-slate-400 line-clamp-1">
+                <div className="flex items-center justify-center w-full gap-1 px-2 line-clamp-1 overflow-ellipsis">
                   {!!genres?.length &&
                     genres.slice(0, 2).map((genre, i) => (
-                      <li className="whitespace-nowrap line-clamp-1" key={i}>
+                      <TypographyMuted
+                        className="whitespace-nowrap line-clamp-1"
+                        key={i}
+                      >
                         {genre.name}
                         {i !== genres.slice(0, 2).length - 1 ? "," : ""}
-                      </li>
+                      </TypographyMuted>
                     ))}
-                </ul>
+                </div>
               </div>
             </div>
           </div>

src/components/cards/listCard/overlay.tsx

@@ -1,3 +1,5 @@
+import { H5 } from "@/components/typography/h5";
+
 interface ListCardOverlayProps {
   title: string;
 }
@@ -6,9 +8,9 @@ const ListCardOverlay: React.FC<ListCardOverlayProps> = ({ title }) => (
   <div className="absolute inset-0 z-20 flex flex-col items-center justify-center transition duration-300 ease-out translate-y-full rounded opacity-0 cursor-pointer bg-slate-700/80 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100">
     <div className="flex flex-col items-center justify-center w-full gap-4 p-2">
       <div className="flex flex-col w-full gap-1">
-        <h4 className="font-medium text-center text-white whitespace-pre-line break-before-avoid text-balance">
+        <H5 className="text-center text-white whitespace-pre-line break-before-avoid text-balance">
           {title}
-        </h4>
+        </H5>
       </div>
     </div>
   </div>

src/components/cards/pluginCard.tsx

@@ -4,6 +4,8 @@ import { useLanguageContext } from "@/contexts/I18N";
 import { usePluginActions } from "@/hooks";
 import { cn, openLink } from "@/lib";
 import { Download, Trash2 } from "lucide-react";
+import { TypographyMuted } from "../typography/muted";
+import { TypographySmall } from "../typography/small";
 
 interface Props {
   image: string;
@@ -58,36 +60,35 @@ const PluginCard = ({
           />
 
           <div className="flex flex-col items-start justify-end">
-            <p className="flex items-center gap-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+            <TypographyMuted className="flex items-center gap-1 font-medium">
               {needsUpdate && (
                 <span className="font-bold text-red-500">
                   [Update available]
                 </span>
               )}
               {id} - V{version}{" "}
-            </p>
+            </TypographyMuted>
 
-            <h3 className="text-sm font-semibold truncate">{name}</h3>
+            <TypographySmall className="truncate">{name}</TypographySmall>
 
             {!!author && (
-              <p
-                className={cn(
-                  "text-xs font-medium text-gray-500 dark:text-gray-400",
-                  {
-                    "cursor-pointer hover:underline": author.url,
-                  }
-                )}
+              <TypographyMuted
+                className={cn({
+                  "cursor-pointer hover:underline": author.url,
+                })}
                 onClick={() => {
                   if (author.url) openLink(author.url);
                 }}
               >
                 {author.name}
-              </p>
+              </TypographyMuted>
             )}
           </div>
         </div>
 
-        <p className="text-xs font-medium text-left">{description}</p>
+        <TypographyMuted className="text-xs font-medium text-left">
+          {description}
+        </TypographyMuted>
       </div>
 
       <div className="relative z-10 flex items-center justify-end gap-3">

src/components/cards/sourcecard.tsx

@@ -8,6 +8,8 @@ import { useAccountServices } from "@/stores/account-services";
 import { CloudDownload, ShoppingCart } from "lucide-react";
 import { useCallback } from "react";
 import { sanitizeFilename } from "../../lib/utils";
+import { H3 } from "../typography/h3";
+import { P } from "../typography/p";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 
@@ -121,13 +123,13 @@ export const SourceCard = ({ source, ...props }: SourceCardProps) => {
 
   return (
     <Card className="w-full h-28 p-2.5 overflow-hidden border-none rounded-2xl">
-      <div className="flex flex-col items-center justify-between w-full h-full overflow-hidden">
+      <div className="flex flex-col items-start justify-between w-full h-full overflow-hidden">
         {isDeal(source) ? (
           <>
-            <h1 className="font-bold">{source.shop.name}</h1>
-            <p className="w-full text-sm truncate text-muted-foreground">
+            <H3>{source.shop.name}</H3>
+            <P className="w-full -mt-0.5 truncate text-muted-foreground">
               {source.url}
-            </p>
+            </P>
             <Button
               className="items-center w-full gap-3 font-bold rounded-full"
               variant="success"
@@ -139,7 +141,7 @@ export const SourceCard = ({ source, ...props }: SourceCardProps) => {
           </>
         ) : (
           <>
-            <h1 className="w-full font-bold line-clamp-2">{source.name}</h1>
+            <P className="w-full line-clamp-2">{source.name}</P>
             <Button
               className="items-center w-full gap-3 font-bold capitalize rounded-full"
               variant="success"

src/components/data-table/pagination.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { TypographySmall } from "../typography/small";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -30,7 +31,9 @@ export function DataTablePagination<TData>({
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
+          <TypographySmall className="font-medium">
+            Rows per page
+          </TypographySmall>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -56,39 +59,39 @@ export function DataTablePagination<TData>({
         <div className="flex items-center space-x-2">
           <Button
             variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
+            className="hidden w-8 h-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <DoubleArrowLeftIcon className="w-4 h-4" />
           </Button>
           <Button
             variant="outline"
-            className="h-8 w-8 p-0"
+            className="w-8 h-8 p-0"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeftIcon className="w-4 h-4" />
           </Button>
           <Button
             variant="outline"
-            className="h-8 w-8 p-0"
+            className="w-8 h-8 p-0"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRightIcon className="w-4 h-4" />
           </Button>
           <Button
             variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
+            className="hidden w-8 h-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <DoubleArrowRightIcon className="w-4 h-4" />
           </Button>
         </div>
       </div>

src/components/errorComponent/index.tsx

@@ -1,6 +1,8 @@
 import { useSettings } from "@/hooks";
 import { cn, shouldHideTitleBar } from "@/lib";
 import { ErrorComponentProps, Link } from "@tanstack/react-router";
+import { H1 } from "../typography/h1";
+import { H2 } from "../typography/h2";
 import { Button, buttonVariants } from "../ui/button";
 import { ScrollArea } from "../ui/scroll-area";
 
@@ -17,8 +19,8 @@ const ErrorComponent = (props: ErrorComponentProps) => {
       )}
     >
       <div className="flex flex-col items-start justify-center w-full gap-0.5">
-        <h1 className="text-3xl font-bold">{props.error.name}</h1>
-        <h2 className="text-lg text-muted-foreground">{props.error.message}</h2>
+        <H1>{props.error.name}</H1>
+        <H2 className="text-muted-foreground">{props.error.message}</H2>
       </div>
       <div className="flex-1 w-full p-1 overflow-hidden">
         <ScrollArea
@@ -36,9 +38,7 @@ const ErrorComponent = (props: ErrorComponentProps) => {
           <Link to="/" className={buttonVariants()}>
             Go to Home
           </Link>
-          <h1 className="text-xl font-bold">
-            Report This Error to the Developer
-          </h1>
+          <H1>Report This Error to the Developer</H1>
           <Button onClick={props.reset} variant={"destructive"}>
             Try Again
           </Button>

src/components/info/media/index.tsx

@@ -2,14 +2,15 @@ import { useLanguageContext } from "@/contexts/I18N";
 import { IGDBReturnDataType } from "@/lib/api/igdb/types";
 import MediaScreenshots from "./screenshots";
 import MediaTrailer from "./trailer";
+import { H1 } from "@/components/typography/h1";
 
 const GameMedia = (props: IGDBReturnDataType) => {
   const { t } = useLanguageContext();
   const { name, screenshots, videos } = props;
 
   return (
     <div>
-      <h1 className="pb-4 text-xl font-medium">{t("media")}</h1>
+      <H1 className="pb-4">{t("media")}</H1>
 
       <MediaTrailer videos={videos} />
 

src/components/info/similar/index.tsx

@@ -1,5 +1,6 @@
 import DefaultCard from "@/components/cards/defaultCard";
 import CarouselButton from "@/components/carouselButton";
+import { H2 } from "@/components/typography/h2";
 import {
   Carousel,
   CarouselContent,
@@ -30,9 +31,7 @@ const SimilarGames = ({ data }: SimilarGamesProps) => {
         className="w-full"
       >
         <div className="flex justify-between mb-2">
-          <h1 className="text-xl font-medium capitalize">
-            {t("you_may_also_like")}
-          </h1>
+          <H2>{t("you_may_also_like")}</H2>
           <div>
             <CarouselButton direction="left" />
             <CarouselButton direction="right" />

src/components/info/sources/index.tsx

@@ -4,6 +4,8 @@ import {
   ItemDownload,
   SourceProvider,
 } from "@/@types";
+import { P } from "@/components/typography/p";
+import { TypographySmall } from "@/components/typography/small";
 import { Button } from "@/components/ui/button";
 import {
   Carousel,
@@ -87,9 +89,7 @@ const Sources = ({
 
   return (
     <div className="flex flex-col w-full gap-1">
-      <h1 className="text-sm font-medium text-secondary-foreground">
-        {t("sources")}
-      </h1>
+      <TypographySmall>{t("sources")}</TypographySmall>
 
       <div className="flex flex-col gap-2">
         <Carousel
@@ -118,7 +118,7 @@ const Sources = ({
         </Carousel>
 
         {isError ? (
-          <p className="text-red-500">{t("error_loading_sources")}</p>
+          <P className="text-red-500">{t("error_loading_sources")}</P>
         ) : filteredSources?.length ? (
           <Carousel
             opts={{
@@ -134,7 +134,7 @@ const Sources = ({
         ) : (
           <div className="flex items-center justify-start gap-2.5 mt-2 font-bold text-sm">
             <X className="size-7" />
-            <p>{t("no_sources_found")}</p>
+            <P>{t("no_sources_found")}</P>
           </div>
         )}
       </div>

src/components/info/specs/index.tsx

@@ -1,4 +1,5 @@
 import RequirementsRow from "@/components/info/specs/row";
+import { H5 } from "@/components/typography/h5";
 import { useLanguageContext } from "@/contexts/I18N";
 import { PcRequirements } from "@/lib/api/igdb/types";
 import { useMemo } from "react";
@@ -26,9 +27,7 @@ const PcSpecs = ({ minimum, recommended }: PcSpecsProps) => {
 
   return (
     <div className="grid gap-4">
-      <h3 className="text-lg font-bold leading-6">
-        {t("system_requirements")}
-      </h3>
+      <H5>{t("system_requirements")}</H5>
       <div className="flex gap-4 flex-2">
         {items.map((item) => (
           <RequirementsRow

src/components/info/specs/row.tsx

@@ -1,4 +1,7 @@
 import { Data } from "@/components/info/specs";
+import { H4 } from "@/components/typography/h4";
+import { TypographyMuted } from "@/components/typography/muted";
+import { TypographySmall } from "@/components/typography/small";
 import { useLanguageContext } from "@/contexts/I18N";
 import { scrapeOptions } from "@/lib";
 import { useMemo } from "react";
@@ -16,14 +19,12 @@ const RequirementsRow = ({ type, data }: RequirementsRowProps) => {
 
   return (
     <div className="flex flex-col flex-shrink-0 w-full gap-2 p-4 overflow-hidden rounded-2xl bg-background">
-      <h3 className="p-4 pt-1 pb-2 text-lg font-bold leading-6 capitalize">
-        {t(type?.toLowerCase())}
-      </h3>
+      <H4 className="p-4 pt-1 pb-2 capitalize">{t(type?.toLowerCase())}</H4>
 
       {Object.entries(specs).map(([key, value]) => (
         <div className="flex flex-col justify-between gap-1 p-4 py-1" key={key}>
-          <span className="text-xs font-medium text-slate-400">{key}</span>
-          <span className="mr-1 text-sm">{value[0]}</span>
+          <TypographyMuted>{key}</TypographyMuted>
+          <TypographySmall className="mr-1">{value[0]}</TypographySmall>
         </div>
       ))}
     </div>