From ca02261265258e33f8c36c1357c56dfbb6c917d2 Mon Sep 17 00:00:00 2001
From: Sahas <sahasvivek001@gmail.com>
Date: Fri, 9 Jun 2023 16:34:55 +0530
Subject: [PATCH] feat: listing view pages

---
 pages/bounties/index.tsx                      |  6 +--
 .../Listing/Tracks/AboutTrackCard.tsx         | 51 ++++++++++---------
 .../Listing/Tracks/DelegateModal.tsx          |  4 +-
 src/ui-components/FilterByTags.tsx            |  6 +--
 src/ui-components/TopicTag.tsx                | 16 +++---
 styles/globals.css                            |  2 +
 tailwind.config.js                            |  5 ++
 7 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/pages/bounties/index.tsx b/pages/bounties/index.tsx
index d19c89f5e6..d15147756a 100644
--- a/pages/bounties/index.tsx
+++ b/pages/bounties/index.tsx
@@ -68,17 +68,17 @@ const Bounties: FC<IBountiesProps> = (props) => {
 	return (
 		<>
 			<SEOHead title='Bounties' network={network}/>
-			<h1 className='dashboard-heading mb-4 md:mb-6'>On Chain Bounties</h1>
+			<h1 className='text-bodyBlue font-semibold text-2xl leading-7 mb-4 md:mb-6'>On Chain Bounties</h1>
 
 			{/* Intro and Create Post Button */}
 			<div className="flex flex-col md:flex-row">
-				<p className="text-sidebarBlue text-sm md:text-base font-medium bg-white p-4 md:p-8 rounded-md w-full shadow-md mb-4">
+				<p className="text-bodyBlue text-sm font-medium bg-white p-4 md:p-8 rounded-xxl w-full shadow-md mb-4">
 					This is the place to discuss on-chain bounties. Bounty posts are automatically generated as soon as they are created on-chain.
 					Only the proposer is able to edit them.
 				</p>
 			</div>
 
-			<div className='shadow-md bg-white p-3 md:p-8 rounded-md'>
+			<div className='shadow-md bg-white p-3 md:p-8 rounded-xxl'>
 				<div className='flex items-center justify-between'>
 					<div>
 						<h1 className='dashboard-heading'>{ count } Bounties</h1>
diff --git a/src/components/Listing/Tracks/AboutTrackCard.tsx b/src/components/Listing/Tracks/AboutTrackCard.tsx
index 5379349d64..4e4da7b5b1 100644
--- a/src/components/Listing/Tracks/AboutTrackCard.tsx
+++ b/src/components/Listing/Tracks/AboutTrackCard.tsx
@@ -99,14 +99,14 @@ const AboutTrackCard: FC<IAboutTrackCardProps> = (props) => {
 	}, [network, trackName]);
 
 	return (
-		<div className={`${className} bg-white drop-shadow-md rounded-md p-4 md:p-8 text-sidebarBlue`}>
-			<div className="flex justify-between capitalize font-medium">
+		<div className={`${className} bg-white drop-shadow-md rounded-xxl p-4 md:p-8`}>
+			<div className="flex justify-between">
 				<div className='flex items-center gap-x-2'>
-					<h2 className="text-lg capitalize">
+					<h2 className="text-xl font-semibold leading-8 text-bodyBlue">
 						About {trackName.split(/(?=[A-Z])/).join(' ')}
 					</h2>
 					<Tooltip color='#E5007A' title='Track Number' className='cursor-pointer'>
-						<h4 className=' text-[#B70062] text-sm font-medium leading-[18px] tracking-[0.01em]'>
+						<h4 className=' text-[#E5007A] text-xl font-semibold leading-8 tracking-[0.01em]'>
 							#{trackMetaData.trackId}
 						</h4>
 					</Tooltip>
@@ -115,20 +115,20 @@ const AboutTrackCard: FC<IAboutTrackCardProps> = (props) => {
 				<h2 className="text-sm text-pink_primary">{trackMetaData?.group}</h2>
 			</div>
 
-			<p className="mt-5 text-sm font-normal">{trackMetaData?.description}</p>
+			<p className="mt-0 font-normal text-base leading-6 text-bodyBlue">{trackMetaData?.description}</p>
 
 			<div className="mt-8 text-xs w-full max-w-[1000px]">
 				<Row gutter={[{ lg: 32, md: 16, sm: 4, xl: 32, xs: 4, xxl: 32 }, 16]}>
 					<Col xs={24} sm={24} md={12} lg={12} xl={8}>
-						{trackMetaData.maxDeciding && <Row>
-							<Col span={15} className='font-bold'>Capacity:</Col>
-							<Col span={9}>{trackMetaData.maxDeciding}</Col>
+						{trackMetaData.maxDeciding && <Row className='flex flex-col'>
+							<Col span={15} className='font-medium leading-5 text-sm text-lightBlue'>MAX DECIDING</Col>
+							<Col span={9} className='text-lg font-medium leading-7 text-bodyBlue'>{trackMetaData.maxDeciding}</Col>
 						</Row>
 						}
 
-						{trackMetaData.decisionDeposit && <Row className='mt-3'>
-							<Col span={15} className='font-bold'>Decision Deposit:</Col>
-							<Col span={9}>
+						{trackMetaData.decisionDeposit && <Row className='lg:mt-12 mt-5 flex flex-col'>
+							<Col span={15} className='font-medium leading-5 text-sm text-lightBlue'>DECISION DEPOSIT</Col>
+							<Col span={9} className='text-lg font-medium leading-7 text-bodyBlue' >
 								{trackMetaData.decisionDeposit &&
 									formatUSDWithUnits(formatBnBalance(`${trackMetaData.decisionDeposit}`.startsWith('0x') ? new BN(`${trackMetaData.decisionDeposit}`.slice(2), 'hex') : trackMetaData.decisionDeposit, { numberAfterComma: 2,
 										withThousandDelimitor: false, withUnit: true }, network), 1)
@@ -139,32 +139,35 @@ const AboutTrackCard: FC<IAboutTrackCardProps> = (props) => {
 					</Col>
 
 					<Col xs={24} sm={24} md={12} lg={12} xl={8}>
-						{trackMetaData.preparePeriod && <Row>
-							<Col span={15} className='font-bold'>Prepare Period:</Col>
-							<Col span={9} className='whitespace-pre'>{blocksToRelevantTime(network, Number(trackMetaData.preparePeriod))}</Col>
+						{trackMetaData.confirmPeriod && <Row className='flex flex-col'>
+							<Col span={15} className='font-medium leading-5 text-sm text-lightBlue'>CONFIRM PERIOD</Col>
+							<Col span={9} className='whitespace-pre text-lg font-medium leading-7 text-bodyBlue'>{blocksToRelevantTime(network, Number(trackMetaData.confirmPeriod))}</Col>
 						</Row>}
 
-						{trackMetaData.confirmPeriod && <Row className='mt-3'>
-							<Col span={15} className='font-bold'>Confirm Period:</Col>
-							<Col span={9} className='whitespace-pre'>{blocksToRelevantTime(network, Number(trackMetaData.confirmPeriod))}</Col>
+						{trackMetaData.preparePeriod && <Row className='lg:mt-12 mt-5 flex flex-col'>
+							<Col span={15} className='font-medium leading-5 text-sm text-lightBlue'>PREPARE PERIOD</Col>
+							<Col span={9} className='whitespace-pre text-lg font-medium leading-7 text-bodyBlue'>{blocksToRelevantTime(network, Number(trackMetaData.preparePeriod))}</Col>
 						</Row>}
 					</Col>
 
 					<Col xs={24} sm={24} md={12} lg={12} xl={8}>
-						{trackMetaData.minEnactmentPeriod &&<Row>
-							<Col xs={15} xl={19} className='font-bold'>Min Enactment Period:</Col>
-							<Col xs={9} xl={5} className='whitespace-pre'>{blocksToRelevantTime(network, Number(trackMetaData.minEnactmentPeriod))}</Col>
+						{trackMetaData.minEnactmentPeriod &&<Row className='flex flex-col'>
+							<Col xs={15} xl={19} className='font-medium leading-5 text-sm text-lightBlue'>MIN ENACTMENT PERIOD</Col>
+							<Col xs={9} xl={5} className='whitespace-pre text-lg font-medium leading-7 text-bodyBlue'>{blocksToRelevantTime(network, Number(trackMetaData.minEnactmentPeriod))}</Col>
 						</Row>}
 
-						{trackMetaData.decisionPeriod && <Row className='mt-3'>
-							<Col xs={15} xl={19} className='font-bold'>Decision Period:</Col>
-							<Col xs={9} xl={5} className='whitespace-pre'>{blocksToRelevantTime(network,Number(trackMetaData.decisionPeriod))}</Col>
+						{trackMetaData.decisionPeriod && <Row className='lg:mt-12 mt-5 flex flex-col'>
+							<Col xs={15} xl={19} className='font-medium leading-5 text-sm text-lightBlue'>DECISION PERIOD</Col>
+							<Col xs={9} xl={5} className='whitespace-pre text-lg font-medium leading-7 text-bodyBlue'>{blocksToRelevantTime(network,Number(trackMetaData.decisionPeriod))}</Col>
 						</Row>}
 					</Col>
 				</Row>
 			</div>
 
-			<Divider />
+			<Divider style={{
+				backgroundColor: '#F8E3EE',
+				border: '2px solid #F8E3EE'
+			}} />
 
 			<div className="flex justify-end">
 				{!['moonbeam', 'moonbase', 'moonriver'].includes(network) &&
diff --git a/src/components/Listing/Tracks/DelegateModal.tsx b/src/components/Listing/Tracks/DelegateModal.tsx
index bffe6fc8bf..4c5c2dbdd0 100644
--- a/src/components/Listing/Tracks/DelegateModal.tsx
+++ b/src/components/Listing/Tracks/DelegateModal.tsx
@@ -299,9 +299,9 @@ const DelegateModal = ({ className, defaultTarget, open, setOpen, trackNum }: Pr
 
 	return (
 		<>
-			{!open && !setOpen && <Button onClick={() => {network === 'kusama'? router.push('/delegation') : setDefaultOpen(true);}} className='border-pink_primary font-medium text-sm text-pink_primary hover:bg-pink_primary hover:text-white flex gap-0 items-center justify-center py-3 px-6 rounded-[4px]'>
+			{!open && !setOpen && <Button onClick={() => {network === 'kusama'? router.push('/delegation') : setDefaultOpen(true);}} className='border-pink_primary text-white bg-pink_primary hover:text-white flex gap-0 items-center justify-center px-4 py-5 rounded-md'>
 				<PlusOutlined/>
-				<span >Delegate</span>
+				<span className='text-xs leading-4 font-normal'>Delegate</span>
 			</Button>}
 
 			<Modal
diff --git a/src/ui-components/FilterByTags.tsx b/src/ui-components/FilterByTags.tsx
index e039f5f9ec..675cc6e716 100644
--- a/src/ui-components/FilterByTags.tsx
+++ b/src/ui-components/FilterByTags.tsx
@@ -13,7 +13,7 @@ import { poppins } from 'pages/_app';
 import handleFilterResults from '~src/util/handleFilterResults';
 import NoTagsFoundIcon from '~assets/icons/no-tag.svg';
 
-import { CheckOutlineIcon, CheckedIcon, FilterIcon, FilterUnfilledIcon, SearchIcon, TrendingIcon } from './CustomIcons';
+import { CheckOutlineIcon, CheckedIcon, FilterIcon, SearchIcon, TrendingIcon } from './CustomIcons';
 import ClearIcon from '~assets/icons/close-tags.svg';
 
 interface Props {
@@ -132,10 +132,10 @@ const FilterByTags=({ className }:Props) => {
 			placement="bottomRight"
 		>
 
-			<div className={`text-sm tracking-wide font-normal flex items-center ${openFilter ? 'text-pink_primary':'text-grey_primary'} mt-[3.5px] cursor-pointer`}>
+			<div className='text-sm tracking-wide font-normal flex items-center text-pink_primary mt-[3.5px] cursor-pointer'>
         Filter
 				<span className='text-xl ml-2 mt-[2px]'>
-					{openFilter?<FilterIcon/>:<FilterUnfilledIcon/>}
+					<FilterIcon/>
 				</span>
 			</div>
 
diff --git a/src/ui-components/TopicTag.tsx b/src/ui-components/TopicTag.tsx
index 62b5ecca7e..db24656ce1 100644
--- a/src/ui-components/TopicTag.tsx
+++ b/src/ui-components/TopicTag.tsx
@@ -33,19 +33,19 @@ export default styled(TopicTag)`
 	}
 
 	&.Democracy {
-		background-color: var(--blue_primary) !important;
-		color: white;
+		background-color: #EEF8FF !important;
+		color: #093874;
 	}
 	&.Council {
-		background-color: var(--pink_secondary) !important;
-		color: white;
+		background-color: #FFEDF2 !important;
+		color: #CD1F59;
 	}
 	&.Treasury {
-		background-color: var(--pink_primary) !important;
-		color: white;
+		background-color: #FFF4EB !important;
+		color: #AC6A30;
 	}
 	&.Technical, &.Tech {
-		background-color: var(--pink_primary) !important;
-		color: white;
+		background-color: #FEF7DD !important;
+		color: #75610E;
 	}
 `;
diff --git a/styles/globals.css b/styles/globals.css
index e660267af6..56d3578cd2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,6 +5,8 @@
 :root {
   --navBlue: #90a0b7;
   --sidebarBlue: #334d6e;
+  --bodyBlue: #243a57;
+  --lightBlue: #485f7d;
   --black_primary: #2e2f30;
   --blue_primary: #4d9999;
   --blue_secondary: #ebf0f5;
diff --git a/tailwind.config.js b/tailwind.config.js
index 18d4161e9b..a668dc67b0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,8 @@ module.exports = {
 			colors: {
 				navBlue: 'var(--navBlue)',
 				sidebarBlue: 'var(--sidebarBlue)',
+				bodyBlue: 'var(--bodyBlue)',
+				lightBlue: 'var(--lightBlue)',
 				blue_primary: 'var(--blue_primary)',
 				blue_secondary: 'var(--blue_secondary)',
 				green_primary: 'var(--green_primary)',
@@ -41,6 +43,9 @@ module.exports = {
 			},
 			screens: {
 				'xs': '320px'
+			},
+			borderRadius: {
+				'xxl': '0.875rem'
 			}
 		}
 	},