fix: improve dark mode text contrast on settings and call pages

Signed-off-by: Aditi Raj <aditiraj.novelist@gmail.com>

Author: aditiraj-dev

client/src/pages/Call.jsx

@@ -157,7 +157,7 @@ export default function Call() {
       )}
 
       {!activeProfile && !dbError && (
-        <div className="flex items-center gap-2 rounded-md border border-coral/40 bg-coral/10 p-4 text-sm font-semibold text-ink">
+        <div className="flex items-center gap-2 rounded-md border border-coral/40 bg-coral/10 p-4 text-sm font-semibold text-ink dark:text-neutral-200">
           <CircleAlert size={18} aria-hidden="true" />
           Create or select a voice profile before speaking.
         </div>

client/src/pages/Settings.jsx

@@ -143,13 +143,13 @@ export default function Settings() {
 
       <section className="rounded-lg border border-ink/10 bg-white p-5 shadow-soft dark:border-border dark:bg-surface dark:text-neutral-100 dark:shadow-soft-dk">
         <h2 className="text-xl font-bold">Voice Synthesis Settings</h2>
-        <p className="mt-1 text-sm text-ink/65 mb-5">Adjust how ElevenLabs generates your cloned speech.</p>
+        <p className="mt-1 text-sm text-ink/65 mb-5 dark:text-muted">Adjust how ElevenLabs generates your cloned speech.</p>
 
         <div className="space-y-4">
           <div>
             <label className="flex justify-between text-sm font-bold" htmlFor="stability">
               <span>Stability</span>
-              <span className="text-ink/65">{voiceSettings.stability}</span>
+              <span className="text-ink/65 dark:text-muted">{voiceSettings.stability}</span>
             </label>
             <input
               id="stability"
@@ -159,13 +159,13 @@ export default function Settings() {
               onChange={(e) => saveVoiceSettings({ ...voiceSettings, stability: parseFloat(e.target.value) })}
               className="w-full mt-2"
             />
-            <p className="text-xs text-ink/50 mt-1">Lower values are more expressive; higher values are more consistent.</p>
+            <p className="text-xs text-ink/50 mt-1 dark:text-muted">Lower values are more expressive; higher values are more consistent.</p>
           </div>
 
           <div>
             <label className="flex justify-between text-sm font-bold" htmlFor="similarity">
               <span>Similarity Boost</span>
-              <span className="text-ink/65">{voiceSettings.similarity_boost}</span>
+              <span className="text-ink/65 dark:text-muted">{voiceSettings.similarity_boost}</span>
             </label>
             <input
               id="similarity"
@@ -175,13 +175,13 @@ export default function Settings() {
               onChange={(e) => saveVoiceSettings({ ...voiceSettings, similarity_boost: parseFloat(e.target.value) })}
               className="w-full mt-2"
             />
-            <p className="text-xs text-ink/50 mt-1">Higher values make the voice closer to the original but may introduce artifacts.</p>
+            <p className="text-xs text-ink/50 mt-1 dark:text-muted">Higher values make the voice closer to the original but may introduce artifacts.</p>
           </div>
 
           <div>
             <label className="flex justify-between text-sm font-bold" htmlFor="style">
               <span>Style Exaggeration</span>
-              <span className="text-ink/65">{voiceSettings.style}</span>
+              <span className="text-ink/65 dark:text-muted">{voiceSettings.style}</span>
             </label>
             <input
               id="style"
@@ -191,7 +191,7 @@ export default function Settings() {
               onChange={(e) => saveVoiceSettings({ ...voiceSettings, style: parseFloat(e.target.value) })}
               className="w-full mt-2"
             />
-            <p className="text-xs text-ink/50 mt-1">Higher values exaggerate the style of the reference audio.</p>
+            <p className="text-xs text-ink/50 mt-1 dark:text-muted">Higher values exaggerate the style of the reference audio.</p>
           </div>
         </div>
       </section>