Update src/components/logo/Logo.tsx

src/components/logo/Logo.tsx

@@ -3,46 +3,46 @@
 import React from 'react';
 import cn from "classnames";
 import { humanAiIcon } from '../icons';
-import './Logo.scss'; // <-- فایل استایل جدید را ایمپورت کنید
+import './Logo.scss'; // این ایمپورت بسیار مهم است
 
 type LogoProps = {
   isMini: boolean;
   isAi: boolean;
   isActive: boolean;
-  speakingVolume?: number; // ولوم صدای AI برای انیمیشن موج
-  isUserSpeaking?: boolean; // برای فعال کردن انیمیشن صحبت کاربر
+  speakingVolume?: number;
+  isUserSpeaking?: boolean;
 }
 
 export default function Logo({isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false}: LogoProps) {
 
   if (!isActive) return null;
 
-  // محاسبه مقیاس موج بر اساس حجم صدای AI
-  // ضریب 1.5 برای محسوس‌تر شدن انیمیشن است
   const aiVoiceScale = 1 + (speakingVolume * 1.5);
 
+  // تعیین رنگ بخش‌های مختلف آیکون
+  // اگر کاربر صحبت می‌کند، آیکون انسان کمی روشن‌تر می‌شود تا متمایز باشد
+  const humanColor = isUserSpeaking ? "#FFFFFF" : "#E2E8F0"; // سفید و سفید-خاکستری
+  const aiColor = "#FFFFFF"; // همیشه سفید
+
   return (
     <div className={cn("w-fit flex items-center justify-center")}>
-      {/* loads colors for tailwind */}
+      {/* Pre-loading Tailwind colors (no changes here) */}
       <div className={"hidden bg-green-200 bg-green-300 bg-green-400 bg-blue-200 bg-blue-300 bg-blue-400 dark:bg-green-700 dark:bg-green-600 dark:bg-green-500 dark:bg-blue-700 dark:bg-blue-600 dark:bg-blue-500"}>
         color pre-loader
       </div>
 
       <div className={cn("relative", isMini ? "w-[80px] h-[80px]" : "w-[200px] h-[200px]")}>
           <>
-            {/* این div موج اصلی انیمیشن صحبت کردن AI است */}
             <div
               className={cn(
                 "absolute rounded-full opacity-50",
-                "ai-speaking-ripple", // کلاس برای کنترل انیمیشن
+                "ai-speaking-ripple", // کلاس انیمیشن
                 isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
                 isMini ? "inset-[10px]" : "inset-[40px]",
               )}
-              // متغیر CSS را برای کنترل مقیاس موج تنظیم می‌کنیم
               style={{ '--ai-voice-scale': aiVoiceScale } as React.CSSProperties}
             />
             
-            {/* دایره‌های ثابت پس‌زمینه */}
             <div
               className={cn(
                 "absolute inset-0 rounded-full opacity-50",
@@ -64,15 +64,14 @@ export default function Logo({isAi, isActive, isMini, speakingVolume = 0, isUser
               )}
             />
 
-            {/* آیکون اصلی */}
-            <div className={cn(
-                "z-10 absolute flex items-center justify-center text-white",
-                "inset-0"
-                )}>
+            <div className={cn("z-10 absolute flex items-center justify-center inset-0")}>
               {humanAiIcon({ 
                 size: isMini ? 24 : 45,
-                // اگر کاربر در حال صحبت است، کلاس مربوطه را اضافه کن
-                className: cn({ 'user-speaking': isUserSpeaking })
+                // اگر کاربر صحبت می‌کند، کلاس انیمیشن اعمال می‌شود
+                className: cn({ 'user-speaking': isUserSpeaking }),
+                // رنگ‌ها را مستقیما پاس می‌دهیم
+                humanColor: humanColor,
+                aiColor: aiColor,
               })}
             </div>
           </>