makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

style: replace blue accent with gray and mute card badge colors

Browse Source 
Switch all interactive UI elements (buttons, focus rings, active tabs,
FAB, links, spinners) from blue to gray to match icon colors for a
more cohesive look. Mute card badge text colors to pastels (blue-400,
green-500, purple-500) to keep the focus on card content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-03-15 22:42:38 +01:00
parent 628907bb20
commit 9bcdcc7168
21 changed files with 71 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/components/CandidateCard.tsx
View File

@@ -46,7 +46,7 @@ export function CandidateCard({
openExternalLink(productUrl); openExternalLink(productUrl);
} }
}} }}
className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer" className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
title="Open product link" title="Open product link"
> >
<svg <svg
@@ -87,12 +87,12 @@ export function CandidateCard({
</h3> </h3>
<div className="flex flex-wrap gap-1.5 mb-3"> <div className="flex flex-wrap gap-1.5 mb-3">
{weightGrams != null && ( {weightGrams != null && (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
{formatWeight(weightGrams)} {formatWeight(weightGrams)}
</span> </span>
)} )}
{priceCents != null && ( {priceCents != null && (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
{formatPrice(priceCents)} {formatPrice(priceCents)}
</span> </span>
)} )}
@@ -109,7 +109,7 @@ export function CandidateCard({
<button <button
type="button" type="button"
onClick={() => openCandidateEditPanel(id)} onClick={() => openCandidateEditPanel(id)}
className="text-xs text-gray-500 hover:text-blue-600 transition-colors" className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
> >
Edit Edit
</button> </button>

12
src/client/components/CandidateForm.tsx
View File

@@ -152,7 +152,7 @@ export function CandidateForm({
type="text" type="text"
value={form.name} value={form.name}
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. Osprey Talon 22" placeholder="e.g. Osprey Talon 22"
/> />
{errors.name && ( {errors.name && (
@@ -177,7 +177,7 @@ export function CandidateForm({
onChange={(e) => onChange={(e) =>
setForm((f) => ({ ...f, weightGrams: e.target.value })) setForm((f) => ({ ...f, weightGrams: e.target.value }))
} }
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. 680" placeholder="e.g. 680"
/> />
{errors.weightGrams && ( {errors.weightGrams && (
@@ -202,7 +202,7 @@ export function CandidateForm({
onChange={(e) => onChange={(e) =>
setForm((f) => ({ ...f, priceDollars: e.target.value })) setForm((f) => ({ ...f, priceDollars: e.target.value }))
} }
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. 129.99" placeholder="e.g. 129.99"
/> />
{errors.priceDollars && ( {errors.priceDollars && (
@@ -234,7 +234,7 @@ export function CandidateForm({
value={form.notes} value={form.notes}
onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))} onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
rows={3} rows={3}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
placeholder="Any additional notes..." placeholder="Any additional notes..."
/> />
</div> </div>
@@ -254,7 +254,7 @@ export function CandidateForm({
onChange={(e) => onChange={(e) =>
setForm((f) => ({ ...f, productUrl: e.target.value })) setForm((f) => ({ ...f, productUrl: e.target.value }))
} }
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="https://..." placeholder="https://..."
/> />
{errors.productUrl && ( {errors.productUrl && (
@@ -267,7 +267,7 @@ export function CandidateForm({
<button <button
type="submit" type="submit"
disabled={isPending} disabled={isPending}
className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors" className="flex-1 py-2.5 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
> >
{isPending {isPending
? "Saving..." ? "Saving..."

2
src/client/components/CategoryHeader.tsx
View File

@@ -64,7 +64,7 @@ export function CategoryHeader({
<button <button
type="button" type="button"
onClick={handleSave} onClick={handleSave}
className="text-sm text-blue-600 hover:text-blue-800 font-medium" className="text-sm text-gray-600 hover:text-gray-800 font-medium"
> >
Save Save
</button> </button>

8
src/client/components/CategoryPicker.tsx
View File

@@ -169,7 +169,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
setInputValue(""); setInputValue("");
}} }}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
className={`w-full py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${ className={`w-full py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent ${
!isOpen && selectedCategory ? "pl-8 pr-3" : "px-3" !isOpen && selectedCategory ? "pl-8 pr-3" : "px-3"
}`} }`}
/> />
@@ -187,7 +187,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
aria-selected={cat.id === value} aria-selected={cat.id === value}
className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-1.5 ${ className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-1.5 ${
i === highlightIndex i === highlightIndex
? "bg-blue-50 text-blue-900" ? "bg-gray-100 text-gray-900"
: "hover:bg-gray-50" : "hover:bg-gray-50"
} ${cat.id === value ? "font-medium" : ""}`} } ${cat.id === value ? "font-medium" : ""}`}
onClick={() => handleSelect(cat.id)} onClick={() => handleSelect(cat.id)}
@@ -207,7 +207,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
aria-selected={false} aria-selected={false}
className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${ className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${
highlightIndex === filtered.length highlightIndex === filtered.length
? "bg-blue-50 text-blue-900" ? "bg-gray-100 text-gray-900"
: "hover:bg-gray-50 text-gray-600" : "hover:bg-gray-50 text-gray-600"
}`} }`}
onClick={handleStartCreate} onClick={handleStartCreate}
@@ -231,7 +231,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
type="button" type="button"
onClick={handleConfirmCreate} onClick={handleConfirmCreate}
disabled={createCategory.isPending} disabled={createCategory.isPending}
className="text-xs font-medium text-blue-600 hover:text-blue-800 disabled:opacity-50" className="text-xs font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50"
> >
{createCategory.isPending ? "..." : "Create"} {createCategory.isPending ? "..." : "Create"}
</button> </button>

6
src/client/components/CreateThreadModal.tsx
View File

@@ -93,7 +93,7 @@ export function CreateThreadModal() {
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="e.g. Lightweight sleeping bag" placeholder="e.g. Lightweight sleeping bag"
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
/> />
</div> </div>
@@ -108,7 +108,7 @@ export function CreateThreadModal() {
id="thread-category" id="thread-category"
value={categoryId ?? ""} value={categoryId ?? ""}
onChange={(e) => setCategoryId(Number(e.target.value))} onChange={(e) => setCategoryId(Number(e.target.value))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent bg-white"
> >
{categories?.map((cat) => ( {categories?.map((cat) => (
<option key={cat.id} value={cat.id}> <option key={cat.id} value={cat.id}>
@@ -131,7 +131,7 @@ export function CreateThreadModal() {
<button <button
type="submit" type="submit"
disabled={createThread.isPending} disabled={createThread.isPending}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg transition-colors" className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
> >
{createThread.isPending ? "Creating..." : "Create Thread"} {createThread.isPending ? "Creating..." : "Create Thread"}
</button> </button>

2
src/client/components/DashboardCard.tsx
View File

@@ -43,7 +43,7 @@ export function DashboardCard({
))} ))}
</div> </div>
{allZero && emptyText && ( {allZero && emptyText && (
<p className="mt-4 text-sm text-blue-600 font-medium">{emptyText}</p> <p className="mt-4 text-sm text-gray-500 font-medium">{emptyText}</p>
)} )}
</Link> </Link>
); );

4
src/client/components/ExternalLinkDialog.tsx
View File

@@ -38,7 +38,7 @@ export function ExternalLinkDialog() {
You are about to leave GearBox You are about to leave GearBox
</h3> </h3>
<p className="text-sm text-gray-600 mb-1">You will be redirected to:</p> <p className="text-sm text-gray-600 mb-1">You will be redirected to:</p>
<p className="text-sm text-blue-600 break-all mb-6"> <p className="text-sm text-gray-600 break-all mb-6">
{externalLinkUrl} {externalLinkUrl}
</p> </p>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
@@ -52,7 +52,7 @@ export function ExternalLinkDialog() {
<button <button
type="button" type="button"
onClick={handleContinue} onClick={handleContinue}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors" className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
> >
Continue Continue
</button> </button>

6
src/client/components/IconPicker.tsx
View File

@@ -150,7 +150,7 @@ export function IconPicker({ value, onChange, size = "md" }: IconPickerProps) {
setActiveGroup(0); setActiveGroup(0);
}} }}
placeholder="Search icons..." placeholder="Search icons..."
className="w-full px-2 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-2 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
/> />
</div> </div>
@@ -164,7 +164,7 @@ export function IconPicker({ value, onChange, size = "md" }: IconPickerProps) {
onClick={() => setActiveGroup(i)} onClick={() => setActiveGroup(i)}
className={`flex-1 flex items-center justify-center py-1 rounded transition-colors ${ className={`flex-1 flex items-center justify-center py-1 rounded transition-colors ${
i === activeGroup i === activeGroup
? "bg-blue-50 text-blue-700" ? "bg-gray-200 text-gray-700"
: "hover:bg-gray-50 text-gray-500" : "hover:bg-gray-50 text-gray-500"
}`} }`}
title={group.name} title={group.name}
@@ -173,7 +173,7 @@ export function IconPicker({ value, onChange, size = "md" }: IconPickerProps) {
name={group.icon} name={group.icon}
size={16} size={16}
className={ className={
i === activeGroup ? "text-blue-700" : "text-gray-400" i === activeGroup ? "text-gray-700" : "text-gray-400"
} }
/> />
</button> </button>

6
src/client/components/ItemCard.tsx
View File

@@ -48,7 +48,7 @@ export function ItemCard({
openExternalLink(productUrl); openExternalLink(productUrl);
} }
}} }}
className={`absolute top-2 ${onRemove ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`} className={`absolute top-2 ${onRemove ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
title="Open product link" title="Open product link"
> >
<svg <svg
@@ -121,12 +121,12 @@ export function ItemCard({
</h3> </h3>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{weightGrams != null && ( {weightGrams != null && (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
{formatWeight(weightGrams)} {formatWeight(weightGrams)}
</span> </span>
)} )}
{priceCents != null && ( {priceCents != null && (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
{formatPrice(priceCents)} {formatPrice(priceCents)}
</span> </span>
)} )}

12
src/client/components/ItemForm.tsx
View File

@@ -144,7 +144,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
type="text" type="text"
value={form.name} value={form.name}
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. Osprey Talon 22" placeholder="e.g. Osprey Talon 22"
/> />
{errors.name && ( {errors.name && (
@@ -169,7 +169,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
onChange={(e) => onChange={(e) =>
setForm((f) => ({ ...f, weightGrams: e.target.value })) setForm((f) => ({ ...f, weightGrams: e.target.value }))
} }
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. 680" placeholder="e.g. 680"
/> />
{errors.weightGrams && ( {errors.weightGrams && (
@@ -194,7 +194,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
onChange={(e) => onChange={(e) =>
setForm((f) => ({ ...f, priceDollars: e.target.value })) setForm((f) => ({ ...f, priceDollars: e.target.value }))
} }
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. 129.99" placeholder="e.g. 129.99"
/> />
{errors.priceDollars && ( {errors.priceDollars && (
@@ -226,7 +226,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
value={form.notes} value={form.notes}
onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))} onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
rows={3} rows={3}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
placeholder="Any additional notes..." placeholder="Any additional notes..."
/> />
</div> </div>
@@ -246,7 +246,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
onChange={(e) => onChange={(e) =>
setForm((f) => ({ ...f, productUrl: e.target.value })) setForm((f) => ({ ...f, productUrl: e.target.value }))
} }
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="https://..." placeholder="https://..."
/> />
{errors.productUrl && ( {errors.productUrl && (
@@ -259,7 +259,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
<button <button
type="submit" type="submit"
disabled={isPending} disabled={isPending}
className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors" className="flex-1 py-2.5 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
> >
{isPending {isPending
? "Saving..." ? "Saving..."

4
src/client/components/ItemPicker.tsx
View File

@@ -107,7 +107,7 @@ export function ItemPicker({
type="checkbox" type="checkbox"
checked={selectedIds.has(item.id)} checked={selectedIds.has(item.id)}
onChange={() => handleToggle(item.id)} onChange={() => handleToggle(item.id)}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" className="rounded border-gray-300 text-gray-600 focus:ring-gray-400"
/> />
<span className="flex-1 text-sm text-gray-900 truncate"> <span className="flex-1 text-sm text-gray-900 truncate">
{item.name} {item.name}
@@ -143,7 +143,7 @@ export function ItemPicker({
type="button" type="button"
onClick={handleDone} onClick={handleDone}
disabled={syncItems.isPending} disabled={syncItems.isPending}
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg transition-colors" className="flex-1 px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
> >
{syncItems.isPending ? "Saving..." : "Done"} {syncItems.isPending ? "Saving..." : "Done"}
</button> </button>

18
src/client/components/OnboardingWizard.tsx
View File

@@ -102,7 +102,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
<div <div
key={s} key={s}
className={`h-1.5 rounded-full transition-all ${ className={`h-1.5 rounded-full transition-all ${
s <= Math.min(step, 3) ? "bg-blue-600 w-8" : "bg-gray-200 w-6" s <= Math.min(step, 3) ? "bg-gray-700 w-8" : "bg-gray-200 w-6"
}`} }`}
/> />
))} ))}
@@ -121,7 +121,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
<button <button
type="button" type="button"
onClick={() => setStep(2)} onClick={() => setStep(2)}
className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors" className="w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors"
> >
Get Started Get Started
</button> </button>
@@ -159,7 +159,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
type="text" type="text"
value={categoryName} value={categoryName}
onChange={(e) => setCategoryName(e.target.value)} onChange={(e) => setCategoryName(e.target.value)}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. Shelter" placeholder="e.g. Shelter"
/> />
</div> </div>
@@ -184,7 +184,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
type="button" type="button"
onClick={handleCreateCategory} onClick={handleCreateCategory}
disabled={createCategory.isPending} disabled={createCategory.isPending}
className="mt-6 w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors" className="mt-6 w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
> >
{createCategory.isPending ? "Creating..." : "Create Category"} {createCategory.isPending ? "Creating..." : "Create Category"}
</button> </button>
@@ -221,7 +221,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
type="text" type="text"
value={itemName} value={itemName}
onChange={(e) => setItemName(e.target.value)} onChange={(e) => setItemName(e.target.value)}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. Big Agnes Copper Spur" placeholder="e.g. Big Agnes Copper Spur"
/> />
</div> </div>
@@ -241,7 +241,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
step="any" step="any"
value={itemWeight} value={itemWeight}
onChange={(e) => setItemWeight(e.target.value)} onChange={(e) => setItemWeight(e.target.value)}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. 1200" placeholder="e.g. 1200"
/> />
</div> </div>
@@ -259,7 +259,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
step="0.01" step="0.01"
value={itemPrice} value={itemPrice}
onChange={(e) => setItemPrice(e.target.value)} onChange={(e) => setItemPrice(e.target.value)}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="e.g. 349.99" placeholder="e.g. 349.99"
/> />
</div> </div>
@@ -272,7 +272,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
type="button" type="button"
onClick={handleCreateItem} onClick={handleCreateItem}
disabled={createItem.isPending} disabled={createItem.isPending}
className="mt-6 w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors" className="mt-6 w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
> >
{createItem.isPending ? "Adding..." : "Add Item"} {createItem.isPending ? "Adding..." : "Add Item"}
</button> </button>
@@ -307,7 +307,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
type="button" type="button"
onClick={handleDone} onClick={handleDone}
disabled={updateSetting.isPending} disabled={updateSetting.isPending}
className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors" className="w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
> >
{updateSetting.isPending ? "Finishing..." : "Done"} {updateSetting.isPending ? "Finishing..." : "Done"}
</button> </button>

6
src/client/components/SetupCard.tsx
View File

@@ -24,15 +24,15 @@ export function SetupCard({
> >
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3">
<h3 className="text-sm font-semibold text-gray-900 truncate">{name}</h3> <h3 className="text-sm font-semibold text-gray-900 truncate">{name}</h3>
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 shrink-0"> <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400 shrink-0">
{itemCount} {itemCount === 1 ? "item" : "items"} {itemCount} {itemCount === 1 ? "item" : "items"}
</span> </span>
</div> </div>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
{formatWeight(totalWeight)} {formatWeight(totalWeight)}
</span> </span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
{formatPrice(totalCost)} {formatPrice(totalCost)}
</span> </span>
</div> </div>

6
src/client/components/ThreadCard.tsx
View File

@@ -66,7 +66,7 @@ export function ThreadCard({
)} )}
</div> </div>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
<LucideIcon <LucideIcon
name={categoryIcon} name={categoryIcon}
size={16} size={16}
@@ -74,14 +74,14 @@ export function ThreadCard({
/>{" "} />{" "}
{categoryName} {categoryName}
</span> </span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-500">
{candidateCount} {candidateCount === 1 ? "candidate" : "candidates"} {candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}
</span> </span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
{formatDate(createdAt)} {formatDate(createdAt)}
</span> </span>
{priceRange && ( {priceRange && (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700"> <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
{priceRange} {priceRange}
</span> </span>
)} )}

4
src/client/components/ThreadTabs.tsx
View File

@@ -18,13 +18,13 @@ export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
onClick={() => onChange(tab.key)} onClick={() => onChange(tab.key)}
className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${ className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
active === tab.key active === tab.key
? "text-blue-600" ? "text-gray-700"
: "text-gray-500 hover:text-gray-700" : "text-gray-500 hover:text-gray-700"
}`} }`}
> >
{tab.label} {tab.label}
{active === tab.key && ( {active === tab.key && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" /> <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-700 rounded-t" />
)} )}
</button> </button>
))} ))}

2
src/client/components/TotalsBar.tsx
View File

@@ -33,7 +33,7 @@ export function TotalsBar({
const titleElement = linkTo ? ( const titleElement = linkTo ? (
<Link <Link
to={linkTo} to={linkTo}
className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors" className="text-lg font-semibold text-gray-900 hover:text-gray-600 transition-colors"
> >
{title} {title}
</Link> </Link>

4
src/client/routes/__root.tsx
View File

@@ -101,7 +101,7 @@ function RootLayout() {
if (onboardingLoading) { if (onboardingLoading) {
return ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center"> <div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" /> <div className="w-6 h-6 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
</div> </div>
); );
} }
@@ -178,7 +178,7 @@ function RootLayout() {
<button <button
type="button" type="button"
onClick={openAddPanel} onClick={openAddPanel}
className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center" className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-gray-700 hover:bg-gray-800 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center"
title="Add new item" title="Add new item"
> >
<svg <svg

18
src/client/routes/collection/index.tsx
View File

@@ -79,7 +79,7 @@ function CollectionView() {
<button <button
type="button" type="button"
onClick={openAddPanel} onClick={openAddPanel}
className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors" className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@@ -217,7 +217,7 @@ function PlanningView() {
<button <button
type="button" type="button"
onClick={openCreateThreadModal} onClick={openCreateThreadModal}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@@ -246,7 +246,7 @@ function PlanningView() {
onClick={() => setActiveTab("active")} onClick={() => setActiveTab("active")}
className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${ className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
activeTab === "active" activeTab === "active"
? "bg-blue-600 text-white" ? "bg-gray-700 text-white"
: "text-gray-600 hover:bg-gray-200" : "text-gray-600 hover:bg-gray-200"
}`} }`}
> >
@@ -257,7 +257,7 @@ function PlanningView() {
onClick={() => setActiveTab("resolved")} onClick={() => setActiveTab("resolved")}
className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${ className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
activeTab === "resolved" activeTab === "resolved"
? "bg-blue-600 text-white" ? "bg-gray-700 text-white"
: "text-gray-600 hover:bg-gray-200" : "text-gray-600 hover:bg-gray-200"
}`} }`}
> >
@@ -271,7 +271,7 @@ function PlanningView() {
onChange={(e) => onChange={(e) =>
setCategoryFilter(e.target.value ? Number(e.target.value) : null) setCategoryFilter(e.target.value ? Number(e.target.value) : null)
} }
className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
> >
<option value="">All categories</option> <option value="">All categories</option>
{categories?.map((cat) => ( {categories?.map((cat) => (
@@ -291,7 +291,7 @@ function PlanningView() {
</h2> </h2>
<div className="space-y-6 text-left mb-10"> <div className="space-y-6 text-left mb-10">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0"> <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
1 1
</div> </div>
<div> <div>
@@ -302,7 +302,7 @@ function PlanningView() {
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0"> <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
2 2
</div> </div>
<div> <div>
@@ -313,7 +313,7 @@ function PlanningView() {
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0"> <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
3 3
</div> </div>
<div> <div>
@@ -327,7 +327,7 @@ function PlanningView() {
<button <button
type="button" type="button"
onClick={openCreateThreadModal} onClick={openCreateThreadModal}
className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors" className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"

4
src/client/routes/setups/$setupId.tsx
View File

@@ -124,7 +124,7 @@ function SetupDetailPage() {
<button <button
type="button" type="button"
onClick={() => setPickerOpen(true)} onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
> >
<svg <svg
className="w-4 h-4" className="w-4 h-4"
@@ -170,7 +170,7 @@ function SetupDetailPage() {
<button <button
type="button" type="button"
onClick={() => setPickerOpen(true)} onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors" className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
> >
Add Items Add Items
</button> </button>

4
src/client/routes/setups/index.tsx
View File

@@ -29,12 +29,12 @@ function SetupsListPage() {
value={newSetupName} value={newSetupName}
onChange={(e) => setNewSetupName(e.target.value)} onChange={(e) => setNewSetupName(e.target.value)}
placeholder="New setup name..." placeholder="New setup name..."
className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
/> />
<button <button
type="submit" type="submit"
disabled={!newSetupName.trim() || createSetup.isPending} disabled={!newSetupName.trim() || createSetup.isPending}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors" className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
> >
{createSetup.isPending ? "Creating..." : "Create"} {createSetup.isPending ? "Creating..." : "Create"}
</button> </button>

6
src/client/routes/threads/$threadId.tsx
View File

@@ -38,7 +38,7 @@ function ThreadDetailPage() {
<Link <Link
to="/" to="/"
search={{ tab: "planning" }} search={{ tab: "planning" }}
className="text-sm text-blue-600 hover:text-blue-700" className="text-sm text-gray-600 hover:text-gray-700"
> >
Back to planning Back to planning
</Link> </Link>
@@ -67,7 +67,7 @@ function ThreadDetailPage() {
<span <span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${ className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
isActive isActive
? "bg-blue-50 text-blue-700" ? "bg-gray-100 text-gray-600"
: "bg-gray-100 text-gray-500" : "bg-gray-100 text-gray-500"
}`} }`}
> >
@@ -92,7 +92,7 @@ function ThreadDetailPage() {
<button <button
type="button" type="button"
onClick={openCandidateAddPanel} onClick={openCandidateAddPanel}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
> >
<svg <svg
className="w-4 h-4" className="w-4 h-4"