Update Shadcn's button and reduce size of SVGs

Author: Zwyx

components.json

@@ -7,10 +7,15 @@
 		"config": "tailwind.config.js",
 		"css": "src/index.css",
 		"baseColor": "slate",
-		"cssVariables": true
+		"cssVariables": true,
+		"prefix": ""
 	},
 	"aliases": {
 		"components": "@/components",
-		"utils": "@/lib/utils"
-	}
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
 }

src/components/library/BookMetadataDialog.tsx

@@ -253,7 +253,7 @@ export const BookMetadataDialog = ({
 
 						<Button variant="ghostLink" size="sm" asChild>
 							<AboutDialogLink to="?about=the-book-id">
-								<LucideHelpCircle size={20} />
+								<LucideHelpCircle />
 							</AboutDialogLink>
 						</Button>
 					</div>
@@ -372,7 +372,7 @@ export const BookMetadataDialog = ({
 
 							<Button variant="ghostLink" size="sm" asChild>
 								<AboutDialogLink to="?about=the-book-image">
-									<LucideHelpCircle size={20} />
+									<LucideHelpCircle />
 								</AboutDialogLink>
 							</Button>
 						</div>

src/components/library/BookPageHeader.tsx

@@ -98,7 +98,7 @@ export const BookPageHeader = ({
 							size="sm"
 							disabled={loading}
 						>
-							<LucideMoreHorizontal size={20} />
+							<LucideMoreHorizontal />
 						</Button>
 					</DropdownMenuTrigger>
 				</SuccessWrapper>

src/components/library/OptionsDialog.tsx

@@ -132,7 +132,7 @@ export const OptionsDialog = ({
 					title="Search settings"
 					disabled={disabled}
 				>
-					<LucideSettings size={20} />
+					<LucideSettings />
 				</Button>
 			</DialogTrigger>
 

src/components/library/Privacy.tsx

@@ -23,8 +23,13 @@ export const Privacy = () => {
 					.
 				</div>
 
-				<Button variant="ghost" size="2xs" onClick={hideBanner}>
-					<LucideX size={12} />
+				<Button
+					className="[&_svg]:size-3"
+					variant="ghost"
+					size="2xs"
+					onClick={hideBanner}
+				>
+					<LucideX />
 				</Button>
 			</div>
 		)

src/components/ui/button.tsx

@@ -5,7 +5,8 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  // Changed `[&_svg]:size` from `4` to `5`
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,12 +19,12 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        ghostLink: "hover:bg-accent",
+        ghostLink: "hover:bg-accent", // added
       },
       size: {
         default: "h-10 px-4 py-2",
-        "2xs": "h-5 rounded-sm px-1", // added manually
-        xs: "h-7 rounded-sm px-3", // added manually
+        "2xs": "h-5 rounded-sm px-1", // added
+        xs: "h-7 rounded-sm px-3", // added
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",

src/components/ui/dialog.tsx

@@ -19,6 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
+      // Removed backdrop-blur to fix scroll lag in Firefox on Linux and Chrome on Android
       "fixed inset-0 z-50 bg-background/95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
@@ -29,6 +30,7 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
+  // Added `notClosable`
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { notClosable?: boolean }
 >(({ className, notClosable, children, ...props }, ref) => (
   <DialogPortal>
@@ -73,7 +75,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      // changed manually
+      // Changed gap
       "flex flex-col-reverse sm:flex-row sm:justify-end gap-2",
       className
     )}

src/components/ui/input.tsx

@@ -3,7 +3,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-// added manually
+// Created
 const inputVariants = cva(
   "flex w-full rounded-md border bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   {