minor css changes

Author: harshithpabbati

components/Listeners/SubscriptionsListener.tsx

@@ -3,6 +3,7 @@ import { config } from '@/config';
 import {
   DailyEventObjectParticipant,
   DailyParticipant,
+  DailyParticipantUpdateOptions,
 } from '@daily-co/daily-js';
 import {
   useDaily,
@@ -19,7 +20,7 @@ export function SubscriptionsListener() {
       if (!daily) return;
 
       const updateParticipants: {
-        [key: string]: { setSubscribedTracks: boolean | 'staged' };
+        [key: string]: DailyParticipantUpdateOptions;
       } = {};
 
       events.forEach((event) => {

components/Room/Stage/Participants.tsx

@@ -24,7 +24,11 @@ export function Participants({ participantIds }: Props) {
   if (participantIds.length === 0) {
     return (
       <div className="flex items-center justify-center">
-        <EmptyState icon="people" title="No participants in the waiting list" />
+        <EmptyState
+          className="mt-1"
+          icon="people"
+          title="No participants in the waiting list"
+        />
       </div>
     );
   }
@@ -50,7 +54,6 @@ export function Participants({ participantIds }: Props) {
           >
             <Tile
               sessionId={participantIds[virtualColumn.index]}
-              noVideoTileColor="bg-background"
               showMenu={isOwner}
             />
           </div>

components/Room/Stage/TabHeader.tsx

@@ -11,7 +11,10 @@ interface Props {
 
 export function TabHeader({ name, value, count, active }: Props) {
   return (
-    <TabsTrigger value={value} className="w-20 rounded-xl py-2">
+    <TabsTrigger
+      value={value}
+      className="w-20 py-2 data-[state=active]:bg-muted data-[state=active]:text-foreground"
+    >
       <div className="flex flex-col items-center justify-center gap-2">
         <Badge variant={active ? 'default' : 'outline'}>{count}</Badge>
         {name}

components/Room/Stage/index.tsx

@@ -20,7 +20,7 @@ export function Stage() {
       orientation="vertical"
       value={tab}
       onValueChange={setTab}
-      className="min-h-40 h-40 border-t bg-muted px-2"
+      className="min-h-40 h-40 border-t px-2"
     >
       <div className="h-40 max-h-40 w-full overflow-hidden">
         <div className="flex h-full items-center gap-4">

components/Room/Tile/NoVideoTile.tsx

@@ -1,12 +1,7 @@
 import { useMemo } from 'react';
 import { useParticipantProperty } from '@daily-co/daily-react';
 
-export function NoVideoTile({
-  sessionId,
-}: {
-  sessionId: string;
-  bgColor?: string;
-}) {
+export function NoVideoTile({ sessionId }: { sessionId: string }) {
   const [userName, isLocal, participantType] = useParticipantProperty(
     sessionId,
     ['user_name', 'local', 'participantType'],

components/Room/Tile/index.tsx

@@ -15,7 +15,6 @@ const TileMenu = dynamic(() =>
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   sessionId: string;
-  noVideoTileColor?: string;
   showMenu?: boolean;
   aspectRatio?: number;
   videoFit?: 'contain' | 'cover';
@@ -24,7 +23,6 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 function TileComponent({
   sessionId,
   className,
-  noVideoTileColor = 'bg-muted',
   showMenu = false,
   aspectRatio = DESKTOP_ASPECT_RATIO,
   videoFit = 'contain',
@@ -39,11 +37,11 @@ function TileComponent({
 
   return (
     <AspectRatio
-      className={cn('group relative rounded-md', noVideoTileColor, className)}
+      className={cn('group relative rounded-md', className)}
       ratio={aspectRatio}
     >
       {state === 'off' ? (
-        <NoVideoTile sessionId={sessionId} bgColor={noVideoTileColor} />
+        <NoVideoTile sessionId={sessionId} />
       ) : (
         <>
           <DailyVideo