feat(design): centralize design system with CSS variables and semantic classes in index.css
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
This commit is contained in:
sandrodach committed
1 parent
94123c9424
commit
ec9ba8fd9f
9 files changed
+428
-304
No files matched your search
@@ -92,11 +92,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
const baseUrl = window.location.origin;
|
||||
|
||||
return (
|
||||
<div className="w-full bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.08]">
|
||||
<div className="w-full panel-surface divide-y divide-border">
|
||||
{/* Section 1: API Keys for Smarthome & Automation */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-8 h-8 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-accent text-white flex items-center justify-center flex-shrink-0">
|
||||
<Key className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
value={newKeyName}
|
||||
onChange={(e) => setNewKeyName(e.target.value)}
|
||||
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
|
||||
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
|
||||
className="flex-1 h-9 px-3 input-field text-sm"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
|
||||
className="btn-primary h-9 px-4 text-xs sm:text-sm"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>API-Key erzeugen</span>
|
||||
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
</form>
|
||||
|
||||
{newlyCreatedKey && (
|
||||
<div className="mt-3 p-3 bg-[#1d8cf8]/15 border border-[#1d8cf8]/30 flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="mt-3 p-3 bg-accent/15 border border-accent/30 flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-semibold text-[#1d8cf8] mb-1">
|
||||
<p className="text-xs font-semibold text-accent mb-1">
|
||||
Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
|
||||
</p>
|
||||
<code className="text-xs sm:text-sm font-mono text-white break-all">
|
||||
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopy(newlyCreatedKey)}
|
||||
className="h-8 px-3 rounded-full bg-[#1d8cf8] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
|
||||
className="btn-primary h-8 px-3 text-xs"
|
||||
>
|
||||
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
|
||||
@@ -147,7 +147,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
)}
|
||||
|
||||
{/* Active Keys List */}
|
||||
<div className="mt-3 border border-white/[0.06] divide-y divide-white/[0.06]">
|
||||
<div className="mt-3 border border-border divide-y divide-border">
|
||||
{keys.length === 0 ? (
|
||||
<p className="text-xs text-zinc-500 px-3 py-2">
|
||||
Noch keine dedizierten API-Schlüssel hinterlegt.
|
||||
@@ -156,11 +156,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
keys.map((k) => (
|
||||
<div
|
||||
key={k.id}
|
||||
className="px-3 py-1.5 bg-[#16171a] flex items-center justify-between gap-3"
|
||||
className="px-3 py-1.5 bg-canvas flex items-center justify-between gap-3"
|
||||
>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-white">{k.name}</span>
|
||||
<span className="ml-3 text-xs font-mono text-[#1d8cf8]">{k.keyPrefix}</span>
|
||||
<span className="ml-3 text-xs font-mono text-accent">{k.keyPrefix}</span>
|
||||
{k.lastUsedAt && (
|
||||
<span className="ml-3 text-xs text-zinc-500">
|
||||
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
|
||||
@@ -169,7 +169,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteKey(k.id)}
|
||||
className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
|
||||
className="btn-icon btn-icon-danger w-7 h-7"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
@@ -182,7 +182,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
{/* Section 2: Interactive Smarthome Webhook Simulator */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
|
||||
<Webhook className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
setSimTitle(preset.text);
|
||||
setSimPriority(preset.prio);
|
||||
}}
|
||||
className="px-3 py-1 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
|
||||
className="btn-action text-xs"
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
type="text"
|
||||
value={simTitle}
|
||||
onChange={(e) => setSimTitle(e.target.value)}
|
||||
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
|
||||
className="flex-1 h-9 px-3 input-field text-sm"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSimulateWebhook}
|
||||
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
|
||||
className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-1.5"
|
||||
>
|
||||
<Zap className="w-4 h-4" />
|
||||
<span>Webhook jetzt abfeuern</span>
|
||||
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
</div>
|
||||
|
||||
{simStatus && (
|
||||
<p className="mt-3 text-xs font-medium text-[#1d8cf8]">{simStatus}</p>
|
||||
<p className="mt-3 text-xs font-medium text-accent">{simStatus}</p>
|
||||
)}
|
||||
|
||||
{/* Code Example Snippets */}
|
||||
<div className="mt-4 space-y-2">
|
||||
<div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
|
||||
<Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
|
||||
<Terminal className="w-3.5 h-3.5 text-accent" />
|
||||
<span>cURL / Home Assistant REST Command:</span>
|
||||
</div>
|
||||
<pre className="p-3 bg-[#16171a] border border-white/[0.06] font-mono text-xs text-zinc-300 overflow-x-auto">
|
||||
<pre className="p-3 bg-canvas border border-border font-mono text-xs text-zinc-300 overflow-x-auto">
|
||||
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
@@ -257,7 +257,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
{/* Section 3: Data Sovereignty & Export */}
|
||||
<div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||||
|
||||
<button
|
||||
onClick={handleFullExport}
|
||||
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
|
||||
className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-2"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
<span>Komplett-Backup (.json)</span>
|
||||
|
||||
Reference in new issue
Block a user