From 28e8d224af2bb520b8a98c6c0d5baf0fdc1600ee Mon Sep 17 00:00:00 2001
From: Ajeesh RS <ajeeshrs79@gmail.com>
Date: Sat, 19 Oct 2024 22:12:09 +0530
Subject: [PATCH] Added darkmode in post-job form (#516)

Co-authored-by: Vineet Agarwal <91052168+VineeTagarwaL-code@users.noreply.github.com>
---
 src/app/create/page.tsx              |  2 +-
 src/app/globals.css                  |  7 ++-
 src/components/DescriptionEditor.tsx |  2 +-
 src/components/comboBox.tsx          |  2 +-
 src/components/gmaps-autosuggest.tsx |  2 +-
 src/components/job-form.tsx          | 64 ++++++++++++++--------------
 6 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 034eb1e6..29e10432 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -6,7 +6,7 @@ const page = () => {
     <div className="mt-10 flex flex-col items-center">
       <div>
         <h1 className="text-center text-4xl font-semibold">Post a job</h1>
-        <p className="text-center mt-6 text-lg text-gray-300">
+        <p className="text-center mt-6 text-lg dark:text-gray-300 text-gray-600">
           100xJobs is trusted by leading companies
         </p>
       </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 5c1ae871..7a417889 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -307,12 +307,17 @@
 }
 
 /* Custom styles for Quill editor */
-.ql-toolbar.ql-snow {
+html.dark.ql-toolbar.ql-snow {
   border: none !important;
   background-color: #1f2937 !important;
   border-bottom: 1px solid #374151 !important;
 }
 
+.ql-toolbar.ql-snow{
+  border: none !important;
+  border-bottom: 1px solid #a9aaac !important;
+}
+
 .ql-container.ql-snow {
   border: none !important;
   max-height: 30rem !important;
diff --git a/src/components/DescriptionEditor.tsx b/src/components/DescriptionEditor.tsx
index c1bc4ba2..7bb7e894 100644
--- a/src/components/DescriptionEditor.tsx
+++ b/src/components/DescriptionEditor.tsx
@@ -58,7 +58,7 @@ const DescriptionEditor: React.FC<DescriptionEditorProps> = ({
         onChange={handleChange}
         placeholder={placeholder}
         bounds={`[data-text-editor="${fieldName}"]`}
-        className="text-white bg-gray-800  job-description-editor text-wrap max-w-[537px]"
+        className="dark:text-white dark:bg-gray-800 bg-gray-200  job-description-editor text-wrap max-w-[537px]"
       />
     </div>
   );
diff --git a/src/components/comboBox.tsx b/src/components/comboBox.tsx
index 3493973c..d236430f 100644
--- a/src/components/comboBox.tsx
+++ b/src/components/comboBox.tsx
@@ -43,7 +43,7 @@ export function Combobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between bg-gray-800 border-none text-white"
+          className="w-full justify-between dark:bg-gray-800 border-none dark:text-white"
         >
           Search skillset ...
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
diff --git a/src/components/gmaps-autosuggest.tsx b/src/components/gmaps-autosuggest.tsx
index 1727f70d..05a5cad9 100644
--- a/src/components/gmaps-autosuggest.tsx
+++ b/src/components/gmaps-autosuggest.tsx
@@ -56,7 +56,7 @@ export default function GmapsAutocompleteAddress({
         ref={inputRef}
         id="autocomplete"
         type="text"
-        className="w-full bg-gray-800 border-none text-white"
+        className="w-full dark:bg-gray-800 border-none dark:text-white"
         placeholder="Where is the job located?"
       />
     </>
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index f1d9654b..d9d3ae3a 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -215,24 +215,24 @@ const PostJobForm = () => {
   if (session.status === 'loading') return null;
 
   return (
-    <div className="flex flex-col items-center w-full  md:w-[30rem] gap-y-10 justify-center mb-20">
+    <div className="flex flex-col items-center md:w-[30rem] w-full gap-y-10 justify-center mb-20">
       <div className="w-full md:justify-center mt-4 flex flex-col md:flex-row gap-2">
-        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
+        <div className="dark:bg-gray-800/90 bg-gray-100 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
           <CalendarIcon className="w-8 h-8 mb-3 mx-auto text-green-500" />
-          <p className="text-base font-semibold mb-1">Posted for</p>
-          <p className="text-gray-400 text-sm">30 days</p>
+          <p className="text-base font-semibold mb-1 dark:text-inherit text-gray-800">Posted for</p>
+          <p className="dark:text-gray-400 text-gray-600 text-sm">30 days</p>
         </div>
 
-        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
+        <div className="dark:bg-gray-800/90 bg-gray-100 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
           <MailOpenIcon className="w-8 h-8 mb-3 mx-auto text-purple-500" />
-          <p className="text-base font-semibold mb-1">Emailed to</p>
-          <p className="text-gray-400 text-sm">17,000 subscribers</p>
+          <p className="text-base font-semibold mb-1 dark:text-inherit text-gray-800">Emailed to</p>
+          <p className="dark:text-gray-400 text-gray-600 text-sm">17,000 subscribers</p>
         </div>
 
-        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
+        <div className="dark:bg-gray-800/90 bg-gray-100 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
           <LucideRocket className="w-8 h-8 mb-3 mx-auto text-orange-500" />
-          <p className="text-base font-semibold mb-1">Reach</p>
-          <p className="text-gray-400 text-sm">
+          <p className="text-base font-semibold mb-1 dark:text-inherit text-gray-800">Reach</p>
+          <p className="dark:text-gray-400 text-gray-600 text-sm">
             500,000<span className="text-blue-500">+</span>
           </p>
         </div>
@@ -243,7 +243,7 @@ const PostJobForm = () => {
             onSubmit={form.handleSubmit(handleFormSubmit)}
             className="flex flex-col max-w-full"
           >
-            <div className="bg-gray-900 w-full text-gray-300 p-6 rounded-lg space-y-7">
+            <div className="dark:bg-gray-900 bg-gray-100 w-full dark:text-gray-300 p-6 rounded-lg space-y-7">
               <h2 className="text-2xl font-semibold mb-6">Job details</h2>
 
               <FormField
@@ -255,7 +255,7 @@ const PostJobForm = () => {
                     <FormControl>
                       <Input
                         {...field}
-                        className="w-full bg-gray-800 border-none text-white"
+                        className="w-full dark:bg-gray-800 border-none text-white"
                         placeholder="What's the job?"
                       />
                     </FormControl>
@@ -275,7 +275,7 @@ const PostJobForm = () => {
                         defaultValue={field.value}
                       >
                         <FormControl>
-                          <SelectTrigger className="bg-gray-800 border-none text-white">
+                          <SelectTrigger className="dark:bg-gray-800 border-none dark:text-white">
                             <SelectValue placeholder="Select a category" />
                           </SelectTrigger>
                         </FormControl>
@@ -305,7 +305,7 @@ const PostJobForm = () => {
                         defaultValue={field.value}
                       >
                         <FormControl>
-                          <SelectTrigger className="bg-gray-800 border-none text-white">
+                          <SelectTrigger className="dark:bg-gray-800 border-none dark:text-white">
                             <SelectValue placeholder="Select a workmode" />
                           </SelectTrigger>
                         </FormControl>
@@ -332,7 +332,7 @@ const PostJobForm = () => {
                         defaultValue={field.value}
                       >
                         <FormControl>
-                          <SelectTrigger className="bg-gray-800 border-none text-white">
+                          <SelectTrigger className="dark:bg-gray-800 border-none dark:text-white">
                             <SelectValue placeholder="Select a type" />
                           </SelectTrigger>
                         </FormControl>
@@ -389,7 +389,7 @@ const PostJobForm = () => {
                             <FormControl>
                               <Input
                                 {...field}
-                                className="w-full bg-gray-800 border-gray-400"
+                                className="w-full dark:bg-gray-800 border-gray-400"
                                 placeholder="0"
                               />
                             </FormControl>
@@ -409,7 +409,7 @@ const PostJobForm = () => {
                             <FormControl>
                               <Input
                                 {...field}
-                                className="w-full bg-gray-800 border-gray-400"
+                                className="w-full dark:bg-gray-800 border-gray-400"
                                 placeholder="0"
                               />
                             </FormControl>{' '}
@@ -429,7 +429,7 @@ const PostJobForm = () => {
                               defaultValue={field.value}
                             >
                               <FormControl>
-                                <SelectTrigger className="bg-gray-800 border-none text-white">
+                                <SelectTrigger className="dark:bg-gray-800 border-none dark:text-white">
                                   <SelectValue placeholder="Select a verified email to display" />
                                 </SelectTrigger>
                               </FormControl>
@@ -492,7 +492,7 @@ const PostJobForm = () => {
                             <FormControl>
                               <Input
                                 {...field}
-                                className="w-full bg-gray-800 border-gray-400"
+                                className="w-full dark:bg-gray-800 border-gray-400"
                                 placeholder="0"
                               />
                             </FormControl>
@@ -512,7 +512,7 @@ const PostJobForm = () => {
                             <FormControl>
                               <Input
                                 {...field}
-                                className="w-full bg-gray-800 border-gray-400"
+                                className="w-full dark:bg-gray-800 border-gray-400"
                                 placeholder="0"
                               />
                             </FormControl>{' '}
@@ -558,7 +558,7 @@ const PostJobForm = () => {
                               <PopoverTrigger asChild>
                                 <Button
                                   variant="outline"
-                                  className={`w-[240px] pl-3 text-left font-normal bg-gray-800 
+                                  className={`w-[240px] pl-3 text-left font-normal dark:bg-gray-800 
                                       `} // No color change on hover
                                 >
                                   {field.value ? (
@@ -612,7 +612,7 @@ const PostJobForm = () => {
                     <FormControl>
                       <Input
                         {...field}
-                        className="w-full bg-gray-800 border-none text-white"
+                        className="w-full dark:bg-gray-800 border-none dark:text-white"
                         placeholder="Please enter a URL or Link for application"
                       />
                     </FormControl>
@@ -625,9 +625,9 @@ const PostJobForm = () => {
                 form={form}
               ></SkillsCombobox>
             </div>
-            <div className="bg-gray-900 w-full p-6 rounded-lg space-y-4 mx-auto my-6">
-              <h2 className="text-sm text-white capitalize">Job description</h2>
-              <div className="bg-gray-800 rounded-xl mt-2 overflow-hidden">
+            <div className="dark:bg-gray-900 bg-gray-100 w-full p-6 rounded-lg space-y-4 mx-auto my-6">
+              <h2 className="text-sm dark:text-white capitalize">Job description</h2>
+              <div className="dark:bg-gray-800 rounded-xl mt-2 overflow-hidden">
                 <DescriptionEditor
                   fieldName="description"
                   initialValue={form.getValues('description')}
@@ -636,8 +636,8 @@ const PostJobForm = () => {
                 />
               </div>
             </div>
-            <div className="bg-gray-900 w-full p-6 rounded-lg  mx-auto text-gray-300">
-              <h2 className="text-lg font-semibold mb-4 text-gray-300">
+            <div className="dark:bg-gray-900 bg-gray-100 w-full p-6 rounded-lg  mx-auto dark:text-gray-300">
+              <h2 className="text-lg font-semibold mb-4 dark:text-gray-300">
                 Company
               </h2>
 
@@ -645,7 +645,7 @@ const PostJobForm = () => {
               <div className="flex flex-col items-center mb-6">
                 <div className="relative">
                   <div
-                    className="w-20 h-20 bg-gray-700 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
+                    className="w-20 h-20 dark:bg-gray-700 bg-gray-300 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
                     onClick={handleClick}
                   >
                     {previewImg ? (
@@ -697,7 +697,7 @@ const PostJobForm = () => {
                         <FormControl>
                           <Input
                             {...field}
-                            className="w-full bg-gray-800 border-none text-white"
+                            className="w-full dark:bg-gray-800 border-none dark:text-white"
                             placeholder="What's your company called?"
                           />
                         </FormControl>
@@ -717,7 +717,7 @@ const PostJobForm = () => {
                         <FormControl>
                           <Input
                             {...field}
-                            className="w-full bg-gray-800 border-none text-white"
+                            className="w-full dark:bg-gray-800 border-none dark:text-white"
                             placeholder="Enter your email address"
                           />
                         </FormControl>
@@ -727,10 +727,10 @@ const PostJobForm = () => {
                 </div>
               </div>
               <div>
-                <label className="block text-sm mb-1 text-gray-400">
+                <label className="block text-sm mb-1 dark:text-gray-400">
                   Company bio
                 </label>
-                <div className="bg-gray-800 rounded-xl mt-2 overflow-hidden">
+                <div className="dark:bg-gray-800 rounded-xl mt-2 overflow-hidden">
                   <DescriptionEditor
                     fieldName="companyBio"
                     initialValue={form.getValues('companyBio')}