fix: actions buttons bg for streaming, transparent color

packages/roomkit-react/src/Button/Button.tsx

@@ -20,22 +20,22 @@ const getOutlinedVariants = (
   textDisabled: string,
 ) => {
   return {
-    bg: '$transparent',
+    bg: 'transparent',
     border: `solid $space$px $colors${base}`,
     c: text,
     '&[disabled]': {
       c: textDisabled,
-      bg: '$transparent',
+      bg: 'transparent',
       border: `solid $space$px $colors${disabled}`,
       cursor: 'not-allowed',
     },
     '&:not([disabled]):hover': {
       border: `solid $space$px $colors${hover}`,
-      bg: '$transparent',
+      bg: 'transparent',
     },
     '&:not([disabled]):active': {
       border: `solid $space$px $colors${active}`,
-      bg: '$transparent',
+      bg: 'transparent',
     },
     '&:not([disabled]):focus-visible': {
       boxShadow: `0 0 0 3px $colors${base}`,

packages/roomkit-react/src/Fieldset/Fieldset.tsx

@@ -5,7 +5,7 @@ const StyledFieldset = styled('fieldset', {
   alignItems: 'center',
   justifyContent: 'space-between',
   border: 'none',
-  backgroundColor: '$transparent',
+  backgroundColor: 'transparent',
 });
 
 export const Fieldset = StyledFieldset;

packages/roomkit-react/src/Input/PasswordInput.stories.tsx

@@ -25,7 +25,7 @@ const Template: ComponentStory<typeof PasswordInput.Root> = args => {
           showPassword={showPassword}
           onChange={e => setText(e.target.value)}
         />
-        <PasswordInput.Icons ref={ref} css={{ bg: '$transparent' }}>
+        <PasswordInput.Icons ref={ref} css={{ bg: 'transparent' }}>
           <PasswordInput.ShowIcon
             showPassword={showPassword}
             onClick={() => {

packages/roomkit-react/src/Pagination/StyledPagination.stories.tsx

@@ -41,7 +41,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
         disabled={disableLeft}
         onClick={prevPage}
         type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
       >
         <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>
@@ -54,7 +54,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
         disabled={disableRight}
         onClick={nextPage}
         type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
       >
         <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>

packages/roomkit-react/src/Prebuilt/IconButton.tsx

@@ -11,7 +11,7 @@ const IconButton = styled(BaseIconButton, {
     active: {
       true: {
         color: '$on_surface_high',
-        backgroundColor: '$transparent',
+        backgroundColor: 'transparent',
       },
       false: {
         border: '1px solid transparent',

packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -206,6 +206,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
               maxHeight: '$24',
               position: 'relative',
+              minHeight: '$16',
+              py: '$6',
               pl: '$8',
               flexGrow: '1',
               r: '$1',
@@ -275,7 +277,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 }}
                 gap="1"
               >
-                {noAVPermissions ? <RaiseHand /> : null}
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
               <Box css={{ position: 'absolute', bottom: '$16', right: 0 }}>

packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx

@@ -71,7 +71,11 @@ export const EmojiReaction = () => {
   ) : (
     <Dropdown.Root open={open} onOpenChange={setOpen}>
       <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
-        <IconButton css={isMobile || isLandscape ? { bg: 'transparent', r: '$round' } : {}}>
+        <IconButton
+          css={
+            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}
+          }
+        >
           <Tooltip title="Emoji reaction">
             <EmojiIcon />
           </Tooltip>

packages/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -24,7 +24,7 @@ const IconSection = styled(IconButton, {
   h: '$14',
   p: '$4',
   r: '$1',
-  bg: '$transparent',
+  bg: 'transparent',
   borderTopRightRadius: 0,
   borderColor: '$border_bright',
   borderBottomRightRadius: 0,

packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -54,6 +54,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
@@ -99,6 +100,8 @@ export const MwebOptions = ({
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMobileHLSStream = useMobileHLSStream();
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -121,7 +124,7 @@ export const MwebOptions = ({
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
         <Tooltip title="More options">
           <Sheet.Trigger asChild data-testid="more_settings_btn">
-            <IconButton css={{ '@md': { bg: screenType === 'hls_live_streaming' ? '$surface_default' : '' } }}>
+            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
               <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>

packages/roomkit-react/src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx

@@ -29,7 +29,7 @@ export const OptionInputWithDelete = ({
         key={index}
         onChange={event => handleOptionTextChange(index, event.target.value)}
       />
-      <IconButton onClick={() => removeOption(index)} css={{ bg: '$transparent', border: 'none' }}>
+      <IconButton onClick={() => removeOption(index)} css={{ bg: 'transparent', border: 'none' }}>
         <TrashIcon />
       </IconButton>
     </>

packages/roomkit-react/src/Prebuilt/components/RaiseHand.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { HandIcon, HandRaiseSlashedIcon } from '@100mslive/react-icons';
+import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
 // @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
-export const RaiseHand = () => {
+export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton data-testid="hand_raise_btn" active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
+      <IconButton
+        data-testid="hand_raise_btn"
+        css={css}
+        active={!isHandRaised}
+        onClick={async () => await toggleHandRaise()}
+      >
         {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
       </IconButton>
     </Tooltip>

packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -61,7 +61,7 @@ export function ShareScreenOptions() {
               pt: '$10',
               pb: '$6',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}
@@ -78,7 +78,7 @@ export function ShareScreenOptions() {
               pt: '$6',
               pb: '$10',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}

packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -36,7 +36,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
                 w: '100%',
                 '&:focus': {
                   boxShadow: '0 0 0 1px $colors$primary_default',
-                  border: '1px solid $transparent',
+                  border: '1px solid transparent',
                 },
                 mb: 0,
                 mt: '$6',

packages/roomkit-react/src/Prebuilt/primitives/DialogContent.jsx

@@ -216,7 +216,7 @@ export const DialogInputFile = ({ value, onChange, placeholder, disabled, type,
           '&:hover': {
             border: 'none',
             background: 'none',
-            bg: '$transparent !important',
+            bg: 'transparent !important',
           },
         }}
       >