Skip to content

Commit 5bdf9dd

Browse files
sanjaypinnasanjaypinna
committed
style: update headings and text styles for improved readability across Datasets, Sectors, Use Cases, and Resources components
1 parent 5d123be commit 5bdf9dd

File tree

6 files changed

+93
-76
lines changed

6 files changed

+93
-76
lines changed

‎app/[locale]/(user)/components/Datasets.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,23 +53,29 @@ const Datasets = () => {
5353

5454
return (
5555
<div className=" container py-10 md:px-8 lg:py-20">
56-
<div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12">
57-
<Text variant="heading3xl">Popular Datasets</Text>
58-
<div className="flex flex-wrap justify-between gap-2 ">
59-
<Text variant="headingLg" fontWeight="medium">
60-
Discover high-impact datasets that are helping users power research, analysis, and action. </Text>
56+
<div className="flex flex-wrap items-center justify-between gap-4 px-4 md:px-12 lg:gap-2 lg:px-12 ">
57+
<div className="flex flex-col gap-2">
58+
<Text variant="headingXl">Popular Datasets</Text>
59+
<Text variant="bodyLg" fontWeight="medium">
60+
Discover high-impact datasets that are helping users power research,
61+
analysis, and action.
62+
</Text>
63+
</div>
64+
<div>
6165
<Button
6266
kind="primary"
6367
className=" bg-secondaryOrange text-basePureBlack"
6468
onClick={() => {
6569
router.push('/datasets');
6670
}}
6771
>
68-
Explore all Datasets
72+
<Text variant="bodyLg" fontWeight="semibold">
73+
Explore all Datasets
74+
</Text>
6975
</Button>
7076
</div>
7177
</div>
72-
<div className="mt-12">
78+
<div className="mt-6 lg:mt-12">
7379
<Carousel className="flex w-full justify-between">
7480
<CarouselPrevious />
7581

‎app/[locale]/(user)/components/Sectors.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,25 @@ const Sectors = () => {
3737
}
3838
return (
3939
<div className="container pt-10 md:px-8 lg:pt-20">
40-
<div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12 ">
41-
<Text variant="heading3xl">Explore Sectors</Text>
42-
<div className="flex flex-wrap justify-between gap-2">
43-
<Text variant="headingLg" fontWeight="medium">
44-
Browse use cases and datasets organized by sector to find what matters most to your domain.
40+
<div className="flex flex-wrap items-center justify-between gap-4 lg:gap-2 px-4 md:px-12 lg:px-12 ">
41+
<div className="flex flex-col gap-2">
42+
<Text variant="headingXl">Explore Sectors</Text>
43+
<Text variant="bodyLg" fontWeight="medium">
44+
Browse use cases and datasets organized by sector to find what
45+
matters most to your domain.
4546
</Text>
47+
</div>
48+
<div>
4649
<Button
4750
kind="primary"
4851
className=" bg-secondaryOrange text-basePureBlack"
4952
onClick={() => {
5053
router.push('/sectors');
5154
}}
5255
>
53-
Explore all Sectors
56+
<Text variant="bodyLg" fontWeight="semibold">
57+
Explore all Sectors
58+
</Text>
5459
</Button>
5560
</div>
5661
</div>
@@ -59,7 +64,7 @@ const Sectors = () => {
5964
<Spinner />
6065
</div>
6166
) : (
62-
<div className="mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
67+
<div className="mt-6 lg:mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
6368
{data?.activeSectors.map((sectors: any) => (
6469
<Link
6570
href={`/sectors/${sectors.slug}?size=9&page=1&sort=recent&sectors=${capitalizeWords(sectors.slug)}`}

‎app/[locale]/(user)/components/UseCases.tsx‎

Lines changed: 64 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -94,24 +94,29 @@ const UseCasesListingPage = () => {
9494

9595
return (
9696
<div className=" container pt-10 md:px-8 lg:pt-20">
97-
<div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12 ">
98-
<Text variant="heading3xl">Recent UseCases</Text>
99-
<div className="flex flex-wrap justify-between gap-2 ">
100-
<Text variant="headingLg" fontWeight="medium">
101-
Explore freshly updated data use cases gaining momentum across CivicDataSpace
97+
<div className="flex items-center flex-wrap justify-between gap-4 lg:gap-2 px-4 md:px-12 lg:px-12 ">
98+
<div className="flex flex-col gap-2">
99+
<Text variant="headingXl">Recent UseCases</Text>
100+
<Text variant="bodyLg" fontWeight="medium">
101+
Explore freshly updated data use cases gaining momentum across
102+
CivicDataSpace
102103
</Text>
104+
</div>
105+
<div>
103106
<Button
104107
kind="primary"
105108
className=" bg-secondaryOrange text-basePureBlack"
106109
onClick={() => {
107110
router.push('/usecases');
108111
}}
109112
>
110-
Explore all Use Cases
113+
<Text variant="bodyLg" fontWeight="semibold">
114+
Explore all Use Cases
115+
</Text>
111116
</Button>
112117
</div>
113118
</div>
114-
<div className="mt-12">
119+
<div className="mt-6 lg:mt-12">
115120
<Carousel className="flex w-full justify-between">
116121
<CarouselPrevious />
117122

@@ -123,56 +128,58 @@ const UseCasesListingPage = () => {
123128
<CarouselContent className="p-4 ">
124129
{getUseCasesList &&
125130
getUseCasesList?.data?.publishedUseCases.length > 0 &&
126-
getUseCasesList?.data?.publishedUseCases.map((item: any, index: any) => (
127-
<CarouselItem
128-
key={item.id}
129-
className={cn(
130-
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
131-
Styles.UseCaseList
132-
)}
133-
>
134-
<Card
135-
title={item.title}
136-
key={index}
137-
href={`/usecases/${item.id}`}
138-
metadataContent={[
139-
{
140-
icon: Icons.calendar,
141-
label: 'Date',
142-
value: formatDate(item.modified),
143-
},
144-
{
145-
icon: Icons.globe,
146-
label: 'Geography',
147-
value: item.metadata?.find(
148-
(meta: any) =>
149-
meta.metadataItem?.label === 'Geography'
150-
)?.value,
151-
},
152-
]}
153-
footerContent={[
154-
{
155-
icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
156-
label: 'Sectors',
157-
},
158-
{
159-
icon: item.isIndividualUsecase
160-
? item?.user?.profilePicture
161-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
162-
: '/profile.png'
163-
: item?.organization?.logo
164-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
165-
: '/org.png',
166-
label: 'Published by',
167-
},
168-
]}
169-
imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo?.path.replace('/code/files/', '')}`}
170-
description={item.summary}
171-
iconColor="warning"
172-
variation={'collapsed'}
173-
/>
174-
</CarouselItem>
175-
))}
131+
getUseCasesList?.data?.publishedUseCases.map(
132+
(item: any, index: any) => (
133+
<CarouselItem
134+
key={item.id}
135+
className={cn(
136+
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
137+
Styles.UseCaseList
138+
)}
139+
>
140+
<Card
141+
title={item.title}
142+
key={index}
143+
href={`/usecases/${item.id}`}
144+
metadataContent={[
145+
{
146+
icon: Icons.calendar,
147+
label: 'Date',
148+
value: formatDate(item.modified),
149+
},
150+
{
151+
icon: Icons.globe,
152+
label: 'Geography',
153+
value: item.metadata?.find(
154+
(meta: any) =>
155+
meta.metadataItem?.label === 'Geography'
156+
)?.value,
157+
},
158+
]}
159+
footerContent={[
160+
{
161+
icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
162+
label: 'Sectors',
163+
},
164+
{
165+
icon: item.isIndividualUsecase
166+
? item?.user?.profilePicture
167+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
168+
: '/profile.png'
169+
: item?.organization?.logo
170+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
171+
: '/org.png',
172+
label: 'Published by',
173+
},
174+
]}
175+
imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo?.path.replace('/code/files/', '')}`}
176+
description={item.summary}
177+
iconColor="warning"
178+
variation={'collapsed'}
179+
/>
180+
</CarouselItem>
181+
)
182+
)}
176183
</CarouselContent>
177184
)}
178185
<CarouselNext />

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const Resources = () => {
212212
getResourceDetails.data?.datasetResources?.length > 0 ? (
213213
<div className=" flex flex-col gap-8 py-10">
214214
<div className="flex flex-col gap-1">
215-
<Text variant="headingLg">Files in this Dataset </Text>
215+
<Text variant="headingXl">Files in this Dataset </Text>
216216
<Text variant="bodyLg">
217217
All files associated with this Dataset which can be downloaded{' '}
218218
</Text>

‎app/[locale]/(user)/usecases/[useCaseSlug]/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,8 +194,7 @@ const UseCaseDetailPage = () => {
194194
<div className=" flex flex-col gap-1 ">
195195
<Text variant="headingXl">Datasets in this Use Case</Text>
196196
<Text variant="bodyLg" fontWeight="regular">
197-
All Datasets related to this Use Case
198-
</Text>
197+
Explore datasets related to this use case </Text>
199198
</div>
200199
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
201200
{/* <div className="grid grid-cols-1 p-4 gap-6 overflow-y-auto md:grid-cols-2 lg:grid-cols-3 max-h-[calc(100vh-250px)]"> */}

‎app/[locale]/(user)/usecases/components/Details.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
7272
</div>
7373
<div className=" lg:pr-4">
7474
<div className="mt-6 lg:mt-10">
75-
<Text variant="headingXl">GEOGRAPHIES</Text>
75+
<Text variant="headingXl">Geographies</Text>
7676
<div className="mt-4">
7777
<Tag
7878
fillColor="var(--orange-secondary-color)"
@@ -90,7 +90,7 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
9090
<div className="mt-6 lg:mt-10">
9191
<Text variant="headingXl">Summary</Text>
9292
<div className="mt-4">
93-
<Text variant="headingLg" fontWeight="regular" className="leading-5">
93+
<Text variant="bodyLg" fontWeight="regular" className="leading-5">
9494
{data.useCase.summary}
9595
</Text>
9696
</div>

0 commit comments

Comments
 (0)