Upgrade to daisyUI v4

Author: John Goodliff

bun.lock

@@ -48,7 +48,7 @@
 		"@fortawesome/free-brands-svg-icons": "^6.7.2",
 		"@fortawesome/free-solid-svg-icons": "^6.7.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"daisyui": "^3.0.0",
+		"daisyui": "^4.0.0",
 		"framer-motion": "^12.12.1",
 		"gatsby": "^5.14.3",
 		"gatsby-plugin-image-generator": "./plugins/gatsby-plugin-image-generator",

package.json

@@ -15,7 +15,6 @@ export interface DaisyUiThemeInterface {
 	'base-content': string;
 	neutral: string;
 	'neutral-content': string;
-	'neutral-focus': string;
 	primary: string;
 	'primary-content': string;
 	secondary: string;

src/common/types.ts

@@ -15,7 +15,7 @@ export function LargeDropzone(props: {
 			className="flex-col flex-1"
 			onFilesAdded={props.onFilesAdded}
 		>
-			<div className="z-20 flex-col flex-1 gap-8 justify-center p-8 m-8 text-center rounded-lg border-2 border-dashed bg-base-100 hover:bg-base-200">
+			<div className="z-20 flex-col flex-1 gap-8 justify-center p-8 m-8 text-center rounded-lg border-2 border-dashed transition-colors bg-base-100 hover:bg-base-200">
 				<Icon icon={faFileCirclePlus} className="fa-3x" />
 				<p className="flex-grow-0">
 					Drag and drop PDF files here, or click to select files

src/components/dropzones/large.tsx

@@ -18,7 +18,7 @@ export function Modal(props: {
 			id={props.id}
 			className="overflow-hidden visible modal modal-bottom sm:modal-middle sm:backdrop-blur-sm group has-motion"
 		>
-			<div className="modal-box sm:w-5/6 sm:max-w-xl flex-col items-center p-8 sm:px-16 overflow-hidden transition-[opacity, transform] has-motion scale-90 group-target:scale-100">
+			<div className="modal-box sm:w-5/6 sm:max-w-xl flex-col items-center p-8 sm:px-16 overflow-hidden transition-[opacity,transform] has-motion scale-90 group-target:scale-100">
 				<h3 className="text-lg font-bold text-center">{props.title}</h3>
 				<br />
 				<div className="w-fit">{props.children}</div>

src/components/modals/base.tsx

@@ -11,6 +11,12 @@
 
 /* These styles to the base layer so that component styles can override them as necessary */
 @layer base {
+	/* Fix for forced scrollbar-gutter when a modal is open */
+	/* Source: https://github.com/saadeghi/daisyui/pull/2956#issuecomment-2043840868 */
+	:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
+    scrollbar-gutter: auto !important;
+  }
+
 	/* Override flex-row and flex-col to also change the display type so we don't have to specify this manually every time */
 	.flex-row,
 	.flex-col {
@@ -31,6 +37,7 @@
 		@apply btn;
 		@apply text-base;
 		@apply font-button;
+		@apply uppercase;
 	}
 }