From 29db85a91606f14320eaebf73d39f98709c94cc2 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Thu, 8 Aug 2024 16:00:56 +0530
Subject: [PATCH] chore: placeholder ux improvements

---
 .../src/components/CollectionSettings/Presets/index.js      | 2 +-
 .../bruno-app/src/components/Sidebar/NewRequest/index.js    | 4 ++--
 packages/bruno-app/src/globalStyles.js                      | 5 +++++
 packages/bruno-app/src/styles/globals.css                   | 5 -----
 packages/bruno-app/src/themes/dark.js                       | 6 +++++-
 packages/bruno-app/src/themes/light.js                      | 6 +++++-
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
index 1569a5174..e16884e16 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
@@ -74,7 +74,7 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder='Enter Request URL'
+                placeholder='Request URL'
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
diff --git a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
index 5fc1074c7..3cf2214db 100644
--- a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
@@ -229,7 +229,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
               id="request-name"
               type="text"
               name="requestName"
-              placeholder="Enter Request Name"
+              placeholder="Request Name"
               ref={inputRef}
               className="block textbox mt-2 w-full"
               autoComplete="off"
@@ -262,7 +262,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
                       id="request-url"
                       type="text"
                       name="requestUrl"
-                      placeholder="Enter Request URL"
+                      placeholder="Request URL"
                       className="px-3 w-full "
                       autoComplete="off"
                       autoCorrect="off"
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 25a6d15bc..7839a55ac 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -100,6 +100,11 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
+  input::placeholder {
+    color: ${(props) => props.theme.input.placeholder.color};
+    opacity:  ${(props) => props.theme.input.placeholder.opacity};
+  }
+
   @keyframes fade-in {
     from {
       opacity: 0;
diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
index 5ad8e8ef9..8396c48b5 100644
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@@ -38,11 +38,6 @@ body {
   overflow-x: hidden;
 }
 
-input::placeholder {
-  color: #a2a2a2;
-  opacity: 50%;
-}
-
 body {
   font-size: 0.875rem;
 }
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index bb1001f31..12d61e571 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -20,7 +20,11 @@ const darkTheme = {
   input: {
     bg: 'rgb(65, 65, 65)',
     border: 'rgb(65, 65, 65)',
-    focusBorder: 'rgb(65, 65, 65)'
+    focusBorder: 'rgb(65, 65, 65)',
+    placeholder: {
+      color: '#a2a2a2',
+      opacity: 0.75
+    }
   },
 
   variables: {
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index a130f2513..a25583136 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -20,7 +20,11 @@ const lightTheme = {
   input: {
     bg: 'white',
     border: '#ccc',
-    focusBorder: '#8b8b8b'
+    focusBorder: '#8b8b8b',
+    placeholder: {
+      color: '#a2a2a2',
+      opacity: 0.8
+    }
   },
 
   menubar: {