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

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

@@ -101,7 +101,7 @@ function RootLayout() {
if (onboardingLoading) {
return (
<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>
);
}
@@ -178,7 +178,7 @@ function RootLayout() {
<button
type="button"
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"
>
<svg

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

@@ -79,7 +79,7 @@ function CollectionView() {
<button
type="button"
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
aria-hidden="true"
@@ -217,7 +217,7 @@ function PlanningView() {
<button
type="button"
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
aria-hidden="true"
@@ -246,7 +246,7 @@ function PlanningView() {
onClick={() => setActiveTab("active")}
className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
activeTab === "active"
? "bg-blue-600 text-white"
? "bg-gray-700 text-white"
: "text-gray-600 hover:bg-gray-200"
}`}
>
@@ -257,7 +257,7 @@ function PlanningView() {
onClick={() => setActiveTab("resolved")}
className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
activeTab === "resolved"
? "bg-blue-600 text-white"
? "bg-gray-700 text-white"
: "text-gray-600 hover:bg-gray-200"
}`}
>
@@ -271,7 +271,7 @@ function PlanningView() {
onChange={(e) =>
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>
{categories?.map((cat) => (
@@ -291,7 +291,7 @@ function PlanningView() {
</h2>
<div className="space-y-6 text-left mb-10">
<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
</div>
<div>
@@ -302,7 +302,7 @@ function PlanningView() {
</div>
</div>
<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
</div>
<div>
@@ -313,7 +313,7 @@ function PlanningView() {
</div>
</div>
<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
</div>
<div>
@@ -327,7 +327,7 @@ function PlanningView() {
<button
type="button"
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
aria-hidden="true"

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

@@ -124,7 +124,7 @@ function SetupDetailPage() {
<button
type="button"
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
className="w-4 h-4"
@@ -170,7 +170,7 @@ function SetupDetailPage() {
<button
type="button"
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
</button>

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

@@ -29,12 +29,12 @@ function SetupsListPage() {
value={newSetupName}
onChange={(e) => setNewSetupName(e.target.value)}
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
type="submit"
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"}
</button>

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

@@ -38,7 +38,7 @@ function ThreadDetailPage() {
<Link
to="/"
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
</Link>
@@ -67,7 +67,7 @@ function ThreadDetailPage() {
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
isActive
? "bg-blue-50 text-blue-700"
? "bg-gray-100 text-gray-600"
: "bg-gray-100 text-gray-500"
}`}
>
@@ -92,7 +92,7 @@ function ThreadDetailPage() {
<button
type="button"
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
className="w-4 h-4"