Merge branch 'master' into docs_#989

Author: amitamrutiya

src/custom/Carousel/style.tsx

@@ -6,6 +6,7 @@ export const CarouselButton = styled('button')(({ theme }) => ({
   transform: 'translateY(-50%)',
   zIndex: '1',
   background: theme.palette.background.paper,
+  color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,
   border: 'none',
   cursor: 'pointer',
   padding: '0.5rem',

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from 'react';
 import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
 import { darkTeal } from '../../theme';
-import { SLIGHT_BLUE } from '../../theme/colors/colors';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
 import {
@@ -152,7 +152,15 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
                 styleProps={appliedStyleProps}
               />
             </Box>
-            <Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />
+            <Box
+              sx={{
+                background:
+                  theme.palette.mode === 'light'
+                    ? lightModalGradient.fotter
+                    : darkModalGradient.fotter,
+                height: '5vh'
+              }}
+            />
           </Box>
         </Drawer>
       </FilterDrawerDiv>

src/custom/CatalogFilterSection/FilterSection.tsx

@@ -62,7 +62,13 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           backgroundColor: styleProps.sectionTitleBackgroundColor
         }}
       >
-        <Typography variant="h6" fontWeight="bold" fontFamily={styleProps.fontFamily}>
+        <Typography
+          sx={{
+            fontSize: '1rem'
+          }}
+          fontWeight="bold"
+          fontFamily={styleProps.fontFamily}
+        >
           {(sectionDisplayName || filterKey).toUpperCase()}
         </Typography>
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}

src/custom/CatalogFilterSection/style.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { Box, Button, ListItemButton } from '../../base';
-import { SLIGHT_BLUE } from '../../theme/colors/colors';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { StyleProps } from './CatalogFilterSidebar';
 
 export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -46,12 +46,12 @@ export const FilterButton = styled(Button)(({ theme }) => ({
   }
 }));
 
-export const FiltersDrawerHeader = styled(Box)(() => ({
+export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '0.5rem 1rem',
-  backgroundColor: SLIGHT_BLUE,
+  background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   height: '10vh'
 }));
 

src/custom/NavigationNavbar/navigationNavbar.tsx

@@ -1,6 +1,6 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { ListItemTextProps, MenuListProps } from '@mui/material';
+import { ListItemTextProps, MenuListProps, useMediaQuery, useTheme } from '@mui/material';
 import React, { MouseEvent, useState } from 'react';
 import { Collapse, Divider, ListItemText, MenuItem } from '../../base';
 import { IconWrapper, MenuItemList, MenuItemSubList, MenuListStyle, SubIconWrapper } from './style';
@@ -13,6 +13,7 @@ type NavigationItem = {
   onClick: () => void;
   subItems?: NavigationItem[];
   addDivider?: boolean;
+  showOnWeb?: boolean;
 };
 
 interface NavigationNavbarProps {
@@ -26,6 +27,8 @@ const NavigationNavbar: React.FC<NavigationNavbarProps> = ({
   MenuListProps = {},
   ListItemTextProps = {}
 }) => {
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
   const [openSectionId, setOpenSectionId] = useState<string | null>(null);
   const toggleSectionOpen = (sectionId: string, event: MouseEvent<SVGSVGElement>) => {
     event.stopPropagation();
@@ -41,6 +44,12 @@ const NavigationNavbar: React.FC<NavigationNavbarProps> = ({
         const permission = item.permission ?? true;
         const addDivider = item.addDivider ?? false;
 
+        const showOnWeb = item.showOnWeb ?? true;
+
+        if (!showOnWeb && isDesktop) {
+          return null;
+        }
+
         return (
           <React.Fragment key={item.id}>
             <MenuItem disabled={!permission} onClick={item.onClick}>

src/custom/PerformersSection/styles.tsx

@@ -90,8 +90,7 @@ export const Title = styled(Typography)(({ theme }) => ({
 }));
 
 export const StyledCard = styled(Card)<StyledCardProps>(({ theme }) => ({
-  width: 'inherit',
-  minWidth: '150px',
+  width: '200px',
   borderRadius: '16px',
   position: 'relative',
   overflow: 'hidden',

src/hooks/useRoomActivity.ts

@@ -19,7 +19,7 @@ interface CollaborationConfigParams {
 }
 
 interface CollaborationConfig {
-  signaling: string[];
+  signalingUrl: string[];
   user: UserProfile;
   authToken: string;
   refreshAuthToken: () => Promise<string>;
@@ -113,7 +113,7 @@ export const getCollaborationConfig = async ({
   };
 
   return {
-    signaling: [getSignalingUrlFromProviderUrl(provider_url)],
+    signalingUrl: [getSignalingUrlFromProviderUrl(provider_url)],
     user: userProfile,
     authToken: accessToken,
     refreshAuthToken: refreshToken,
@@ -143,7 +143,7 @@ const subscribeToRoomActivity = async (
   });
 
   // Create the websocket connection with proper headers
-  const ws = new WebSocket(config.signaling[0], ['auth', config.authToken]);
+  const ws = new WebSocket(config.signalingUrl[0], ['auth', config.authToken]);
   wsRef.current = ws;
 
   ws.addEventListener('open', () => {