Changed light mode icon because it was misleading

frontend/__tests__/unit/components/ModeToggle.test.tsx

@@ -23,6 +23,23 @@ jest.mock('@heroui/tooltip', () => ({
   Tooltip: ({ children }: React.PropsWithChildren) => <>{children}</>,
 }))
 
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  FontAwesomeIcon: ({ icon, className }: { icon: { iconName?: string }; className?: string }) => (
+    <svg
+      data-icon={icon?.iconName || 'moon'}
+      className={className}
+      data-testid="font-awesome-icon"
+    />
+  ),
+}))
+
+jest.mock('components/icons/Sun', () => ({
+  __esModule: true,
+  default: ({ className }: { className?: string }) => (
+    <svg data-testid="sun-icon" data-icon="sun" className={className} viewBox="0 0 48 48" />
+  ),
+}))
+
 const useThemeMock = useTheme as jest.Mock
 
 describe('ModeToggle Component', () => {

frontend/__tests__/unit/pages/Home.test.tsx

@@ -275,13 +275,18 @@ describe('Home', () => {
       for (const header of headers) {
         expect(screen.getByText(header)).toBeInTheDocument()
       }
-      // Wait for 2 seconds
-      setTimeout(() => {
+    })
+
+    // Wait for animated counters to complete (2 seconds animation)
+    // Note: The "+" is rendered separately from the number, so we check for the number only
+    await waitFor(
+      () => {
         for (const value of Object.values(stats)) {
-          expect(screen.getByText(`${millify(value)}+`)).toBeInTheDocument()
+          expect(screen.getByText(millify(value), { exact: false })).toBeInTheDocument()
         }
-      }, 2000)
-    })
+      },
+      { timeout: 3000 }
+    )
   })
 
   test('renders event details including date range and location', async () => {

frontend/jest.config.ts

@@ -8,6 +8,7 @@ const config: Config = {
     '!src/app/**/layout.tsx',
     '!src/app/api/**',
     '!src/app/board/**',
+    '!src/components/icons/**',
     '!src/hooks/**',
     '!src/instrumentation.ts',
     '!src/instrumentation-client.ts',

frontend/src/components/ModeToggle.tsx

@@ -1,9 +1,11 @@
-import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
+import { faMoon } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Tooltip } from '@heroui/tooltip'
 import { useTheme } from 'next-themes'
 import { useState, useEffect } from 'react'
+import Sun from 'components/icons/Sun'
+
 export default function ModeToggle() {
   const [mounted, setMounted] = useState(false)
   const { theme, setTheme } = useTheme()
@@ -27,11 +29,15 @@ export default function ModeToggle() {
           aria-label={theme === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
         >
           <div className="absolute inset-0 flex items-center justify-center">
-            <FontAwesomeIcon
-              icon={theme === 'dark' ? faSun : faMoon}
-              className="h-5 w-5 transform text-gray-900 transition-all duration-300 hover:rotate-12 dark:text-gray-100"
-              fixedWidth
-            />
+            {theme === 'dark' ? (
+              <Sun variant="regular" className="h-5 w-5 text-white transition-all duration-300" />
+            ) : (
+              <FontAwesomeIcon
+                icon={faMoon}
+                className="h-5 w-5 transform text-white transition-all duration-300 hover:rotate-12"
+                fixedWidth
+              />
+            )}
           </div>
         </Button>
       </Tooltip>

frontend/src/components/SkeletonsBase.tsx

@@ -8,7 +8,7 @@ function userCardRender() {
   return (
     <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {Array.from({ length: cardCount }).map((_, index) => (
-        <UserCardSkeleton key={index} />
+        <UserCardSkeleton key={`user-skeleton-${index}`} />
       ))}
     </div>
   )

frontend/src/components/icons/Sun.tsx

@@ -0,0 +1,25 @@
+interface SunProps {
+  readonly className?: string
+  readonly variant?: 'regular' | 'solid'
+}
+
+export default function Sun({ className, variant = 'regular' }: Readonly<SunProps>) {
+  const paths = {
+    solid:
+      'M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 A 7 7 0 0 0 5 12 A 7 7 0 0 0 12 19 A 7 7 0 0 0 19 12 A 7 7 0 0 0 12 5 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z',
+
+    regular:
+      'M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 C 8.1458514 5 5 8.1458514 5 12 C 5 15.854149 8.1458514 19 12 19 C 15.854149 19 19 15.854149 19 12 C 19 8.1458514 15.854149 5 12 5 z M 12 7 C 14.773268 7 17 9.2267316 17 12 C 17 14.773268 14.773268 17 12 17 C 9.2267316 17 7 14.773268 7 12 C 7 9.2267316 9.2267316 7 12 7 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z',
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={className}
+      fill="currentColor"
+    >
+      <path d={paths[variant]} />
+    </svg>
+  )
+}