From 4b3549a885c11b20c3becd886872de5eff44c3fc Mon Sep 17 00:00:00 2001
From: Aakash Singh <78924853+aakash2330@users.noreply.github.com>
Date: Sun, 29 Sep 2024 20:12:22 +0530
Subject: [PATCH] React qull UI fixes (#422)

* ui-fixes

* reset gmaps input

* react-quill-ui-fixes

* ui-fixes

* build-fixes
---
 next.config.js              |  5 +++++
 src/actions/job.action.ts   |  4 ++++
 src/app/globals.css         | 16 ++++------------
 src/components/job-form.tsx |  4 ++--
 src/components/job.tsx      | 33 ++++++++++++++++++++++-----------
 src/types/jobs.types.ts     |  1 +
 6 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/next.config.js b/next.config.js
index 2e772965..ce43b208 100644
--- a/next.config.js
+++ b/next.config.js
@@ -25,6 +25,11 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'wwww.example.com',
       },
+
+      {
+        protocol: 'https',
+        hostname: 'aakash2330.b-cdn.net',
+      },
     ],
   },
 };
diff --git a/src/actions/job.action.ts b/src/actions/job.action.ts
index 7705ad41..f2d0febd 100644
--- a/src/actions/job.action.ts
+++ b/src/actions/job.action.ts
@@ -112,6 +112,7 @@ export const getAllJobs = withServerActionAsyncCatcher<
       description: true,
       companyName: true,
       city: true,
+      companyBio: true,
       hasExperiencerange: true,
       minExperience: true,
       maxExperience: true,
@@ -165,6 +166,7 @@ export const getRecommendedJobs = withServerActionAsyncCatcher<
       title: true,
       description: true,
       companyName: true,
+      companyBio: true,
       city: true,
       address: true,
       category: true,
@@ -194,6 +196,7 @@ export const getRecommendedJobs = withServerActionAsyncCatcher<
         title: true,
         description: true,
         companyName: true,
+        companyBio: true,
         city: true,
         address: true,
         workMode: true,
@@ -278,6 +281,7 @@ export const getRecentJobs = async () => {
         id: true,
         title: true,
         description: true,
+        companyBio: true,
         companyName: true,
         city: true,
         address: true,
diff --git a/src/app/globals.css b/src/app/globals.css
index 9141eb86..2b0250e4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -315,22 +315,16 @@
 
 .ql-container.ql-snow {
   border: none !important;
-  max-height: 56rem;
+  max-height: 30rem !important;
+  white-space: wrap !important;
+  width: '100%' !important;
   /* Set a fixed height */
-  overflow-y: hidden;
+  overflow-y: scroll;
   /* Hide vertical overflow */
   overflow-x: auto;
   /* Allow horizontal scrolling */
 }
 
-.ql-editor {
-  min-height: 10px;
-  overflow-y: hidden;
-  /* Prevent height increase */
-  white-space: nowrap;
-  /* Ensure long lines don't wrap */
-}
-
 .ql-editor.ql-blank::before {
   color: #6b7280 !important;
 }
@@ -354,11 +348,9 @@
 
 /* Ensure long content does not wrap within the editor */
 .job-description-editor .ql-editor {
-
   white-space: nowrap !important;
   overflow-x: hidden !important; /* Allow horizontal scrolling */
   overflow-y: hidden !important; /* Hide vertical overflow */
-
 }
 
 .pac-container {
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index 749cccce..426e9afb 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -69,8 +69,8 @@ const PostJobForm = () => {
       type: EmployementType.Full_time,
       category: 'design',
       hasSalaryRange: true,
-      minSalary: 0,
-      maxSalary: 0,
+      minSalary: undefined,
+      maxSalary: undefined,
       application: '',
     },
   });
diff --git a/src/components/job.tsx b/src/components/job.tsx
index 550a01f6..ee19a5d9 100644
--- a/src/components/job.tsx
+++ b/src/components/job.tsx
@@ -51,17 +51,17 @@ export const Job = ({ job }: { job: JobType }) => {
             </div>
 
             <span className="flex bg-green-500/20 font-bold rounded-lg px-4 py-1 text-green-500 text-xs md:text-sm items-center gap-0.5">
-              {job.minSalary && <Icon icon="currency" size={16} />}
+              {!!job.minSalary && <Icon icon="currency" size={16} />}
               {job.minSalary && job.maxSalary
                 ? `${formatSalary(job.minSalary)}-${formatSalary(job.maxSalary)}`
                 : 'Not disclosed'}
             </span>
-
-            <div className="flex items-center gap-2">
-              <MapPin size={16} />
-              <p className="text-xs md:text-sm font-semibold">{job.address}</p>
-            </div>
           </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <MapPin size={16} />
+          <p className="text-xs md:text-sm font-semibold">{job.address}</p>
           <div className="w-full md:max-w-[60%] flex-wrap flex justify-start items-center gap-2">
             {job.skills.map((skill, index) => {
               return (
@@ -92,16 +92,27 @@ export const Job = ({ job }: { job: JobType }) => {
       </section>
 
       {/* job description */}
-      <section className="border-2 bg-[#F1F5F9] dark:bg-[#0F172A] h-[10rem] p-6 rounded-xl">
+      <section className="border-2 bg-[#F1F5F9] dark:bg-[#0F172A] h-auto max-h-[20rem] overflow-y-auto p-6 rounded-xl">
+        <h1 className="font-extrabold px-4 py-1 w-fit text-white bg-blue-500/20 rounded-lg text-xl ">
+          Job Description
+        </h1>
         <Linkify options={options}>
-          <p>{job.description}</p>
+          <div
+            className="my-4 text-neutral-100"
+            dangerouslySetInnerHTML={{ __html: job.description ?? '' }}
+          ></div>
         </Linkify>
       </section>
 
       {/* about company */}
-      <section className="border-2 bg-[#F1F5F9] dark:bg-[#0F172A] h-[10rem] p-6 rounded-xl">
-        <h1 className="font-bold">About {job.companyName}</h1>
-        <p className="my-4 text-sm text-gray-500">{job.description}</p>
+      <section className="border-2 bg-[#F1F5F9] dark:bg-[#0F172A] h-auto max-h-[15rem] overflow-y-auto p-6 rounded-xl">
+        <h1 className="font-extrabold px-4 py-1 w-fit text-white bg-blue-500/20 rounded-lg text-xl ">
+          About {job.companyName}
+        </h1>
+        <div
+          dangerouslySetInnerHTML={{ __html: job.companyBio ?? '' }}
+          className="my-4 text-neutral-200"
+        ></div>
       </section>
     </aside>
   );
diff --git a/src/types/jobs.types.ts b/src/types/jobs.types.ts
index 71f5c6ab..39f08715 100644
--- a/src/types/jobs.types.ts
+++ b/src/types/jobs.types.ts
@@ -1,5 +1,6 @@
 export type JobType = {
   companyLogo: string;
+  companyBio: string;
   workMode: 'remote' | 'office' | 'hybrid';
   city: string;
   address: string;