Vonage · OscarFava · Oct 31, 2025 · Nov 3, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
@@ -119,15 +119,23 @@ jobs:
       - name: Auto-commit updated screenshots
         if: always() && steps.check-update-screenshots.outputs.result == 'true'
         run: |
-          echo "Committing screenshots to "$BRANCH_NAME""
-          FILES_CHANGED=$(git status --porcelain | awk '{print $2}')
-          for file in $FILES_CHANGED; do
-            CONTENT=$(base64 -w 0 "$file")
-            SHA=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "https://api.github.com/repos/$REPO_NAME/contents/$file?ref=$BRANCH_NAME" | jq -r .sha)
-            if [ "$SHA" == "null" ]; then
-              SHA=""
-            fi
-            curl -s -X PUT -H "Authorization: token $GITHUB_TOKEN" \
-              -d "{\"message\":\"Commit screenshot file: $file\", \"content\":\"$CONTENT\", \"branch\":\"$BRANCH_NAME\", \"sha\":\"$SHA\"}" \
-              "https://api.github.com/repos/$REPO_NAME/contents/$file"
-          done
+          echo "Committing screenshots to $BRANCH_NAME"
+
+          # Configure git user for the commit
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+
+          # Get changed snapshot PNGs under integration-tests/...-snapshots/
+          FILES_CHANGED=$(git status --porcelain | awk '$2 ~ /^integration-tests\/tests\/visualComparisons\.spec\.ts-snapshots\/.*\.png$/ {print $2}')
+
+          if [ -z "$FILES_CHANGED" ]; then
+            echo "No snapshot files changed, nothing to commit."
+            exit 0
+          fi
+
+          echo "Files to commit:"
+          echo "$FILES_CHANGED"
+
+          git add $FILES_CHANGED
+          git commit -m "Update visual comparison screenshots"
+          git push origin HEAD:$BRANCH_NAME
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,11 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/images/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Vonage Video React Reference App</title>
   </head>
   <body>
-    <div class="bg-darkGray-100 absolute" id="root"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,7 +1,8 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import './css/App.css';
 import './css/index.css';
-import { CssBaseline, ThemeProvider } from '@mui/material';
+import { CssBaseline } from '@mui/material';
+import { CustomThemeProvider } from '@Context/Theme/themeContext';
 import Room from './pages/MeetingRoom/index';
 import GoodBye from './pages/GoodBye/index';
 import WaitingRoom from './pages/WaitingRoom';
@@ -12,11 +13,10 @@ import { PublisherProvider } from './Context/PublisherProvider';
 import RedirectToWaitingRoom from './components/RedirectToWaitingRoom';
 import UnsupportedBrowserPage from './pages/UnsupportedBrowserPage';
 import RoomContext from './Context/RoomContext';
-import customTheme from './utils/customTheme/customTheme';
 
 const App = () => {
   return (
-    <ThemeProvider theme={customTheme}>
+    <CustomThemeProvider>
       <CssBaseline />
       <Router>
         <Routes>
@@ -47,7 +47,7 @@ const App = () => {
           <Route path="/unsupported-browser" element={<UnsupportedBrowserPage />} />
         </Routes>
       </Router>
-    </ThemeProvider>
+    </CustomThemeProvider>
   );
 };
 

diff --git a/frontend/src/Context/BackgroundEffectsDialog/BackgroundEffectsDialogContext.tsx b/frontend/src/Context/BackgroundEffectsDialog/BackgroundEffectsDialogContext.tsx
@@ -0,0 +1,62 @@
+import React, { createContext, useState, useContext, ReactNode, useMemo } from 'react';
+
+interface BackgroundEffectsDialogContextType {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+}
+
+const BackgroundEffectsDialogContext = createContext<
+  BackgroundEffectsDialogContextType | undefined
+>(undefined);
+
+interface BackgroundEffectsDialogProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * BackgroundEffectsDialogProvider
+ *
+ * Provides context for managing the BackgroundEffectsDialog state across components.
+ * This allows any child component to open or close the background effects dialog.
+ * @param {BackgroundEffectsDialogProviderProps} props - The props for the component.
+ * @property {ReactNode} children - The child components.
+ * @returns {React.ReactElement} - The BackgroundEffectsDialogProvider component
+ */
+export const BackgroundEffectsDialogProvider: React.FC<BackgroundEffectsDialogProviderProps> = ({
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const value = useMemo(
+    () => ({
+      isOpen,
+      open: () => setIsOpen(true),
+      close: () => setIsOpen(false),
+    }),
+    [isOpen]
+  );
+
+  return (
+    <BackgroundEffectsDialogContext.Provider value={value}>
+      {children}
+    </BackgroundEffectsDialogContext.Provider>
+  );
+};
+
+/**
+ * useBackgroundEffectsDialog
+ *
+ * Custom hook to access the BackgroundEffectsDialog context.
+ * @returns {BackgroundEffectsDialogContextType} The context value with isOpen, open, and close functions.
+ * @throws {Error} If used outside of BackgroundEffectsDialogProvider.
+ */
+export const useBackgroundEffectsDialog = (): BackgroundEffectsDialogContextType => {
+  const context = useContext(BackgroundEffectsDialogContext);
+  if (!context) {
+    throw new Error(
+      'useBackgroundEffectsDialog must be used within a BackgroundEffectsDialogProvider'
+    );
+  }
+  return context;
+};
diff --git a/frontend/src/Context/BackgroundEffectsDialog/index.ts b/frontend/src/Context/BackgroundEffectsDialog/index.ts
@@ -0,0 +1,4 @@
+export {
+  BackgroundEffectsDialogProvider,
+  useBackgroundEffectsDialog,
+} from './BackgroundEffectsDialogContext';
diff --git a/frontend/src/Context/Theme/helpers/getMuiCustomTheme.spec.ts b/frontend/src/Context/Theme/helpers/getMuiCustomTheme.spec.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import getMuiCustomTheme from './getMuiCustomTheme';
+import getTokensByMode from './getTokensByMode';
+
+const customTheme = getMuiCustomTheme({
+  tokens: getTokensByMode('light'),
+});
+
+describe('customTheme', () => {
+  it('should have palette defined', () => {
+    expect(customTheme.palette).toBeDefined();
+  });
+
+  it('should have primary color defined', () => {
+    expect(customTheme.palette.primary.main).toBeDefined();
+    expect(typeof customTheme.palette.primary.main).toBe('string');
+  });
+
+  it('should have shape with borderRadius as number', () => {
+    expect(customTheme.shape).toBeDefined();
+    expect(typeof customTheme.shape.borderRadius).toBe('number');
+  });
+
+  it('should have typography variants defined', () => {
+    expect(customTheme.typography.h1).toBeDefined();
+    expect(customTheme.typography.h2).toBeDefined();
+    expect(customTheme.typography.body1).toBeDefined();
+    expect(customTheme.typography.body2).toBeDefined();
+  });
+
+  it('should have components with styleOverrides', () => {
+    expect(customTheme.components).toBeDefined();
+    expect(customTheme.components?.MuiButton).toBeDefined();
+    expect(customTheme.components?.MuiButton?.styleOverrides).toBeDefined();
+  });
+
+  it('should have custom palette colors', () => {
+    const { palette } = customTheme;
+    expect(palette.tertiary).toBeDefined();
+    expect(palette.hover).toBeDefined();
+    expect(palette.disabled).toBeDefined();
+  });
+
+  it('should have text colors defined', () => {
+    const { text } = customTheme.palette;
+    expect(text.primary).toBeDefined();
+    expect(text.secondary).toBeDefined();
+    expect(text.tertiary).toBeDefined();
+    expect(text.main).toBeDefined();
+  });
+});