[NGO Admin] Fix UI inconsistencies

web/src/features/election-event/components/ElectionEventDetails/ElectionEventDetails.tsx

@@ -3,35 +3,33 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 
-import { useElectionRoundDetails } from '../../hooks/election-event-hooks';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 import { useTranslation } from 'react-i18next';
+import { useElectionRoundDetails } from '../../hooks/election-event-hooks';
 
 export default function ElectionEventDetails() {
   const { t } = useTranslation();
-  const currentElectionRoundId = useCurrentElectionRoundStore(s => s.currentElectionRoundId);
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: electionEvent } = useElectionRoundDetails(currentElectionRoundId);
 
   return (
     <Card className='pt-0'>
       <CardHeader className='flex gap-2 flex-column'>
         <div className='flex flex-row items-center justify-between'>
-          <CardTitle className='text-xl'>{t('electionEvent.eventDetails.cardTitle')}</CardTitle>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            {t('electionEvent.eventDetails.cardTitle')}
+          </CardTitle>
         </div>
         <Separator />
       </CardHeader>
       <CardContent className='flex flex-col items-baseline gap-6'>
         <div className='flex flex-col gap-1'>
           <p className='font-bold text-gray-700'>{t('electionEvent.eventDetails.title')}</p>
-          <p className='font-normal text-gray-900'>
-            {electionEvent?.title}
-          </p>
+          <p className='font-normal text-gray-900'>{electionEvent?.title}</p>
         </div>
         <div className='flex flex-col gap-1'>
           <p className='font-bold text-gray-700'>{t('electionEvent.eventDetails.englishTitle')}</p>
-          <p className='font-normal text-gray-900'>
-            {electionEvent?.englishTitle}
-          </p>
+          <p className='font-normal text-gray-900'>{electionEvent?.englishTitle}</p>
         </div>
         <div className='flex flex-col gap-1'>
           <p className='font-bold text-gray-700'>{t('electionEvent.eventDetails.country')}</p>
@@ -48,7 +46,7 @@ export default function ElectionEventDetails() {
             className={cn({
               'text-slate-700 bg-slate-200': electionEvent?.status === 'NotStarted',
               'text-green-700 bg-green-200': electionEvent?.status === 'Started',
-              'text-yellow-700 bg-yellow-200': electionEvent?.status === 'Archived'
+              'text-yellow-700 bg-yellow-200': electionEvent?.status === 'Archived',
             })}>
             {electionEvent?.status}
           </Badge>

web/src/features/election-event/components/Guides/GuidesDashboard.tsx

@@ -215,8 +215,8 @@ export default function GuidesDashboard({ guidePageType }: GuidesDashboardProps)
   return (
     <Card className='w-full pt-0'>
       <CardHeader className='flex gap-2 flex-column'>
-        <div className='flex flex-row items-center justify-between px-6'>
-          <CardTitle className='text-xl'>
+        <div className='flex flex-row items-center justify-between pr-6'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
             {guidePageType === GuidePageType.Observer
               ? i18n.t('electionEvent.guides.observerGuidesCardTitle')
               : i18n.t('electionEvent.guides.citizenGuidesCardTitle')}

web/src/features/forms/components/Dashboard/Dashboard.tsx

@@ -26,7 +26,13 @@ import i18n from '@/i18n';
 import { cn, isNotNilOrWhitespace, mapFormType } from '@/lib/utils';
 import { queryClient } from '@/main';
 import { FormsSearchParams, Route } from '@/routes/election-event/$tab';
-import { ChevronDownIcon, ChevronUpIcon, EllipsisVerticalIcon, FunnelIcon, PhotoIcon } from '@heroicons/react/24/outline';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  EllipsisVerticalIcon,
+  FunnelIcon,
+  PhotoIcon,
+} from '@heroicons/react/24/outline';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { ColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
@@ -317,18 +323,17 @@ export default function FormsDashboard(): ReactElement {
             row.depth === 0 ? (
               isNotNilOrWhitespace(row.original.icon) ? (
                 <TooltipProvider delayDuration={100}>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span className='underline cursor-pointer decoration-dashed hover:decoration-solid'>
-                      <PhotoIcon className='w-6 h-6'/>
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                  <div dangerouslySetInnerHTML={{ __html: row.original.icon ?? '' }}></div>
-
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className='underline cursor-pointer decoration-dashed hover:decoration-solid'>
+                        <PhotoIcon className='w-6 h-6' />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div dangerouslySetInnerHTML={{ __html: row.original.icon ?? '' }}></div>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               ) : (
                 <></>
               )
@@ -506,8 +511,10 @@ export default function FormsDashboard(): ReactElement {
   return (
     <Card className='w-full pt-0'>
       <CardHeader className='flex gap-2 flex-column'>
-        <CardTitle className='flex flex-row items-center justify-between px-6'>
-          <div className='text-xl'>{i18n.t('electionEvent.observerForms.cardTitle')}</div>
+        <CardTitle className='flex flex-row items-center justify-between pr-6'>
+          <div className='text-2xl font-semibold leading-none tracking-tight'>
+            {i18n.t('electionEvent.observerForms.cardTitle')}
+          </div>
           <div>
             <CreateDialog title={i18n.t('electionEvent.observerForms.createDialogTitle')}>
               <CreateForm />

web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx

@@ -251,8 +251,10 @@ function MonitoringObserversList() {
   return (
     <Card className='w-full pt-0'>
       <CardHeader className='flex gap-2 flex-column'>
-        <div className='flex flex-row items-center justify-between px-6'>
-          <CardTitle className='text-xl'>Monitoring observers list</CardTitle>
+        <div className='flex flex-row items-center justify-between pr-6'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            Monitoring observers list
+          </CardTitle>
           <div className='flex flex-row-reverse gap-4 table-actions flex-row-'>
             {!!importErrorsFileId && (
               <ImportMonitoringObserversErrorsDialog

web/src/features/monitoring-observers/components/PushMessages/PushMessages.tsx

@@ -88,8 +88,8 @@ function PushMessages(): FunctionComponent {
   return (
     <Card className='w-full pt-0'>
       <CardHeader className='flex flex-column gap-2'>
-        <div className='flex flex-row justify-between items-center px-6'>
-          <CardTitle className='text-xl'>Push messages</CardTitle>
+        <div className='flex flex-row justify-between items-center pr-6'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>Push messages</CardTitle>
           <div className='table-actions flex flex-row-reverse flex-row- gap-4'>
             <Link to='/monitoring-observers/create-new-message' search={{ pageSize: 25 }}>
               <Button>

web/src/features/polling-stations/components/Dashboard/Dashboard.tsx

@@ -222,7 +222,7 @@ export default function PollingStationsDashboard(): ReactElement {
   return (
     <Card className='pt-0'>
       <CardHeader className='flex gap-2 flex-column'>
-        <div className='flex items-center justify-between px-6'>
+        <div className='flex items-center justify-between'>
           <CardTitle>{i18n.t('electionEvent.pollingStations.cardTitle')}</CardTitle>
 
           <div className='flex items-center gap-4'>

web/src/features/responses/components/FormSubmissionsTab/FormSubmissionsTab.tsx

@@ -93,8 +93,8 @@ export default function FormSubmissionsTab(): FunctionComponent {
   return (
     <Card>
       <CardHeader>
-        <div className='flex items-center justify-between px-6'>
-          <CardTitle>Form submissions</CardTitle>
+        <div className='flex items-center justify-between pr-6'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>Form submissions</CardTitle>
 
           <div className='flex items-center gap-4'>
             <ExportDataButton

web/src/features/responses/components/IncidentReportsTab/IncidentReportsTab.tsx

@@ -73,8 +73,10 @@ export default function IncidentReportsTab(): FunctionComponent {
   return (
     <Card>
       <CardHeader>
-        <div className='flex items-center justify-between px-6'>
-          <CardTitle>Incident reports submissions</CardTitle>
+        <div className='flex items-center justify-between pr-6'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            Incident reports submissions
+          </CardTitle>
 
           <div className='flex items-center gap-4'>
             <ExportDataButton exportedDataType={ExportedDataType.IncidentReports} filterParams={queryParams} />

web/src/features/responses/components/QuickReportsTab/QuickReportsTab.tsx

@@ -90,15 +90,15 @@ export function QuickReportsTab(): FunctionComponent {
   return (
     <Card>
       <CardHeader>
-        <div className='flex items-center justify-between px-6'>
-          <CardTitle>Quick reports</CardTitle>
+        <div className='flex items-center justify-between pr-6'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>Quick reports</CardTitle>
 
           <ExportDataButton exportedDataType={ExportedDataType.QuickReports} filterParams={queryParams} />
         </div>
 
         <Separator />
 
-        <div className='flex justify-end gap-4 px-6'>
+        <div className='flex justify-end gap-4 px-6 h-9'>
           <FunnelIcon
             className='w-[20px] text-purple-900 cursor-pointer'
             fill={isFiltering ? '#5F288D' : 'rgba(0,0,0,0)'}