From 279ed7384b7195e364660b4275e4c8c793ba1f9e Mon Sep 17 00:00:00 2001
From: Kaustubh Kumar <kaustubhkumar05@gmail.com>
Date: Mon, 6 May 2024 16:29:16 +0530
Subject: [PATCH 1/2] fix: design parity (#2873)

* fix: review comments

* fix: remove border
---
 .../src/Prebuilt/components/RoleChangeModal.tsx   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx b/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx
index 6e44439694..0f07e11bda 100644
--- a/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx
@@ -56,7 +56,7 @@ const RoleChangeContent = ({
 
       <Box>
         <Text
-          variant="body2"
+          variant="sm"
           css={{
             mt: '$4',
             mb: '$8',
@@ -68,7 +68,7 @@ const RoleChangeContent = ({
         >
           Switch the role of
           <HighlightTerm value={peer.name} />
-          from <HighlightTerm value={peer.roleName} />
+          from <HighlightTerm value={peer.roleName} /> to
         </Text>
       </Box>
       <Flex
@@ -92,7 +92,6 @@ const RoleChangeContent = ({
               data-testid="open_role_selection_dropdown"
               asChild
               css={{
-                border: '1px solid $border_bright',
                 bg: '$surface_default',
                 r: '$1',
                 p: '$6 $9',
@@ -176,12 +175,10 @@ export const RoleChangeModal = ({
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
-          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
-        </Dialog.Content>
-      </Dialog.Portal>
+      <Dialog.Overlay />
+      <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10', overflow: 'visible' }}>
+        <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
+      </Dialog.Content>
     </Dialog.Root>
   );
 };

From c818cab448eba56beef18aa6d87da0b0fa6292b1 Mon Sep 17 00:00:00 2001
From: Kaustubh Kumar <kaustubhkumar05@gmail.com>
Date: Mon, 6 May 2024 18:30:42 +0530
Subject: [PATCH 2/2] fix: add missing portal (#2875)

---
 .../src/Prebuilt/components/RoleChangeModal.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx b/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx
index 0f07e11bda..db51632aca 100644
--- a/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/RoleChangeModal.tsx
@@ -175,10 +175,12 @@ export const RoleChangeModal = ({
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Overlay />
-      <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10', overflow: 'visible' }}>
-        <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
-      </Dialog.Content>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10', overflow: 'visible' }}>
+          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
+        </Dialog.Content>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };