From e0f035b7329bda8119aede0762db5fc8bb963d7c Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi
Date: Sat, 21 Mar 2026 08:50:40 +0000
Subject: [PATCH 1/2] [#406] Apply warm bookshelf theme to detail pages and
components
- OG image: warm cream bg, gold accent text, serif font
- Farcaster manifest + miniapp embed: warm splash background
- Story detail: serif title, gold price/supply values, surface panel for content
- Replace all text-red-400 with text-error design token (10 files)
- Trading/donate widgets: gold accent for monetary values
Fixes #406
Co-Authored-By: Claude Opus 4.6 (1M context)
---
src/app/.well-known/farcaster.json/route.ts | 2 +-
src/app/dashboard/reader/page.tsx | 4 ++--
src/app/dashboard/writer/page.tsx | 2 +-
src/app/story/[storylineId]/og/route.tsx | 12 ++++++------
src/app/story/[storylineId]/page.tsx | 10 +++++-----
src/components/ClaimRoyalties.tsx | 2 +-
src/components/DonateWidget.tsx | 6 +++---
src/components/RatingWidget.tsx | 2 +-
src/components/ReaderPortfolio.tsx | 4 ++--
src/components/TradingWidget.tsx | 6 +++---
10 files changed, 25 insertions(+), 25 deletions(-)
diff --git a/src/app/.well-known/farcaster.json/route.ts b/src/app/.well-known/farcaster.json/route.ts
index bf13725c..c6f31395 100644
--- a/src/app/.well-known/farcaster.json/route.ts
+++ b/src/app/.well-known/farcaster.json/route.ts
@@ -24,7 +24,7 @@ export function GET() {
imageUrl: `${appUrl}/og-image.png`,
buttonTitle: "Open PlotLink",
splashImageUrl: `${appUrl}/splash.png`,
- splashBackgroundColor: "#0a0a0a",
+ splashBackgroundColor: "#E8DFD0",
},
});
}
diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx
index a95e7b18..d6f0a041 100644
--- a/src/app/dashboard/reader/page.tsx
+++ b/src/app/dashboard/reader/page.tsx
@@ -120,7 +120,7 @@ export default function ReaderDashboard() {
{isLoading && Loading...
}
{error && (
-
+
Failed to load donations. Please try again.
)}
@@ -235,7 +235,7 @@ function TradingHistory({ address }: { address: string }) {
className="border-border flex items-center justify-between rounded border px-3 py-2 text-xs"
>
-
+
{t.event_type === "mint" ? "Buy" : "Sell"}
Loading...}
{error && (
-
+
Failed to load storylines. Please try again.
)}
diff --git a/src/app/story/[storylineId]/og/route.tsx b/src/app/story/[storylineId]/og/route.tsx
index 718b79cd..9fa6fb88 100644
--- a/src/app/story/[storylineId]/og/route.tsx
+++ b/src/app/story/[storylineId]/og/route.tsx
@@ -58,9 +58,9 @@ export async function GET(
flexDirection: "column",
justifyContent: "space-between",
padding: "60px",
- backgroundColor: "#0a0a0a",
- color: "#e0e0e0",
- fontFamily: "monospace",
+ backgroundColor: "#E8DFD0",
+ color: "#2C1810",
+ fontFamily: "Georgia, serif",
}}
>
{/* Top: branding */}
@@ -70,7 +70,7 @@ export async function GET(
alignItems: "center",
gap: "12px",
fontSize: "24px",
- color: "#00ff88",
+ color: "#DAAA63",
}}
>
PlotLink
@@ -88,7 +88,7 @@ export async function GET(
style={{
fontSize: "48px",
fontWeight: 700,
- color: "#00ff88",
+ color: "#DAAA63",
overflow: "hidden",
}}
>
@@ -102,7 +102,7 @@ export async function GET(
display: "flex",
gap: "32px",
fontSize: "22px",
- color: "#737373",
+ color: "#8B7355",
}}
>
by {farcasterProfile ? `@${farcasterProfile.username}` : truncateAddress(sl.writer_address)}
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 1317b473..52cf7a7a 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -70,7 +70,7 @@ export async function generateMetadata({
type: "launch_miniapp",
url: storyUrl,
name: "PlotLink",
- splashBackgroundColor: "#0a0a0a",
+ splashBackgroundColor: "#E8DFD0",
},
},
});
@@ -228,7 +228,7 @@ function StoryHeader({
return (
@@ -310,7 +310,7 @@ function GenesisSection({ plot }: { plot: Plot }) {
)}
{plot.content ? (
-
+
{plot.content}
) : (
diff --git a/src/components/ClaimRoyalties.tsx b/src/components/ClaimRoyalties.tsx
index 3dd23ffb..06e80ba2 100644
--- a/src/components/ClaimRoyalties.tsx
+++ b/src/components/ClaimRoyalties.tsx
@@ -192,7 +192,7 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
)}
- {error &&
{error}
}
+ {error &&
{error}
}
);
}
diff --git a/src/components/DonateWidget.tsx b/src/components/DonateWidget.tsx
index 3df3c4f1..f4262fa8 100644
--- a/src/components/DonateWidget.tsx
+++ b/src/components/DonateWidget.tsx
@@ -158,14 +158,14 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
)}
{insufficientBalance && (
- Insufficient balance
+ Insufficient balance
)}
{parsedAmount > BigInt(0) && (
Donating{" "}
-
+
{formatUnits(parsedAmount, 18)} {RESERVE_LABEL}
{" "}
to {writerAddress ? : `story #${storylineId}`}
@@ -189,7 +189,7 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
{txState === "error" && "Retry"}
- {error && {error}
}
+ {error && {error}
}
{txHash && txState === "done" && (
Tx:{" "}
diff --git a/src/components/RatingWidget.tsx b/src/components/RatingWidget.tsx
index 20d30bd2..8e4ec61f 100644
--- a/src/components/RatingWidget.tsx
+++ b/src/components/RatingWidget.tsx
@@ -174,7 +174,7 @@ export function RatingWidget({ storylineId, tokenAddress }: RatingWidgetProps) {
{submitting ? "Signing..." : success ? "Updated!" : "Submit Rating"}
- {error &&
{error}
}
+ {error && {error}
}
) : isConnected ? (
diff --git a/src/components/ReaderPortfolio.tsx b/src/components/ReaderPortfolio.tsx
index f891c05b..abc27c8c 100644
--- a/src/components/ReaderPortfolio.tsx
+++ b/src/components/ReaderPortfolio.tsx
@@ -137,7 +137,7 @@ export function ReaderPortfolio() {
{bestPick.storyline.title.slice(0, 20)}
{bestPick.storyline.title.length > 20 ? "..." : ""}{" "}
- = 0 ? "text-accent" : "text-red-400"}>
+ = 0 ? "text-accent" : "text-error"}>
{bestPick.priceChange >= 0 ? "+" : ""}
{bestPick.priceChange.toFixed(1)}%
@@ -169,7 +169,7 @@ export function ReaderPortfolio() {
{h.priceChange !== null && (
= 0 ? "text-accent" : "text-red-400"}`}
+ className={`text-[10px] ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}
>
{h.priceChange >= 0 ? "+" : ""}
{h.priceChange.toFixed(1)}%
diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx
index 0258273a..99a0b664 100644
--- a/src/components/TradingWidget.tsx
+++ b/src/components/TradingWidget.tsx
@@ -254,7 +254,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
)}
{insufficientBalance && (
-
Insufficient balance
+
Insufficient balance
)}
@@ -262,7 +262,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
{estimate != null && parsedAmount > BigInt(0) && (
{tab === "buy" ? "Max cost" : "Min return"}:{" "}
-
+
{formatUnits(applySlippage(estimate, tab === "buy"), 18)} {RESERVE_LABEL}
(incl. 3% slippage)
@@ -287,7 +287,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
{/* Status */}
- {error && {error}
}
+ {error && {error}
}
{txHash && txState === "done" && (
Tx:{" "}
From 0693c76d45b404b4dc7a4af3328b4b6eff8323b0 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi
Date: Sat, 21 Mar 2026 08:53:58 +0000
Subject: [PATCH 2/2] [#406] Complete warm theme coverage for all scoped files
- WriterTradingStats: gold accent for price/TVL values
- RecoveryBanner: warm shelf background instead of white surface
- PriceChart: gold gradient area fill under price line
- Create/register-agent pages: serif heading font
- Dashboard pages: serif heading font
Co-Authored-By: Claude Opus 4.6 (1M context)
---
src/app/create/page.tsx | 2 +-
src/app/dashboard/reader/page.tsx | 2 +-
src/app/dashboard/writer/page.tsx | 2 +-
src/app/register-agent/page.tsx | 2 +-
src/components/PriceChart.tsx | 12 ++++++++++++
src/components/RecoveryBanner.tsx | 2 +-
src/components/WriterTradingStats.tsx | 4 ++--
7 files changed, 19 insertions(+), 7 deletions(-)
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index a3cb3668..7602f445 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -239,7 +239,7 @@ function CreatePage() {
return (
-
Create
+
Create
{/* Tab bar */}
diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx
index d6f0a041..f073d16e 100644
--- a/src/app/dashboard/reader/page.tsx
+++ b/src/app/dashboard/reader/page.tsx
@@ -90,7 +90,7 @@ export default function ReaderDashboard() {
return (
-
+
Reader Dashboard
diff --git a/src/app/dashboard/writer/page.tsx b/src/app/dashboard/writer/page.tsx
index 88ec0b73..cb4c7813 100644
--- a/src/app/dashboard/writer/page.tsx
+++ b/src/app/dashboard/writer/page.tsx
@@ -71,7 +71,7 @@ export default function WriterDashboard() {
return (
-
+
Writer Dashboard
diff --git a/src/app/register-agent/page.tsx b/src/app/register-agent/page.tsx
index b99693e0..473a133a 100644
--- a/src/app/register-agent/page.tsx
+++ b/src/app/register-agent/page.tsx
@@ -264,7 +264,7 @@ export default function RegisterAgentPage() {
return (
-
+
Register Agent
diff --git a/src/components/PriceChart.tsx b/src/components/PriceChart.tsx
index a77f2b30..fb355b68 100644
--- a/src/components/PriceChart.tsx
+++ b/src/components/PriceChart.tsx
@@ -181,6 +181,18 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
))}
+ {/* Area fill under price line */}
+
+
+
+
+
+
+
+
{/* Price line */}
+
Your previous story was published on-chain but indexing failed.
diff --git a/src/components/WriterTradingStats.tsx b/src/components/WriterTradingStats.tsx
index cfa09b62..6fd763b6 100644
--- a/src/components/WriterTradingStats.tsx
+++ b/src/components/WriterTradingStats.tsx
@@ -46,7 +46,7 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
Token Price
-
+
{data ? `${formatPrice(data.price)} ${RESERVE_LABEL}` : "—"}
@@ -54,7 +54,7 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
TVL
-
+
{data ? `${formatPrice(data.tvl)} ${RESERVE_LABEL}` : "—"}