Adding custom palette color and fixing lobby example theming (#169)

* Adding custom palette color and fixing lobby example theming

* Change files

* Removing custom palette logic and using standard color for lobby tint based on new figma designs

change/@azure-communication-ui-0262dd3d-1a1f-4a10-bf74-b17c43118f2c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adding custom palette color and fixing lobby example theming",
+  "packageName": "@azure/communication-ui",
+  "email": "anjulgarg@live.com",
+  "dependentChangeType": "patch"
+}

packages/storybook/stories/Examples/Lobby/snippets/Lobby.snippet.tsx

@@ -1,53 +1,51 @@
-import { FluentThemeProvider, StreamMedia, VideoTile } from '@azure/communication-ui';
-import { getTheme } from '@fluentui/react';
+import { StreamMedia, VideoTile } from '@azure/communication-ui';
+import { useTheme } from '@fluentui/react-theme-provider';
 import React from 'react';
 import { renderVideoStream } from '../../../utils';
 import { LobbyCallControlBar } from './LobbyControlBar.snippet';
 
-const theme = getTheme();
-const palette = theme.palette;
-
 export interface LobbyProps {
   isVideoReady: boolean;
   callStateText: string;
 }
 
 export const Lobby = (props: LobbyProps): JSX.Element => {
+  const theme = useTheme();
+  const palette = theme.palette;
+
   const videoTileStyles = {
     root: { height: '100%', width: '100%' },
     overlayContainer: {}
   };
 
   return (
-    <FluentThemeProvider>
-      <VideoTile
-        styles={videoTileStyles}
-        invertVideo={true}
-        isVideoReady={props.isVideoReady}
-        videoProvider={
-          // Replace with your own video provider.
-          <StreamMedia videoStreamElement={renderVideoStream()} />
-        }
-        placeholderProvider={<></>}
-      >
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            background: props.isVideoReady ? palette.themeDarker : palette.neutralLight,
-            opacity: 0.8
-          }}
-        />
+    <VideoTile
+      styles={videoTileStyles}
+      invertVideo={true}
+      isVideoReady={props.isVideoReady}
+      videoProvider={
+        // Replace with your own video provider.
+        <StreamMedia videoStreamElement={renderVideoStream()} />
+      }
+      placeholderProvider={<></>}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          background: props.isVideoReady ? '#201f1e' : palette.neutralLight,
+          opacity: 0.75
+        }}
+      />
 
-        <div style={{ textAlign: 'center', margin: 'auto', zIndex: 0 }}>
-          <p style={{ fontSize: '1.75rem', color: props.isVideoReady ? palette.neutralLight : palette.neutralPrimary }}>
-            ☕ <br /> {props.callStateText}
-          </p>
-        </div>
+      <div style={{ textAlign: 'center', margin: 'auto', zIndex: 0 }}>
+        <p style={{ fontSize: '1.75rem', color: props.isVideoReady ? 'white' : palette.neutralPrimary }}>
+          ☕ <br /> {props.callStateText}
+        </p>
+      </div>
 
-        <LobbyCallControlBar />
-      </VideoTile>
-    </FluentThemeProvider>
+      <LobbyCallControlBar />
+    </VideoTile>
   );
 };

packages/storybook/stories/Examples/Lobby/snippets/LobbyControlBar.snippet.tsx

@@ -1,5 +1,6 @@
 // LobbyControlBar.example.tsx
 
+import React from 'react';
 import {
   ControlBar,
   MicrophoneButton,
@@ -8,13 +9,14 @@ import {
   labeledVideoButtonProps
 } from '@azure/communication-ui';
 import { DefaultButton } from '@fluentui/react';
-import React from 'react';
+import { useTheme } from '@fluentui/react-theme-provider';
 
 export const LobbyCallControlBar = (): JSX.Element => {
+  const theme = useTheme();
   return (
     <ControlBar
       layout="dockedBottom"
-      styles={{ root: { background: 'white', minHeight: '4.25rem', alignItems: 'center' } }}
+      styles={{ root: { background: theme.palette.white, minHeight: '4.25rem', alignItems: 'center' } }}
     >
       <DefaultButton {...labeledVideoButtonProps} checked={true} />
       <MicrophoneButton showLabel={true} checked={true} />