From acec16a7bfcbcb9de72d88d120bae90055021838 Mon Sep 17 00:00:00 2001
From: sarthak-kumar-shailendra <sarthak.shailendra@gmail.com>
Date: Sun, 10 Sep 2023 00:06:48 +0530
Subject: [PATCH 1/2] [BUG] Fix dark mode design #169

---
 src/app/global.css                     |  1 -
 src/components/Headers/IndexHeader.tsx |  2 +-
 src/components/Home/Modal.tsx          |  2 +-
 src/components/Home/Newsletter.tsx     | 10 +++++-----
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/app/global.css b/src/app/global.css
index dc6d54e..ddfe61a 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -33,7 +33,6 @@ body {
   background: #e5e7eb;
 }
 .newsletter {
-  background-color: #ffe9d5;
   z-index: -1;
 }
 
diff --git a/src/components/Headers/IndexHeader.tsx b/src/components/Headers/IndexHeader.tsx
index 258b7fe..50e2600 100644
--- a/src/components/Headers/IndexHeader.tsx
+++ b/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:placeholder:text-gray-50 dark:text-white sm:text-sm"
                   placeholder={translate("Search")}
                   type="search"
                   value={input}
diff --git a/src/components/Home/Modal.tsx b/src/components/Home/Modal.tsx
index a879ed5..c97556b 100644
--- a/src/components/Home/Modal.tsx
+++ b/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>
diff --git a/src/components/Home/Newsletter.tsx b/src/components/Home/Newsletter.tsx
index afc384b..d9a06ac 100644
--- a/src/components/Home/Newsletter.tsx
+++ b/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>
           )}

From 2510339724b25715bb2ec11631801df7405b143d Mon Sep 17 00:00:00 2001
From: sarthak-kumar-shailendra <sarthak.shailendra@gmail.com>
Date: Sun, 10 Sep 2023 00:26:10 +0530
Subject: [PATCH 2/2] search bar mobile

---
 src/components/Headers/IndexHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Headers/IndexHeader.tsx b/src/components/Headers/IndexHeader.tsx
index 50e2600..fd808f5 100644
--- a/src/components/Headers/IndexHeader.tsx
+++ b/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 dark:text-white 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"