From 2e99e8367390a85298bf1c2ba9147ba84e65ad05 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Mon, 18 Sep 2023 13:07:12 +0530
Subject: [PATCH 1/2] fix: update component color

---
 packages/roomkit-react/src/Input/Input.tsx                    | 4 ++--
 .../roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx | 1 -
 .../src/Prebuilt/components/Footer/ParticipantList.jsx        | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/roomkit-react/src/Input/Input.tsx b/packages/roomkit-react/src/Input/Input.tsx
index ffc72f56eb..34900aaccb 100644
--- a/packages/roomkit-react/src/Input/Input.tsx
+++ b/packages/roomkit-react/src/Input/Input.tsx
@@ -19,8 +19,8 @@ export const Input = styled('input', {
     boxShadow: '0 0 0 1px $colors$primary_default',
     border: '1px solid transparent',
   },
-  '&::placeholder': {
-    color: '$on_surface_low',
+  '&:placeholder': {
+    color: '$on_surface_medium',
   },
   variants: {
     alert_error_default: {
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
index cf8884f3b2..9df2e58d5b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
@@ -151,7 +151,6 @@ export const ChatFooter = ({
               c: '$on_surface_high',
               '&:valid ~ .send-msg': { color: '$on_surface_high' },
               '& ~ .send-msg': { color: '$on_surface_low' },
-              '&::placeholder': { color: '$on_surface_medium' },
             }}
             placeholder="Send a message...."
             ref={inputRef}
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
index 53a27516c0..8637abdaf3 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
@@ -327,7 +327,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$14', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

From c6b89c8995c62e080b7806a8718644d6e7bea59f Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Mon, 18 Sep 2023 13:19:05 +0530
Subject: [PATCH 2/2] fix: update component color

---
 packages/roomkit-react/src/Input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/roomkit-react/src/Input/Input.tsx b/packages/roomkit-react/src/Input/Input.tsx
index 34900aaccb..357567aef0 100644
--- a/packages/roomkit-react/src/Input/Input.tsx
+++ b/packages/roomkit-react/src/Input/Input.tsx
@@ -19,7 +19,7 @@ export const Input = styled('input', {
     boxShadow: '0 0 0 1px $colors$primary_default',
     border: '1px solid transparent',
   },
-  '&:placeholder': {
+  '&::placeholder': {
     color: '$on_surface_medium',
   },
   variants: {