bug resport image change

src/components/ThemeToggle.tsx

@@ -14,26 +14,26 @@ const ThemeToggle = () => {
             onClick={toggleTheme}
             variant="secondary"
             title={label}
-            className={`group relative w-16 h-8 p-0 rounded-full transition-all duration-300
+            className={`group relative w-12 h-6 p-0 rounded-full transition-all duration-300
             bg-secondary/90 dark:bg-secondary ring-1 ring-inset ring-border/60
             hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
         >
             {/* Thumb */}
             <span
-                className={`pointer-events-none absolute top-1 left-1 w-6 h-6 rounded-full border border-border z-0
+                className={`pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full border border-border z-0
                 bg-card shadow-[0_2px_6px_rgba(0,0,0,0.08)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.35)]
-                transition-transform duration-300 ease-out will-change-transform ${isDark ? 'translate-x-8' : 'translate-x-0'}`}
+                transition-transform duration-300 ease-out will-change-transform ${isDark ? 'translate-x-6' : 'translate-x-0'}`}
             />
 
             {/* Icons */}
             <span className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 place-items-center">
                 <Sun1
-                    size={18}
+                    size={14}
                     color={isDark ? getIconColor('muted') : getIconColor('primary')}
                     className={`transition-opacity duration-300 ${isDark ? 'opacity-60' : 'opacity-100'}`}
                 />
                 <Moon
-                    size={18}
+                    size={14}
                     color={isDark ? getIconColor('primary') : getIconColor('muted')}
                     className={`transition-opacity duration-300 ${isDark ? 'opacity-100' : 'opacity-60'}`}
                 />

src/pages/guide/ReportBug.tsx

@@ -10,12 +10,12 @@ import { useTheme } from '@/contexts/ThemeContext'
 
 
 // Import images
-import sad1 from '@/assets/images/sad1.png'
+import sad1 from '@/assets/images/sad1.svg'
-import sad2 from '@/assets/images/sad2.png'
+import sad2 from '@/assets/images/sad2.svg'
-import sad3 from '@/assets/images/sad3.png'
+import sad3 from '@/assets/images/sad3.svg'
-import smile from '@/assets/images/smile.png'
+import smile from '@/assets/images/smile.svg'
-import smile2 from '@/assets/images/smile2.png'
+import smile2 from '@/assets/images/smile2.svg'
-import smile3 from '@/assets/images/smile3.png'
+import smile3 from '@/assets/images/smile3.svg'
 import { useGetProfile } from '../profile/hooks/useProfileData'
 
 const ReportBug: React.FC = () => {
@@ -65,12 +65,12 @@ const ReportBug: React.FC = () => {
     }
 
     const feelings = [
-        { id: 'angry', image: sad1, alt: 'ناراضی' },
-        { id: 'crying', image: sad2, alt: 'ناراضی' },
-        { id: 'sad', image: sad3, alt: 'ناراضی' },
         { id: 'neutral', image: smile, alt: 'خنثی' },
         { id: 'smile', image: smile2, alt: 'راضی' },
         { id: 'love', image: smile3, alt: 'راضی' },
+        { id: 'angry', image: sad1, alt: 'ناراضی' },
+        { id: 'crying', image: sad2, alt: 'ناراضی' },
+        { id: 'sad', image: sad3, alt: 'ناراضی' },
     ]
 
     return (
@@ -94,7 +94,7 @@ const ReportBug: React.FC = () => {
                                 <button
                                     type='button'
                                     onClick={() => setFeeling(f.id)}
-
+                                    className={`p-1 rounded-lg transition-all ${feeling === f.id ? 'bg-primary/10' : 'hover:bg-muted/50'}`}
                                 >
                                     <img
                                         src={f.image}
@@ -103,10 +103,10 @@ const ReportBug: React.FC = () => {
                                     />
                                 </button>
                                 {idx === 0 && (
-                                    <div className='text-xs mt-2 text-muted-foreground'>ناراضی</div>
+                                    <div className='text-xs mt-2 text-muted-foreground'>راضی</div>
                                 )}
                                 {idx === feelings.length - 1 && (
-                                    <div className='text-xs mt-2 text-muted-foreground'>راضی</div>
+                                    <div className='text-xs mt-2 text-muted-foreground'>ناراضی</div>
                                 )}
                             </div>
                         ))}