Skip to content

Commit cf136e4

Browse files
lalitdotdevlalitdotdev
authored
Merge pull request #227 from lalitdotdev/feat/enhancements
fix(NewJobForm UI)
2 parents f292712 + 3a031d3 commit cf136e4

File tree

1 file changed

+70
-46
lines changed

1 file changed

+70
-46
lines changed

‎src/app/(opportunities)/jobs/new/NewJobForm.tsx‎

Lines changed: 70 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
"use client";
1+
"use client"
22

33
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
44
import { CreateJobValues, createJobSchema } from "@/lib/validators/jobFilter";
@@ -62,41 +62,42 @@ const NewJobForm = () => {
6262
};
6363

6464
return (
65-
<Card className="m-auto my-10 space-y-10 max-w-6xl mx-auto border border-gray-600 ">
66-
<CardHeader className="bg-indigo-600 text-white p-6 max-w-6xl mx-auto">
65+
<Card className="m-auto my-10 space-y-10 max-w-6xl mx-auto bg-gray-900 border-2 border-indigo-600 rounded-lg">
66+
<CardHeader className="bg-indigo-600 text-white p-6 max-w-6xl mx-auto rounded-t-lg">
6767
<CardTitle>
6868
<h1 className="text-2xl font-bold text-white">Post a New Job</h1>
6969
</CardTitle>
70-
<p className="text-gray-200">
70+
<p className="text-gray-300 text-lg">
7171
Reach top developers and find your perfect fit.
7272
</p>
7373
</CardHeader>
74-
<CardContent className="p-6 max-w-6xl mx-auto">
75-
<div>
76-
<h2 className="font-semibold">Job details</h2>
77-
<p className="text-muted-foreground">
74+
<CardContent className="p-8 max-w-6xl mx-auto">
75+
<div className="mb-6">
76+
<h2 className="font-semibold text-xl text-white">Job details</h2>
77+
<p className="text-gray-400 text-base">
7878
Provide a job description and details
7979
</p>
8080
</div>
8181

82-
83-
84-
8582
<Form {...form}>
8683
<form className="space-y-6 max-w-6xl mx-auto" noValidate onSubmit={handleSubmit(onSubmit)} >
8784
<FormField
8885
control={control}
8986
name="title"
9087
render={({ field }) => (
9188
<FormItem>
92-
<FormLabel>Job title</FormLabel>
89+
<FormLabel className="text-gray-400 font-medium">Job title</FormLabel>
9390
<FormControl>
94-
<Input placeholder="e.g. Frontend" {...field} />
91+
<Input
92+
placeholder="e.g. Frontend Developer"
93+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
94+
{...field}
95+
/>
9596
</FormControl>
96-
<FormDescription>
97+
<FormDescription className="text-gray-400 text-sm">
9798
A descriptive title that will help developers find your job
9899
</FormDescription>
99-
<FormMessage />
100+
<FormMessage className="text-red-500 font-medium" />
100101
</FormItem>
101102
)}
102103
/>
@@ -106,74 +107,82 @@ const NewJobForm = () => {
106107
name="type"
107108
render={({ field }) => (
108109
<FormItem>
109-
<FormLabel>Job type</FormLabel>
110+
<FormLabel className="text-gray-400 font-medium">Job type</FormLabel>
110111
<FormControl>
111-
<Select {...field} defaultValue="" className="bg-[#282C35]">
112+
<Select
113+
{...field}
114+
defaultValue=""
115+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
116+
>
112117
<option value="" hidden>
113118
Select an option
114119
</option>
115-
116120
{jobTypes.map((jobType) => (
117121
<option key={jobType} value={jobType}>
118122
{jobType}
119123
</option>
120124
))}
121125
</Select>
122126
</FormControl>
123-
<FormDescription>
127+
<FormDescription className="text-gray-400 text-sm">
124128
Full-time, part-time, contract, etc.
125129
</FormDescription>
126-
127-
<FormMessage />
130+
<FormMessage className="text-red-500 font-medium" />
128131
</FormItem>
129132
)}
130133
/>
134+
131135
<FormField
132136
control={control}
133137
name="companyName"
134138
render={({ field }) => (
135139
<FormItem>
136-
<FormLabel>Company</FormLabel>
140+
<FormLabel className="text-gray-400 font-medium">Company</FormLabel>
137141
<FormControl>
138-
<Input {...field} />
142+
<Input
143+
{...field}
144+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
145+
/>
139146
</FormControl>
140-
141-
<FormMessage />
147+
<FormMessage className="text-red-500 font-medium" />
142148
</FormItem>
143149
)}
144150
/>
151+
145152
<FormField
146153
control={control}
147154
name="companyLogo"
148155
render={({ field: { value, ...fieldValues } }) => (
149156
<FormItem>
150-
<FormLabel>Company logo</FormLabel>
157+
<FormLabel className="text-gray-400 font-medium">Company logo</FormLabel>
151158
<FormControl>
152159
<Input
153160
{...fieldValues}
154161
type="file"
155162
accept="image/*"
163+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
156164
onChange={(e) => {
157165
const file = e.target.files?.[0];
158166
fieldValues.onChange(file);
159167
}}
160168
/>
161169
</FormControl>
162-
<FormMessage />
170+
<FormMessage className="text-red-500 font-medium" />
163171
</FormItem>
164172
)}
165173
/>
174+
166175
<FormField
167176
control={control}
168177
name="locationType"
169178
render={({ field }) => (
170179
<FormItem>
171-
<FormLabel>Location</FormLabel>
180+
<FormLabel className="text-gray-400 font-medium">Location</FormLabel>
172181
<FormControl>
173182
<Select
174183
{...field}
175184
defaultValue=""
176-
className="bg-[#282C35]"
185+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
177186
onChange={(e) => {
178187
field.onChange(e);
179188
if (e.currentTarget.value === "Remote") {
@@ -191,7 +200,7 @@ const NewJobForm = () => {
191200
))}
192201
</Select>
193202
</FormControl>
194-
<FormMessage />
203+
<FormMessage className="text-red-500 font-medium" />
195204
</FormItem>
196205
)}
197206
/>
@@ -201,16 +210,17 @@ const NewJobForm = () => {
201210
name="location"
202211
render={({ field }) => (
203212
<FormItem>
204-
<FormLabel>Office location</FormLabel>
213+
<FormLabel className="text-gray-400 font-medium">Office location</FormLabel>
205214
<FormControl>
206215
<LocationInput
207216
onLocationSelected={field.onChange}
208217
ref={field.ref}
218+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
209219
/>
210220
</FormControl>
211221

212222
{watch("location") && (
213-
<div className="flex items-center gap-1">
223+
<div className="flex items-center gap-2 mt-2">
214224
<button
215225
type="button"
216226
className="border-2 border-indigo-600 rounded-md p-1 hover:bg-indigo-600 hover:text-white transition-colors duration-200 ease-in-out"
@@ -220,18 +230,20 @@ const NewJobForm = () => {
220230
>
221231
<X size={20} />
222232
</button>
223-
<span className="text-sm">{watch("location")}</span>
233+
<span className="text-sm text-gray-400">{watch("location")}</span>
224234
</div>
225235
)}
226236

227-
<FormMessage />
237+
<FormMessage className="text-red-500 font-medium" />
228238
</FormItem>
229239
)}
230240
/>
231241

232242
<div className="space-y-2">
233-
<Label htmlFor="applicationEmail">How to apply</Label>
234-
<div className="flex justify-between">
243+
<Label htmlFor="applicationEmail" className="text-gray-400 font-medium">
244+
How to apply
245+
</Label>
246+
<div className="flex justify-between gap-4">
235247
<FormField
236248
control={control}
237249
name="applicationEmail"
@@ -243,12 +255,13 @@ const NewJobForm = () => {
243255
id="applicationEmail"
244256
placeholder="Email"
245257
type="email"
258+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
246259
{...field}
247260
/>
248-
<span className="mx-2">or</span>
261+
<span className="mx-2 text-gray-400">or</span>
249262
</div>
250263
</FormControl>
251-
<FormMessage />
264+
<FormMessage className="text-red-500 font-medium" />
252265
</FormItem>
253266
)}
254267
/>
@@ -261,25 +274,30 @@ const NewJobForm = () => {
261274
<Input
262275
placeholder="Website URL e.g. https://example.com/jobs/1234"
263276
type="url"
277+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
264278
{...field}
265279
onChange={(e) => {
266280
field.onChange(e);
267281
trigger("applicationEmail");
268282
}}
269283
/>
270284
</FormControl>
271-
<FormMessage />
285+
<FormMessage className="text-red-500 font-medium" />
272286
</FormItem>
273287
)}
274288
/>
275289
</div>
276290
</div>
291+
277292
<FormField
278293
control={control}
279294
name="description"
280295
render={({ field }) => (
281296
<FormItem>
282-
<Label onClick={() => setFocus("description")}>
297+
<Label
298+
onClick={() => setFocus("description")}
299+
className="text-gray-400 font-medium"
300+
>
283301
Description
284302
</Label>
285303
<FormControl>
@@ -288,36 +306,42 @@ const NewJobForm = () => {
288306
field.onChange(draftToMarkdown(draft))
289307
}
290308
ref={field.ref}
309+
291310
/>
292311
</FormControl>
293-
<FormMessage />
312+
<FormMessage className="text-red-500 font-medium" />
294313
</FormItem>
295314
)}
296315
/>
316+
297317
<FormField
298318
control={control}
299319
name="salary"
300320
render={({ field }) => (
301321
<FormItem>
302-
<FormLabel>Salary</FormLabel>
322+
<FormLabel className="text-gray-400 font-medium">Salary</FormLabel>
303323
<FormControl>
304-
<Input {...field} type="number" />
324+
<Input
325+
{...field}
326+
type="number"
327+
className="bg-gray-800 border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 rounded-md text-white"
328+
/>
305329
</FormControl>
306-
<FormMessage />
330+
<FormMessage className="text-red-500 font-medium" />
307331
</FormItem>
308332
)}
309333
/>
334+
310335
<LoadingButton
311336
type="submit"
312337
loading={isSubmitting}
313-
className=" bg-[#4F46E5] rounded-none text-gray-900 font-semibold text-md focus:border-4 hover:text-gray-800"
338+
className="bg-indigo-600 text-white font-medium rounded-md px-6 py-3 focus:ring-4 focus:ring-indigo-300 hover:bg-indigo-700 transition-colors duration-200 ease-in-out"
314339
>
315340
Submit
316341
</LoadingButton>
317342
</form>
318343
</Form>
319344
</CardContent>
320-
321345
</Card>
322346
);
323347
};

0 commit comments

Comments
 (0)