Update src/App.tsx

src/App.tsx

@@ -143,31 +143,39 @@ const AppInternalLogic: React.FC<{
     <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased">
       <div className="max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
         <div className="header-controls">
-          <div id="notification-trigger-container">
+          <div id="notification-trigger-container"> {/* Wrapper is good for potential future styling or positioning */}
             <button
               ref={notificationButtonRef}
               id="notification-button"
               aria-label="Notifications"
-              className="header-button"
+              className="header-button" // Standard class for header buttons
               onClick={(e) => {
                   e.stopPropagation();
                   setIsNotificationOpen(!isNotificationOpen);
                 }}
             >
+              {/* Notification Icon SVG */}
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
             </button>
           </div>
-          <div className="back-button-container">
-            <div className="header-button" onClick={() => alert('Back clicked (implement navigation)')}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
-            </div>
+          <div className="back-button-container"> {/* Wrapper for the back button */}
+            {/* *** MODIFIED: Ensure it uses the same `header-button` class *** */}
+            <button // Changed from div to button for better accessibility and event handling
+              id="back-button"
+              aria-label="Go back"
+              className="header-button" // Standard class for header buttons
+              onClick={() => alert('Back clicked (implement navigation)')}
+            >
+              {/* Back Icon SVG - Ensure its size is consistent with notification icon or adjust padding */}
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
+            </button>
           </div>
         </div>
 
         <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
           <div
             id="notification-popover"
-            className={cn("popover-content", { 
+            className={cn("popover-content", {
               "open animate-popover-open-top-center": isNotificationOpen,
               "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'),
             })}
@@ -177,7 +185,7 @@ const AppInternalLogic: React.FC<{
             </div>
           </div>
         </div>
-        
+
         <div className="w-full flex flex-col items-center justify-center flex-grow relative">
           <video
             id="video-feed"
@@ -202,7 +210,7 @@ const AppInternalLogic: React.FC<{
             {isMicActive && !isCamActive && createLogoFunction(false, true, 'human')}
           </div>
         </div>
-          
+
         <ControlTray
           videoRef={videoRef}
           supportsVideo={true}
@@ -218,7 +226,6 @@ const AppInternalLogic: React.FC<{
   );
 }
 
-// *** NEW: Configuration for logo colors for Tailwind JIT compatibility ***
 const logoColorConfig = {
   blue: {
     ping: "bg-blue-200 dark:bg-blue-700",
@@ -232,7 +239,7 @@ const logoColorConfig = {
     mid: "bg-green-300 dark:bg-green-600",
     inner: "bg-green-400 dark:bg-green-500",
   },
-  gray: { 
+  gray: {
     ping: "bg-gray-200 dark:bg-gray-700",
     outer: "bg-gray-200 dark:bg-gray-700",
     mid: "bg-gray-300 dark:bg-gray-600",
@@ -258,7 +265,7 @@ function App() {
     }
     const timer = setTimeout(() => {
         setIsAllowedOrigin(true);
-    }, 100); 
+    }, 100);
     return () => clearTimeout(timer);
   }, []);
 
@@ -283,16 +290,15 @@ function App() {
   if (isAllowedOrigin === null) {
     return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
   }
-  
+
   const createLogoFunction = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human') => {
     if (!isActive) return null;
     const size = isMini ? 80 : 200;
-    const iconSize = isMini ? 35 : 70; // This variable seems unused for SvgHumanIcon which has fixed size. Kept for consistency.
-    const insetBase = isMini 
+    // const iconSize = isMini ? 35 : 70; // Unused for SvgHumanIcon
+    const insetBase = isMini
         ? { ping: 10, outer: 0, mid: 5, inner: 12, icon: 22 }
         : { ping: 40, outer: 0, mid: 20, inner: 50, icon: 65 };
-    
-    // *** UPDATED: Use logoColorConfig for Tailwind JIT compatibility ***
+
     const effectiveType = (type === 'human') ? 'blue' : (type === 'ai' ? 'green' : 'gray');
     const currentColors = logoColorConfig[effectiveType as keyof typeof logoColorConfig] || logoColorConfig.gray;
 
@@ -304,7 +310,6 @@ function App() {
         <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${insetBase.inner}px` }}></div>
         <div className="z-10 absolute" style={{ inset: `${insetBase.icon}px`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {type === 'human' && <SvgHumanIcon />}
-          {/* اگر آیکون AI دارید، اینجا اضافه کنید. مثال: type === 'ai' && <SvgAiIcon /> */}
         </div>
       </div>
     );