feat(ui): improve ui

Author: prostarz

src/components/cards/bannerCard.tsx

@@ -32,7 +32,7 @@ const BannerCard = ({
   return (
     <div className="relative w-full overflow-hidden rounded-lg h-80">
       <div className="absolute inset-0 z-0 w-full h-full overflow-hidden">
-        <span className="absolute w-full h-full z-[1] from-background to-transparent bg-gradient-to-tr" />
+        <div className="absolute w-full h-full z-[1] from-background to-transparent bg-gradient-to-tr" />
         <IGDBImage
           imageSize="720p"
           imageId={cover.image_id}
@@ -54,7 +54,7 @@ const BannerCard = ({
                   imageSize="screenshot_med"
                   key={screenshot.id}
                   imageId={screenshot.image_id}
-                  className="object-cover rounded-md w-52 aspect-video"
+                  className="object-cover w-48 rounded-md aspect-video lg:w-56"
                   alt={name}
                 />
               ))}

src/components/cards/pluginCard.tsx

@@ -62,9 +62,9 @@ const PluginCard = ({
           <div className="flex flex-col items-start justify-end">
             <TypographyMuted className="flex items-center gap-1 font-medium">
               {needsUpdate && (
-                <span className="font-bold text-red-500">
+                <TypographySmall className="font-bold text-red-500">
                   [Update available]
-                </span>
+                </TypographySmall>
               )}
               {id} - V{version}{" "}
             </TypographyMuted>

src/components/cards/sourcecard.tsx

@@ -152,9 +152,9 @@ export const SourceCard = ({ source, ...props }: SourceCardProps) => {
                 fill="currentColor"
                 className="flex-shrink-0"
               />
-              <span className="max-w-full capitalize truncate">
+              <P className="max-w-full capitalize truncate">
                 {source?.uploader ?? t("download")}
-              </span>
+              </P>
             </Button>
           </>
         )}

src/components/containers/section.tsx

@@ -6,6 +6,7 @@ import { useState } from "react";
 import DefaultCard from "../cards/defaultCard";
 import Spinner from "../spinner";
 import { H1 } from "../typography/h1";
+import { TypographyMuted } from "../typography/muted";
 import { Button } from "../ui/button";
 import MainContainer from "./mainContainer";
 
@@ -82,7 +83,7 @@ export const Section = ({ title, dataToFetch }: Props) => {
               <ChevronLeft />
             </Button>
 
-            <span className="text-lg text-muted-foreground">Page {page}</span>
+            <TypographyMuted>Page {page}</TypographyMuted>
 
             <Button variant={"ghost"} onClick={handleNextPage} size={"icon"}>
               <ChevronRight />

src/features/library/components/containers/activeLibraryGame.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { useGames } from "../../hooks/useGames";
 import ContinuePlayingCard from "../cards/continuePlaying";
+import { H5 } from "@/components/typography/h5";
 
 const ActiveLibraryGame = () => {
   const { fetchGames, deleteGame, updateGame, games } = useGames(true);
@@ -21,9 +22,7 @@ const ActiveLibraryGame = () => {
       ))}
     </div>
   ) : (
-    <p className="text-lg font-semibold">
-      You have not added any games to continue playing.
-    </p>
+    <H5>You have not added any games to continue playing.</H5>
   );
 };
 

src/features/library/components/containers/activeLibraryList.tsx

@@ -1,4 +1,6 @@
 import ListCard from "@/components/cards/listCard";
+import { H5 } from "@/components/typography/h5";
+import { P } from "@/components/typography/p";
 import { useLists } from "@/features/lists/hooks/useLists";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -22,17 +24,15 @@ const ActiveLibraryList = ({ listId }: ActiveLibraryListProps) => {
   if (isPending) {
     return (
       <div className="flex items-center justify-center">
-        <p className="text-lg font-semibold">Loading...</p>
+        <H5>Loading...</H5>
       </div>
     );
   }
 
   if (isError) {
     return (
       <div className="flex items-center justify-center">
-        <p className="text-lg font-semibold">
-          Something went wrong. Please try again later.
-        </p>
+        <H5>Something went wrong. Please try again later.</H5>
       </div>
     );
   }
@@ -44,7 +44,7 @@ const ActiveLibraryList = ({ listId }: ActiveLibraryListProps) => {
       ))}
     </div>
   ) : (
-    <p className="text-lg font-semibold">No games in this list.</p>
+    <P>No games in this list.</P>
   );
 };
 

src/features/library/components/containers/tabs.tsx

@@ -1,4 +1,5 @@
 import { Tab } from "@/@types";
+import { H5 } from "@/components/typography/h5";
 import { Button } from "@/components/ui/button";
 import {
   Carousel,
@@ -88,7 +89,7 @@ const LibraryTabs = ({ tabs, activeTab, setActiveTab }: LibraryTabsProps) => {
         <DialogTrigger>
           <Button className="text-white bg-gradient-to-tr from-blue-400 to-purple-400 gap-1.5 rounded-full hover:opacity-90 transition-all">
             <Plus strokeWidth={3} />
-            <span className="font-bold">New Game</span>
+            <H5>New Game</H5>
           </Button>
         </DialogTrigger>
         <NewGameModal />
@@ -126,7 +127,7 @@ const LibraryTabs = ({ tabs, activeTab, setActiveTab }: LibraryTabsProps) => {
         <DialogTrigger>
           <Button className="rounded-full gap-1.5 ml-1">
             <Plus strokeWidth={3} />
-            <span className="font-bold">New List</span>
+            <H5>New List</H5>
           </Button>
         </DialogTrigger>
         <NewListDialogContent open={newListOpen} setOpen={setNewListOpen} />

src/features/library/components/modals/newGame/import.tsx

@@ -1,4 +1,6 @@
 import { InputWithIcon } from "@/components/inputWithIcon";
+import { TypographyMuted } from "@/components/typography/muted";
+import { TypographySmall } from "@/components/typography/small";
 import { PopoverContent } from "@/components/ui/popover";
 import useSearch from "@/features/search/hooks/useSearch";
 import { cn, getSteamIdFromWebsites } from "@/lib";
@@ -69,10 +71,12 @@ const NewGameImport = ({ form, setPopoverOpen }: NewGameImportProps) => {
                 onClick={() => handleClick(game)}
               >
                 <div className="flex gap-1.5">
-                  <p className="flex-1 text-sm line-clamp-2">{game?.name}</p>
-                  <span className="text-xs text-muted-foreground">
+                  <TypographySmall className="flex-1 line-clamp-2">
+                    {game?.name}
+                  </TypographySmall>
+                  <TypographyMuted>
                     ({game?.release_dates?.[0]?.human})
-                  </span>
+                  </TypographyMuted>
                 </div>
               </div>
             ))

src/features/library/components/playtime.tsx

@@ -1,3 +1,4 @@
+import { P } from "@/components/typography/p";
 import { Badge } from "@/components/ui/badge";
 import { Clock } from "lucide-react";
 import ms from "ms";
@@ -12,11 +13,11 @@ const Playtime = ({ playtime }: PlaytimeProps) => {
   return (
     <Badge className="flex items-center gap-1.5 px-2.5 py-1.5 h-full rounded-lg text-foreground backdrop-blur-md">
       <Clock size={16} className="text-foreground" />
-      <span className="font-semibold uppercase">
+      <P className="uppercase">
         {ms(playtime, {
           long: true,
         })}
-      </span>
+      </P>
     </Badge>
   );
 };

src/features/library/components/updateForm.tsx

@@ -1,3 +1,4 @@
+import { P } from "@/components/typography/p";
 import { Button } from "@/components/ui/button";
 import { DialogClose, DialogFooter } from "@/components/ui/dialog";
 import { Form, FormField } from "@/components/ui/form";
@@ -147,9 +148,9 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {
                 field={field}
               />
               {form.formState.errors.gameArgs && (
-                <p className="w-full text-right text-red-500">
+                <P className="w-full text-right text-red-500">
                   {form.formState.errors.gameArgs.message}
-                </p>
+                </P>
               )}
             </>
           )}
@@ -212,7 +213,7 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {
           {loading ? `${t("updating")}...` : t("update_game")}
         </Button>
       </DialogFooter>
-      {error && <p className="w-full text-right text-red-500">{error}</p>}
+      {error && <P className="w-full text-right text-red-500">{error}</P>}
     </Form>
   );
 };

src/features/lists/components/container/listContainer.tsx

@@ -45,7 +45,7 @@ const ListContainer = ({ list_id, list_name }: ListContainerProps) => {
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>Edit List</p>
+              <P>Edit List</P>
             </TooltipContent>
           </Tooltip>
 
@@ -56,7 +56,7 @@ const ListContainer = ({ list_id, list_name }: ListContainerProps) => {
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>Delete List</p>
+              <P>Delete List</P>
             </TooltipContent>
           </Tooltip>
         </div>

src/features/lists/components/dropdownContent.tsx

@@ -1,3 +1,4 @@
+import { P } from "@/components/typography/p";
 import { DialogTrigger } from "@/components/ui/dialog";
 import {
   DropdownMenuContent,
@@ -39,7 +40,7 @@ const ListsDropdownContent = (props: Props) => {
       <div className="overflow-y-auto max-h-24">
         {!lists?.length ? (
           <div className="flex items-center justify-center gap-2 p-2">
-            <p className="text-center">{t("create_new_list")}</p>
+            <P className="text-center">{t("create_new_list")}</P>
           </div>
         ) : (
           lists.map((list) => (
@@ -56,7 +57,7 @@ const ListsDropdownContent = (props: Props) => {
         <DialogTrigger>
           <div className="flex items-center gap-1.5">
             <PlusIcon className="size-5 " />
-            <p className="text-sm">Create a new collection</p>
+            <P>Create a new list</P>
           </div>
         </DialogTrigger>
       </DropdownMenuItem>

src/features/lists/components/dropdownItem.tsx

@@ -1,4 +1,5 @@
 import Confirmation from "@/components/confirmation";
+import { P } from "@/components/typography/p";
 import { Button } from "@/components/ui/button";
 import { DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu";
 import { IGDBReturnDataType } from "@/lib/api/igdb/types";
@@ -73,7 +74,7 @@ const ListsDropdownItem = ({
           onSelect={handleSelect}
           disabled={loading}
         >
-          <span className="truncate">{children || game.name}</span>
+          <P className="truncate">{children || game.name}</P>
         </DropdownMenuCheckboxItem>
       </div>
 

src/features/realDebrid/components/realDebridDialogContent.tsx

@@ -1,4 +1,6 @@
 import { ExternalNewAccountInput } from "@/@types/accounts";
+import { TypographyMuted } from "@/components/typography/muted";
+import { P } from "@/components/typography/p";
 import { DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { invoke } from "@/lib";
 import { User } from "@/lib/api/realdebrid/user";
@@ -112,12 +114,12 @@ const RealDebridDialogContent = ({
           "loading..."
         ) : (
           <div className="flex flex-col gap-3">
-            <p>Please go to the following URL and enter the code:</p>
-            <p className="text-sm text-muted-foreground">
-              {deviceCodeInfo.verification_url}
-            </p>
-            <p>Enter the code: {deviceCodeInfo.user_code}</p>
-            <p>Expires in: {deviceCodeInfo.expires_in} seconds</p>
+            <P>Please go to the following URL and enter the code:</P>
+            <TypographyMuted>{deviceCodeInfo.verification_url}</TypographyMuted>
+            <P>Enter the code: {deviceCodeInfo.user_code}</P>
+            <TypographyMuted>
+              Expires in: {deviceCodeInfo.expires_in} seconds
+            </TypographyMuted>
           </div>
         )}
       </div>

src/features/search/components/card.tsx

@@ -1,3 +1,5 @@
+import { TypographyMuted } from "@/components/typography/muted";
+import { P } from "@/components/typography/p";
 import { IGDBReturnDataType } from "@/lib/api/igdb/types";
 import { Link } from "@tanstack/react-router";
 
@@ -20,8 +22,8 @@ const SearchCard = ({
       onClick={() => setOpen(false)}
     >
       <div className="flex gap-1.5">
-        <p className="flex-1 text-sm line-clamp-2">{name}</p>
-        <span className="text-xs text-muted-foreground">({year})</span>
+        <P className="flex-1 line-clamp-2">{name}</P>
+        <TypographyMuted>{year}</TypographyMuted>
       </div>
     </Link>
   );

src/features/settings/components/section.tsx

@@ -20,11 +20,7 @@ export const SettingsSection = ({
     <div className="p-4 space-y-4 shadow-md rounded-xl bg-card/40">
       {(title || description) && (
         <div className={cn("flex flex-col mb-4")}>
-          {title && (
-            <H3>
-              <span>{t("settings.settings." + title)}</span>
-            </H3>
-          )}
+          {title && <H3>{t("settings.settings." + title)}</H3>}
           {description && (
             <TypographyMuted>
               {t("settings.settings." + description)}

src/features/settings/components/tab.tsx

@@ -1,3 +1,4 @@
+import { P } from "@/components/typography/p";
 import { cn } from "@/lib/utils";
 import { JSX } from "react";
 
@@ -22,7 +23,7 @@ const SettingTab = ({ icon, title, isActive, onClick }: SettingTabProps) => {
       onClick={onClick}
     >
       {icon}
-      <span className="truncate">{title}</span>
+      <P className="truncate">{title}</P>
     </button>
   );
 };

src/features/settings/components/tabs/developer/settings/logDisplay/logWindow.tsx

@@ -1,3 +1,4 @@
+import { H5 } from "@/components/typography/h5";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useLogger } from "@/hooks";
 import { cn } from "@/lib";
@@ -32,7 +33,7 @@ const LogWindow = ({ enabled }: LogWindowProps) => {
             })
           ) : (
             <div className="flex items-center justify-center size-full">
-              <p className="text-lg font-bold">No logs</p>
+              <H5>No logs</H5>
             </div>
           )}
         </div>

src/features/settings/components/tabs/plugins/display.tsx

@@ -1,5 +1,6 @@
 import { PluginSetupJSONDisabled } from "@/@types";
 import PluginCard from "@/components/cards/pluginCard";
+import { H5 } from "@/components/typography/h5";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import UsePlugins from "@/hooks/usePlugins";
 import { cn } from "@/lib";
@@ -97,10 +98,10 @@ const PluginDisplay = ({
             />
           ))
         ) : (
-          <div className="w-full flex items-center justify-start py-2">
-            <p className="text-left text-lg w-full font-bold">
+          <div className="flex items-center justify-start w-full py-2">
+            <H5 className="w-full text-left">
               {search?.length ? `No results for "${search}"` : "No plugins"}
-            </p>
+            </H5>
           </div>
         )}
       </div>

src/features/splashscreen/components/index.tsx

@@ -6,7 +6,7 @@ const SplashScreen = () => {
   return (
     <div className="relative w-screen h-screen overflow-hidden bg-background z-[9999]">
       <div className="splash-bg">
-        <span></span>
+        <span />
         <img src={bgImage} alt="icon" />
       </div>
 

src/features/torBox/components/torBoxDialogContent.tsx

@@ -1,4 +1,5 @@
 import { ExternalNewAccountInput } from "@/@types/accounts";
+import { H3 } from "@/components/typography/h3";
 import { Button } from "@/components/ui/button";
 import { DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
@@ -67,13 +68,12 @@ const TorBoxDialogContent = ({ open, setOpen }: TorBoxDialogContentProps) => {
     <DialogContent>
       <DialogTitle>TorBox</DialogTitle>
       <div className="flex flex-col gap-3">
-        <p>Please enter your TorBox API key below:</p>
+        <H3>Please enter your TorBox API key below:</H3>
         <Input
           type="text"
           value={apiKey}
           onChange={(e) => setApiKey(e.target.value)}
           placeholder="Enter API key"
-          className="p-2 border rounded"
         />
         <div className="flex justify-end gap-3 mt-3">
           <Button onClick={handleClose} variant={"destructive"}>