[CHORE] Normalize styles of all input and select elements (#804)

* normalize styles of all input and select elements * missed placeholder text input * missed input fields on onboarding flow
2025-04-17 18:18:11 +00:00 · 2024-02-27 11:47:01 -08:00 · 2024-02-27 11:47:01 -08:00 · e87cba3468
commit e87cba3468
parent b64cb199f9
44 changed files with 106 additions and 106 deletions
--- a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
@ -9,7 +9,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="url"
            name="AzureOpenAiEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="https://my-azure.openai.azure.com"
            defaultValue={settings?.AzureOpenAiEndpoint}
            required={true}
@ -25,7 +25,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="password"
            name="AzureOpenAiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Azure OpenAI API Key"
            defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
            required={true}
@ -41,7 +41,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="text"
            name="AzureOpenAiEmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Azure OpenAI embedding model deployment name"
            defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
            required={true}
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@ -19,7 +19,7 @@ export default function LocalAiOptions({ settings }) {
          <input
            type="url"
            name="EmbeddingBasePath"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:8080/v1"
            defaultValue={settings?.EmbeddingBasePath}
            onChange={(e) => setBasePathValue(e.target.value)}
@ -41,7 +41,7 @@ export default function LocalAiOptions({ settings }) {
          <input
            type="number"
            name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="1000"
            min={1}
            onScroll={(e) => e.target.blur()}
@ -62,7 +62,7 @@ export default function LocalAiOptions({ settings }) {
          <input
            type="password"
            name="LocalAiApiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="sk-mysecretkey"
            defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
            autoComplete="off"
@ -108,7 +108,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
        <select
          name="EmbeddingModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            {basePath?.includes("/v1")
@ -128,7 +128,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
      <select
        name="EmbeddingModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {customModels.length > 0 && (
          <optgroup label="Your loaded models">
--- a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
@ -9,7 +9,7 @@ export default function OpenAiOptions({ settings }) {
          <input
            type="password"
            name="OpenAiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="OpenAI API Key"
            defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
            required={true}
@ -24,7 +24,7 @@ export default function OpenAiOptions({ settings }) {
          <select
            name="EmbeddingModelPref"
            required={true}
-            className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
          >
            <optgroup label="Available embedding models">
              {[
--- a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
@ -29,7 +29,7 @@ export default function AnthropicAiOptions({ settings, showAlert = false }) {
          <input
            type="password"
            name="AnthropicApiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Anthropic Claude-2 API Key"
            defaultValue={settings?.AnthropicApiKey ? "*".repeat(20) : ""}
            required={true}
@ -46,7 +46,7 @@ export default function AnthropicAiOptions({ settings, showAlert = false }) {
            name="AnthropicModelPref"
            defaultValue={settings?.AnthropicModelPref || "claude-2"}
            required={true}
-            className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
          >
            {["claude-2", "claude-instant-1"].map((model) => {
              return (
--- a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
@ -9,7 +9,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="url"
            name="AzureOpenAiEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="https://my-azure.openai.azure.com"
            defaultValue={settings?.AzureOpenAiEndpoint}
            required={true}
@ -25,7 +25,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="password"
            name="AzureOpenAiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Azure OpenAI API Key"
            defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
            required={true}
@ -41,7 +41,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="text"
            name="AzureOpenAiModelPref"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Azure OpenAI chat model deployment name"
            defaultValue={settings?.AzureOpenAiModelPref}
            required={true}
@ -59,7 +59,7 @@ export default function AzureAiOptions({ settings }) {
          <select
            name="AzureOpenAiTokenLimit"
            defaultValue={settings?.AzureOpenAiTokenLimit || 4096}
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            required={true}
          >
            <option value={4096}>4,096 (gpt-3.5-turbo)</option>
@ -77,7 +77,7 @@ export default function AzureAiOptions({ settings }) {
          <input
            type="text"
            name="AzureOpenAiEmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Azure OpenAI embedding model deployment name"
            defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
            required={true}
--- a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
@ -9,7 +9,7 @@ export default function GeminiLLMOptions({ settings }) {
          <input
            type="password"
            name="GeminiLLMApiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Google Gemini API Key"
            defaultValue={settings?.GeminiLLMApiKey ? "*".repeat(20) : ""}
            required={true}
@ -26,7 +26,7 @@ export default function GeminiLLMOptions({ settings }) {
            name="GeminiLLMModelPref"
            defaultValue={settings?.GeminiLLMModelPref || "gemini-pro"}
            required={true}
-            className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
          >
            {["gemini-pro"].map((model) => {
              return (
--- a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
@ -9,7 +9,7 @@ export default function HuggingFaceOptions({ settings }) {
          <input
            type="url"
            name="HuggingFaceLLMEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="https://example.endpoints.huggingface.cloud"
            defaultValue={settings?.HuggingFaceLLMEndpoint}
            required={true}
@ -24,7 +24,7 @@ export default function HuggingFaceOptions({ settings }) {
          <input
            type="password"
            name="HuggingFaceLLMAccessToken"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="HuggingFace Access Token"
            defaultValue={
              settings?.HuggingFaceLLMAccessToken ? "*".repeat(20) : ""
@ -41,7 +41,7 @@ export default function HuggingFaceOptions({ settings }) {
          <input
            type="number"
            name="HuggingFaceLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="4096"
            min={1}
            onScroll={(e) => e.target.blur()}
--- a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
@ -29,7 +29,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
          <input
            type="url"
            name="LMStudioBasePath"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:1234/v1"
            defaultValue={settings?.LMStudioBasePath}
            required={true}
@ -44,7 +44,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
          <input
            type="number"
            name="LMStudioTokenLimit"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="4096"
            min={1}
            onScroll={(e) => e.target.blur()}
--- a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@ -36,7 +36,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
          <input
            type="url"
            name="LocalAiBasePath"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:1234/v1"
            defaultValue={settings?.LocalAiBasePath}
            required={true}
@ -58,7 +58,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
          <input
            type="number"
            name="LocalAiTokenLimit"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="4096"
            min={1}
            onScroll={(e) => e.target.blur()}
@ -80,7 +80,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
          <input
            type="password"
            name="LocalAiApiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="sk-mysecretkey"
            defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
            autoComplete="off"
@ -126,7 +126,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
        <select
          name="LocalAiModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            {basePath?.includes("/v1")
@ -146,7 +146,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
      <select
        name="LocalAiModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {customModels.length > 0 && (
          <optgroup label="Your loaded models">
--- a/frontend/src/components/LLMSelection/MistralOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
@ -14,7 +14,7 @@ export default function MistralOptions({ settings }) {
        <input
          type="password"
          name="MistralApiKey"
-          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
          placeholder="Mistral API Key"
          defaultValue={settings?.MistralApiKey ? "*".repeat(20) : ""}
          required={true}
@ -60,7 +60,7 @@ function MistralModelSelection({ apiKey, settings }) {
        <select
          name="MistralModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            {!!apiKey
@ -80,7 +80,7 @@ function MistralModelSelection({ apiKey, settings }) {
      <select
        name="MistralModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {customModels.length > 0 && (
          <optgroup label="Available Mistral Models">
--- a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
@ -43,7 +43,7 @@ function NativeModelSelection({ settings }) {
        <select
          name="NativeLLMModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            -- waiting for models --
@ -62,7 +62,7 @@ function NativeModelSelection({ settings }) {
        <select
          name="NativeLLMModelPref"
          required={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          {customModels.length > 0 && (
            <optgroup label="Your loaded models">
@ -88,7 +88,7 @@ function NativeModelSelection({ settings }) {
        <input
          type="number"
          name="NativeLLMTokenLimit"
-          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
          placeholder="4096"
          min={1}
          onScroll={(e) => e.target.blur()}
--- a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
@ -17,7 +17,7 @@ export default function OllamaLLMOptions({ settings }) {
          <input
            type="url"
            name="OllamaLLMBasePath"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://127.0.0.1:11434"
            defaultValue={settings?.OllamaLLMBasePath}
            required={true}
@ -35,7 +35,7 @@ export default function OllamaLLMOptions({ settings }) {
          <input
            type="number"
            name="OllamaLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="4096"
            min={1}
            onScroll={(e) => e.target.blur()}
@ -77,7 +77,7 @@ function OllamaLLMModelSelection({ settings, basePath = null }) {
        <select
          name="OllamaLLMModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            {!!basePath
@ -97,7 +97,7 @@ function OllamaLLMModelSelection({ settings, basePath = null }) {
      <select
        name="OllamaLLMModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {customModels.length > 0 && (
          <optgroup label="Your loaded models">
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@ -14,7 +14,7 @@ export default function OpenAiOptions({ settings }) {
        <input
          type="password"
          name="OpenAiKey"
-          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
          placeholder="OpenAI API Key"
          defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
          required={true}
@ -60,7 +60,7 @@ function OpenAIModelSelection({ apiKey, settings }) {
        <select
          name="OpenAiModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            -- loading available models --
@ -78,7 +78,7 @@ function OpenAIModelSelection({ apiKey, settings }) {
      <select
        name="OpenAiModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        <optgroup label="General LLM models">
          {[
--- a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
@ -11,7 +11,7 @@ export default function OpenRouterOptions({ settings }) {
        <input
          type="password"
          name="OpenRouterApiKey"
-          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
          placeholder="OpenRouter API Key"
          defaultValue={settings?.OpenRouterApiKey ? "*".repeat(20) : ""}
          required={true}
@ -56,7 +56,7 @@ function OpenRouterModelSelection({ settings }) {
        <select
          name="OpenRouterModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            -- loading available models --
@ -74,7 +74,7 @@ function OpenRouterModelSelection({ settings }) {
      <select
        name="OpenRouterModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {Object.keys(groupedModels)
          .sort()
--- a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
@ -11,7 +11,7 @@ export default function PerplexityOptions({ settings }) {
        <input
          type="password"
          name="PerplexityApiKey"
-          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
          placeholder="Perplexity API Key"
          defaultValue={settings?.PerplexityApiKey ? "*".repeat(20) : ""}
          required={true}
@ -47,7 +47,7 @@ function PerplexityModelSelection({ settings }) {
        <select
          name="PerplexityModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            -- loading available models --
@ -65,7 +65,7 @@ function PerplexityModelSelection({ settings }) {
      <select
        name="PerplexityModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {customModels.length > 0 && (
          <optgroup label="Available Perplexity Models">
--- a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
@ -11,7 +11,7 @@ export default function TogetherAiOptions({ settings }) {
        <input
          type="password"
          name="TogetherAiApiKey"
-          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
          placeholder="Together AI API Key"
          defaultValue={settings?.TogetherAiApiKey ? "*".repeat(20) : ""}
          required={true}
@ -56,7 +56,7 @@ function TogetherAiModelSelection({ settings }) {
        <select
          name="TogetherAiModelPref"
          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            -- loading available models --
@ -74,7 +74,7 @@ function TogetherAiModelSelection({ settings }) {
      <select
        name="TogetherAiModelPref"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {Object.keys(groupedModels)
          .sort()
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
@ -128,7 +128,7 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
          disabled={fetchingUrl}
          name="link"
          type="url"
-          className="disabled:bg-zinc-600 disabled:text-slate-300 bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5"
+          className="disabled:bg-zinc-600 disabled:text-slate-300 bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5"
          placeholder={"https://example.com"}
          autoComplete="off"
        />
--- a/frontend/src/components/Modals/NewWorkspace.jsx
+++ b/frontend/src/components/Modals/NewWorkspace.jsx
@ -52,7 +52,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                    name="name"
                    type="text"
                    id="name"
-                    className="bg-zinc-900 w-full text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="bg-zinc-900 w-full text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
                    placeholder="My Workspace"
                    required={true}
                    autoComplete="off"
--- a/frontend/src/components/UserMenu/AccountModal/index.jsx
+++ b/frontend/src/components/UserMenu/AccountModal/index.jsx
@ -125,7 +125,7 @@ export default function AccountModal({ user, hideModal }) {
              <input
                name="username"
                type="text"
-                className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+                className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                placeholder="User's username"
                minLength={2}
                defaultValue={user.username}
@ -143,7 +143,7 @@ export default function AccountModal({ user, hideModal }) {
              <input
                name="password"
                type="password"
-                className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+                className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                placeholder={`${user.username}'s new password`}
              />
            </div>
--- a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
@ -9,7 +9,7 @@ export default function AstraDBOptions({ settings }) {
          <input
            type="url"
            name="AstraDBEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Astra DB API endpoint"
            defaultValue={settings?.AstraDBEndpoint}
            required={true}
@ -25,7 +25,7 @@ export default function AstraDBOptions({ settings }) {
          <input
            type="password"
            name="AstraDBApplicationToken"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="AstraCS:..."
            defaultValue={
              settings?.AstraDBApplicationToken ? "*".repeat(20) : ""
--- a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
@ -9,7 +9,7 @@ export default function ChromaDBOptions({ settings }) {
          <input
            type="url"
            name="ChromaEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:8000"
            defaultValue={settings?.ChromaEndpoint}
            required={true}
@ -27,7 +27,7 @@ export default function ChromaDBOptions({ settings }) {
            autoComplete="off"
            type="text"
            defaultValue={settings?.ChromaApiHeader}
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="X-Api-Key"
          />
        </div>
@ -41,7 +41,7 @@ export default function ChromaDBOptions({ settings }) {
            autoComplete="off"
            type="password"
            defaultValue={settings?.ChromaApiKey ? "*".repeat(20) : ""}
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="sk-myApiKeyToAccessMyChromaInstance"
          />
        </div>
--- a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
@ -9,7 +9,7 @@ export default function MilvusDBOptions({ settings }) {
          <input
            type="text"
            name="MilvusAddress"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:19530"
            defaultValue={settings?.MilvusAddress}
            required={true}
@ -25,7 +25,7 @@ export default function MilvusDBOptions({ settings }) {
          <input
            type="text"
            name="MilvusUsername"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="username"
            defaultValue={settings?.MilvusUsername}
            autoComplete="off"
@ -39,7 +39,7 @@ export default function MilvusDBOptions({ settings }) {
          <input
            type="password"
            name="MilvusPassword"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="password"
            defaultValue={settings?.MilvusPassword ? "*".repeat(20) : ""}
            autoComplete="off"
--- a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
@ -9,7 +9,7 @@ export default function PineconeDBOptions({ settings }) {
          <input
            type="password"
            name="PineConeKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Pinecone API Key"
            defaultValue={settings?.PineConeKey ? "*".repeat(20) : ""}
            required={true}
@ -24,7 +24,7 @@ export default function PineconeDBOptions({ settings }) {
          <input
            type="text"
            name="PineConeIndex"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="my-index"
            defaultValue={settings?.PineConeIndex}
            required={true}
--- a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
@ -9,7 +9,7 @@ export default function QDrantDBOptions({ settings }) {
          <input
            type="url"
            name="QdrantEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:6633"
            defaultValue={settings?.QdrantEndpoint}
            required={true}
@ -25,7 +25,7 @@ export default function QDrantDBOptions({ settings }) {
          <input
            type="password"
            name="QdrantApiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="wOeqxsYP4....1244sba"
            defaultValue={settings?.QdrantApiKey}
            autoComplete="off"
--- a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
@ -9,7 +9,7 @@ export default function WeaviateDBOptions({ settings }) {
          <input
            type="url"
            name="WeaviateEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="http://localhost:8080"
            defaultValue={settings?.WeaviateEndpoint}
            required={true}
@ -25,7 +25,7 @@ export default function WeaviateDBOptions({ settings }) {
          <input
            type="password"
            name="WeaviateApiKey"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="sk-123Abcweaviate"
            defaultValue={settings?.WeaviateApiKey}
            autoComplete="off"
--- a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
@ -9,7 +9,7 @@ export default function ZillizCloudOptions({ settings }) {
          <input
            type="text"
            name="ZillizEndpoint"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="https://sample.api.gcp-us-west1.zillizcloud.com"
            defaultValue={settings?.ZillizEndpoint}
            required={true}
@ -25,7 +25,7 @@ export default function ZillizCloudOptions({ settings }) {
          <input
            type="password"
            name="ZillizApiToken"
-            className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
            placeholder="Zilliz cluster API Token"
            defaultValue={settings?.ZillizApiToken ? "*".repeat(20) : ""}
            autoComplete="off"
--- a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
@ -49,7 +49,7 @@ export default function NewUserModal({ closeModal }) {
                <input
                  name="username"
                  type="text"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  placeholder="User's username"
                  minLength={2}
                  required={true}
@ -66,7 +66,7 @@ export default function NewUserModal({ closeModal }) {
                <input
                  name="password"
                  type="text"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  placeholder="User's initial password"
                  required={true}
                  autoComplete="off"
@ -84,7 +84,7 @@ export default function NewUserModal({ closeModal }) {
                  required={true}
                  defaultValue={"default"}
                  onChange={(e) => setRole(e.target.value)}
-                  className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border border-gray-500 focus:ring-blue-500 focus:border-blue-500"
+                  className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="default">Default</option>
                  <option value="manager">Manager </option>
--- a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
@ -50,7 +50,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                <input
                  name="username"
                  type="text"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  placeholder="User's username"
                  minLength={2}
                  defaultValue={user.username}
@ -68,7 +68,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                <input
                  name="password"
                  type="text"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  placeholder={`${user.username}'s new password`}
                  autoComplete="off"
                />
@ -85,7 +85,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                  required={true}
                  defaultValue={user.role}
                  onChange={(e) => setRole(e.target.value)}
-                  className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border border-gray-500 focus:ring-blue-500 focus:border-blue-500"
+                  className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="default">Default</option>
                  <option value="manager">Manager</option>
--- a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
@ -42,7 +42,7 @@ export default function NewWorkspaceModal({ closeModal }) {
                <input
                  name="name"
                  type="text"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  placeholder="My workspace"
                  minLength={4}
                  required={true}
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
@ -73,7 +73,7 @@ export default function NewIconForm({ handleSubmit, showing }) {
              name="url"
              required={true}
              placeholder="https://example.com"
-              className="bg-sidebar text-white placeholder-white/60 rounded-md p-2"
+              className="bg-sidebar text-white placeholder:text-white/20 rounded-md p-2"
            />
          </div>
          {selectedIcon !== "" && (
--- a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
@ -64,7 +64,7 @@ export default function SupportEmail() {
        <input
          name="supportEmail"
          type="email"
-          className="bg-zinc-900 mt-4 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[275px]"
+          className="bg-zinc-900 mt-4 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[275px]"
          placeholder="support@mycompany.com"
          required={true}
          autoComplete="off"
--- a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
@ -132,7 +132,7 @@ export default function GithubConnectorSetup() {
                    <input
                      type="url"
                      name="repo"
-                      className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                      className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
                      placeholder="https://github.com/Mintplex-Labs/anything-llm"
                      required={true}
                      autoComplete="off"
@ -156,7 +156,7 @@ export default function GithubConnectorSetup() {
                    <input
                      type="text"
                      name="accessToken"
-                      className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                      className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
                      placeholder="github_pat_1234_abcdefg"
                      required={false}
                      autoComplete="off"
@ -189,7 +189,7 @@ export default function GithubConnectorSetup() {
                    classNames={{
                      tag: "bg-blue-300/10 text-zinc-800 m-1",
                      input:
-                        "flex bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white p-2.5",
+                        "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white p-2.5",
                    }}
                  />
                </div>
@ -257,7 +257,7 @@ function GitHubBranchSelection({ repo, accessToken }) {
        <select
          name="branch"
          required={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
        >
          <option disabled={true} selected={true}>
            -- loading available models --
@ -278,7 +278,7 @@ function GitHubBranchSelection({ repo, accessToken }) {
      <select
        name="branch"
        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
      >
        {allBranches.map((branch) => {
          return (
--- a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
@ -79,7 +79,7 @@ export default function YouTubeTranscriptConnectorSetup() {
                    <input
                      type="url"
                      name="url"
-                      className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                      className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
                      placeholder="https://youtube.com/watch?v=abc123"
                      required={true}
                      autoComplete="off"
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
@ -44,13 +44,13 @@ export default function CodeSnippetModal({ embed, closeModal }) {
 }

 function createScriptTagSnippet(embed, scriptHost, serverHost) {
-  return `<!-- 
+  return `<!--
 Paste this script at the bottom of your HTML before the </body> tag.
 See more style and config options on our docs
 https://github.com/Mintplex-Labs/anything-llm/tree/master/embed/README.md
 -->
-<script 
-  data-embed-id="${embed.uuid}" 
+<script
+  data-embed-id="${embed.uuid}"
  data-base-api-url="${serverHost}/api/embed"
  src="${scriptHost}/embed/anythingllm-chat-widget.min.js">
 </script>
@ -98,7 +98,7 @@ const ScriptTag = ({ embed }) => {
      <button
        disabled={copied}
        onClick={handleClick}
-        className="disabled:border disabled:border-green-300 border border-transparent relative w-full font-mono flex bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white p-2.5"
+        className="disabled:border disabled:border-green-300 border border-transparent relative w-full font-mono flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white p-2.5"
      >
        <div
          className="flex w-full text-left flex-col gap-y-1 pr-6 pl-4 whitespace-pre-line"
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
@ -144,7 +144,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => {
        name="workspace_id"
        required={true}
        defaultValue={defaultValue}
-        className="min-w-[15rem] rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border border-gray-500 focus:ring-blue-500 focus:border-blue-500"
+        className="min-w-[15rem] rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500"
      >
        {workspaces.map((workspace) => {
          return (
@ -274,7 +274,7 @@ export const PermittedDomains = ({ defaultValue = [] }) => {
        classNames={{
          tag: "bg-blue-300/10 text-zinc-800 m-1",
          input:
-            "flex bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white p-2.5",
+            "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white p-2.5",
        }}
      />
    </div>
@ -293,7 +293,7 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => {
      <input
        type="number"
        name={name}
-        className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-[15rem] p-2.5"
+        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-[15rem] p-2.5"
        min={0}
        defaultValue={defaultValue}
        onScroll={(e) => e.target.blur()}
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@ -141,7 +141,7 @@ function MultiUserMode() {
                      <input
                        name="username"
                        type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder-white placeholder-opacity-60 focus:ring-blue-500"
+                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
                        placeholder="Your admin username"
                        minLength={2}
                        required={true}
@ -160,7 +160,7 @@ function MultiUserMode() {
                      <input
                        name="password"
                        type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder-white placeholder-opacity-60 focus:ring-blue-500"
+                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
                        placeholder="Your admin password"
                        minLength={8}
                        required={true}
@ -303,7 +303,7 @@ function PasswordProtection() {
                      <input
                        name="password"
                        type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder-white placeholder-opacity-60 focus:ring-blue-500"
+                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
                        placeholder="Your Instance Password"
                        minLength={8}
                        required={true}
--- a/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
@ -76,7 +76,7 @@ export default function CreateWorkspace({
          <input
            name="name"
            type="text"
-            className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg block w-full p-2.5"
            placeholder="My Workspace"
            minLength={4}
            required={true}
--- a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
@ -102,7 +102,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
            type="email"
            placeholder="you@gmail.com"
            required={true}
-            className="mt-2 bg-zinc-900 text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight w-full h-11 p-2.5 bg-zinc-900 rounded-lg"
+            className="mt-2 bg-zinc-900 text-white placeholder:text-white/20 text-sm font-medium font-['Plus Jakarta Sans'] leading-tight w-full h-11 p-2.5 bg-zinc-900 rounded-lg"
          />
        </div>

@ -269,7 +269,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
          <textarea
            name="comment"
            rows={5}
-            className="mt-2 bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+            className="mt-2 bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
            placeholder="If you have any questions or comments right now, you can leave them here and we will get back to you. You can also email team@mintplexlabs.com"
            wrap="soft"
            autoComplete="off"
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatHistorySettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatHistorySettings/index.jsx
@ -21,7 +21,7 @@ export default function ChatHistorySettings({ workspace, setHasChanges }) {
        step={1}
        onWheel={(e) => e.target.blur()}
        defaultValue={workspace?.openAiHistory ?? 20}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
        placeholder="20"
        required={true}
        autoComplete="off"
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx
@ -18,7 +18,7 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
        name="openAiPrompt"
        rows={5}
        defaultValue={chatPrompt(workspace)}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
+        className="bg-zinc-900 placeholder:text-white/20 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
        placeholder="Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed."
        required={true}
        wrap="soft"
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatTemperatureSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatTemperatureSettings/index.jsx
@ -36,7 +36,7 @@ export default function ChatTemperatureSettings({
        step={0.1}
        onWheel={(e) => e.target.blur()}
        defaultValue={workspace?.openAiTemp ?? defaults.temp}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
        placeholder="0.7"
        required={true}
        autoComplete="off"
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx
@ -143,7 +143,7 @@ export default function SuggestedChatMessages({ slug }) {
            </label>
            <input
              placeholder="Message heading"
-              className=" bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full"
+              className=" bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full"
              value={newMessage.heading}
              name="heading"
              onChange={onEditChange}
@ -155,7 +155,7 @@ export default function SuggestedChatMessages({ slug }) {
            </label>
            <input
              placeholder="Message"
-              className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full"
+              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full"
              value={newMessage.message}
              name="message"
              onChange={onEditChange}
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspaceName/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspaceName/index.jsx
@ -15,7 +15,7 @@ export default function WorkspaceName({ workspace, setHasChanges }) {
        minLength={2}
        maxLength={80}
        defaultValue={workspace?.name}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
        placeholder="My Workspace"
        required={true}
        autoComplete="off"
--- a/frontend/src/pages/WorkspaceSettings/VectorDatabase/MaxContextSnippets/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/VectorDatabase/MaxContextSnippets/index.jsx
@ -20,7 +20,7 @@ export default function MaxContextSnippets({ workspace, setHasChanges }) {
        step={1}
        onWheel={(e) => e.target.blur()}
        defaultValue={workspace?.topN ?? 4}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
+        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
        placeholder="4"
        required={true}
        autoComplete="off"