redesign: apply correct Editorial Fresh design system
- Fix palette: #E85A4F accent, #FFFBF5 cream, #1A1A1A ink (was wrong values) - Remove all border-radius (zero radius everywhere per design spec) - Sidebar: cream-dark #F5F0E8 bg with accent-left active indicator - card-editorial: white bg, 4px accent top bar via absolute div - Buttons: ink bg → accent hover + translateY(-1px) - LoginPage: correct split layout with Editorial Fresh tokens - Add .btn-primary / .btn-outline / .input-editorial / .editorial-tag classes - Fraunces + DM Sans correctly applied everywhere Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michele
@@ -4,92 +4,89 @@ import { api } from '../api'
|
||||
// ─── Provider catalogs ────────────────────────────────────────────────────────
|
||||
|
||||
const TEXT_PROVIDERS = [
|
||||
{ value: 'claude', label: 'Claude (Anthropic)', defaultModel: 'claude-sonnet-4-20250514', needsBaseUrl: false },
|
||||
{ value: 'openai', label: 'OpenAI', defaultModel: 'gpt-4o-mini', needsBaseUrl: false },
|
||||
{ value: 'gemini', label: 'Gemini (Google)', defaultModel: 'gemini-2.0-flash', needsBaseUrl: false },
|
||||
{ value: 'openrouter', label: 'OpenRouter', defaultModel: 'openai/gpt-4o-mini', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', defaultModel: '', needsBaseUrl: true },
|
||||
{ value: 'claude', label: 'Claude (Anthropic)', defaultModel: 'claude-sonnet-4-20250514', needsBaseUrl: false },
|
||||
{ value: 'openai', label: 'OpenAI', defaultModel: 'gpt-4o-mini', needsBaseUrl: false },
|
||||
{ value: 'gemini', label: 'Gemini (Google)', defaultModel: 'gemini-2.0-flash', needsBaseUrl: false },
|
||||
{ value: 'openrouter', label: 'OpenRouter', defaultModel: 'openai/gpt-4o-mini', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', defaultModel: '', needsBaseUrl: true },
|
||||
]
|
||||
|
||||
const IMAGE_PROVIDERS = [
|
||||
{ value: 'dalle', label: 'DALL-E (OpenAI)', needsBaseUrl: false },
|
||||
{ value: 'replicate', label: 'Replicate', needsBaseUrl: false },
|
||||
{ value: 'wavespeed', label: 'WaveSpeed', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', needsBaseUrl: true },
|
||||
{ value: 'dalle', label: 'DALL-E (OpenAI)', needsBaseUrl: false },
|
||||
{ value: 'replicate', label: 'Replicate', needsBaseUrl: false },
|
||||
{ value: 'wavespeed', label: 'WaveSpeed', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', needsBaseUrl: true },
|
||||
]
|
||||
|
||||
const VIDEO_PROVIDERS = [
|
||||
{ value: 'wavespeed', label: 'WaveSpeed', needsBaseUrl: false },
|
||||
{ value: 'replicate', label: 'Replicate', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', needsBaseUrl: true },
|
||||
{ value: 'wavespeed', label: 'WaveSpeed', needsBaseUrl: false },
|
||||
{ value: 'replicate', label: 'Replicate', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', needsBaseUrl: true },
|
||||
]
|
||||
|
||||
const VOICE_PROVIDERS = [
|
||||
{ value: 'elevenlabs', label: 'ElevenLabs', needsBaseUrl: false },
|
||||
{ value: 'openai_tts', label: 'OpenAI TTS', needsBaseUrl: false },
|
||||
{ value: 'wavespeed', label: 'WaveSpeed', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', needsBaseUrl: true },
|
||||
{ value: 'elevenlabs', label: 'ElevenLabs', needsBaseUrl: false },
|
||||
{ value: 'openai_tts', label: 'OpenAI TTS', needsBaseUrl: false },
|
||||
{ value: 'wavespeed', label: 'WaveSpeed', needsBaseUrl: false },
|
||||
{ value: 'custom', label: 'Personalizzato (custom)', needsBaseUrl: true },
|
||||
]
|
||||
|
||||
// ─── Styles ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const card = {
|
||||
backgroundColor: 'var(--surface)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '0.75rem',
|
||||
padding: '1.5rem',
|
||||
}
|
||||
|
||||
const input = {
|
||||
width: '100%',
|
||||
padding: '0.625rem 1rem',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
color: 'var(--ink)',
|
||||
backgroundColor: 'var(--cream)',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}
|
||||
|
||||
// ─── Section component ────────────────────────────────────────────────────────
|
||||
|
||||
function ProviderSection({ title, icon, description, providers, settingKeys, values, onChange, onSave, saving, success, error }) {
|
||||
const { providerKey, apiKeyKey, modelKey, baseUrlKey, extraKey, extraLabel, extraPlaceholder } = settingKeys
|
||||
const currentProvider = providers.find(p => p.value === values[providerKey]) || providers[0]
|
||||
const showModel = modelKey != null
|
||||
const showModel = modelKey != null
|
||||
const showBaseUrl = currentProvider.needsBaseUrl && baseUrlKey
|
||||
|
||||
return (
|
||||
<div style={card} className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl">{icon}</span>
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
backgroundColor: 'var(--surface)',
|
||||
border: '1px solid var(--border)',
|
||||
padding: '1.5rem',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* accent top bar */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, backgroundColor: 'var(--accent)' }} />
|
||||
|
||||
{/* Section header */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.75rem', marginBottom: '1.25rem' }}>
|
||||
<span style={{ fontSize: '1.4rem', lineHeight: 1 }}>{icon}</span>
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm uppercase tracking-wider" style={{ color: 'var(--muted)' }}>
|
||||
<span style={{
|
||||
display: 'block',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--accent)',
|
||||
marginBottom: '0.2rem',
|
||||
}}>
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs mt-0.5" style={{ color: 'var(--muted)' }}>{description}</p>
|
||||
</span>
|
||||
<p style={{ fontSize: '0.82rem', color: 'var(--ink-muted)', margin: 0 }}>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 rounded-lg text-sm" style={{ backgroundColor: '#fef2f2', border: '1px solid #fecaca', color: '#dc2626' }}>
|
||||
<div style={{ padding: '0.75rem', backgroundColor: '#FFF5F5', border: '1px solid #FED7D7', color: '#C53030', fontSize: '0.875rem', marginBottom: '1rem' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="p-3 rounded-lg text-sm" style={{ backgroundColor: '#f0fdf4', border: '1px solid #bbf7d0', color: '#16a34a' }}>
|
||||
<div style={{ padding: '0.75rem', backgroundColor: '#F0FDF4', border: '1px solid #86EFAC', color: 'var(--success)', fontSize: '0.875rem', marginBottom: '1rem' }}>
|
||||
Salvato con successo
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Provider dropdown */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>Provider</label>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label style={labelStyle}>Provider</label>
|
||||
<select
|
||||
value={values[providerKey] || providers[0].value}
|
||||
onChange={e => onChange(providerKey, e.target.value)}
|
||||
style={input}
|
||||
style={selectStyle}
|
||||
>
|
||||
{providers.map(p => (
|
||||
<option key={p.value} value={p.value}>{p.label}</option>
|
||||
@@ -97,41 +94,45 @@ function ProviderSection({ title, icon, description, providers, settingKeys, val
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Custom base URL (shown only for 'custom' provider) */}
|
||||
{/* Custom base URL */}
|
||||
{showBaseUrl && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>
|
||||
Base URL <span className="font-normal ml-1" style={{ color: 'var(--muted)' }}>(es. https://mio-provider.com/v1)</span>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label style={labelStyle}>
|
||||
Base URL <span style={{ fontWeight: 400, color: 'var(--ink-muted)', textTransform: 'none', letterSpacing: 0 }}>(es. https://mio-provider.com/v1)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={values[baseUrlKey] || ''}
|
||||
onChange={e => onChange(baseUrlKey, e.target.value)}
|
||||
placeholder="https://..."
|
||||
style={{ ...input, fontFamily: 'monospace' }}
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
onFocus={(e) => e.target.style.borderColor = 'var(--ink)'}
|
||||
onBlur={(e) => e.target.style.borderColor = 'var(--border)'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API Key */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>API Key</label>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label style={labelStyle}>API Key</label>
|
||||
<input
|
||||
type="password"
|
||||
value={values[apiKeyKey] || ''}
|
||||
onChange={e => onChange(apiKeyKey, e.target.value)}
|
||||
placeholder="Inserisci la tua API key..."
|
||||
style={{ ...input, fontFamily: 'monospace' }}
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
onFocus={(e) => e.target.style.borderColor = 'var(--ink)'}
|
||||
onBlur={(e) => e.target.style.borderColor = 'var(--border)'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Model (optional, only for text/video providers) */}
|
||||
{/* Model */}
|
||||
{showModel && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label style={labelStyle}>
|
||||
Modello
|
||||
{currentProvider.defaultModel && (
|
||||
<span className="font-normal ml-1" style={{ color: 'var(--muted)' }}>
|
||||
<span style={{ fontWeight: 400, color: 'var(--ink-muted)', textTransform: 'none', letterSpacing: 0, marginLeft: '0.4rem' }}>
|
||||
(default: {currentProvider.defaultModel})
|
||||
</span>
|
||||
)}
|
||||
@@ -141,23 +142,27 @@ function ProviderSection({ title, icon, description, providers, settingKeys, val
|
||||
value={values[modelKey] || ''}
|
||||
onChange={e => onChange(modelKey, e.target.value)}
|
||||
placeholder={currentProvider.defaultModel || 'nome-modello'}
|
||||
style={{ ...input, fontFamily: 'monospace' }}
|
||||
style={{ ...inputStyle, fontFamily: 'monospace' }}
|
||||
onFocus={(e) => e.target.style.borderColor = 'var(--ink)'}
|
||||
onBlur={(e) => e.target.style.borderColor = 'var(--border)'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Extra field (es. Voice ID per ElevenLabs) */}
|
||||
{/* Extra field */}
|
||||
{extraKey && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--ink)' }}>
|
||||
{extraLabel} <span className="font-normal ml-1" style={{ color: 'var(--muted)' }}>(opzionale)</span>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label style={labelStyle}>
|
||||
{extraLabel} <span style={{ fontWeight: 400, color: 'var(--ink-muted)', textTransform: 'none', letterSpacing: 0 }}>(opzionale)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={values[extraKey] || ''}
|
||||
onChange={e => onChange(extraKey, e.target.value)}
|
||||
placeholder={extraPlaceholder}
|
||||
style={input}
|
||||
style={inputStyle}
|
||||
onFocus={(e) => e.target.style.borderColor = 'var(--ink)'}
|
||||
onBlur={(e) => e.target.style.borderColor = 'var(--border)'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -165,8 +170,20 @@ function ProviderSection({ title, icon, description, providers, settingKeys, val
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
className="px-4 py-2 text-white text-sm font-medium rounded-lg transition-opacity"
|
||||
style={{ backgroundColor: 'var(--coral)', opacity: saving ? 0.7 : 1 }}
|
||||
style={{
|
||||
padding: '0.6rem 1.25rem',
|
||||
backgroundColor: saving ? '#888' : 'var(--ink)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 0,
|
||||
fontFamily: "'DM Sans', sans-serif",
|
||||
fontWeight: 600,
|
||||
fontSize: '0.875rem',
|
||||
cursor: saving ? 'not-allowed' : 'pointer',
|
||||
transition: 'background-color 0.2s, transform 0.15s',
|
||||
}}
|
||||
onMouseEnter={(e) => { if (!saving) { e.target.style.backgroundColor = 'var(--accent)'; e.target.style.transform = 'translateY(-1px)' } }}
|
||||
onMouseLeave={(e) => { if (!saving) { e.target.style.backgroundColor = 'var(--ink)'; e.target.style.transform = 'translateY(0)' } }}
|
||||
>
|
||||
{saving ? 'Salvataggio...' : 'Salva'}
|
||||
</button>
|
||||
@@ -178,27 +195,11 @@ function ProviderSection({ title, icon, description, providers, settingKeys, val
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [values, setValues] = useState({
|
||||
// Text
|
||||
llm_provider: 'claude',
|
||||
llm_api_key: '',
|
||||
llm_model: '',
|
||||
llm_base_url: '',
|
||||
// Image
|
||||
image_provider: 'dalle',
|
||||
image_api_key: '',
|
||||
image_base_url: '',
|
||||
// Video
|
||||
video_provider: 'wavespeed',
|
||||
video_api_key: '',
|
||||
video_model: '',
|
||||
video_base_url: '',
|
||||
// Voice
|
||||
voice_provider: 'elevenlabs',
|
||||
voice_api_key: '',
|
||||
voice_base_url: '',
|
||||
elevenlabs_voice_id: '',
|
||||
llm_provider: 'claude', llm_api_key: '', llm_model: '', llm_base_url: '',
|
||||
image_provider: 'dalle', image_api_key: '', image_base_url: '',
|
||||
video_provider: 'wavespeed', video_api_key: '', video_model: '', video_base_url: '',
|
||||
voice_provider: 'elevenlabs', voice_api_key: '', voice_base_url: '', elevenlabs_voice_id: '',
|
||||
})
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState({})
|
||||
const [success, setSuccess] = useState({})
|
||||
@@ -245,112 +246,117 @@ export default function SettingsPage() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-1" style={{ fontFamily: 'Fraunces, serif', color: 'var(--ink)' }}>
|
||||
Impostazioni
|
||||
<div style={{ animation: 'fade-in 0.4s ease-out both' }}>
|
||||
<span className="editorial-tag">Impostazioni</span>
|
||||
<div className="editorial-line" />
|
||||
<h2 style={{ fontFamily: "'Fraunces', serif", fontSize: '1.75rem', color: 'var(--ink)', margin: '0.5rem 0 2rem' }}>
|
||||
Provider AI
|
||||
</h2>
|
||||
<div className="flex justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-2 border-t-transparent" style={{ borderColor: 'var(--coral)' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '3rem 0' }}>
|
||||
<div style={{
|
||||
width: 32, height: 32,
|
||||
border: '2px solid var(--border)',
|
||||
borderTopColor: 'var(--accent)',
|
||||
borderRadius: '50%',
|
||||
animation: 'spin 0.8s linear infinite',
|
||||
}} />
|
||||
</div>
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold" style={{ fontFamily: 'Fraunces, serif', color: 'var(--ink)' }}>
|
||||
Impostazioni
|
||||
<div style={{ animation: 'fade-up 0.5s ease-out both' }}>
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<span className="editorial-tag">Impostazioni</span>
|
||||
<div className="editorial-line" />
|
||||
<h2 style={{ fontFamily: "'Fraunces', serif", fontSize: '1.75rem', color: 'var(--ink)', margin: '0.5rem 0 0.4rem', letterSpacing: '-0.02em' }}>
|
||||
Provider AI
|
||||
</h2>
|
||||
<p className="mt-1 text-sm" style={{ color: 'var(--muted)' }}>
|
||||
<p style={{ fontSize: '0.875rem', color: 'var(--ink-muted)', margin: 0 }}>
|
||||
Scegli il provider per ogni tipo di output. Usa "Personalizzato" per collegare qualsiasi servizio compatibile.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<div style={{ maxWidth: 640, display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
|
||||
|
||||
{/* TEXT */}
|
||||
<ProviderSection
|
||||
title="Testi & Script"
|
||||
icon="✍️"
|
||||
title="Testi & Script" icon="✍️"
|
||||
description="Provider LLM per generare post, caption, script e contenuti testuali."
|
||||
providers={TEXT_PROVIDERS}
|
||||
settingKeys={{
|
||||
providerKey: 'llm_provider',
|
||||
apiKeyKey: 'llm_api_key',
|
||||
modelKey: 'llm_model',
|
||||
baseUrlKey: 'llm_base_url',
|
||||
}}
|
||||
values={values}
|
||||
onChange={handleChange}
|
||||
settingKeys={{ providerKey: 'llm_provider', apiKeyKey: 'llm_api_key', modelKey: 'llm_model', baseUrlKey: 'llm_base_url' }}
|
||||
values={values} onChange={handleChange}
|
||||
onSave={() => saveSection('text', ['llm_provider', 'llm_api_key', 'llm_model', 'llm_base_url'])}
|
||||
saving={saving.text}
|
||||
success={success.text}
|
||||
error={errors.text}
|
||||
saving={saving.text} success={success.text} error={errors.text}
|
||||
/>
|
||||
|
||||
{/* IMAGE */}
|
||||
<ProviderSection
|
||||
title="Immagini"
|
||||
icon="🖼️"
|
||||
title="Immagini" icon="🖼️"
|
||||
description="Provider per la generazione di immagini AI."
|
||||
providers={IMAGE_PROVIDERS}
|
||||
settingKeys={{
|
||||
providerKey: 'image_provider',
|
||||
apiKeyKey: 'image_api_key',
|
||||
baseUrlKey: 'image_base_url',
|
||||
}}
|
||||
values={values}
|
||||
onChange={handleChange}
|
||||
settingKeys={{ providerKey: 'image_provider', apiKeyKey: 'image_api_key', baseUrlKey: 'image_base_url' }}
|
||||
values={values} onChange={handleChange}
|
||||
onSave={() => saveSection('image', ['image_provider', 'image_api_key', 'image_base_url'])}
|
||||
saving={saving.image}
|
||||
success={success.image}
|
||||
error={errors.image}
|
||||
saving={saving.image} success={success.image} error={errors.image}
|
||||
/>
|
||||
|
||||
{/* VIDEO */}
|
||||
<ProviderSection
|
||||
title="Video"
|
||||
icon="🎬"
|
||||
title="Video" icon="🎬"
|
||||
description="Provider per la generazione di video AI (testo → video, immagine → video)."
|
||||
providers={VIDEO_PROVIDERS}
|
||||
settingKeys={{
|
||||
providerKey: 'video_provider',
|
||||
apiKeyKey: 'video_api_key',
|
||||
modelKey: 'video_model',
|
||||
baseUrlKey: 'video_base_url',
|
||||
}}
|
||||
values={values}
|
||||
onChange={handleChange}
|
||||
settingKeys={{ providerKey: 'video_provider', apiKeyKey: 'video_api_key', modelKey: 'video_model', baseUrlKey: 'video_base_url' }}
|
||||
values={values} onChange={handleChange}
|
||||
onSave={() => saveSection('video', ['video_provider', 'video_api_key', 'video_model', 'video_base_url'])}
|
||||
saving={saving.video}
|
||||
success={success.video}
|
||||
error={errors.video}
|
||||
saving={saving.video} success={success.video} error={errors.video}
|
||||
/>
|
||||
|
||||
{/* VOICE */}
|
||||
<ProviderSection
|
||||
title="Voiceover"
|
||||
icon="🎙️"
|
||||
title="Voiceover" icon="🎙️"
|
||||
description="Provider text-to-speech per generare voiceover dai tuoi contenuti."
|
||||
providers={VOICE_PROVIDERS}
|
||||
settingKeys={{
|
||||
providerKey: 'voice_provider',
|
||||
apiKeyKey: 'voice_api_key',
|
||||
baseUrlKey: 'voice_base_url',
|
||||
extraKey: 'elevenlabs_voice_id',
|
||||
extraLabel: 'Voice ID',
|
||||
extraPlaceholder: 'ID della voce (solo ElevenLabs)',
|
||||
providerKey: 'voice_provider', apiKeyKey: 'voice_api_key', baseUrlKey: 'voice_base_url',
|
||||
extraKey: 'elevenlabs_voice_id', extraLabel: 'Voice ID', extraPlaceholder: 'ID della voce (solo ElevenLabs)',
|
||||
}}
|
||||
values={values}
|
||||
onChange={handleChange}
|
||||
values={values} onChange={handleChange}
|
||||
onSave={() => saveSection('voice', ['voice_provider', 'voice_api_key', 'voice_base_url', 'elevenlabs_voice_id'])}
|
||||
saving={saving.voice}
|
||||
success={success.voice}
|
||||
error={errors.voice}
|
||||
saving={saving.voice} success={success.voice} error={errors.voice}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Shared styles ────────────────────────────────────────────────────────────
|
||||
|
||||
const labelStyle = {
|
||||
display: 'block',
|
||||
fontSize: '0.72rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--ink)',
|
||||
marginBottom: '0.4rem',
|
||||
}
|
||||
|
||||
const inputStyle = {
|
||||
width: '100%',
|
||||
padding: '0.625rem 0.875rem',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 0,
|
||||
fontSize: '0.875rem',
|
||||
color: 'var(--ink)',
|
||||
backgroundColor: 'var(--surface)',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
transition: 'border-color 0.15s',
|
||||
fontFamily: "'DM Sans', sans-serif",
|
||||
}
|
||||
|
||||
const selectStyle = {
|
||||
...inputStyle,
|
||||
cursor: 'pointer',
|
||||
appearance: 'auto',
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user