feat(feedback): Customize feedback placeholder text color (#11417)

Some browsers have a default gray colour for placeholder text. Added a color and opacity style to placeholders so that the placeholder text is lighter than input text. |Before|After| |------|------| |<img width="304" alt="image" src="https://github.com/getsentry/sentry-javascript/assets/55311782/dc6b218c-972f-429d-a214-1891e60b69e5">|<img width="304" alt="image" src="https://github.com/getsentry/sentry-javascript/assets/55311782/7dbadb0d-ef52-4203-b928-b7b1253e7552">| |<img width="326" alt="image" src="https://github.com/getsentry/sentry-javascript/assets/55311782/f1bf87e9-fabb-439e-a10c-94a92b5a9b9f">|<img width="326" alt="image" src="https://github.com/getsentry/sentry-javascript/assets/55311782/93a91c23-81d3-4203-89d1-495be1380371">| Fixes #10190
getsentry · Apr 9, 2024 · db18496 · db18496
1 parent 2b09f91
commit db18496
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
@@ -133,6 +133,11 @@ export function createDialogStyles(): HTMLStyleElement {
   padding: 6px 12px;
 }
 
+.form__input::placeholder {
+  color: var(--input-foreground);
+  opacity: 0.65;
+}
+
 .form__input:focus-visible {
   outline: 1px auto var(--input-outline-focus);
 }