Update src/components/logo/Logo.tsx

src/components/logo/Logo.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import cn from "classnames";
 import { humanAiIcon } from '../icons';
-import './Logo.scss'; // این ایمپورت بسیار مهم است
+import './Logo.scss'; // <<--- این ایمپورت بسیار مهم است و باید وجود داشته باشد
 
 type LogoProps = {
   isMini: boolean;
@@ -19,14 +19,11 @@ export default function Logo({isAi, isActive, isMini, speakingVolume = 0, isUser
 
   const aiVoiceScale = 1 + (speakingVolume * 1.5);
 
-  // تعیین رنگ بخش‌های مختلف آیکون
-  // اگر کاربر صحبت می‌کند، آیکون انسان کمی روشن‌تر می‌شود تا متمایز باشد
-  const humanColor = isUserSpeaking ? "#FFFFFF" : "#E2E8F0"; // سفید و سفید-خاکستری
-  const aiColor = "#FFFFFF"; // همیشه سفید
+  const humanColor = isUserSpeaking ? "#FFFFFF" : "#E2E8F0"; 
+  const aiColor = "#FFFFFF";
 
   return (
     <div className={cn("w-fit flex items-center justify-center")}>
-      {/* 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>
@@ -36,40 +33,21 @@ export default function Logo({isAi, isActive, isMini, speakingVolume = 0, isUser
             <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]",
               )}
               style={{ '--ai-voice-scale': aiVoiceScale } as React.CSSProperties}
             />
             
-            <div
-              className={cn(
-                "absolute inset-0 rounded-full opacity-50",
-                isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
-              )}
-            />
-            <div
-              className={cn(
-                "absolute rounded-full opacity-50",
-                isAi ? "bg-green-300 dark:bg-green-600" : "bg-blue-300 dark:bg-blue-600",
-                isMini ? "inset-[5px]" : "inset-[20px]",
-              )}
-            />
-            <div
-              className={cn(
-                "absolute rounded-full opacity-50",
-                isAi ? "bg-green-400 dark:bg-green-500" : "bg-blue-400 dark:bg-blue-500",
-                isMini ? "inset-[12px]" : "inset-[50px]",
-              )}
-            />
+            <div className={cn("absolute inset-0 rounded-full opacity-50", isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700")} />
+            <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-300 dark:bg-green-600" : "bg-blue-300 dark:bg-blue-600", isMini ? "inset-[5px]" : "inset-[20px]")} />
+            <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-400 dark:bg-green-500" : "bg-blue-400 dark:bg-blue-500", isMini ? "inset-[12px]" : "inset-[50px]")} />
 
             <div className={cn("z-10 absolute flex items-center justify-center inset-0")}>
               {humanAiIcon({ 
                 size: isMini ? 24 : 45,
-                // اگر کاربر صحبت می‌کند، کلاس انیمیشن اعمال می‌شود
                 className: cn({ 'user-speaking': isUserSpeaking }),
-                // رنگ‌ها را مستقیما پاس می‌دهیم
                 humanColor: humanColor,
                 aiColor: aiColor,
               })}