pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-06-15 20:01:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve CitizensIssues mobile UI — two-line tab labels, responsive header

Browse Source
This commit is contained in:
Kurdistan Tech Ministry
2026-02-25 05:58:58 +03:00
parent 2e0e55c3f7
commit 768d637fdc
1 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/citizens/CitizensIssues.tsx
+35 -15
View File
@@ -792,10 +792,10 @@ export default function CitizensIssues() {
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-5xl md:text-6xl font-bold text-purple-700 mb-3 drop-shadow-lg"> <h1 className="text-2xl sm:text-4xl md:text-6xl font-bold text-purple-700 mb-3 drop-shadow-lg">
Karên Welatiyên (Citizens Portal) Karên Welatiyên (Citizens Portal)
</h1> </h1>
<p className="text-xl text-gray-800 font-semibold drop-shadow-md"> <p className="text-base sm:text-xl text-gray-800 font-semibold drop-shadow-md">
Beşdarî rêveberiyê bibin (Participate in Governance) Beşdarî rêveberiyê bibin (Participate in Governance)
</p> </p>
</div> </div>
@@ -803,21 +803,41 @@ export default function CitizensIssues() {
{/* Tabs */} {/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-4 bg-white/90 backdrop-blur mb-6"> <TabsList className="grid w-full grid-cols-4 bg-white/90 backdrop-blur mb-6">
<TabsTrigger value="issues" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-purple-600 data-[state=active]:text-white data-[state=active]:hover:bg-purple-700"> <TabsTrigger value="issues" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-purple-600 data-[state=active]:text-white data-[state=active]:hover:bg-purple-700 px-1 sm:px-3">
<MessageSquare className="h-4 w-4 mr-2" /> <span className="flex flex-col sm:flex-row items-center sm:gap-1.5">
Pirsgirêk (Issues) <MessageSquare className="h-4 w-4 mb-0.5 sm:mb-0" />
<span className="flex flex-col sm:flex-row items-center sm:gap-1 leading-tight">
<span className="text-xs sm:text-sm">Pirsgirêk</span>
<span className="text-[10px] sm:text-sm font-normal opacity-75 sm:opacity-100">(Issues)</span>
</span>
</span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="parliament" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:hover:bg-blue-700"> <TabsTrigger value="parliament" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:hover:bg-blue-700 px-1 sm:px-3">
<Users className="h-4 w-4 mr-2" /> <span className="flex flex-col sm:flex-row items-center sm:gap-1.5">
Parleman (Parliament) <Users className="h-4 w-4 mb-0.5 sm:mb-0" />
<span className="flex flex-col sm:flex-row items-center sm:gap-1 leading-tight">
<span className="text-xs sm:text-sm">Parleman</span>
<span className="text-[10px] sm:text-sm font-normal opacity-75 sm:opacity-100">(Parliament)</span>
</span>
</span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="president" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-yellow-600 data-[state=active]:text-white data-[state=active]:hover:bg-yellow-700"> <TabsTrigger value="president" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-yellow-600 data-[state=active]:text-white data-[state=active]:hover:bg-yellow-700 px-1 sm:px-3">
<Crown className="h-4 w-4 mr-2" /> <span className="flex flex-col sm:flex-row items-center sm:gap-1.5">
Serok (President) <Crown className="h-4 w-4 mb-0.5 sm:mb-0" />
<span className="flex flex-col sm:flex-row items-center sm:gap-1 leading-tight">
<span className="text-xs sm:text-sm">Serok</span>
<span className="text-[10px] sm:text-sm font-normal opacity-75 sm:opacity-100">(President)</span>
</span>
</span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="legislation" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-green-600 data-[state=active]:text-white data-[state=active]:hover:bg-green-700"> <TabsTrigger value="legislation" className="text-gray-800 font-semibold hover:text-gray-900 hover:bg-gray-100 data-[state=active]:bg-green-600 data-[state=active]:text-white data-[state=active]:hover:bg-green-700 px-1 sm:px-3">
<FileText className="h-4 w-4 mr-2" /> <span className="flex flex-col sm:flex-row items-center sm:gap-1.5">
Yasa (Legislation) <FileText className="h-4 w-4 mb-0.5 sm:mb-0" />
<span className="flex flex-col sm:flex-row items-center sm:gap-1 leading-tight">
<span className="text-xs sm:text-sm">Yasa</span>
<span className="text-[10px] sm:text-sm font-normal opacity-75 sm:opacity-100">(Legislation)</span>
</span>
</span>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
@@ -827,7 +847,7 @@ export default function CitizensIssues() {
<div className="mb-6 flex justify-center"> <div className="mb-6 flex justify-center">
<Button <Button
onClick={() => setShowSubmitModal(true)} onClick={() => setShowSubmitModal(true)}
className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 text-lg" className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 sm:py-3 sm:px-6 text-sm sm:text-lg"
> >
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
Pirsgirêkeke Nû Şandin (Submit New Issue) Pirsgirêkeke Nû Şandin (Submit New Issue)