Skip to content

Commit 98af5be

Browse files
PlebbaroniPlebbaroni
committed
feat: merge styles with latest version of 224
1 parent b50f131 commit 98af5be

9 files changed

Lines changed: 275 additions & 228 deletions

File tree

‎frontend-nextjs/src/app/[lang]/campaign/[orgSlug]/[campaignSlug]/campaign-info.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -32,38 +32,38 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
3232
return (
3333
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
3434
{/* Hero Section */}
35-
<div className="relative h-[400px] bg-gradient-to-br from-primary/20 to-primary/5 overflow-hidden">
35+
<div className="relative h-[280px] overflow-hidden bg-gradient-to-br from-primary/20 to-primary/5 sm:h-[340px] lg:h-[400px]">
3636
<img
3737
src={campaignData.cover_image || '/placeholder.svg'}
3838
alt="Campaign cover"
3939
className="absolute inset-0 w-full h-full object-cover opacity-30"
4040
/>
4141
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
4242

43-
<div className="relative h-full max-w-5xl mx-auto px-6 flex flex-col justify-end pb-12">
44-
<h1 className="text-5xl font-bold text-white mb-4 drop-shadow-lg">
43+
<div className="relative mx-auto flex h-full max-w-5xl flex-col justify-end px-4 pb-8 sm:px-6 sm:pb-12">
44+
<h1 className="mb-3 break-words text-3xl font-bold leading-tight text-white drop-shadow-lg sm:mb-4 sm:text-4xl lg:text-5xl">
4545
{campaignData.name}
4646
</h1>
4747
{campaignData.organisation_name && (
48-
<p className="text-xl text-white/90 drop-shadow">
48+
<p className="text-base text-white/90 drop-shadow sm:text-xl">
4949
{campaignData.organisation_name}
5050
</p>
5151
)}
5252
</div>
5353
</div>
5454

5555
{/* Main Content */}
56-
<div className="max-w-5xl mx-auto px-6 py-12">
56+
<div className="mx-auto max-w-5xl px-4 py-6 sm:px-6 sm:py-10 lg:py-12">
5757
{/* Flexbox container for main layout */}
58-
<div className="flex flex-col lg:flex-row gap-8">
58+
<div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
5959
{/* Left Column */}
60-
<div className="lg:w-2/3">
60+
<div className="order-2 lg:order-1 lg:w-2/3">
6161
{/* Main Content Container with unified card */}
6262
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
6363
{/* Campaign Description */}
6464
{campaignData.description && (
65-
<div className="p-6">
66-
<h2 className="text-2xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
65+
<div className="p-4 sm:p-6">
66+
<h2 className="mb-4 flex items-center gap-1 text-xl font-semibold text-gray-900 sm:text-2xl">
6767
<Info className="w-6 h-6" />
6868
{dict.common.about}
6969
</h2>
@@ -80,8 +80,8 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
8080

8181
{/* Application Requirements */}
8282
{campaignData.application_requirements && (
83-
<div className="p-6">
84-
<h3 className="text-xl font-semibold mb-4 flex items-center gap-1">
83+
<div className="p-4 sm:p-6">
84+
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold sm:text-xl">
8585
<FileText className="w-5 h-5" />
8686
{dict.common.application_requirements}
8787
</h3>
@@ -98,12 +98,12 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
9898

9999
{/* Interview Information */}
100100
{campaignData.interview_format && (
101-
<div className="p-6">
102-
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
101+
<div className="p-4 sm:p-6">
102+
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
103103
<Video className="w-5 h-5" />
104104
{dict.common.interview_details}
105105
</h3>
106-
<div className="space-y-3 grid grid-cols-3">
106+
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
107107
<div className="flex flex-col justify-start gap-3">
108108
<span className="text-sm font-medium text-gray-900 min-w-24">
109109
{dict.common.interview_format}
@@ -115,7 +115,7 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
115115
)}
116116

117117
</div>
118-
<div className="flex flex-col justify-start gap-3 col-span-2">
118+
<div className="col-span-1 flex flex-col justify-start gap-3 sm:col-span-2">
119119
<span className="text-sm text-gray-600 capitalize">
120120
{campaignData.interview_format}
121121
</span>
@@ -133,8 +133,8 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
133133
<hr className="border-gray-200" />
134134

135135
{/* Available Roles */}
136-
<div className="p-6">
137-
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
136+
<div className="p-4 sm:p-6">
137+
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
138138
<Briefcase className="w-5 h-5" />
139139
{dict.common.available_roles}
140140
</h3>
@@ -144,11 +144,11 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
144144
key={role.id}
145145
className="p-4 bg-gray-50 rounded-lg border border-gray-200"
146146
>
147-
<div className="flex justify-between mb-2">
148-
<h4 className="text-lg font-semibold text-gray-900">
147+
<div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
148+
<h4 className="text-base font-semibold text-gray-900 sm:text-lg">
149149
{role.name}
150150
</h4>
151-
<span className="flex gap-1 items-center px-3 py-1 text-sm font-medium rounded-full">
151+
<span className="flex w-fit items-center gap-1 rounded-full px-3 py-1 text-sm font-medium">
152152
<Users className="w-5 h-5" /> {role.max_available}
153153
</span>
154154
</div>
@@ -171,21 +171,21 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
171171
<hr className="border-gray-200" />
172172

173173
{/* Attachments */}
174-
<div className="p-6">
175-
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
174+
<div className="p-4 sm:p-6">
175+
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
176176
<Files className="w-5 h-5" />
177177
{dict.common.attachments}
178178
</h3>
179179
<div>
180180
{attachmentsData && attachmentsData.length > 0 && attachmentsData.map(attachment => (
181-
<div>
181+
<div key={attachment.id} className="mb-2 last:mb-0">
182182
<a
183183
href={attachment.download_url}
184184
target="_blank"
185185
rel="noopener noreferrer"
186-
className="text-blue-600 hover:text-blue-800 underline flex items-center gap-2"
186+
className="flex items-start gap-2 break-all text-sm text-blue-600 underline hover:text-blue-800 sm:text-base"
187187
>
188-
<FileText className="w-4 h-4" />
188+
<FileText className="mt-0.5 h-4 w-4 shrink-0" />
189189
{attachment.file_name} ({(attachment.file_size / 1024).toFixed(2)} KB)
190190
</a>
191191
</div>
@@ -197,8 +197,8 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
197197
<hr className="border-gray-200" />
198198

199199
{/* Timeline Section */}
200-
<div className="p-6">
201-
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
200+
<div className="p-4 sm:p-6">
201+
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
202202
<Clock className="w-5 h-5" />
203203
{dict.common.recruitment_timeline}
204204
</h3>
@@ -277,20 +277,20 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
277277
<hr className="border-gray-200" />
278278

279279
{/* Contact Information Section */}
280-
<div className="pt-6 ml-6 mb-6">
281-
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
280+
<div className="p-4 pb-6 sm:p-6">
281+
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
282282
<Phone className="w-5 h-5" />
283283
{dict.common.contact_information}
284284
</h3>
285285

286286
<div className="space-y-4">
287287
{campaignData.website_url && (
288-
<div className="flex items-center gap-3">
289-
<ExternalLink className="text-gray-400 w-5 h-5 flex-shrink-0" />
288+
<div className="flex items-start gap-3">
289+
<ExternalLink className="h-5 w-5 shrink-0 text-gray-400" />
290290
<div>
291291
<a
292292
href={campaignData.website_url}
293-
className="text-sm text-primary hover:underline"
293+
className="break-all text-sm text-primary hover:underline"
294294
>
295295
{dict.common.visit_website}
296296
</a>
@@ -299,12 +299,12 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
299299
)}
300300

301301
{campaignData.contact_email && (
302-
<div className="flex items-center gap-3">
303-
<Mail className="text-gray-400 w-5 h-5 flex-shrink-0" />
302+
<div className="flex items-start gap-3">
303+
<Mail className="h-5 w-5 shrink-0 text-gray-400" />
304304
<div>
305305
<a
306306
href={`mailto:${campaignData.contact_email}?subject=[Chaos Application Query] ${campaignData.organisation_name} ${campaignData.name}`}
307-
className="text-sm text-primary hover:underline"
307+
className="break-all text-sm text-primary hover:underline"
308308
>
309309
{campaignData.contact_email}
310310
</a>
@@ -317,10 +317,10 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
317317
</div>
318318

319319
{/* Right Column - Sidebar */}
320-
<div className="lg:w-1/3">
321-
<div className="sticky top-6">
320+
<div className="order-1 lg:order-2 lg:w-1/3">
321+
<div className="lg:sticky lg:top-6">
322322
{/* Apply Card */}
323-
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
323+
<div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6">
324324
<h3 className="text-lg font-semibold text-gray-900 mb-4">
325325
{dict.common.apply_now}
326326
</h3>

‎frontend-nextjs/src/app/[lang]/campaign/apply/[campaignId]/application/[applicationId]/application-answer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ export default function ApplicationReview({
251251
}
252252
}, [selectedRoleIds, campaignId, applicationId, queryClient]);
253253

254-
return (
254+
return (
255255
<div className="min-h-screen w-full overflow-x-hidden bg-background">
256256
<div className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
257257
<div className="mb-5 sm:mb-8">

0 commit comments

Comments
 (0)