Merge pull request #220 from sarthak-kumar-shailendra/SK/bug_169_fix_…

…dark_newsletter

[BUG] Fix dark mode design #169

src/app/global.css

@@ -33,7 +33,6 @@ body {
   background: #e5e7eb;
 }
 .newsletter {
-  background-color: #ffe9d5;
   z-index: -1;
 }
 

src/components/Headers/IndexHeader.tsx

@@ -318,7 +318,7 @@ export default function IndexHeader({ locale, translate }: Props) {
                 <input
                   id="search"
                   name="search"
-                  className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-3 leading-5 placeholder:text-gray-500 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange focus:placeholder:text-gray-400 dark:bg-dark-100 dark:placeholder:text-gray-50 sm:text-sm"
+                  className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-3 leading-5 placeholder:text-gray-500 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange focus:placeholder:text-gray-400 dark:bg-dark-100 dark:text-white dark:placeholder:text-gray-50 sm:text-sm"
                   placeholder={translate("Search")}
                   type="search"
                   value={input}
@@ -371,7 +371,7 @@ export default function IndexHeader({ locale, translate }: Props) {
                         </svg>
                       </button>
                       <input
-                        className="h-10 w-max rounded-lg border border-gray-300 bg-white px-8 pr-16 text-sm focus:outline-none dark:bg-dark-100 dark:placeholder:text-white"
+                        className="h-10 w-max rounded-lg border border-gray-300 bg-white px-8 pr-16 text-sm focus:outline-none dark:bg-dark-100 dark:placeholder:text-white dark:text-white"
                         type="search"
                         name="search"
                         placeholder="Search"

src/components/Home/Modal.tsx

@@ -34,7 +34,7 @@ function Modal({ modalVisible, setModalVisible }: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative overflow-hidden rounded-lg bg-white text-left  shadow-xl transition-all sm:w-full sm:max-w-sm">
+              <Dialog.Panel className="relative overflow-hidden rounded-lg bg-white text-left  shadow-xl transition-all sm:w-full sm:max-w-sm dark:bg-dark-100">
                 <div>
                   <div className="z-50 inline-block  overflow-hidden rounded-lg bg-white  text-left align-bottom shadow-xl transition-all duration-200 dark:bg-dark-100 sm:mt-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle">
                     <div>

src/components/Home/Newsletter.tsx

@@ -95,18 +95,18 @@ const Newsletter = ({ notification, locale, translations }: Props) => {
           objectFit: "cover",
           objectPosition: "center",
         }}
-        className="newsletter"
+        className="newsletter bg-light-orange dark:bg-dark-100"
       />
       <div className="mx-auto max-w-5xl px-4 sm:px-6">
         <div className="mt-10 p-14 text-center">
-          <h3 className="z-50 mb-8 text-4xl font-bold text-black">
+          <h3 className="z-50 mb-8 text-4xl font-bold text-black dark:text-white">
             {translate(
               "Have the Shloka of the Day delivered to your inbox each morning",
             )}
           </h3>
           <form className="flex flex-col md:flex-row" onSubmit={onSubmit}>
             <input
-              className="z-50 mr-6 mt-4 w-full appearance-none rounded-md border p-3 leading-tight text-gray-700 focus:border-my-orange focus:outline-none dark:bg-white md:mt-0"
+              className="z-50 mr-6 mt-4 w-full appearance-none rounded-md border p-3 leading-tight text-gray-700 focus:border-my-orange focus:outline-none md:mt-0 dark:bg-dark-100 dark:placeholder:text-gray-50 dark:text-white"
               id="name"
               type="text"
               value={formData.name}
@@ -121,7 +121,7 @@ const Newsletter = ({ notification, locale, translations }: Props) => {
               placeholder={translate("Enter Your Name")}
             />
             <input
-              className="z-50 mr-6 mt-4 w-full appearance-none rounded-md border p-3 leading-tight  text-gray-700 focus:border-my-orange focus:outline-none dark:bg-white  md:mt-0"
+              className="z-50 mr-6 mt-4 w-full appearance-none rounded-md border p-3 leading-tight  text-gray-700 focus:border-my-orange focus:outline-none md:mt-0 dark:bg-dark-100 dark:placeholder:text-gray-50 dark:text-white"
               id="email"
               type="email"
               placeholder={translate("Enter Your Email")}
@@ -143,7 +143,7 @@ const Newsletter = ({ notification, locale, translations }: Props) => {
             </button>
           </form>
           {!isValid && (
-            <div className="mt-4 text-lg text-red-400">
+            <div className="mt-4 text-lg text-red-400 dark:text-red-800">
               <p className="mr-20 mt-12 font-bold">{errorMessage}</p>
             </div>
           )}