fix: improve visibility of newsletter input fields in dark mode #5128

components/InputBox.tsx

@@ -5,15 +5,17 @@ import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
 /**
  * This component renders input box.
  */
-export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput }: InputBoxProps) {
+export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput, dark = false }: InputBoxProps) {
   return (
     <input
       type={inputType}
       name={inputName}
       placeholder={placeholder}
       value={inputValue}
       onChange={(e) => setInput(e.target.value)}
-      className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
+      className={`form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1 ${
+        dark ? 'border-zinc-700 bg-zinc-900 text-white placeholder-zinc-500 focus:border-indigo-500 focus:ring-indigo-500' : 'border-gray-300 text-gray-900'
+      }`}
       required
       data-testid={`NewsletterSubscribe-${inputType}-input`}
     />

components/NewsletterSubscribe.tsx

@@ -137,13 +137,15 @@ export default function NewsletterSubscribe({
             placeholder={ready ? t('nameInput') : 'Your name'}
             inputValue={name}
             setInput={setName}
+            dark={dark}
           />
           <InputBox
             inputType={InputTypes.EMAIL}
             inputName='email'
             placeholder={ready ? t('emailInput') : 'Your email'}
             inputValue={email}
             setInput={setEmail}
+            dark={dark}
           />
           <Button
             type={ButtonType.SUBMIT}

types/components/InputBoxPropsType.ts

@@ -20,4 +20,7 @@ export interface InputBoxProps {
 
   /** The function to set value of the input. */
   setInput: (value: string) => void;
+
+  /** If true, the theme of the component will be dark. */
+  dark?: boolean;
 }