weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(47-02): lighter settings area bg, darker borderless fields 

Settings area uses lighter grey (#2a2a2a), field inputs use darker
grey (#1a1a1a) with no borders, matching the reference design.
Applied across InlineParameterPanel, GenerateImageNode, LLMGenerateNode,
and ModelParameters.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
7bf0a1d436
commit
bd24e0fba0
4 changed files with 15 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/nodes/GenerateImageNode.tsx
  2. 4
      src/components/nodes/InlineParameterPanel.tsx
  3. 4
      src/components/nodes/LLMGenerateNode.tsx
  4. 12
      src/components/nodes/ModelParameters.tsx

10
src/components/nodes/GenerateImageNode.tsx
View File

@ -767,7 +767,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
<select
value={currentModelId}
onChange={handleModelChange}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
>
{GEMINI_IMAGE_MODELS.map((m) => (
<option key={m.value} value={m.value}>
@ -783,7 +783,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
<select
value={nodeData.aspectRatio || "1:1"}
onChange={handleAspectRatioChange}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
>
{aspectRatios.map((ratio) => (
<option key={ratio} value={ratio}>
@ -800,7 +800,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
<select
value={nodeData.resolution || "2K"}
onChange={handleResolutionChange}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
>
{resolutions.map((res) => (
<option key={res} value={res}>
@ -818,7 +818,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
type="checkbox"
checked={nodeData.useGoogleSearch || false}
onChange={handleGoogleSearchToggle}
className="nodrag nopan w-3 h-3 rounded border-neutral-700 bg-neutral-800 text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
className="nodrag nopan w-3 h-3 rounded bg-[#1a1a1a] text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
/>
Google Search
</label>
@ -831,7 +831,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
type="checkbox"
checked={nodeData.useImageSearch || false}
onChange={handleImageSearchToggle}
className="nodrag nopan w-3 h-3 rounded border-neutral-700 bg-neutral-800 text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
className="nodrag nopan w-3 h-3 rounded bg-[#1a1a1a] text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
/>
Image Search
</label>

4
src/components/nodes/InlineParameterPanel.tsx
View File

@ -25,7 +25,7 @@ export function InlineParameterPanel({
<button
type="button"
onClick={onToggle}
className={`nodrag nopan w-full flex items-center justify-center gap-1 py-1 text-neutral-500 hover:text-neutral-300 transition-colors ${expanded ? "bg-[#1a1a1a]" : ""}`}
className={`nodrag nopan w-full flex items-center justify-center gap-1 py-1 text-neutral-500 hover:text-neutral-300 transition-colors ${expanded ? "bg-[#2a2a2a]" : ""}`}
aria-label={expanded ? "Collapse parameters" : "Expand parameters"}
aria-expanded={expanded}
aria-controls={`params-${nodeId}`}
@ -54,7 +54,7 @@ export function InlineParameterPanel({
opacity: expanded ? 1 : 0,
}}
>
<div className="nodrag nopan nowheel bg-[#1a1a1a] px-3 pt-2 pb-3 rounded-b-lg">
<div className="nodrag nopan nowheel bg-[#2a2a2a] px-3 pt-2 pb-3 rounded-b-lg">
<div className="space-y-1.5 max-w-[280px] mx-auto">{children}</div>
</div>
</div>

4
src/components/nodes/LLMGenerateNode.tsx
View File

@ -252,7 +252,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
<select
value={provider}
onChange={handleProviderChange}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
>
{LLM_PROVIDERS.map(p => (
<option key={p.value} value={p.value}>{p.label}</option>
@ -266,7 +266,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
<select
value={nodeData.model || availableModels[0].value}
onChange={handleModelChange}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-neutral-800 border border-neutral-700 rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
>
{availableModels.map(m => (
<option key={m.value} value={m.value}>{m.label}</option>

12
src/components/nodes/ModelParameters.tsx
View File

@ -251,7 +251,7 @@ function ParameterInput({ param, value, onChange }: ParameterInputProps) {
onChange(val);
}
}}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 border border-neutral-700 rounded-md bg-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 rounded-md bg-[#1a1a1a] focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
>
<option value="">Default</option>
{param.enum.map((opt) => (
@ -278,7 +278,7 @@ function ParameterInput({ param, value, onChange }: ParameterInputProps) {
type="checkbox"
checked={effectiveValue}
onChange={(e) => onChange(e.target.checked)}
className="nodrag nopan w-3 h-3 rounded border-neutral-700 bg-neutral-800 text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
className="nodrag nopan w-3 h-3 rounded bg-[#1a1a1a] text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
/>
<span>{displayName}</span>
</label>
@ -336,10 +336,10 @@ function ParameterInput({ param, value, onChange }: ParameterInputProps) {
}
}}
placeholder={param.default !== undefined ? `${param.default}` : undefined}
className={`nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 border rounded-md bg-neutral-800 focus:outline-none focus:ring-1 text-white placeholder:text-neutral-500 ${
className={`nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 rounded-md bg-[#1a1a1a] focus:outline-none focus:ring-1 text-white placeholder:text-neutral-500 ${
validationError
? "border-red-500 focus:ring-red-500"
: "border-neutral-700 focus:ring-neutral-600"
? "ring-1 ring-red-500"
: "focus:ring-neutral-600"
}`}
/>
</div>
@ -376,7 +376,7 @@ function ParameterInput({ param, value, onChange }: ParameterInputProps) {
onChange(localValue || undefined);
}}
placeholder={param.default !== undefined ? `${param.default}` : undefined}
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 border border-neutral-700 rounded-md bg-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white placeholder:text-neutral-500"
className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 rounded-md bg-[#1a1a1a] focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white placeholder:text-neutral-500"
/>
</div>
);

Write Preview
Loading…
Cancel
Save