Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added darkmode in post-job form #516

Merged
merged 2 commits into from
Oct 19, 2024
Merged

Added darkmode in post-job form #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
689ac76
Added darkmode in post-job form
ajeeshRS Oct 18, 2024
116f876
Merge branch 'main' into enhancement/post-job-form
VineeTagarwaL-code Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/create/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading