Complete DaisyUI removal - Replace remaining btn classes with standard Tailwind - Replace text-primary with text-blue-600 - Replace focus:ring-primary with focus:ring-blue-500 - Replace bg-primary-100 with bg-blue-100 - Update all form inputs and buttons - Clean up all DaisyUI dependencies

This commit is contained in:
2025-06-30 20:53:05 -04:00
parent 926df49f4c
commit 8015a78357
4 changed files with 25 additions and 25 deletions

View File

@@ -75,7 +75,7 @@ export default function LoginPage() {
required
value={email}
onChange={e => setEmail(e.target.value)}
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Email address"
disabled={loading}
/>
@@ -92,7 +92,7 @@ export default function LoginPage() {
required
value={password}
onChange={e => setPassword(e.target.value)}
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Password"
disabled={loading}
/>
@@ -151,7 +151,7 @@ export default function LoginPage() {
<button
type="button"
onClick={handleGoogle}
className="btn btn-outline flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-zinc-700 rounded-md shadow-sm bg-white dark:bg-zinc-800 text-sm font-medium text-gray-500 dark:text-zinc-300 hover:bg-gray-50 dark:hover:bg-zinc-700 transition"
className="flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-zinc-700 rounded-md shadow-sm bg-white dark:bg-zinc-800 text-sm font-medium text-gray-500 dark:text-zinc-300 hover:bg-gray-50 dark:hover:bg-zinc-700 transition"
disabled={loading}
>
<span className="sr-only">Sign in with Google</span>

View File

@@ -408,7 +408,7 @@ export default function BuildPage() {
<div className="text-sm text-gray-500">Total Cost</div>
</div>
<button
className="btn btn-outline btn-error ml-0 md:ml-4"
className="border border-red-300 hover:bg-red-50 text-red-700 ml-0 md:ml-4 px-4 py-2 rounded-md transition-colors"
onClick={() => setShowClearModal(true)}
>
Clear Build
@@ -429,13 +429,13 @@ export default function BuildPage() {
</Dialog.Description>
<div className="flex justify-end gap-2">
<button
className="btn btn-sm btn-ghost"
className="text-gray-700 hover:bg-gray-100 px-3 py-1 rounded-md text-sm transition-colors"
onClick={() => setShowClearModal(false)}
>
Cancel
</button>
<button
className="btn btn-sm btn-error"
className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-md text-sm transition-colors"
onClick={() => {
clearBuild();
setShowClearModal(false);
@@ -717,7 +717,7 @@ export default function BuildPage() {
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
{selected ? (
<button
className="btn btn-outline btn-sm"
className="border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-md text-sm font-medium transition-colors"
onClick={() => removePartForComponent(component.id)}
>
Remove

View File

@@ -159,7 +159,7 @@ const Dropdown = ({
key={optionIdx}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active ? 'bg-primary-100 text-primary-900' : 'text-zinc-900'
active ? 'bg-blue-100 text-blue-900' : 'text-zinc-900'
}`
}
value={option.value}
@@ -720,7 +720,7 @@ export default function Home() {
key={optionIdx}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active ? 'bg-primary-100 text-primary-900' : 'text-zinc-900'
active ? 'bg-blue-100 text-blue-900' : 'text-zinc-900'
}`
}
value={option.value}
@@ -731,7 +731,7 @@ export default function Home() {
{option.label}
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600">
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
<CheckIcon className="h-4 w-4" aria-hidden="true" />
</span>
) : null}
@@ -782,7 +782,7 @@ export default function Home() {
<div className="text-sm text-zinc-700">
{loading ? 'Loading...' : `Showing ${startIndex + 1}-${Math.min(endIndex, sortedParts.length)} of ${sortedParts.length} parts`}
{hasActiveFilters && !loading && (
<span className="ml-2 text-primary-600">
<span className="ml-2 text-blue-600">
(filtered)
</span>
)}
@@ -792,16 +792,16 @@ export default function Home() {
{/* View Toggle */}
<div className="flex items-center gap-2">
<span className="text-sm text-zinc-600">View:</span>
<div className="btn-group">
<div className="flex">
<button
className={`btn btn-sm ${viewMode === 'table' ? 'btn-active' : ''}`}
className={`px-3 py-1 text-sm border rounded-l ${viewMode === 'table' ? 'bg-blue-600 text-white border-blue-600' : 'border-gray-300 hover:bg-gray-50'}`}
onClick={() => setViewMode('table')}
aria-label="Table view"
>
<TableCellsIcon className="h-5 w-5" />
</button>
<button
className={`btn btn-sm ${viewMode === 'cards' ? 'btn-active' : ''}`}
className={`px-3 py-1 text-sm border border-l-0 rounded-r ${viewMode === 'cards' ? 'bg-blue-600 text-white border-blue-600' : 'border-gray-300 hover:bg-gray-50'}`}
onClick={() => setViewMode('cards')}
aria-label="Card view"
>
@@ -846,13 +846,13 @@ export default function Home() {
<Image src={Array.isArray(part.images) && (part.images as string[]).length > 0 ? (part.images as string[])[0] : '/window.svg'} alt={part.name} width={48} height={48} className="object-contain w-12 h-12" />
</div>
<div className="max-w-md break-words whitespace-normal">
<Link href={`/products/${part.slug}`} className="text-sm font-semibold text-primary hover:underline">
<Link href={`/products/${part.slug}`} className="text-sm font-semibold text-blue-600 hover:underline">
{part.name}
</Link>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{part.category.name}
</span>
</td>
@@ -875,7 +875,7 @@ export default function Home() {
if (selectedComponentId) {
return (
<button
className="btn btn-outline btn-sm"
className="border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-md text-sm font-medium transition-colors"
onClick={() => removePartForComponent(selectedComponentId)}
>
Remove
@@ -884,7 +884,7 @@ export default function Home() {
} else if (matchingComponent && !selectedParts[matchingComponent.id]) {
return (
<button
className="btn btn-neutral btn-sm flex items-center gap-1"
className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors flex items-center gap-1"
onClick={() => {
selectPartForComponent(matchingComponent.id, {
id: part.id,

View File

@@ -213,7 +213,7 @@ export default function ProductDetailsPage() {
{/* Price Range */}
<div className="flex items-center gap-4">
<div className="text-3xl font-bold text-primary-600">
<div className="text-3xl font-bold text-blue-600">
${lowestPrice.toFixed(2)}
</div>
{lowestPrice !== highestPrice && (
@@ -236,10 +236,10 @@ export default function ProductDetailsPage() {
{/* Add to Build Button */}
<div className="flex gap-4">
<button className="btn btn-primary flex-1" onClick={handleAddToBuild}>
<button className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors flex-1" onClick={handleAddToBuild}>
Add to Current Build
</button>
<button className="btn btn-outline">
<button className="border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors">
Save for Later
</button>
</div>
@@ -278,7 +278,7 @@ export default function ProductDetailsPage() {
</div>
<div className="flex items-center gap-4">
<div className="text-right">
<div className="text-2xl font-bold text-primary-600">
<div className="text-2xl font-bold text-blue-600">
${offer.price.toFixed(2)}
</div>
{offer.inStock !== undefined && (
@@ -291,7 +291,7 @@ export default function ProductDetailsPage() {
href={offer.url}
target="_blank"
rel="noopener noreferrer"
className="btn btn-primary"
className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
>
View Deal
</a>