jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/InstallClaudeScreen.tsx

@@ -1,7 +1,5 @@
-'use client';
-
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
+import { Button } from '@/components/ui/Button';
 
 const statusMessages = [
   "Downloading Claude Code...",
@@ -69,15 +67,14 @@ export function InstallClaudeScreen({
         }
       `}</style>
 
-      <div className="max-w-md w-full space-y-8">
+      <div className="max-w-md w-full space-y-10">
         {/* Logo */}
-        <div className="flex flex-col items-center space-y-4">
-          <Image
+        <div className="flex flex-col items-center space-y-6">
+          <img
             src="/jettypod_wordmark.png"
             alt="JettyPod"
             width={160}
             height={40}
-            priority
           />
           {!isInstalling && !isSuccess && (
             <>
@@ -93,9 +90,9 @@ export function InstallClaudeScreen({
         </div>
 
         {/* Install Button / Progress / Success */}
-        <div className="pt-4">
+        <div className="pt-6">
           {isSuccess ? (
-            <div className="flex flex-col items-center space-y-6 fade-in" data-testid="install-success">
+            <div className="flex flex-col items-center space-y-8 fade-in" data-testid="install-success">
               {/* Animated Checkmark */}
               <div
                 className="w-20 h-20 rounded-full flex items-center justify-center"
@@ -124,9 +121,9 @@ export function InstallClaudeScreen({
               </p>
             </div>
           ) : isInstalling ? (
-            <div className="space-y-6" data-testid="install-progress">
+            <div className="space-y-8" data-testid="install-progress">
               {/* Pulse dot + status message */}
-              <div className="flex items-center justify-center space-x-3">
+              <div className="flex items-center justify-center space-x-4">
                 <div
                   className="w-3 h-3 rounded-full pulse-dot"
                   style={{ backgroundColor: '#819D9F' }}
@@ -139,7 +136,7 @@ export function InstallClaudeScreen({
               {/* Progress bar */}
               <div className="w-full h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
                 <div
-                  className="h-full rounded-full transition-all duration-300 ease-out"
+                  className="h-full rounded-full transition-[width] duration-200 ease-out"
                   style={{
                     width: `${progress}%`,
                     background: 'linear-gradient(90deg, #c8d9da, #819D9F)',
@@ -148,35 +145,21 @@ export function InstallClaudeScreen({
               </div>
             </div>
           ) : (
-            <button
+            <Button
               onClick={onInstall}
-              className="w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100"
-              style={{
-                cursor: 'pointer',
-                background: 'linear-gradient(145deg, #ffffff 0%, #faf9f7 10%, #f0f4f4 35%, #c8d9da 55%, #819D9F 90%)',
-                color: '#3d4d4e',
-                boxShadow: `
-                  0 1px 1px rgba(0, 0, 0, 0.02),
-                  0 2px 4px rgba(0, 0, 0, 0.03),
-                  0 6px 12px rgba(0, 0, 0, 0.05),
-                  0 12px 24px rgba(0, 0, 0, 0.06),
-                  0 20px 40px rgba(129, 157, 159, 0.2),
-                  0 32px 64px rgba(129, 157, 159, 0.18),
-                  inset 0 2px 4px rgba(255, 255, 255, 1),
-                  inset 0 -2px 4px rgba(129, 157, 159, 0.05)
-                `,
-              }}
+              size="lg"
+              fullWidth
               data-testid="install-claude-button"
             >
               Install Claude Code
-            </button>
+            </Button>
           )}
         </div>
 
         {/* Info Section - only show when idle */}
         {!isInstalling && !isSuccess && (
-          <div className="pt-8 space-y-4">
-            <div className="border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-sm">
+          <div className="pt-10 space-y-4">
+            <div className="rounded-lg p-6 text-zinc-500 dark:text-zinc-400 text-base">
               <p>
                 <strong className="text-zinc-700 dark:text-zinc-300">What is Claude Code?</strong>
               </p>

package/apps/dashboard/components/JettyLoader.tsx

@@ -0,0 +1,37 @@
+
+import { useState, useEffect } from 'react';
+
+interface JettyLoaderProps {
+  size?: number;
+  className?: string;
+}
+
+export function JettyLoader({ size = 48, className = '' }: JettyLoaderProps) {
+  const [showAlt, setShowAlt] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setShowAlt((prev) => !prev);
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className={className} style={{ width: size, height: size }}>
+      <img
+        src="/jetty-icon-loading.svg"
+        alt="Loading"
+        width={size}
+        height={size}
+        style={{ display: showAlt ? 'none' : 'block' }}
+      />
+      <img
+        src="/jetty-icon-loading-alt.svg"
+        alt="Loading"
+        width={size}
+        height={size}
+        style={{ display: showAlt ? 'block' : 'none' }}
+      />
+    </div>
+  );
+}