Updated the pwa theme color (#5)

* fix: correct AuthProvider import path

* fix: test configuration and unused imports

* refactor: split auth context and provider into separate files

* Updated the pwa theme color

* chore: trigger CI

* chore: trigger ci

src/App.jsx

@@ -1,6 +1,7 @@
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider, SnackbarProvider, Spinner } from "@deriv-com/quill-ui";
-import { AuthProvider, useAuth } from "./hooks/useAuth.jsx";
+import { useAuth } from "./hooks/useAuth.jsx";
+import AuthProvider from "./providers/AuthProvider";
 import Login from "./components/Login";
 import Header from "./components/Header";
 import Dashboard from "./components/Dashboard";

src/components/__tests__/ProtectedRoute.test.jsx

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import ProtectedRoute from '../ProtectedRoute'
-import { AuthContext } from '../../hooks/authContext.jsx'
+import { AuthContext } from '../../contexts/auth'
 
 const mockAuthContext = {
     defaultAccount: null,

src/contexts/auth.jsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AuthContext = createContext(null);

src/hooks/useAuth.jsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useContext } from 'react';
 import useWebSocket from "./useWebSocket";
-import { AuthContext } from './authContext.jsx';
+import { AuthContext } from '../contexts/auth';
 
 export const useAuthState = () => {
     const [isAuthorized, setIsAuthorized] = useState(false);

src/hooks/authContext.jsx → src/providers/AuthProvider.jsx

@@ -1,8 +1,6 @@
-import { createContext } from 'react';
 import PropTypes from 'prop-types';
-import { useAuthState } from './useAuth';
-
-export const AuthContext = createContext(null);
+import { useAuthState } from '../hooks/useAuth';
+import { AuthContext } from '../contexts/auth';
 
 export const AuthProvider = ({ children }) => {
     const auth = useAuthState();
@@ -12,3 +10,5 @@ export const AuthProvider = ({ children }) => {
 AuthProvider.propTypes = {
     children: PropTypes.node.isRequired,
 };
+
+export default AuthProvider;

src/test/setup.ts

@@ -1,11 +1,27 @@
 import '@testing-library/jest-dom'
-import { expect, afterEach } from 'vitest'
+import { expect, afterEach, vi } from 'vitest'
 import { cleanup } from '@testing-library/react'
 import * as matchers from '@testing-library/jest-dom/matchers'
+import React from 'react'
 
 // Extend Vitest's expect method with methods from react-testing-library
 expect.extend(matchers as any)
 
+// Mock @deriv-com/quill-ui components
+vi.mock('@deriv-com/quill-ui', () => {
+  const React = require('react')
+  const Skeleton = {
+    Square: ({ width, height }: { width: string, height: string }) => 
+      React.createElement('div', { style: { width, height } }, null)
+  }
+  return {
+    Spinner: () => null,
+    ThemeProvider: ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children),
+    SnackbarProvider: ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children),
+    Skeleton
+  }
+})
+
 // Cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
   cleanup()

vite.config.js

@@ -23,11 +23,20 @@ export default defineConfig(({ mode }) => {
       environment: 'jsdom',
       setupFiles: ['./src/test/setup.ts'],
       deps: {
-        inline: ['@deriv-com/quill-ui']
+        optimizer: {
+          web: {
+            include: ['@deriv-com/quill-ui']
+          }
+        }
       },
       mockReset: true,
       moduleNameMapper: {
-        '\\.(css|less|sass|scss)$': './src/test/mocks/styleMock.js'
+        '\\.(css|less|sass|scss)$': './src/test/mocks/styleMock.js',
+        '^@deriv-com/quill-ui/.*\\.css$': './src/test/mocks/styleMock.js'
+      },
+      transformMode: {
+        web: [/\.[jt]sx?$/],
+        ssr: [/\.css$/]
       }
     },
     plugins: [
@@ -46,7 +55,7 @@ export default defineConfig(({ mode }) => {
           name: 'Deriv Copy Trading',
           short_name: 'Copy Trading',
           description: 'Copy successful traders and automatically replicate their trading strategies in real-time.',
-          theme_color: '#FF444F',
+          theme_color: '#FFFFFF',
           background_color: '#FFFFFF',
           display: 'standalone',
           start_url: '/copy-trading/',