From 17aaf6d603fcd1cf6488971e8d9165556b2409c3 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 13 Dec 2025 13:41:43 +0000
Subject: [PATCH] Enhance settings panels with improved UI/UX

General Settings:
- Add animated sun/moon icon to dark mode toggle with gradient backgrounds
- Dynamic label showing current theme state (Light mode/Dark mode)
- Smooth CSS transitions for icon rotation and scaling

Updates Settings:
- Redesign version display with visual card layout
- Add build type badges (Development, Docker, Source) as colorful pills
- Show 3-column layout with arrow indicator when updates available
- Move Check Now button to footer with refresh icon
- Display auto-check status indicator

Security Overview:
- Add loading skeleton during data fetch
- Enhance proxy auth notice with gradient header and admin badge
- Style logout/guide links as proper buttons
- Add Security Best Practices tips card with recommendations
---
 .../Settings/GeneralSettingsPanel.tsx         |  52 +++--
 .../Settings/SecurityOverviewPanel.tsx        | 134 +++++++++----
 .../Settings/UpdatesSettingsPanel.tsx         | 183 +++++++++++++-----
 3 files changed, 271 insertions(+), 98 deletions(-)

diff --git a/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx b/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx
index 26fbefc..73d20ba 100644
--- a/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx
@@ -4,6 +4,8 @@ import { SectionHeader } from '@/components/shared/SectionHeader';
 import { Toggle } from '@/components/shared/Toggle';
 import Sliders from 'lucide-solid/icons/sliders-horizontal';
 import Activity from 'lucide-solid/icons/activity';
+import Sun from 'lucide-solid/icons/sun';
+import Moon from 'lucide-solid/icons/moon';
 
 const PVE_POLLING_MIN_SECONDS = 10;
 const PVE_POLLING_MAX_SECONDS = 3600;
@@ -50,12 +52,28 @@ export const GeneralSettingsPanel: Component<GeneralSettingsPanelProps> = (props
           </div>
         </div>
         <div class="p-6 space-y-5">
-          <div class="flex items-center justify-between gap-3">
-            <div class="text-sm text-gray-600 dark:text-gray-400">
-              <p class="font-medium text-gray-900 dark:text-gray-100">Dark mode</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">
-                Toggle to match your environment. Pulse remembers this preference on each browser.
-              </p>
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex items-center gap-3">
+              {/* Animated theme icon */}
+              <div class={`relative p-2.5 rounded-xl transition-all duration-300 ${props.darkMode()
+                  ? 'bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg shadow-indigo-500/25'
+                  : 'bg-gradient-to-br from-amber-400 to-orange-500 shadow-lg shadow-amber-500/25'
+                }`}>
+                <div class="relative w-5 h-5">
+                  <Sun class={`absolute inset-0 w-5 h-5 text-white transition-all duration-300 ${props.darkMode() ? 'opacity-0 rotate-90 scale-50' : 'opacity-100 rotate-0 scale-100'
+                    }`} strokeWidth={2} />
+                  <Moon class={`absolute inset-0 w-5 h-5 text-white transition-all duration-300 ${props.darkMode() ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-50'
+                    }`} strokeWidth={2} />
+                </div>
+              </div>
+              <div class="text-sm text-gray-600 dark:text-gray-400">
+                <p class="font-medium text-gray-900 dark:text-gray-100">
+                  {props.darkMode() ? 'Dark mode' : 'Light mode'}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  Toggle to match your environment. Pulse remembers this preference on each browser.
+                </p>
+              </div>
             </div>
             <Toggle
               checked={props.darkMode()}
@@ -99,8 +117,8 @@ export const GeneralSettingsPanel: Component<GeneralSettingsPanelProps> = (props
               Current cadence: {props.pvePollingInterval()} seconds (
               {props.pvePollingInterval() >= 60
                 ? `${(props.pvePollingInterval() / 60).toFixed(
-                    props.pvePollingInterval() % 60 === 0 ? 0 : 1
-                  )} minute${props.pvePollingInterval() / 60 === 1 ? '' : 's'}`
+                  props.pvePollingInterval() % 60 === 0 ? 0 : 1
+                )} minute${props.pvePollingInterval() / 60 === 1 ? '' : 's'}`
                 : 'under a minute'}
               ).
             </p>
@@ -113,11 +131,10 @@ export const GeneralSettingsPanel: Component<GeneralSettingsPanelProps> = (props
                 {(option) => (
                   <button
                     type="button"
-                    class={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
-                      props.pvePollingSelection() === option.value
-                        ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-900/30 dark:text-blue-100'
-                        : 'border-gray-200 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-900/50 dark:text-gray-200'
-                    } ${props.pvePollingEnvLocked() ? 'opacity-60 cursor-not-allowed' : ''}`}
+                    class={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${props.pvePollingSelection() === option.value
+                      ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-900/30 dark:text-blue-100'
+                      : 'border-gray-200 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-900/50 dark:text-gray-200'
+                      } ${props.pvePollingEnvLocked() ? 'opacity-60 cursor-not-allowed' : ''}`}
                     disabled={props.pvePollingEnvLocked()}
                     onClick={() => {
                       if (props.pvePollingEnvLocked()) return;
@@ -132,11 +149,10 @@ export const GeneralSettingsPanel: Component<GeneralSettingsPanelProps> = (props
               </For>
               <button
                 type="button"
-                class={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
-                  props.pvePollingSelection() === 'custom'
-                    ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-900/30 dark:text-blue-100'
-                    : 'border-gray-200 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-900/50 dark:text-gray-200'
-                } ${props.pvePollingEnvLocked() ? 'opacity-60 cursor-not-allowed' : ''}`}
+                class={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${props.pvePollingSelection() === 'custom'
+                  ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-900/30 dark:text-blue-100'
+                  : 'border-gray-200 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-900/50 dark:text-gray-200'
+                  } ${props.pvePollingEnvLocked() ? 'opacity-60 cursor-not-allowed' : ''}`}
                 disabled={props.pvePollingEnvLocked()}
                 onClick={() => {
                   if (props.pvePollingEnvLocked()) return;
diff --git a/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx b/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx
index 61fed42..cd59bc8 100644
--- a/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx
+++ b/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx
@@ -1,6 +1,9 @@
 import { Component, Show, Accessor } from 'solid-js';
 import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 import { SecurityPostureSummary } from './SecurityPostureSummary';
+import Shield from 'lucide-solid/icons/shield';
+import Info from 'lucide-solid/icons/info';
 
 interface SecurityStatusInfo {
   hasAuthentication: boolean;
@@ -28,59 +31,124 @@ interface SecurityOverviewPanelProps {
 export const SecurityOverviewPanel: Component<SecurityOverviewPanelProps> = (props) => {
   return (
     <div class="space-y-6">
+      {/* Loading State */}
+      <Show when={props.securityStatusLoading()}>
+        <Card
+          padding="none"
+          class="overflow-hidden border border-gray-200 dark:border-gray-700"
+          border={false}
+        >
+          <div class="bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 px-6 py-5 animate-pulse">
+            <div class="flex items-center gap-4">
+              <div class="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
+              <div class="flex-1 space-y-2">
+                <div class="h-5 bg-gray-300 dark:bg-gray-600 rounded w-1/3"></div>
+                <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
+              </div>
+              <div class="text-right space-y-2">
+                <div class="h-8 bg-gray-300 dark:bg-gray-600 rounded w-16 ml-auto"></div>
+                <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-12 ml-auto"></div>
+              </div>
+            </div>
+          </div>
+          <div class="p-6">
+            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+              {[1, 2, 3, 4].map(() => (
+                <div class="rounded-xl border border-gray-200 dark:border-gray-700 p-4 animate-pulse">
+                  <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3 mb-2"></div>
+                  <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Card>
+      </Show>
+
+      {/* Security Summary */}
       <Show when={!props.securityStatusLoading() && props.securityStatus()}>
         <SecurityPostureSummary status={props.securityStatus()!} />
       </Show>
 
+      {/* Proxy Auth Notice */}
       <Show when={!props.securityStatusLoading() && props.securityStatus()?.hasProxyAuth}>
         <Card
-          padding="sm"
-          class="border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20"
+          padding="none"
+          class="overflow-hidden border border-blue-200 dark:border-blue-800"
+          border={false}
         >
-          <div class="flex flex-col gap-2 text-xs text-blue-800 dark:text-blue-200">
-            <div class="flex items-center gap-2">
-              <svg
-                class="w-4 h-4 flex-shrink-0"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <span class="font-semibold text-blue-900 dark:text-blue-100">
-                Proxy authentication detected
-              </span>
+          <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-blue-200 dark:border-blue-700">
+            <div class="flex items-center gap-3">
+              <div class="p-2 bg-blue-100 dark:bg-blue-900/50 rounded-lg">
+                <Shield class="w-5 h-5 text-blue-600 dark:text-blue-300" strokeWidth={2} />
+              </div>
+              <SectionHeader
+                title="Proxy Authentication Active"
+                description="Requests are validated by an upstream proxy"
+                size="sm"
+                class="flex-1"
+              />
             </div>
+          </div>
+          <div class="p-4 text-sm text-blue-800 dark:text-blue-200 space-y-2">
             <p>
-              Requests are validated by an upstream proxy. The current proxied user is
-              {props.securityStatus()?.proxyAuthUsername
-                ? ` ${props.securityStatus()?.proxyAuthUsername}`
-                : ' available once a request is received'}
+              The current proxied user is
+              <span class="font-semibold">
+                {props.securityStatus()?.proxyAuthUsername
+                  ? ` ${props.securityStatus()?.proxyAuthUsername}`
+                  : ' available once a request is received'}
+              </span>
               .
-              {props.securityStatus()?.proxyAuthIsAdmin ? ' Admin privileges confirmed.' : ''}
+              {props.securityStatus()?.proxyAuthIsAdmin && (
+                <span class="ml-1 inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-800 dark:text-blue-200">
+                  Admin
+                </span>
+              )}
+            </p>
+            <div class="flex flex-wrap items-center gap-3 pt-2">
               <Show when={props.securityStatus()?.proxyAuthLogoutURL}>
-                {' '}
-                <a class="underline font-medium" href={props.securityStatus()?.proxyAuthLogoutURL}>
-                  Proxy logout
+                <a
+                  href={props.securityStatus()?.proxyAuthLogoutURL}
+                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                  </svg>
+                  Proxy Logout
                 </a>
               </Show>
-            </p>
-            <p>
-              Need configuration tips? Review the proxy auth guide in the docs.{' '}
               <a
-                class="underline font-medium"
                 href="https://github.com/rcourtman/Pulse/blob/main/docs/PROXY_AUTH.md"
                 target="_blank"
                 rel="noreferrer"
+                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg text-blue-600 dark:text-blue-300 hover:underline"
               >
                 Read proxy auth guide →
               </a>
-            </p>
+            </div>
+          </div>
+        </Card>
+      </Show>
+
+      {/* Security Tips Card */}
+      <Show when={!props.securityStatusLoading() && props.securityStatus()}>
+        <Card
+          padding="md"
+          class="border border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/30"
+          border={false}
+        >
+          <div class="flex items-start gap-3">
+            <div class="p-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg flex-shrink-0">
+              <Info class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+            </div>
+            <div class="text-xs text-gray-600 dark:text-gray-400">
+              <p class="font-medium text-gray-700 dark:text-gray-300 mb-1">Security Best Practices</p>
+              <ul class="space-y-0.5 list-disc list-inside">
+                <li>Enable HTTPS via a reverse proxy for encrypted connections</li>
+                <li>Use strong, unique passwords and rotate credentials regularly</li>
+                <li>Consider SSO/OIDC for enterprise authentication needs</li>
+                <li>Review API token scopes and remove unused tokens</li>
+              </ul>
+            </div>
           </div>
         </Card>
       </Show>
diff --git a/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx b/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx
index fadf55b..1c6d24b 100644
--- a/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx
@@ -2,6 +2,9 @@ import { Component, Show, Accessor, Setter } from 'solid-js';
 import { Card } from '@/components/shared/Card';
 import { SectionHeader } from '@/components/shared/SectionHeader';
 import RefreshCw from 'lucide-solid/icons/refresh-cw';
+import CheckCircle from 'lucide-solid/icons/check-circle';
+import ArrowRight from 'lucide-solid/icons/arrow-right';
+import Package from 'lucide-solid/icons/package';
 import type { UpdateInfo, VersionInfo } from '@/api/updates';
 
 interface UpdatesSettingsPanelProps {
@@ -46,41 +49,133 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
         <div class="p-6 space-y-6">
           <section class="space-y-4">
             <div class="space-y-4">
-              {/* Current Version */}
-              <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                  <label class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    Current Version
-                  </label>
-                  <p class="text-xs text-gray-600 dark:text-gray-400">
-                    {props.versionInfo()?.version || 'Loading...'}
-                    {props.versionInfo()?.isDevelopment && ' (Development)'}
-                    {props.versionInfo()?.isDocker && ' - Docker'}
-                  </p>
+              {/* Version Status Section */}
+              <div class="rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+                {/* Version Grid */}
+                <div class={`grid gap-px ${props.updateInfo()?.available ? 'sm:grid-cols-3' : 'sm:grid-cols-2'}`}>
+                  {/* Current Version */}
+                  <div class="bg-gray-50 dark:bg-gray-800/60 p-4">
+                    <div class="flex items-start gap-3">
+                      <div class="p-2 bg-blue-100 dark:bg-blue-900/50 rounded-lg">
+                        <Package class="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                          Current Version
+                        </p>
+                        <p class="mt-1 text-lg font-bold text-gray-900 dark:text-gray-100 truncate">
+                          {props.versionInfo()?.version || 'Loading...'}
+                        </p>
+                        <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
+                          <Show when={props.versionInfo()?.isDevelopment}>
+                            <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
+                              Development
+                            </span>
+                          </Show>
+                          <Show when={props.versionInfo()?.isDocker}>
+                            <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
+                              Docker
+                            </span>
+                          </Show>
+                          <Show when={props.versionInfo()?.isSourceBuild}>
+                            <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
+                              Source
+                            </span>
+                          </Show>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Update Status / Arrow */}
+                  <Show when={props.updateInfo()?.available}>
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/30 dark:to-emerald-900/30 p-4 flex items-center justify-center">
+                      <div class="flex flex-col items-center gap-1.5">
+                        <div class="flex items-center gap-2 text-green-600 dark:text-green-400">
+                          <ArrowRight class="w-5 h-5" />
+                        </div>
+                        <span class="text-xs font-semibold text-green-700 dark:text-green-300 uppercase tracking-wide">
+                          Update Ready
+                        </span>
+                      </div>
+                    </div>
+                  </Show>
+
+                  {/* Latest Version / Status */}
+                  <div class={`p-4 ${props.updateInfo()?.available
+                    ? 'bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20'
+                    : 'bg-gray-50 dark:bg-gray-800/60'
+                    }`}>
+                    <div class="flex items-start gap-3">
+                      <div class={`p-2 rounded-lg ${props.updateInfo()?.available
+                        ? 'bg-green-100 dark:bg-green-900/50'
+                        : 'bg-gray-100 dark:bg-gray-700'
+                        }`}>
+                        <Show when={props.updateInfo()?.available} fallback={
+                          <CheckCircle class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                        }>
+                          <CheckCircle class="w-5 h-5 text-green-600 dark:text-green-400" />
+                        </Show>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                          {props.updateInfo()?.available ? 'Available' : 'Status'}
+                        </p>
+                        <Show when={props.updateInfo()?.available} fallback={
+                          <p class="mt-1 text-lg font-bold text-gray-900 dark:text-gray-100">
+                            Up to date
+                          </p>
+                        }>
+                          <p class="mt-1 text-lg font-bold text-green-700 dark:text-green-300">
+                            {props.updateInfo()?.latestVersion}
+                          </p>
+                          <Show when={props.updateInfo()?.releaseDate}>
+                            <p class="mt-0.5 text-xs text-green-600 dark:text-green-400">
+                              Released {new Date(props.updateInfo()!.releaseDate).toLocaleDateString()}
+                            </p>
+                          </Show>
+                        </Show>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-                <button
-                  type="button"
-                  onClick={props.checkForUpdates}
-                  disabled={
-                    props.checkingForUpdates() ||
-                    props.versionInfo()?.isDocker ||
-                    props.versionInfo()?.isSourceBuild
-                  }
-                  class={`px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2 ${
-                    props.versionInfo()?.isDocker || props.versionInfo()?.isSourceBuild
+
+                {/* Check for updates button */}
+                <div class="bg-white dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between">
+                  <p class="text-xs text-gray-500 dark:text-gray-400">
+                    <Show when={props.autoUpdateEnabled()}>
+                      Auto-check enabled
+                    </Show>
+                    <Show when={!props.autoUpdateEnabled()}>
+                      Manual checks only
+                    </Show>
+                  </p>
+                  <button
+                    type="button"
+                    onClick={props.checkForUpdates}
+                    disabled={
+                      props.checkingForUpdates() ||
+                      props.versionInfo()?.isDocker ||
+                      props.versionInfo()?.isSourceBuild
+                    }
+                    class={`px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2 ${props.versionInfo()?.isDocker || props.versionInfo()?.isSourceBuild
                       ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
                       : 'bg-blue-600 text-white hover:bg-blue-700'
-                  }`}
-                >
-                  {props.checkingForUpdates() ? (
-                    <>
-                      <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
-                      Checking...
-                    </>
-                  ) : (
-                    <>Check for Updates</>
-                  )}
-                </button>
+                      }`}
+                  >
+                    {props.checkingForUpdates() ? (
+                      <>
+                        <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
+                        Checking...
+                      </>
+                    ) : (
+                      <>
+                        <RefreshCw class="w-4 h-4" />
+                        Check Now
+                      </>
+                    )}
+                  </button>
+                </div>
               </div>
 
               {/* Docker installation notice */}
@@ -114,23 +209,17 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
 
               {/* Update available */}
               <Show when={props.updateInfo()?.available}>
-                <div class="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg space-y-3">
-                  <div>
-                    <p class="text-sm font-medium text-green-800 dark:text-green-200">
-                      Update Available: {props.updateInfo()?.latestVersion}
-                    </p>
-                    <p class="text-xs text-green-700 dark:text-green-300 mt-1">
-                      Released:{' '}
-                      {props.updateInfo()?.releaseDate
-                        ? new Date(props.updateInfo()!.releaseDate).toLocaleDateString()
-                        : 'Unknown'}
-                    </p>
+                <div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl space-y-3">
+                  <div class="flex items-center gap-2">
+                    <svg class="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <h4 class="text-sm font-semibold text-green-900 dark:text-green-100">
+                      How to install the update
+                    </h4>
                   </div>
 
-                  <div class="p-2 bg-green-100 dark:bg-green-900/40 rounded space-y-2">
-                    <p class="text-xs font-medium text-green-800 dark:text-green-200">
-                      How to update:
-                    </p>
+                  <div class="p-3 bg-green-100 dark:bg-green-900/40 rounded-lg space-y-2">
                     <Show when={props.versionInfo()?.deploymentType === 'proxmoxve'}>
                       <p class="text-xs text-green-700 dark:text-green-300">
                         Type{' '}