Skip to content

Commit 1f8cc77

Browse files
sanjaypinnasanjaypinna
committed
refactor: improve styling across various components
1 parent 8f77890 commit 1f8cc77

File tree

19 files changed

+156
-134
lines changed

19 files changed

+156
-134
lines changed

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,8 @@ const DetailsQuery: any = graphql(`
4949
}
5050
`);
5151

52-
interface DetailsProps {
53-
setShowcharts: (vars: boolean) => void;
54-
}
5552

56-
const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
53+
const Details: React.FC = () => {
5754
const params = useParams();
5855
const chartRef = useRef<ReactECharts>(null);
5956

@@ -62,11 +59,7 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
6259
() => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
6360
);
6461

65-
useEffect(() => {
66-
if (data && data?.getChartData.length <= 0) {
67-
setShowcharts(false);
68-
}
69-
}, [data]);
62+
7063

7164
const renderChart = (item: any) => {
7265
if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
@@ -84,7 +77,7 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
8477
const toggleDescription = () => setIsexpanded(!isexpanded);
8578

8679
return (
87-
<div className=" flex w-full flex-col gap-4 p-2">
80+
<div className=" flex w-full flex-col gap-4 py-10">
8881
{isLoading ? (
8982
<div className=" mt-8 flex justify-center">
9083
<Spinner />

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

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useEffect, useState } from 'react';
22
import Image from 'next/image';
33
import Link from 'next/link';
4-
import { Button, Divider, Icon, Text, Tooltip } from 'opub-ui';
5-
6-
import { formatDate, getWebsiteTitle } from '@/lib/utils';
4+
import { Button, Divider, Icon, Tag, Text, Tooltip } from 'opub-ui';
5+
import Styles from '../../../dataset.module.scss'
6+
import { cn, formatDate, getWebsiteTitle } from '@/lib/utils';
77
import { Icons } from '@/components/icons';
88

99
interface MetadataProps {
@@ -79,7 +79,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
7979
: '/org.png';
8080

8181
return (
82-
<div className="flex flex-col gap-10">
82+
<div className="flex flex-col gap-5 lg:gap-10">
8383
<div className=" flex items-center justify-between">
8484
<div className="flex flex-col gap-2">
8585
<Text
@@ -158,7 +158,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
158158
</div>
159159
</div>
160160
{Metadata.map((item: any, index: any) => (
161-
<div className="flex items-start gap-2 " key={index}>
161+
<div className="flex gap-2 " key={index}>
162162
<Text
163163
className="min-w-[120px] basis-1/4 uppercase"
164164
variant="bodyMd"
@@ -175,6 +175,19 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
175175
<Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
176176
{formatDate(item.value)}
177177
</Text>
178+
) : item.type === 'MULTISELECT' ? (
179+
<div className={cn('flex flex-wrap gap-2', Styles.Tag)}>
180+
{item.value.split(',').map((val: any, index: any) => (
181+
<Tag
182+
key={index}
183+
fillColor="var(--orange-secondary-color)"
184+
borderColor="var(--orange-secondary-text)"
185+
textColor="black"
186+
>
187+
{val.trim()}
188+
</Tag>
189+
))}
190+
</div>
178191
) : (
179192
<Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
180193
{item.value}
@@ -208,7 +221,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
208221
Description
209222
</Text>
210223
<Text variant="bodyLg">
211-
{data.description?.length > 260 && !isexpanded
224+
{/* {data.description?.length > 260 && !isexpanded
212225
? `${data.description.slice(0, 260)}...`
213226
: data.description}
214227
{data.description?.length > 260 && (
@@ -220,7 +233,8 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
220233
>
221234
{isexpanded ? 'See Less' : 'See More'}
222235
</Button>
223-
)}
236+
)} */}
237+
{data.description}
224238
</Text>
225239
</div>
226240
</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ const PrimaryData: React.FC<PrimaryDataProps> = ({ data, isLoading }) => {
2222
{data?.tags.map((item: any, index: any) => (
2323
<Tag
2424
key={index}
25-
variation="outlined"
26-
textColor="var(--surface-default)"
27-
borderColor="var(--orange-secondary-color)"
25+
fillColor="var(--accent-tertiary-color)"
26+
borderColor="#5C9A91"
27+
textColor="black"
2828
>
29-
<Text className=" text-primaryText" fontWeight='medium'>{item.value}</Text>{' '}
29+
{item.value}
3030
</Tag>
3131
))}
3232
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ const Resources = () => {
210210
</div>
211211
) : getResourceDetails.data &&
212212
getResourceDetails.data?.datasetResources?.length > 0 ? (
213-
<div className=" flex flex-col gap-8">
213+
<div className=" py-10 flex flex-col gap-8">
214214
<div className="flex flex-col gap-1">
215215
<Text variant="headingLg">Files in this Dataset </Text>
216216
<Text variant="bodyLg">
@@ -231,7 +231,7 @@ const Resources = () => {
231231
{item.fileDetails?.format && (
232232
<Format fileType={item.fileDetails?.format} />
233233
)}
234-
<Text variant="headingMd">{item.name}</Text>
234+
<Text variant="headingMd" className='truncate' >{item.name}</Text>
235235
</div>
236236
</div>
237237
<Accordion type="single" collapsible className="w-full">

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,7 @@ const similarDatasetQuery: any = graphql(`
7575
}
7676
`);
7777

78-
interface Props {
79-
showCharts: boolean;
80-
}
81-
82-
const SimilarDatasets: React.FC<Props> = ({ showCharts }) => {
78+
const SimilarDatasets: React.FC = () => {
8379
const params = useParams();
8480

8581
const SimilatDatasetdetails: { data: any; isLoading: any } = useQuery(
@@ -94,18 +90,15 @@ const SimilarDatasets: React.FC<Props> = ({ showCharts }) => {
9490
)
9591
);
9692

97-
9893
return (
99-
<div className="py-4 md:py-10 lg:py-20">
94+
<div className="py-4 md:py-10 lg:py-10">
10095
{SimilatDatasetdetails.isLoading ? (
10196
<div className=" mt-8 flex justify-center">
10297
<Spinner />
10398
</div>
10499
) : (
105100
<>
106-
<div
107-
className={`flex flex-col gap-1 ${showCharts ? ' px-6 lg:px-10' : ' lg:px-0'}`}
108-
>
101+
<div className={`flex flex-col gap-1 `}>
109102
<Text variant="headingXl">Similar Datasets</Text>
110103
<Text variant="bodyLg">Similar Datasets that you may like </Text>
111104
</div>

‎app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@ const datasetQuery: any = graphql(`
6969
`);
7070

7171
const DatasetDetailsPage = () => {
72-
const [showCharts, setShowcharts] = useState(true);
73-
7472
const params = useParams();
7573

7674
const Datasetdetails: { data: any; isLoading: any } = useQuery(
@@ -106,16 +104,9 @@ const DatasetDetailsPage = () => {
106104
isLoading={Datasetdetails.isLoading}
107105
/>
108106
)}
109-
<div className="mt-10">
110-
{showCharts ? (
111-
<Details setShowcharts={setShowcharts} />
112-
) : (
113-
<>
114-
<Resources />
115-
<SimilarDatasets showCharts={showCharts} />
116-
</>
117-
)}
118-
</div>
107+
<Details />
108+
<Resources />
109+
<SimilarDatasets />
119110
</div>
120111
<div className=" hidden w-1/4 gap-10 px-7 py-10 lg:block">
121112
{Datasetdetails.isLoading ? (
@@ -131,14 +122,7 @@ const DatasetDetailsPage = () => {
131122
)}
132123
</div>
133124
</div>
134-
{showCharts && (
135-
<>
136-
<div className="w-full p-6 lg:px-10 lg:py-10">
137-
<Resources />
138-
</div>
139-
<SimilarDatasets showCharts={showCharts} />
140-
</>
141-
)}
125+
142126
{/* <div className="w-full p-6 lg:p-10 lg:py-10">
143127
<SimilarDatasets />
144128
</div> */}

‎app/[locale]/(user)/datasets/components/FIlter/Filter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Filter: React.FC<FilterProps> = ({
4747
className=" font-medium text-secondaryText"
4848
onClick={handleReset}
4949
>
50-
Reset
50+
RESET
5151
</Button>
5252
</div>
5353
</div>

‎app/[locale]/(user)/datasets/dataset.module.scss‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@
33
width: 80%;
44
height: 36px;
55
}
6-
/* In your global CSS/SCSS file */
7-
div[class*="Input-module_Backdrop"] {
8-
border-top-color: var(--border-subdued) ;
9-
border-radius: 8px;
10-
}
6+
/* In your global CSS/SCSS file */
7+
div[class*='Input-module_Backdrop'] {
8+
border-top-color: var(--border-subdued);
9+
border-radius: 8px;
10+
}
1111
}
1212

13+
.Tag {
14+
> span > span {
15+
overflow: hidden;
16+
text-overflow: ellipsis;
17+
white-space: nowrap;
18+
max-width: 120px;
19+
}
20+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ const PublishersListingPage = () => {
9292
variant="headingLg"
9393
color="onBgDefault"
9494
fontWeight="regular"
95+
className=' leading-3 lg:leading-5'
9596
>
9697
Our Publishers are the backbone of our platform. Their
9798
contributions are what make up our platform. They belong to

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

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const SectorsListingPage = () => {
8888
variant="headingLg"
8989
color="onBgDefault"
9090
fontWeight="regular"
91+
className='leading-3 lg:leading-5'
9192
>
9293
We try to enable our users to create and participate in
9394
sectoral data collaboratives, amplifying the reach and
@@ -124,57 +125,59 @@ const SectorsListingPage = () => {
124125
</div>
125126
</div>
126127
</div>
127-
<div className="container flex flex-col gap-5 py-10 lg:gap-10">
128-
<Text variant="heading2xl" fontWeight="bold">
129-
Explore Sectors
130-
</Text>
131-
<div className="flex w-full flex-col justify-center gap-6">
132-
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
133-
<SearchInput
134-
label={''}
135-
className={cn('w-full', Styles.Search)}
136-
onSubmit={(e) => {
137-
setSearchText(e);
138-
}}
139-
onClear={() => {
140-
setSearchText('');
141-
}}
142-
name={'Start typing to search for any sector'}
143-
/>
144-
<div className="flex items-center gap-2">
145-
<Text
146-
variant="bodyLg"
147-
fontWeight="semibold"
148-
className="whitespace-nowrap text-secondaryOrange"
149-
>
150-
Sort :
151-
</Text>
152-
<Select
153-
label=""
154-
labelInline
155-
name="sort-select"
156-
options={[
157-
{
158-
label: 'Name Asc',
159-
value: 'name_asc',
160-
},
161-
{
162-
label: 'Name Desc',
163-
value: 'name_desc',
164-
},
165-
{
166-
label: 'Dataset Count Asc',
167-
value: 'datasetCount_asc',
168-
},
169-
{
170-
label: 'Dataset Count Desc',
171-
value: 'datasetCount_desc',
172-
},
173-
]}
174-
onChange={(e: any) => {
175-
handleSortChange(e);
128+
<div className="container flex flex-col gap-5 pt-10 pb-20 lg:gap-10">
129+
<div>
130+
<Text variant="heading2xl" fontWeight="bold">
131+
Explore Sectors
132+
</Text>
133+
<div className="mt-6 flex w-full flex-col justify-center gap-6">
134+
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
135+
<SearchInput
136+
label={''}
137+
className={cn('w-full', Styles.Search)}
138+
onSubmit={(e) => {
139+
setSearchText(e);
140+
}}
141+
onClear={() => {
142+
setSearchText('');
176143
}}
144+
name={'Start typing to search for any sector'}
177145
/>
146+
<div className="flex items-center gap-2">
147+
<Text
148+
variant="bodyLg"
149+
fontWeight="semibold"
150+
className="whitespace-nowrap text-secondaryOrange"
151+
>
152+
Sort :
153+
</Text>
154+
<Select
155+
label=""
156+
labelInline
157+
name="sort-select"
158+
options={[
159+
{
160+
label: 'Name Asc',
161+
value: 'name_asc',
162+
},
163+
{
164+
label: 'Name Desc',
165+
value: 'name_desc',
166+
},
167+
{
168+
label: 'Dataset Count Asc',
169+
value: 'datasetCount_asc',
170+
},
171+
{
172+
label: 'Dataset Count Desc',
173+
value: 'datasetCount_desc',
174+
},
175+
]}
176+
onChange={(e: any) => {
177+
handleSortChange(e);
178+
}}
179+
/>
180+
</div>
178181
</div>
179182
</div>
180183
</div>
@@ -204,7 +207,7 @@ const SectorsListingPage = () => {
204207
<Text variant="headingLg" fontWeight="semibold">
205208
{sectors.name}
206209
</Text>
207-
<Divider />
210+
<Divider className=' h-[2px] bg-greyExtralight' />
208211
</div>
209212
<div className="flex gap-1">
210213
<Text

0 commit comments

Comments
 (0)