@100mslive/roomkit-react 0.2.1 → 0.2.2-alpha.0

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,14 +1,8 @@
 // @ts-check
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CrossCircleIcon,
-} from '@100mslive/react-icons';
-import { Box, Button, Flex, IconButton, Text } from '../../../../';
+import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
+import { Box, Button, Flex, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
 import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
 import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
@@ -27,9 +21,7 @@ export const QuestionCard = ({
   options = [],
   answer,
   setCurrentIndex,
-  skippable = false,
   responses = [],
-  isTimed = false,
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
@@ -37,6 +29,7 @@ export const QuestionCard = ({
   const localPeerResponse = responses?.find(
     response => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId,
   );
+
   const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const roleCanViewResponse =
@@ -48,27 +41,13 @@ export const QuestionCard = ({
 
   const isLive = pollState === 'started';
   const canRespond = isLive && !localPeerResponse;
-
+  const startTime = useRef(Date.now());
   const isCorrectAnswer = checkCorrectAnswer(answer, localPeerResponse, type);
 
-  const prev = index !== 1;
-  const next = index !== totalQuestions && (skippable || localPeerResponse);
-
-  const moveNext = useCallback(() => {
-    setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
-  }, [setCurrentIndex, totalQuestions]);
-
-  const movePrev = () => {
-    setCurrentIndex(curr => Math.max(1, curr - 1));
-  };
-
-  // const [textAnswer, setTextAnswer] = useState('');
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
   const [showOptions, setShowOptions] = useState(true);
 
-  // const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
-
   const respondedToQuiz = isQuiz && localPeerResponse && !localPeerResponse.skipped;
 
   const isValidVote = useMemo(() => {
@@ -83,24 +62,31 @@ export const QuestionCard = ({
     if (!isValidVote) {
       return;
     }
+
     await actions.interactivityCenter.addResponsesToPoll(pollID, [
       {
         questionIndex: index,
         option: singleOptionAnswer,
         options: Array.from(multipleOptionAnswer),
+        duration: Date.now() - startTime.current,
       },
     ]);
-  }, [actions, index, pollID, isValidVote, singleOptionAnswer, multipleOptionAnswer]);
+    startTime.current = Date.now();
 
-  const handleSkip = useCallback(async () => {
-    await actions.interactivityCenter.addResponsesToPoll(pollID, [
-      {
-        questionIndex: index,
-        skipped: true,
-      },
-    ]);
-    moveNext();
-  }, [actions, index, pollID, moveNext]);
+    if (isQuiz && index !== totalQuestions) {
+      setSingleOptionAnswer(undefined);
+      setMultipleOptionAnswer(new Set());
+    }
+  }, [
+    isValidVote,
+    actions.interactivityCenter,
+    pollID,
+    index,
+    singleOptionAnswer,
+    multipleOptionAnswer,
+    totalQuestions,
+    isQuiz,
+  ]);
 
   return (
     <Box
@@ -135,39 +121,6 @@ export const QuestionCard = ({
           {respondedToQuiz && !isCorrectAnswer ? <CrossCircleIcon height={20} width={20} /> : null}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
-
-        {isTimed ? (
-          <Flex align="center" css={{ gap: '$4' }}>
-            <IconButton
-              disabled={!prev}
-              onClick={movePrev}
-              css={
-                prev
-                  ? { color: '$on_surface_high', cursor: 'pointer' }
-                  : {
-                      color: '$on_surface_low',
-                      cursor: 'not-allowed',
-                    }
-              }
-            >
-              <ChevronLeftIcon height={16} width={16} />
-            </IconButton>
-            <IconButton
-              disabled={!next}
-              onClick={moveNext}
-              css={
-                next
-                  ? { color: '$on_surface_high', cursor: 'pointer' }
-                  : {
-                      color: '$on_surface_low',
-                      cursor: 'not-allowed',
-                    }
-              }
-            >
-              <ChevronRightIcon height={16} width={16} />
-            </IconButton>
-          </Flex>
-        ) : null}
       </Flex>
 
       <Flex justify="between" css={{ my: '$md' }}>
@@ -185,10 +138,10 @@ export const QuestionCard = ({
       <Box css={{ maxHeight: showOptions ? '$80' : '0', transition: 'max-height 0.3s ease', overflowY: 'hidden' }}>
         {type === QUESTION_TYPE.SINGLE_CHOICE ? (
           <SingleChoiceOptions
+            key={index}
             questionIndex={index}
             isQuiz={isQuiz}
             canRespond={canRespond}
-            response={localPeerResponse}
             correctOptionIndex={answer?.option}
             options={options}
             setAnswer={setSingleOptionAnswer}
@@ -196,14 +149,15 @@ export const QuestionCard = ({
             showVoteCount={showVoteCount}
             localPeerResponse={localPeerResponse}
             isStopped={pollState === 'stopped'}
+            answer={singleOptionAnswer}
           />
         ) : null}
+
         {type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
           <MultipleChoiceOptions
             questionIndex={index}
             isQuiz={isQuiz}
             canRespond={canRespond}
-            response={localPeerResponse}
             correctOptionIndexes={answer?.options}
             options={options}
             selectedOptions={multipleOptionAnswer}
@@ -214,14 +168,16 @@ export const QuestionCard = ({
             isStopped={pollState === 'stopped'}
           />
         ) : null}
+
         {isLive && (
           <QuestionActions
             isValidVote={isValidVote}
-            skippable={skippable}
-            onSkip={handleSkip}
             onVote={handleVote}
             response={localPeerResponse}
             isQuiz={isQuiz}
+            incrementIndex={() => {
+              setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
+            }}
           />
         )}
       </Box>
@@ -229,15 +185,9 @@ export const QuestionCard = ({
   );
 };
 
-const QuestionActions = ({ isValidVote, skippable, response, isQuiz, onVote, onSkip }) => {
+const QuestionActions = ({ isValidVote, response, isQuiz, onVote, incrementIndex }) => {
   return (
     <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
-      {skippable && !response ? (
-        <Button variant="standard" onClick={onSkip} css={{ p: '$xs $10', fontWeight: '$semiBold' }}>
-          Skip
-        </Button>
-      ) : null}
-
       {response ? (
         <Text css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
           {response.skipped ? 'Skipped' : null}
@@ -245,7 +195,14 @@ const QuestionActions = ({ isValidVote, skippable, response, isQuiz, onVote, onS
           {!isQuiz && !response.skipped ? 'Voted' : null}
         </Text>
       ) : (
-        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote} onClick={onVote}>
+        <Button
+          css={{ p: '$xs $10', fontWeight: '$semiBold' }}
+          disabled={!isValidVote}
+          onClick={() => {
+            onVote();
+            incrementIndex();
+          }}
+        >
           {isQuiz ? 'Answer' : 'Vote'}
         </Button>
       )}

package/src/Prebuilt/components/Polls/Voting/StandardVoting.tsx

@@ -28,7 +28,6 @@ export const StandardView = ({ poll }: { poll: HMSPoll }) => {
           result={question.result}
           totalQuestions={poll.questions?.length || 0}
           options={question.options}
-          skippable={question.skippable}
           responses={question.responses}
           answer={question.answer}
           setCurrentIndex={() => {

package/src/Prebuilt/components/Polls/Voting/TimedVoting.tsx

@@ -4,9 +4,10 @@ import { HMSPoll } from '@100mslive/react-sdk';
 import { QuestionCard } from './QuestionCard';
 
 export const TimedView = ({ poll }: { poll: HMSPoll }) => {
-  // backend question index starts at 1
+  // Backend question index starts at 1
   const [currentIndex, setCurrentIndex] = useState(1);
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
+
   if (!activeQuestion) {
     return null;
   }
@@ -23,12 +24,10 @@ export const TimedView = ({ poll }: { poll: HMSPoll }) => {
       result={activeQuestion?.result}
       totalQuestions={poll.questions?.length || 0}
       options={activeQuestion.options}
-      skippable={activeQuestion.skippable || false}
       responses={activeQuestion.responses}
       answer={activeQuestion.answer}
       setCurrentIndex={setCurrentIndex}
       rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
-      isTimed
     />
   );
 };

package/src/Prebuilt/components/Polls/Voting/Voting.tsx

@@ -23,6 +23,8 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));
   const isLocalPeerCreator = useHMSStore(selectLocalPeerID) === poll?.createdBy;
   const { setPollView } = usePollViewState();
+  // Sets view - linear or vertical, toggles timer indicator
+  const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
 
   if (!poll) {
     return null;
@@ -30,8 +32,6 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
 
   const canViewLeaderboard = poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous;
 
-  // Sets view - linear or vertical, toggles timer indicator
-  const isTimed = (poll.duration || 0) > 0;
   const isLive = poll.state === 'started';
 
   return (
@@ -74,7 +74,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
           </Text>
         ) : null}
 
-        {isTimed ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
+        {showSingleView ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
 
         {poll.state === 'started' && isLocalPeerCreator && (
           <Button

package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -10,7 +10,6 @@ export const MultipleChoiceOptions = ({
   questionIndex,
   options,
   canRespond,
-  response,
   totalResponses,
   selectedOptions,
   setSelectedOptions,
@@ -39,7 +38,7 @@ export const MultipleChoiceOptions = ({
               <Checkbox.Root
                 id={`${questionIndex}-${option.index}`}
                 disabled={!canRespond}
-                checked={response?.options?.includes(option.index)}
+                checked={localPeerResponse?.options?.includes(option.index)}
                 onCheckedChange={checked => handleCheckedChange(checked, option.index)}
                 css={{
                   cursor: canRespond ? 'pointer' : 'not-allowed',

package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx

@@ -9,7 +9,6 @@ import { VoteProgress } from './VoteProgress';
 export const SingleChoiceOptions = ({
   questionIndex,
   options,
-  response,
   canRespond,
   setAnswer,
   totalResponses,
@@ -18,9 +17,10 @@ export const SingleChoiceOptions = ({
   isStopped,
   isQuiz,
   localPeerResponse,
+  answer,
 }) => {
   return (
-    <RadioGroup.Root value={response?.option} onValueChange={value => setAnswer(value)}>
+    <RadioGroup.Root value={answer || null} onValueChange={value => setAnswer(value)}>
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map(option => {
           return (
@@ -65,8 +65,10 @@ export const SingleChoiceOptions = ({
 
               <Flex direction="column" css={{ flexGrow: '1' }}>
                 <Flex css={{ w: '100%' }}>
-                  <Text css={{ display: 'flex', flexGrow: '1' }}>
-                    <Label htmlFor={`${questionIndex}-${option.index}`}>{option.text}</Label>
+                  <Text css={{ display: 'flex', flexGrow: '1', color: '$on_surface_high' }}>
+                    <Label style={{ color: 'inherit' }} htmlFor={`${questionIndex}-${option.index}`}>
+                      {option.text}
+                    </Label>
                   </Text>
                   {showVoteCount && <VoteCount voteCount={option.voteCount} />}
                 </Flex>

package/src/Prebuilt/components/Polls/common/StatusIndicator.tsx

@@ -15,7 +15,7 @@ export const StatusIndicator = ({ isLive }: { isLive: boolean }) => {
           variant="caption"
           css={{
             fontWeight: '$semiBold',
-            color: '$on_surface_high',
+            color: '$on_primary_high',
           }}
         >
           {isLive ? 'LIVE' : 'ENDED'}

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -160,20 +160,7 @@ const PreviewJoin = ({
             <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />
           </Flex>
         </Flex>
-        {toggleVideo ? (
-          <Flex
-            align="center"
-            justify="center"
-            css={{
-              mt: '$14',
-              '@md': { mt: 0 },
-              '@sm': { width: '100%' },
-              flexDirection: 'column',
-            }}
-          >
-            <PreviewTile name={name} error={previewError} />
-          </Flex>
-        ) : null}
+        {toggleVideo ? <PreviewTile name={name} error={previewError} /> : null}
         <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
           <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
           <PreviewForm
@@ -225,9 +212,12 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
         bg: '$surface_default',
         aspectRatio,
         height: 'min(360px, 70vh)',
+        width: 'auto',
         maxWidth: '640px',
         overflow: 'clip',
+        mt: '$14',
         '@md': {
+          mt: 0,
           width: 'min(220px, 70vw)',
           maxWidth: '100%',
           my: '$4',

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -10,6 +10,7 @@ export const RequestPrompt = ({
   body,
   actionText = 'Accept',
   onAction,
+  disableActions = false,
 }: {
   open?: boolean;
   onOpenChange: (value: boolean) => void;
@@ -17,6 +18,7 @@ export const RequestPrompt = ({
   body: React.ReactNode;
   actionText?: string;
   onAction: () => void;
+  disableActions?: boolean;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
 
@@ -26,7 +28,7 @@ export const RequestPrompt = ({
         <Sheet.Content css={{ py: '$8' }}>
           <Text css={{ fontWeight: '$semiBold', c: '$on_surface_high', '@md': { px: '$8' } }}>{title}</Text>
           {body}
-          <RequestActions actionText={actionText} onAction={onAction} />
+          <RequestActions actionText={actionText} onAction={onAction} disabled={disableActions} />
         </Sheet.Content>
       </Sheet.Root>
     );
@@ -40,24 +42,32 @@ export const RequestPrompt = ({
             <Text variant="h6">{title}</Text>
           </Dialog.Title>
           <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
-          <RequestActions actionText={actionText} onAction={onAction} />
+          <RequestActions actionText={actionText} onAction={onAction} disabled={disableActions} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   );
 };
 
-const RequestActions = ({ onAction, actionText }: { actionText?: string; onAction: () => void }) => (
+const RequestActions = ({
+  onAction,
+  actionText,
+  disabled = false,
+}: {
+  actionText?: string;
+  onAction: () => void;
+  disabled?: boolean;
+}) => (
   <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
     <Box css={{ width: '50%' }}>
       <Dialog.Close css={{ width: '100%' }}>
-        <Button variant="standard" outlined css={{ width: '100%' }}>
+        <Button variant="standard" outlined css={{ width: '100%' }} disabled={disabled}>
           Decline
         </Button>
       </Dialog.Close>
     </Box>
     <Box css={{ width: '50%' }}>
-      <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+      <Button variant="primary" css={{ width: '100%' }} onClick={onAction} disabled={disabled}>
         {actionText}
       </Button>
     </Box>

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import {
+  selectIsInPreview,
   selectLocalPeerName,
   selectLocalPeerRoleName,
   selectRoleChangeRequest,
@@ -20,6 +21,7 @@ import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 export const RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions();
   const { updateMetaData } = useMyMetadata();
+  const isPreview = useHMSStore(selectIsInPreview);
   const currentRole = useHMSStore(selectLocalPeerRoleName);
   const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
   const name = useHMSStore(selectLocalPeerName);
@@ -87,6 +89,7 @@ export const RoleChangeRequestModal = () => {
         await hmsActions.lowerLocalPeerHand();
       }}
       actionText="Accept"
+      disableActions={!isPreview}
     />
   );
 };

package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx

@@ -19,8 +19,18 @@ export class VBPlugin {
     if (this.effectsPlugin) {
       return this.effectsPlugin?.getBackground();
     } else {
+      const background = this.hmsPlugin?.getBackground();
       // @ts-ignore
-      return this.hmsPlugin?.background?.src || this.hmsPlugin?.background;
+      return background?.src || background;
+    }
+  };
+
+  getBlurAmount = () => {
+    if (this.effectsPlugin) {
+      return this.effectsPlugin.getBlurAmount();
+    } else {
+      // Treating HMS VB intensity as a fixed value
+      return this.hmsPlugin?.getBackground() === HMSVirtualBackgroundTypes.BLUR ? 1 : 0;
     }
   };
 

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -14,7 +14,7 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { BlurPersonHighIcon, CloseIcon, CrossCircleIcon } from '@100mslive/react-icons';
-import { Box, Flex, Video } from '../../../index';
+import { Box, Flex, Slider, Video } from '../../../index';
 import { Text } from '../../../Text';
 import { VBCollection } from './VBCollection';
 import { VBHandler } from './VBHandler';
@@ -36,6 +36,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
   const track = useHMSStore(trackSelector);
+  const [blurAmount, setBlurAmount] = useState(VBHandler.getBlurAmount() || 0.5);
   const roomState = useHMSStore(selectRoomState);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
@@ -127,7 +128,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               icon: <BlurPersonHighIcon style={iconDims} />,
               value: HMSVirtualBackgroundTypes.BLUR,
               onClick: async () => {
-                await VBHandler?.setBlur(0.5);
+                await VBHandler?.setBlur(blurAmount);
                 setActiveBackground(HMSVirtualBackgroundTypes.BLUR);
               },
             },
@@ -135,6 +136,19 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
           activeBackground={activeBackground}
         />
 
+        {activeBackground === HMSVirtualBackgroundTypes.BLUR ? (
+          <Slider
+            value={[blurAmount]}
+            onValueChange={async e => {
+              setBlurAmount(e[0]);
+              await VBHandler.setBlur(e[0]);
+            }}
+            step={0.1}
+            min={0.1}
+            max={1}
+          />
+        ) : null}
+
         <VBCollection
           title="Backgrounds"
           options={mediaList.map(mediaURL => ({

package/src/Prebuilt/layouts/HLSView.jsx

@@ -3,11 +3,13 @@ import { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import screenfull from 'screenfull';
 import {
+  HMSNotificationTypes,
   selectAppData,
   selectHLSState,
   selectPeerNameByID,
   selectPollByID,
   useHMSActions,
+  useHMSNotifications,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
@@ -30,12 +32,14 @@ import { usePollViewToggle } from '../components/AppData/useSidepane';
 import { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';
 
 let hlsPlayer;
+const toastMap = {};
 
 const HLSView = () => {
   const videoRef = useRef(null);
   const hlsViewRef = useRef(null);
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
   const hmsActions = useHMSActions();
   const { themeType, theme } = useTheme();
   const [streamEnded, setStreamEnded] = useState(false);
@@ -85,6 +89,15 @@ const HLSView = () => {
     }
   }, [hlsUrl, streamEnded, lastHlsUrl]);
 
+  useEffect(() => {
+    if (!notification) return;
+    const toastID = toastMap?.[notification.data.id];
+    if (toastID) {
+      ToastManager.removeToast(toastMap[notification.data.id]);
+      delete toastMap[notification.data.id];
+    }
+  }, [notification]);
+
   useEffect(() => {
     const videoElem = videoRef.current;
     const setStreamEndedCallback = () => {
@@ -126,7 +139,7 @@ const HLSView = () => {
         const poll = vanillaStore.getState(selectPollByID(pollId));
         const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || 'Participant';
         // launch poll
-        ToastManager.addToast({
+        const toastID = ToastManager.addToast({
           title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
           action: (
             <Button
@@ -142,7 +155,9 @@ const HLSView = () => {
               {poll.type === 'quiz' ? 'Answer' : 'Vote'}
             </Button>
           ),
+          duration: Infinity,
         });
+        toastMap[pollId] = toastID;
         return;
       }
       switch (parsedPayload.type) {

package/src/Sheet/Sheet.tsx

@@ -35,7 +35,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
   borderTopRightRadius: '$3',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   position: 'fixed',
-  zIndex: 1001,
+  zIndex: 22,
   top: 0,
   right: 0,
   left: 0,