feat(ui): adjust more buttons to fit with new style + add icon to inputs

Team-Falkor · Jan 3, 2025 · 096e103 · 096e103
1 parent aa6494d
commit 096e103
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 44 deletions.
diff --git a/src/components/cards/bannerCard.tsx b/src/components/cards/bannerCard.tsx
@@ -61,7 +61,7 @@ const BannerCard = ({
             <div className="flex flex-row gap-3">
               <TrailerButton name={name} videos={videos} />
               <Link
-                className={buttonVariants({ variant: "secondary" })}
+                className={buttonVariants()}
                 to="/info/$id"
                 params={{ id: id.toString() }}
               >

diff --git a/src/components/errorComponent/index.tsx b/src/components/errorComponent/index.tsx
@@ -33,7 +33,7 @@ const ErrorComponent = (props: ErrorComponentProps) => {
       </div>
       <div className="flex flex-col items-center w-full">
         <div className="flex flex-row justify-between w-full gap-2">
-          <Link to="/" className={buttonVariants({ variant: "secondary" })}>
+          <Link to="/" className={buttonVariants()}>
             Go to Home
           </Link>
           <h1 className="text-xl font-bold">

diff --git a/src/components/trailer/index.tsx b/src/components/trailer/index.tsx
@@ -1,8 +1,8 @@
+import { useLanguageContext } from "@/contexts/I18N";
 import { IGDBReturnDataType } from "@/lib/api/igdb/types";
 import { Button } from "../ui/button";
 import { Dialog, DialogTrigger } from "../ui/dialog";
 import TrailerDialogContent from "./dialogContent";
-import { useLanguageContext } from "@/contexts/I18N";
 
 type Props = Pick<IGDBReturnDataType, "name" | "videos">;
 
@@ -12,9 +12,7 @@ const TrailerButton = (props: Props) => {
   return (
     <Dialog>
       <DialogTrigger>
-        <Button variant="secondary" className="capitalize">
-          {t("trailer")}
-        </Button>
+        <Button className="capitalize">{t("trailer")}</Button>
       </DialogTrigger>
 
       <TrailerDialogContent {...props} />

diff --git a/src/features/downloads/components/cards/download/actions.tsx b/src/features/downloads/components/cards/download/actions.tsx
@@ -27,12 +27,7 @@ const DownloadCardActions = ({
   return (
     <div className="flex flex-row gap-4">
       {status === "paused" ? (
-        <Button
-          size="default"
-          variant="secondary"
-          className="gap-2"
-          onClick={start ?? undefined}
-        >
+        <Button size="default" className="gap-2" onClick={start ?? undefined}>
           <Play className="fill-current" size="24" />
           Start Download
         </Button>

diff --git a/src/features/library/components/containers/tabs.tsx b/src/features/library/components/containers/tabs.tsx
@@ -86,10 +86,7 @@ const LibraryTabs = ({ tabs, activeTab, setActiveTab }: LibraryTabsProps) => {
       {/* New Game Button */}
       <Dialog open={newGameOpen} onOpenChange={setNewGameOpen}>
         <DialogTrigger>
-          <Button
-            variant="secondary"
-            className="text-white bg-gradient-to-tr from-blue-400 to-purple-400 gap-1.5 rounded-full"
-          >
+          <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>
           </Button>

diff --git a/src/features/library/components/modals/newGame/import.tsx b/src/features/library/components/modals/newGame/import.tsx
@@ -1,10 +1,10 @@
-import { Input } from "@/components/ui/input";
+import { InputWithIcon } from "@/components/inputWithIcon";
 import { PopoverContent } from "@/components/ui/popover";
 import useSearch from "@/features/search/hooks/useSearch";
 import { cn, getSteamIdFromWebsites } from "@/lib";
 import { IGDBReturnDataType } from "@/lib/api/igdb/types";
 import { t } from "i18next";
-import { ShipWheel } from "lucide-react";
+import { SearchIcon, ShipWheel } from "lucide-react";
 import { Dispatch, SetStateAction, useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { NewGameFormSchema } from "./schema";
@@ -42,11 +42,12 @@ const NewGameImport = ({ form, setPopoverOpen }: NewGameImportProps) => {
     <PopoverContent side="top" className="p-0 w-96">
       <div className="grid gap-4">
         <div className="w-full px-4 pt-4">
-          <Input
+          <InputWithIcon
             placeholder={t("search_placeholder")}
             className="w-full"
             onChange={(e) => setSearchTerm(e.target.value)}
             value={searchTerm}
+            startIcon={<SearchIcon />}
           />
         </div>
 

diff --git a/src/features/library/components/modals/newGame/index.tsx b/src/features/library/components/modals/newGame/index.tsx
@@ -102,16 +102,12 @@ const NewGameModal = () => {
             <div className="flex items-center justify-between gap-2 mt-4">
               <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
                 <PopoverTrigger asChild>
-                  <Button variant="secondary">{t("import_from_igdb")}</Button>
+                  <Button>{t("import_from_igdb")}</Button>
                 </PopoverTrigger>
                 <NewGameImport form={form} setPopoverOpen={setPopoverOpen} />
               </Popover>
 
-              <Button
-                type="submit"
-                variant="secondary"
-                onClick={form.handleSubmit(handleAddGame)}
-              >
+              <Button type="submit" onClick={form.handleSubmit(handleAddGame)}>
                 {t("add_game")}
               </Button>
             </div>

diff --git a/src/features/library/components/updateForm.tsx b/src/features/library/components/updateForm.tsx
@@ -108,11 +108,7 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {
               text={t("path")}
               description={t("the_path_to_the_game")}
               Button={
-                <Button
-                  size="icon"
-                  variant="secondary"
-                  onClick={handlePathButton}
-                >
+                <Button size="icon" onClick={handlePathButton}>
                   <FolderOpen />
                 </Button>
               }
@@ -131,11 +127,7 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {
               description={t("the_path_or_url_of_the_icon")}
               required
               Button={
-                <Button
-                  size="icon"
-                  variant="secondary"
-                  onClick={handleIconButton}
-                >
+                <Button size="icon" onClick={handleIconButton}>
                   <FolderOpen />
                 </Button>
               }
@@ -216,11 +208,7 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {
         <DialogClose>
           <Button variant="destructive">{t("cancel")}</Button>
         </DialogClose>
-        <Button
-          variant="secondary"
-          onClick={form.handleSubmit(onSubmit)}
-          disabled={loading}
-        >
+        <Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
           {loading ? `${t("updating")}...` : t("update_game")}
         </Button>
       </DialogFooter>

diff --git a/src/features/settings/components/tabs/accounts/addAccountButton.tsx b/src/features/settings/components/tabs/accounts/addAccountButton.tsx
@@ -21,7 +21,7 @@ const AddAccountButton = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="secondary">Add Account</Button>
+        <Button>Add Account</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         <DropdownMenuLabel>Choose an account</DropdownMenuLabel>

diff --git a/src/features/settings/components/tabs/miscellaneous.tsx b/src/features/settings/components/tabs/miscellaneous.tsx
@@ -23,7 +23,7 @@ const MiscellaneousSettings = () => {
       <SettingsContainer>
         <SettingsSection title="reset-igdb-cache">
           <SettingsItem title="reset-igdb-cache">
-            <Button variant="secondary" onClick={handleResetCache}>
+            <Button onClick={handleResetCache}>
               {t("settings.settings.reset-igdb-cache")}
             </Button>
           </SettingsItem>

diff --git a/src/features/settings/components/tabs/plugins/sort.tsx b/src/features/settings/components/tabs/plugins/sort.tsx
@@ -34,7 +34,7 @@ const PluginsSort = ({
       <Tooltip>
         <TooltipTrigger>
           <Button
-            variant={showEnabledOnly ? "secondary" : "ghost"}
+            variant={showEnabledOnly ? "default" : "ghost"}
             size={"icon"}
             onClick={() => {
               localStorage.setItem("showEnabledOnly", String(!showEnabledOnly));

diff --git a/src/features/updater/components/updater.tsx b/src/features/updater/components/updater.tsx
@@ -122,7 +122,6 @@ const Updater = () => {
             <Button variant="destructive">{t("later")}</Button>
           </DialogClose>
           <Button
-            variant="secondary"
             onClick={installUpdate}
             disabled={progress !== undefined && progress > 0}
           >