Skip to content

Commit

Permalink
Added darkmode in post-job form (#516)
Browse files Browse the repository at this point in the history 
Co-authored-by: Vineet Agarwal <[email protected]>
  • Loading branch information
@ajeeshRS @VineeTagarwaL-code
ajeeshRS and VineeTagarwaL-code authored Oct 19, 2024
1 parent b1f296c commit 28e8d22
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 37 deletions.
2 changes: 1 addition & 1 deletion src/app/create/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/DescriptionEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/comboBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/gmaps-autosuggest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?"
/>
</>
Expand Down
64 changes: 32 additions & 32 deletions src/components/job-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>{' '}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>{' '}
Expand Down Expand Up @@ -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 ? (
Expand Down Expand Up @@ -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>
Expand All @@ -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')}
Expand All @@ -636,16 +636,16 @@ 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>

{/* Logo Upload Section */}
<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 ? (
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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')}
Expand Down

0 comments on commit 28e8d22

Please sign in to comment.