From bcab3d3b891843279330c86042ba03cb0a0b53f0 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Tue, 12 Mar 2024 16:41:53 +0530
Subject: [PATCH] fix: design parity

---
 .../components/Footer/ParticipantList.tsx     | 22 +++++++------------
 .../components/Footer/RoleAccordion.tsx       | 12 ++++++----
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx
index 91b8f3a2c0..a8662c8f4a 100644
--- 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';
@@ -324,21 +323,16 @@ const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: strin
     peerId,
     role,
   });
+  const quickActionStyle = { p: '$1', borderRadius: '$round' };
   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
index f2003b186e..0eec2bef23 100644
--- 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>
           </>
         )}