diff --git a/packages/ui/src/cloud-ui/components/analytics/cost-alerts.tsx b/packages/ui/src/cloud-ui/components/analytics/cost-alerts.tsx index 1d1d36cf35b81..b135713ee8880 100644 --- a/packages/ui/src/cloud-ui/components/analytics/cost-alerts.tsx +++ b/packages/ui/src/cloud-ui/components/analytics/cost-alerts.tsx @@ -64,9 +64,9 @@ export function CostAlerts({ costTrending }: CostAlertsProps) { } const toneClasses: Record<"warning" | "error" | "info", string> = { - warning: "border-[#FF5800]/40 bg-[#FF5800]/10 text-white", - error: "border-[#FF5800] bg-[#FF5800] text-black", - info: "border-[#0B35F1]/40 bg-[#0B35F1]/10 text-white", + warning: "border-[var(--accent)]/40 bg-[var(--accent)]/10 text-white", + error: "border-[var(--accent)] bg-[var(--accent)] text-black", + info: "border-border bg-surface text-txt", }; const iconMap: Record<"warning" | "error" | "info", ReactNode> = { diff --git a/packages/ui/src/cloud-ui/components/analytics/cost-insights-card.tsx b/packages/ui/src/cloud-ui/components/analytics/cost-insights-card.tsx index 76c44371db396..0c74c65c4f211 100644 --- a/packages/ui/src/cloud-ui/components/analytics/cost-insights-card.tsx +++ b/packages/ui/src/cloud-ui/components/analytics/cost-insights-card.tsx @@ -32,13 +32,13 @@ export function CostInsightsCard({ : `${costTrending.daysUntilBalanceZero}d`; return ( - +

Cost outlook

{costTrending.burnChangePercent > 0 ? "+" : ""} {costTrending.burnChangePercent.toFixed(1)}% diff --git a/packages/ui/src/cloud-ui/components/api-key-empty-state.tsx b/packages/ui/src/cloud-ui/components/api-key-empty-state.tsx index 4d3f5096cb593..b203a1c72e2c2 100644 --- a/packages/ui/src/cloud-ui/components/api-key-empty-state.tsx +++ b/packages/ui/src/cloud-ui/components/api-key-empty-state.tsx @@ -12,7 +12,7 @@ interface ApiKeyEmptyStateProps { export function ApiKeyEmptyState({ onCreateKey }: ApiKeyEmptyStateProps) { return ( } + icon={} title="No API keys yet" description="Create your first API key to start authenticating requests and tracking usage across the platform." action={ diff --git a/packages/ui/src/cloud-ui/components/auth/authorize-content.tsx b/packages/ui/src/cloud-ui/components/auth/authorize-content.tsx index cc6478c695eda..65909c2120900 100644 --- a/packages/ui/src/cloud-ui/components/auth/authorize-content.tsx +++ b/packages/ui/src/cloud-ui/components/auth/authorize-content.tsx @@ -358,7 +358,7 @@ function AuthorizeFlow({ if (status === "validating" || authLoading) { return ( - +

Verifying application...

@@ -379,7 +379,7 @@ function AuthorizeFlow({ if (status === "authorizing") { return ( - +

Authorizing...

Redirecting you back to {appInfo.name} @@ -478,7 +478,7 @@ function AppHeader({ appInfo }: { appInfo: AppInfo }) { unoptimized /> ) : ( -

+
{appInfo.name.charAt(0)} @@ -614,7 +614,7 @@ function SignedOutActions({ ) : (
- +

Loading sign-in options...

)} diff --git a/packages/ui/src/cloud-ui/components/code/code-display.tsx b/packages/ui/src/cloud-ui/components/code/code-display.tsx index 528fd33682828..7ec956c0d7fea 100644 --- a/packages/ui/src/cloud-ui/components/code/code-display.tsx +++ b/packages/ui/src/cloud-ui/components/code/code-display.tsx @@ -14,7 +14,17 @@ export interface CodeDisplayProps { className?: string; } -const elizaCodeTheme = { +/** + * SYNTAX_HIGHLIGHT_PALETTE — DOCUMENTED DESIGN-SYSTEM EXCEPTION. + * + * Per DESIGN-SYSTEM.md §10.5, syntax-highlight token colors are semantic + * constants and are exempt from the raw-hex ban. They intentionally use a + * fixed VS Code (Dark+) palette so highlighted code reads correctly and + * consistently regardless of the app theme. All values are consolidated in + * this single named map (not scattered inline). The CHROME around the code + * block (container border / background) is fully tokenized below. + */ +const SYNTAX_HIGHLIGHT_PALETTE = { ...vscDarkPlus, comment: { color: "#6A9955" }, prolog: { color: "#6A9955" }, @@ -45,7 +55,7 @@ const elizaCodeTheme = { keyword: { color: "#C586C0" }, regex: { color: "#D16969" }, important: { color: "#569CD6", fontWeight: "bold" }, -}; +} as const; const codeCustomStyle = { margin: 0, @@ -63,14 +73,14 @@ export const CodeDisplay = memo(function CodeDisplay({ return (
@@ -102,28 +102,28 @@ export function DashboardActionCards({

My Agent

-
+

API Access

Keys Docs Explorer @@ -138,7 +138,7 @@ export function DashboardActionCards({ >
- + {formattedBalance}
@@ -254,7 +254,7 @@ export function ContainersEmptyState() { }; return ( -
+

No containers yet

@@ -268,19 +268,19 @@ export function ContainersEmptyState() { index < commands.length - 1 && "border-b border-white/5", )} > - $ - + $ + {cmd} ); } @@ -183,26 +207,26 @@ export function ApiRouteExplorerClient({
{/* Left explorer panel */}
-
+
{/* Header */} -
+
-
- +
+ Route Explorer
@@ -210,40 +234,31 @@ export function ApiRouteExplorerClient({ {/* Search input */}
- + className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted" + strokeWidth={2} + /> setQuery(e.target.value)} placeholder="Search endpoints..." - className="w-full pl-10 pr-4 py-2.5 rounded-none border border-white/10 bg-black/40 text-sm text-white placeholder:text-white/30 transition-all" + className="w-full min-h-touch pl-10 pr-4 py-2.5 rounded-sm border border-border bg-bg text-sm text-txt placeholder:text-muted transition-colors" />
-
+
{filtered.length} endpoint{filtered.length === 1 ? "" : "s"} - Click to view details + Click to view details
{/* Route list */} -
+
{groups.length === 0 ? ( -
+
No endpoints match your search
) : ( @@ -251,11 +266,11 @@ export function ApiRouteExplorerClient({
- + {GROUP_LABELS[g.group] || g.group} - + {g.routes.length} @@ -273,10 +288,10 @@ export function ApiRouteExplorerClient({ type="button" onClick={() => setSelectedKey(key)} className={cn( - "w-full text-left rounded-none border px-3 py-2.5 transition-all my-1", + "w-full min-h-touch text-left rounded-sm border px-3 py-2.5 transition-colors my-1", active - ? "bg-[#ff5800]/10 border-[#ff5800]/40 " - : "border-transparent hover:bg-white/5 hover:border-white/10", + ? "bg-accent-subtle border-accent/40" + : "border-transparent hover:bg-bg-hover hover:border-border", )} >
@@ -295,7 +310,7 @@ export function ApiRouteExplorerClient({ ))} {r.methods.length > 2 && ( - + +{r.methods.length - 2} )} @@ -304,12 +319,12 @@ export function ApiRouteExplorerClient({
{title}
-
+
{r.path}
@@ -326,11 +341,11 @@ export function ApiRouteExplorerClient({
{/* Right details panel */} -
+
{selected ? (
{/* Endpoint header */} -
+
{selected.methods.map((m) => ( @@ -338,24 +353,24 @@ export function ApiRouteExplorerClient({ ))}
- + {selected.path}
{/* Title and description */} -
-

+
+

{selected.meta?.name || selected.path.split("/").pop()?.replace(/-/g, " ") || "Endpoint"}

{selected.meta?.description ? ( -

+

{selected.meta.description}

) : ( -

+

This endpoint is available but doesn't have detailed documentation yet. Check the source file or API response for parameter details. @@ -368,8 +383,9 @@ export function ApiRouteExplorerClient({ {selected.meta.tags.map((tag) => ( + ))} @@ -378,26 +394,17 @@ export function ApiRouteExplorerClient({

{/* Info grid */} -
+
{/* Auth */} -
+
- - + className="size-4 text-muted" + strokeWidth={2} + /> + Auth
@@ -405,8 +412,8 @@ export function ApiRouteExplorerClient({ className={cn( "text-sm font-medium", selected.meta?.requiresAuth - ? "text-amber-400" - : "text-emerald-400", + ? "text-status-warning" + : "text-status-success", )} > {selected.meta @@ -418,80 +425,53 @@ export function ApiRouteExplorerClient({
{/* Rate Limit */} -
+
- - + className="size-4 text-muted" + strokeWidth={2} + /> + Rate Limit
-
+
{rateLimitDisplay}
{/* Category */} -
+
- - + className="size-4 text-muted" + strokeWidth={2} + /> + Category
-
+
{selected.meta?.category || groupKeyForPath(selected.path)}
{/* Pricing */} -
+
- - + className="size-4 text-muted" + strokeWidth={2} + /> + Pricing
-
+
{pricingDisplay}
@@ -502,58 +482,49 @@ export function ApiRouteExplorerClient({
- - + className="size-4 text-accent" + strokeWidth={2} + /> + Quick cURL
- 
-                    
-                      curl
-                       -X 
-                      
+                  
+                    
+                      curl
+                       -X 
+                      
                         {selected.methods[0] ?? "GET"}
                       
-                       
-                      
+                       
+                      
                         "https://www.elizacloud.ai{selected.path}"
                       
-                       \
+                       \
                       {"\n"}
-                       -H 
-                      
+                       -H 
+                      
                         "Authorization: Bearer YOUR_API_KEY"
                       
                       {["POST", "PUT", "PATCH"].includes(
                         selected.methods[0] ?? "",
                       ) && (
                         <>
-                           \
+                           \
                           {"\n"}
-                           -H 
-                          
+                           -H 
+                          
                             "Content-Type: application/json"
                           
-                           \
+                           \
                           {"\n"}
-                           -d 
-                          
+                           -d 
+                          
                             '{"{}"}'
                           
                         
@@ -563,14 +534,14 @@ export function ApiRouteExplorerClient({
-

+

Replace{" "} - + YOUR_API_KEY {" "} with your actual API key from{" "} Dashboard → API Keys @@ -579,24 +550,15 @@ export function ApiRouteExplorerClient({

{/* Source file reference */} -
-
- +
+
@@ -605,26 +567,17 @@ export function ApiRouteExplorerClient({ ) : ( /* Empty state */
-
- + + className="size-8 text-accent" + strokeWidth={1.5} + />
-

+

Select an Endpoint

-

+

Choose an endpoint from the list to view details, authentication requirements, and example code.

diff --git a/packages/ui/src/cloud-ui/components/docs/endpoint-card.tsx b/packages/ui/src/cloud-ui/components/docs/endpoint-card.tsx index 4de38abecf73f..42f54df32a79d 100644 --- a/packages/ui/src/cloud-ui/components/docs/endpoint-card.tsx +++ b/packages/ui/src/cloud-ui/components/docs/endpoint-card.tsx @@ -44,7 +44,7 @@ function getPricingTextStyle(pricing: ApiEndpointCardPricing | undefined) { if (!pricing) return "text-neutral-500"; if (pricing.isFree) return "text-green-400"; if (pricing.isVariable) return "text-orange-400"; - return "text-[#FF5800]"; + return "text-[var(--accent)]"; } function fallbackPricingLabel(pricing: ApiEndpointCardPricing) { @@ -75,7 +75,7 @@ export function EndpointCard< className="group relative w-full min-w-0 overflow-hidden rounded-sm border border-white/5 bg-neutral-900/50 p-4 text-left transition-all hover:border-white/10 hover:bg-neutral-900/70" >
-
+
Test
@@ -86,7 +86,7 @@ export function EndpointCard< {getCategoryIcon(endpoint.category)} -

+

{endpoint.name}

diff --git a/packages/ui/src/cloud-ui/components/drawer.stories.tsx b/packages/ui/src/cloud-ui/components/drawer.stories.tsx index c8b77ed00f8b1..83c1781550a61 100644 --- a/packages/ui/src/cloud-ui/components/drawer.stories.tsx +++ b/packages/ui/src/cloud-ui/components/drawer.stories.tsx @@ -4,6 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Drawer, + DrawerBody, DrawerClose, DrawerContent, DrawerDescription, @@ -47,10 +48,10 @@ export const BottomSheet: Story = { This will roll out the new agent version to production. -
+ The current rollout will be replaced and all active sessions will be migrated to the new build. -
+ @@ -93,7 +107,29 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+ ); +} + +/** + * The scrollable body of a drawer. Sits between a fixed DrawerHeader and + * DrawerFooter and takes the remaining height: `flex-1 min-h-0` lets it shrink + * inside the capped DrawerContent so `overflow-y-auto` actually scrolls (the + * min-h-0 is what allows a flex child to be shorter than its content), and + * `overscroll-contain` stops a scroll-to-edge from chaining to the page behind + * the sheet. Content taller than the drawer scrolls here instead of clipping. + */ +function DrawerBody({ className, ...props }: React.ComponentProps<"div">) { + return ( +
) { return (
); @@ -131,7 +168,7 @@ function DrawerDescription({ return ( ); @@ -139,6 +176,7 @@ function DrawerDescription({ export { Drawer, + DrawerBody, DrawerClose, DrawerContent, DrawerDescription, diff --git a/packages/ui/src/cloud-ui/components/layout/dashboard-sidebar-item.tsx b/packages/ui/src/cloud-ui/components/layout/dashboard-sidebar-item.tsx index f2c0d3cde4f4b..d8f099f774593 100644 --- a/packages/ui/src/cloud-ui/components/layout/dashboard-sidebar-item.tsx +++ b/packages/ui/src/cloud-ui/components/layout/dashboard-sidebar-item.tsx @@ -143,7 +143,7 @@ export function DashboardSidebarNavigationItem({ "relative flex items-center border-l-2 transition-colors duration-150", "hover:bg-white/[0.06] hover:text-white", isActive - ? "border-l-[#FF5800] bg-white/[0.06] text-white" + ? "border-l-[var(--accent)] bg-white/[0.06] text-white" : "border-l-transparent text-white/70", isCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5", ); diff --git a/packages/ui/src/cloud-ui/components/log-viewer.tsx b/packages/ui/src/cloud-ui/components/log-viewer.tsx index 66c9dde7ae64d..ce7c5aa4ecef9 100644 --- a/packages/ui/src/cloud-ui/components/log-viewer.tsx +++ b/packages/ui/src/cloud-ui/components/log-viewer.tsx @@ -133,7 +133,8 @@ function getDefaultLineClassName(line: string): string { return "border-l-red-500 text-red-300"; } if (normalized.includes("warn")) return "border-l-yellow-500 text-yellow-300"; - if (normalized.includes("info")) return "border-l-blue-500 text-blue-300"; + if (normalized.includes("info")) + return "border-l-status-info text-status-info"; return "border-l-neutral-700 text-neutral-300"; } @@ -157,7 +158,7 @@ function getDefaultEntryClassName(entry: LogViewerStructuredEntry): string { case "warn": return "text-yellow-500"; case "info": - return "text-blue-500"; + return "text-status-info"; case "debug": return "text-gray-500"; default: @@ -236,10 +237,10 @@ export function LogViewer({ return (
-
+
- +

- + {lineCountControl.options.map((option) => ( {option.label} @@ -351,7 +352,7 @@ export function LogViewer({ placeholder={search.placeholder ?? "Search logs..."} value={search.value} onChange={(event) => search.onChange(event.target.value)} - className="rounded-none border-white/10 bg-black/40 pl-9 text-white placeholder:text-white/40 " + className="rounded-none border-border bg-black/40 pl-9 text-white placeholder:text-white/40 " style={{ fontFamily: "var(--font-roboto-mono)" }} />

@@ -363,14 +364,14 @@ export function LogViewer({ > - + {levelFilter.options.map((option) => ( {option.label} @@ -447,7 +448,7 @@ export function LogViewer({ ) : ( diff --git a/packages/ui/src/cloud-ui/components/monetization/earnings-simulator.tsx b/packages/ui/src/cloud-ui/components/monetization/earnings-simulator.tsx index da2794fc71c82..65f5c21932c63 100644 --- a/packages/ui/src/cloud-ui/components/monetization/earnings-simulator.tsx +++ b/packages/ui/src/cloud-ui/components/monetization/earnings-simulator.tsx @@ -167,7 +167,7 @@ export function EarningsSimulator({ {/* Total */}
Your Earnings - + ${calculations.totalEarnings.toFixed(2)}
diff --git a/packages/ui/src/cloud-ui/components/monetization/milestone-progress.tsx b/packages/ui/src/cloud-ui/components/monetization/milestone-progress.tsx index 75cba3517bdc0..37611e40094fc 100644 --- a/packages/ui/src/cloud-ui/components/monetization/milestone-progress.tsx +++ b/packages/ui/src/cloud-ui/components/monetization/milestone-progress.tsx @@ -55,7 +55,7 @@ export function MilestoneProgress({
diff --git a/packages/ui/src/cloud-ui/components/monetization/revenue-flow-diagram.tsx b/packages/ui/src/cloud-ui/components/monetization/revenue-flow-diagram.tsx index e0f4fca684dbb..438ff95253769 100644 --- a/packages/ui/src/cloud-ui/components/monetization/revenue-flow-diagram.tsx +++ b/packages/ui/src/cloud-ui/components/monetization/revenue-flow-diagram.tsx @@ -48,8 +48,8 @@ export function RevenueFlowDiagram({ icon={} label="User" value={`Pays $${userPays.toFixed(2)}`} - color="text-blue-400" - bgColor="bg-blue-500/10" + color="text-status-info" + bgColor="bg-status-info-bg" /> {/* Arrow 1 */} @@ -72,8 +72,8 @@ export function RevenueFlowDiagram({ icon={} label="You" value={`Earn $${markup.toFixed(2)}`} - color="text-[#FF5800]" - bgColor="bg-[#FF5800]/10" + color="text-[var(--accent)]" + bgColor="bg-[var(--accent)]/10" highlight />
@@ -84,7 +84,7 @@ export function RevenueFlowDiagram({ icon={} label="User pays" value={`$${userPays.toFixed(2)}`} - color="text-blue-400" + color="text-status-info" />
@@ -97,13 +97,13 @@ export function RevenueFlowDiagram({ sublabel="(base cost)" />
- +
} label="You earn" value={`$${markup.toFixed(2)}`} - color="text-[#FF5800]" + color="text-[var(--accent)]" sublabel={`(${markupPercentage}% markup)`} highlight /> @@ -114,9 +114,9 @@ export function RevenueFlowDiagram({
- +
-

Inference Markup

+

Inference Markup

You set {markupPercentage}% markup on AI costs. More usage = more earnings. @@ -160,7 +160,7 @@ function FlowNode({

@@ -184,13 +184,13 @@ function FlowArrow({ label, highlight }: FlowArrowProps) { {label} @@ -221,7 +221,7 @@ function FlowNodeMobile({ className={cn( "flex items-center justify-between p-3 rounded-sm border", highlight - ? "border-[#FF5800]/30 bg-[#FF5800]/10" + ? "border-[var(--accent)]/30 bg-[var(--accent)]/10" : "border-white/10 bg-black/30", )} > diff --git a/packages/ui/src/cloud-ui/components/promotion/promote-app-dialog.tsx b/packages/ui/src/cloud-ui/components/promotion/promote-app-dialog.tsx index d9cef3ba9fa67..291f64d62a49b 100644 --- a/packages/ui/src/cloud-ui/components/promotion/promote-app-dialog.tsx +++ b/packages/ui/src/cloud-ui/components/promotion/promote-app-dialog.tsx @@ -14,16 +14,22 @@ import { AlertCircle, ArrowLeft, ArrowRight, + AtSign, + Bird, Braces, + Briefcase, Check, CheckCircle, FileText, + Gamepad2, Loader2, Megaphone, Search, Send, Share2, + Users, } from "lucide-react"; +import type { LucideIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { toast } from "sonner"; import { @@ -92,13 +98,17 @@ interface AudienceSegmentOption { description?: string | null; } -const SOCIAL_PLATFORMS = [ - { id: "twitter", name: "Twitter/X", icon: "𝕏" }, - { id: "bluesky", name: "Bluesky", icon: "🦋" }, - { id: "linkedin", name: "LinkedIn", icon: "in" }, - { id: "facebook", name: "Facebook", icon: "f" }, - { id: "discord", name: "Discord", icon: "🎮" }, - { id: "telegram", name: "Telegram", icon: "✈️" }, +const SOCIAL_PLATFORMS: Array<{ + id: string; + name: string; + Icon: LucideIcon; +}> = [ + { id: "twitter", name: "Twitter/X", Icon: AtSign }, + { id: "bluesky", name: "Bluesky", Icon: Bird }, + { id: "linkedin", name: "LinkedIn", Icon: Briefcase }, + { id: "facebook", name: "Facebook", Icon: Users }, + { id: "discord", name: "Discord", Icon: Gamepad2 }, + { id: "telegram", name: "Telegram", Icon: Send }, ]; const AD_OBJECTIVES = [ @@ -262,12 +272,12 @@ export function PromoteAppDialog({ return ( - + - + Promote {app.name} -

+

Launch your app across multiple channels to reach more users

@@ -283,39 +293,39 @@ export function PromoteAppDialog({ onClick={() => toggleChannel("social")} className={`w-full flex items-center gap-4 p-4 rounded-sm border transition-all text-left group ${ config.channels.includes("social") - ? "border-blue-500/50 bg-blue-500/10" - : "border-white/10 bg-white/5 hover:bg-white/[0.07] hover:border-white/20" + ? "border-accent/50 bg-accent-subtle" + : "border-border bg-bg-elevated hover:bg-bg-hover hover:border-border-strong" }`} >
- Social Media + Social Media ~$0.02/post
-

+

Post to Twitter, LinkedIn, Discord...

{config.channels.includes("social") && ( - + )}
@@ -327,39 +337,39 @@ export function PromoteAppDialog({ onClick={() => toggleChannel("seo")} className={`w-full flex items-center gap-4 p-4 rounded-sm border transition-all text-left group ${ config.channels.includes("seo") - ? "border-green-500/50 bg-green-500/10" - : "border-white/10 bg-white/5 hover:bg-white/[0.07] hover:border-white/20" + ? "border-status-success/50 bg-status-success-bg" + : "border-border bg-bg-elevated hover:bg-bg-hover hover:border-border-strong" }`} >
- SEO + SEO ~$0.03
-

+

Optimize for search engines

{config.channels.includes("seo") && ( - + )}
@@ -373,38 +383,38 @@ export function PromoteAppDialog({ } className={`w-full flex items-center gap-4 p-4 rounded-sm border transition-all text-left group ${ config.channels.includes("advertising") - ? "border-purple-500/50 bg-purple-500/10" + ? "border-accent/50 bg-accent-subtle" : adAccounts.length === 0 - ? "border-white/10 bg-white/5 opacity-60 cursor-not-allowed" - : "border-white/10 bg-white/5 hover:bg-white/[0.07] hover:border-white/20" + ? "border-border bg-bg-elevated opacity-60 cursor-not-allowed" + : "border-border bg-bg-elevated hover:bg-bg-hover hover:border-border-strong" }`} >
Advertising {adAccounts.length === 0 ? ( - + Connect account first ) : ( Custom budget @@ -412,7 +422,7 @@ export function PromoteAppDialog({ )}

Run paid ad campaigns

@@ -420,18 +430,18 @@ export function PromoteAppDialog({
{config.channels.includes("advertising") && ( - + )}
-
-

+

+

{config.channels.length === 0 ? "Select at least one channel" : `${config.channels.length} channel(s) selected`} @@ -446,8 +456,8 @@ export function PromoteAppDialog({ disabled={config.channels.length === 0} className={`h-9 px-4 ${ config.channels.length === 0 - ? "bg-neutral-700 text-neutral-400" - : "bg-[#FF5800] hover:bg-[#FF5800]/80 text-white" + ? "bg-bg-muted text-muted" + : "bg-accent hover:bg-accent-hover text-accent-foreground" }`} > Continue @@ -470,8 +480,8 @@ export function PromoteAppDialog({ onClick={() => setActiveTab(channel)} className={`px-3 py-1.5 rounded-sm text-sm font-medium transition-all ${ activeTab === channel - ? "bg-white/10 text-white" - : "text-neutral-500 hover:text-white" + ? "bg-bg-hover text-txt" + : "text-muted hover:text-txt" }`} > {channel === "social" @@ -487,7 +497,7 @@ export function PromoteAppDialog({ {activeTab === "social" && config.channels.includes("social") && (

-
-