fix: design parity for hand raise actions (#2694)

* fix: design parity * fix: move constant value out of the component
100mslive · Mar 12, 2024 · 1930311 · 1930311
1 parent b68534a
commit 1930311
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx
@@ -22,8 +22,7 @@ import {
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
-import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
-import { IconButton as BaseIconButton } from '../../../IconButton';
+import { Accordion, Box, Button, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
@@ -319,26 +318,21 @@ const ParticipantActions = React.memo(
   },
 );
 
+const quickActionStyle = { p: '$1', borderRadius: '$round' };
 const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: string; role: string }) => {
   const { handleStageAction, lowerPeerHand, shouldShowStageRoleChange, isInStage } = usePeerOnStageActions({
     peerId,
     role,
   });
   return (
     <>
-      <BaseIconButton
-        css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-        onClick={() => lowerPeerHand()}
-      >
-        <CrossIcon height={19} width={19} />
-      </BaseIconButton>
+      <Button variant="standard" css={quickActionStyle} onClick={lowerPeerHand}>
+        <CrossIcon height={18} width={18} />
+      </Button>
       {shouldShowStageRoleChange && !isInStage && (
-        <BaseIconButton
-          css={{ p: '$1', c: '$on_surface_high', bg: '$primary_default', borderRadius: '$round' }}
-          onClick={() => handleStageAction()}
-        >
-          <AddIcon height={19} width={19} />
-        </BaseIconButton>
+        <Button variant="primary" onClick={handleStageAction} css={quickActionStyle}>
+          <AddIcon height={18} width={18} />
+        </Button>
       )}
     </>
   );

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 import { HMSPeer, selectIsLargeRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
-import { ChevronRightIcon } from '@100mslive/react-icons';
+import { AddIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
 import { Button } from '../../../Button';
 import { HorizontalDivider } from '../../../Divider';
@@ -152,10 +152,14 @@ export const RoleAccordion = ({
           <>
             <HorizontalDivider />
             <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
-              <Button variant="standard" onClick={() => lowerAllHands()}>
-                Lower All Hands
+              <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
+                <CrossIcon /> Lower All Hands
               </Button>
-              {canBringToStage && <Button onClick={() => bringAllToStage()}>{bring_to_stage_label}</Button>}
+              {canBringToStage && (
+                <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
+                  <AddIcon /> {bring_to_stage_label}
+                </Button>
+              )}
             </Flex>
           </>
         )}