From 23d6d9cb46cee87bf4a131e0267616aabfeee79b Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Mon, 27 Apr 2026 01:04:40 +0200
Subject: [PATCH] Design: Update-Card mit CluBird Logo + mw-* Farbsystem

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../livewire/ui/system/update-card.blade.php  | 165 ++++--------------
 1 file changed, 35 insertions(+), 130 deletions(-)

diff --git a/resources/views/livewire/ui/system/update-card.blade.php b/resources/views/livewire/ui/system/update-card.blade.php
index 5acc852..56a914b 100644
--- a/resources/views/livewire/ui/system/update-card.blade.php
+++ b/resources/views/livewire/ui/system/update-card.blade.php
@@ -4,53 +4,45 @@
     @else wire:poll.2m="refreshVersions"
     @endif
 >
-    <div class="flex items-start gap-2">
-        {{-- Shield + Spinner --}}
-        <div class="relative shrink-0">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
-                <defs>
-                    <linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="0" stop-color="#4ade80"/>
-                        <stop offset="1" stop-color="#15803d"/>
-                    </linearGradient>
-                    <radialGradient id="shine" cx="30%" cy="20%" r="70%">
-                        <stop offset="0%" stop-color="rgba(255,255,255,0.35)"/>
-                        <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
-                    </radialGradient>
-                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-                        <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"/>
-                    </filter>
-                </defs>
-
-                <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
-                      fill="url(#shieldGradient)" filter="url(#glow)"/>
-                <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
-                      fill="url(#shine)"/>
-                <i class="ph-bold ph-arrows-clockwise absolute top-1/2 left-1/2 -translate-1/2 text-2xl {{ $state === 'running' ? 'animate-spin' : '' }}"></i>
+    <div class="flex items-start gap-3">
+        {{-- CluBird Icon --}}
+        <div class="relative shrink-0 flex items-center justify-center rounded-xl size-12"
+             style="background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 0 18px rgba(99,102,241,0.35)">
+            <svg viewBox="0 0 28 28" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                <path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="19" cy="8" r="2" fill="white"/>
             </svg>
+            @if($state === 'running')
+                <div class="absolute inset-0 rounded-xl border-2 border-indigo-400/60 animate-ping" style="animation-duration:1.8s"></div>
+            @endif
         </div>
 
         <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
                 <div class="min-w-0">
-                    <div class="text-white/90 font-semibold">{{ config('app.name') }} Update</div>
+                    <div class="text-[13px] font-semibold" style="color:var(--mw-t1)">
+                        <span style="color:var(--mw-t1)">Clu</span><span style="color:#6366f1">Bird</span>
+                        <span class="font-normal" style="color:var(--mw-t3)">Update</span>
+                    </div>
 
-                    <div class="text-xs text-white/70">
+                    <div class="text-[11px] mt-0.5" style="color:var(--mw-t4)">
                         @if($displayCurrent)
-                            aktuell: <span class="text-white/90">{{ $displayCurrent }}</span>
+                            aktuell: <span style="color:var(--mw-t2)">{{ $displayCurrent }}</span>
                         @else
-                            aktuell: <span class="text-white/60">–</span>
+                            aktuell: <span style="color:var(--mw-t5)">–</span>
                         @endif
 
                         @if($displayLatest)
-                            <span class="mx-1 text-white/30">•</span>
-                            verfügbar: <span class="text-emerald-200">{{ $displayLatest }}</span>
+                            <span class="mx-1" style="color:var(--mw-b2)">•</span>
+                            verfügbar: <span class="text-indigo-300">{{ $displayLatest }}</span>
                         @endif
                     </div>
+
                     @if($progressLine || $errorLine)
-                        <div class="mt-1 text-[11px] leading-tight">
+                        <div class="mt-1 text-[10px] leading-tight">
                             @if($progressLine)
-                                <div class="text-white/60">{{ $progressLine }}</div>
+                                <div style="color:var(--mw-t4)">{{ $progressLine }}</div>
                             @endif
                             @if($errorLine)
                                 <div class="text-rose-300">{{ $errorLine }}</div>
@@ -59,124 +51,37 @@
                     @endif
                 </div>
 
-                <div class="flex flex-col items-end gap-1">
-                    <span class="inline-flex items-center gap-1.5 rounded-full text-[11px] border px-3 py-1 w-fit {{ $badgeClass }}">
-                        <i class="ph {{ $badgeIcon }} text-[12px]"></i>
+                <div class="flex flex-col items-end gap-1.5 shrink-0">
+                    <span class="inline-flex items-center gap-1 rounded-full text-[10px] border px-2.5 py-0.5 {{ $badgeClass }}">
+                        <i class="ph {{ $badgeIcon }} text-[11px]"></i>
                         {{ $badgeText }}
                     </span>
 
                     @if($showButton)
                         <button wire:click="runUpdate"
                                 @disabled($buttonDisabled)
-                                class="inline-flex items-center gap-1.5 rounded-full text-[11px] px-3 py-1 w-fit
-                                       text-emerald-200 bg-emerald-500/10 border border-emerald-400/30
-                                       hover:bg-emerald-500/15 hover:border-emerald-300/50
-                                       disabled:opacity-60">
-                            <i class="ph ph-arrow-fat-lines-up text-[14px]"></i>
+                                class="inline-flex items-center gap-1 rounded-full text-[10px] px-2.5 py-0.5 border
+                                       text-indigo-300 border-indigo-500/40 bg-indigo-500/10
+                                       hover:bg-indigo-500/20 hover:border-indigo-400/60
+                                       disabled:opacity-50 transition-colors">
+                            <i class="ph ph-arrow-fat-lines-up text-[12px]"></i>
                             {{ $buttonLabel }}
                         </button>
                     @endif
                 </div>
             </div>
 
-            {{-- Progress-Balken nur während running --}}
             @if($state === 'running')
-                <div class="mt-3 h-1.5 rounded bg-white/10 overflow-hidden" aria-hidden="true">
-                    <div class="h-full bg-emerald-400/70 animate-[mwprogress_1.4s_infinite]" style="width:40%"></div>
+                <div class="mt-2.5 h-1 rounded-full overflow-hidden" style="background:var(--mw-b1)">
+                    <div class="h-full rounded-full bg-indigo-400/70 animate-[mwprogress_1.4s_ease-in-out_infinite]" style="width:40%"></div>
                 </div>
                 <style>
                     @keyframes mwprogress {
-                        0%   { transform: translateX(-100%) }
-                        100% { transform: translateX(260%) }
+                        0%   { transform: translateX(-150%) }
+                        100% { transform: translateX(350%) }
                     }
                 </style>
             @endif
         </div>
     </div>
 </div>
-{{--<div--}}
-{{--    class="glass-card rounded-2xl p-4 border border-white/10 bg-white/5 max-h-fit"--}}
-{{--    @if($state === 'running') wire:poll.3s="pollUpdate" @endif--}}
-{{-->--}}
-{{--    <div class="flex items-start gap-2">--}}
-{{--        --}}{{-- Shield + Update-Icon --}}
-{{--        <div class="relative shrink-0">--}}
-{{--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">--}}
-{{--                <defs>--}}
-{{--                    <linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">--}}
-{{--                        <stop offset="0" stop-color="#4ade80"/>--}}
-{{--                        <stop offset="1" stop-color="#15803d"/>--}}
-{{--                    </linearGradient>--}}
-{{--                    <radialGradient id="shine" cx="30%" cy="20%" r="70%">--}}
-{{--                        <stop offset="0%" stop-color="rgba(255,255,255,0.35)"/>--}}
-{{--                        <stop offset="100%" stop-color="rgba(255,255,255,0)"/>--}}
-{{--                    </radialGradient>--}}
-{{--                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">--}}
-{{--                        <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"/>--}}
-{{--                    </filter>--}}
-{{--                </defs>--}}
-
-{{--                <!-- Schild -->--}}
-{{--                <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"--}}
-{{--                      fill="url(#shieldGradient)" filter="url(#glow)"/>--}}
-{{--                <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"--}}
-{{--                      fill="url(#shine)"/>--}}
-{{--                 <i class="ph-bold ph-arrows-clockwise absolute top-1/2 left-1/2 -translate-1/2 text-2xl {{ $state === 'running' ? 'animate-spin' : '' }}"></i>--}}
-{{--            </svg>--}}
-{{--        </div>--}}
-
-{{--        <div class="min-w-0 flex-1">--}}
-{{--            <div class="flex items-start justify-between gap-3">--}}
-{{--                <div class="min-w-0">--}}
-{{--                    <div class="text-white/90 font-semibold">{{ config('app.name') }} Update</div>--}}
-
-{{--                    <div class="text-xs text-white/70">--}}
-{{--                        @if($displayCurrent)--}}
-{{--                            aktuell: <span class="text-white/90">{{ $displayCurrent }}</span>--}}
-{{--                        @else--}}
-{{--                            aktuell: <span class="text-white/60">–</span>--}}
-{{--                        @endif--}}
-
-{{--                        @if($displayLatest)--}}
-{{--                            <span class="mx-1 text-white/30">•</span>--}}
-{{--                            verfügbar: <span class="text-emerald-200">{{ $displayLatest }}</span>--}}
-{{--                        @endif--}}
-{{--                    </div>--}}
-{{--                </div>--}}
-
-{{--                <div class="flex flex-col items-end gap-1">--}}
-{{--                    <span class="inline-flex items-center gap-1.5 rounded-full text-[11px] border px-3 py-1 w-fit--}}
-{{--                        {{ $this->hasUpdate--}}
-{{--                            ? 'text-yellow-200 bg-yellow-500/10 border-yellow-400/30'--}}
-{{--                            : 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30' }}">--}}
-{{--                        <i class="ph {{ $this->hasUpdate ? 'ph-arrow-fat-line-up' : 'ph-check-circle' }} text-[12px]"></i>--}}
-{{--                        {{ $this->hasUpdate ? 'Update verfügbar' : 'Aktuell' }}--}}
-{{--                    </span>--}}
-{{--                    @if($this->hasUpdate)--}}
-{{--                        <button wire:click="runUpdate"--}}
-{{--                                @disabled($state==='running')--}}
-{{--                                class="inline-flex items-center gap-1.5 rounded-full text-[11px] px-3 py-1 w-fit--}}
-{{--                       text-emerald-200 bg-emerald-500/10 border border-emerald-400/30--}}
-{{--                       hover:bg-emerald-500/15 hover:border-emerald-300/50--}}
-{{--                       disabled:opacity-60">--}}
-{{--                            <i class="ph ph-arrow-fat-lines-up text-[14px]"></i>--}}
-{{--                            Jetzt aktualisieren--}}
-{{--                        </button>--}}
-{{--                    @endif--}}
-{{--                </div>--}}
-{{--            </div>--}}
-{{--            --}}{{-- Fortschritt nur während running --}}
-{{--            @if($state === 'running')--}}
-{{--                <div class="mt-3 h-1.5 rounded bg-white/10 overflow-hidden">--}}
-{{--                    <div class="h-full bg-emerald-400/70 animate-[mwprogress_1.4s_infinite]" style="width:40%"></div>--}}
-{{--                </div>--}}
-{{--                <style>--}}
-{{--                    @keyframes mwprogress {--}}
-{{--                        0%   { transform: translateX(-100%) }--}}
-{{--                        100% { transform: translateX(260%) }--}}
-{{--                    }--}}
-{{--                </style>--}}
-{{--            @endif--}}
-{{--        </div>--}}
-{{--    </div>--}}
-{{--</div>--}}