feat: vote modal icons

ALI-SULAIMAN-ALI · Oct 29, 2023 · 76741f7 · 76741f7
1 parent fd02384
commit 76741f7
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 19 deletions.
diff --git a/public/assets/icons/vote-data-icon.svg b/public/assets/icons/vote-data-icon.svg
diff --git a/src/components/Post/GovernanceSideBar/Modal/VoteData/VoteList.tsx b/src/components/Post/GovernanceSideBar/Modal/VoteData/VoteList.tsx
@@ -19,15 +19,14 @@ import VoterRow from './VoterRow';
 import ExpandIcon from '~assets/icons/expand-small-icon.svg';
 // import ChartIcon from '~assets/chart-icon.svg';
 // import ThresholdGraph from './ThresholdGraph';
-import VoteDataIcon from '~assets/icons/vote-data-icon.svg';
 import DelegationVotersList from './DelegateVoteList';
 // import GraphExpandIcon from '~assets/graph-expand.svg';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import BN from 'bn.js';
 import { useNetworkSelector } from '~src/redux/selectors';
 import { Pagination } from '~src/components/Pagination';
 import { useTheme } from 'next-themes';
-import { CloseIcon } from '~src/ui-components/CustomIcons';
+import { CloseIcon, VoteDataIcon } from '~src/ui-components/CustomIcons';
 
 // const ZERO = new BN(0);
 const ZERO = '0';
@@ -396,9 +395,7 @@ const VotersList: FC<IVotersListProps> = (props) => {
 					title={
 						<div className='ml-[-24px] mr-[-24px] text-[18px] dark:bg-section-dark-overlay'>
 							<h3 className='align-center mb-0 ml-[24px] flex gap-2 font-semibold text-blue-light-high dark:text-blue-dark-high'>
-								<span className='relative top-[3px]'>
-									<VoteDataIcon />
-								</span>
+								<VoteDataIcon className='text-lightBlue dark:text-icon-dark-inactive' />
 								<span className='text-xl font-semibold text-bodyBlue dark:text-blue-dark-high'>Delegation Data</span>
 							</h3>
 							<Divider className='my-2 mb-5 text-[#D2D8E0] dark:text-separatorDark' />

diff --git a/src/components/Post/GovernanceSideBar/Modal/VoteData/index.tsx b/src/components/Post/GovernanceSideBar/Modal/VoteData/index.tsx
@@ -4,10 +4,9 @@
 import React, { FC } from 'react';
 import { getVotingTypeFromProposalType } from '~src/global/proposalType';
 import VotersList from './VoteList';
-import VoteDataIcon from '~assets/icons/vote-data-icon.svg';
 import { Divider, Modal as AntdModal } from 'antd';
 import styled from 'styled-components';
-import { CloseIcon } from '~src/ui-components/CustomIcons';
+import { CloseIcon, VoteDataIcon } from '~src/ui-components/CustomIcons';
 interface IVoteDataModal {
 	setOpen?: any;
 	open?: any;
@@ -37,9 +36,7 @@ const VoteDataModal: FC<IVoteDataModal> = ({ setOpen, open, onchainId, proposalT
 			title={
 				<div className='ml-[-24px] mr-[-24px] text-[18px] dark:bg-section-dark-overlay'>
 					<h3 className='align-center mb-0 ml-[24px] flex gap-2 font-semibold text-blue-light-high dark:text-blue-dark-high'>
-						<span className='relative top-[3px]'>
-							<VoteDataIcon />
-						</span>
+						<VoteDataIcon className='text-lightBlue dark:text-icon-dark-inactive' />
 						<span className='text-xl font-semibold text-bodyBlue dark:text-blue-dark-high'>Voting Data</span>
 					</h3>
 					<Divider className='my-2 mb-5 text-[#D2D8E0] dark:border-separatorDark' />

diff --git a/src/components/Post/GovernanceSideBar/Referenda/ReferendumV2VoteInfo.tsx b/src/components/Post/GovernanceSideBar/Referenda/ReferendumV2VoteInfo.tsx
@@ -133,34 +133,34 @@ const ReferendumV2VoteInfo: FC<IReferendumV2VoteInfoProps> = ({ className, tally
 					<section className='-mt-4 grid grid-cols-2 gap-x-7 gap-y-3 text-lightBlue dark:text-blue-dark-medium'>
 						<article className='flex items-center justify-between gap-x-2'>
 							<div className='flex items-center gap-x-1'>
-								<span className='text-xs font-medium leading-[18px] tracking-[0.01em] dark:font-normal'>Ayes</span>
+								<span className='text-xs font-medium leading-[18px] tracking-[0.01em] dark:font-normal dark:text-white'>Ayes</span>
 							</div>
-							<div className='text-xs font-medium leading-[22px] text-navBlue'>
+							<div className='text-xs font-medium leading-[22px] text-navBlue dark:text-blue-dark-medium'>
 								{formatUSDWithUnits(formatBnBalance(tallyData.ayes, { numberAfterComma: 2, withThousandDelimitor: false, withUnit: true }, network), 1)}
 							</div>
 						</article>
 						<article className='flex items-center justify-between gap-x-2'>
 							<div className='flex items-center gap-x-1'>
-								<span className='text-xs font-medium leading-[18px] tracking-[0.01em]'>Nays</span>
+								<span className='text-xs font-medium leading-[18px] tracking-[0.01em] dark:text-white'>Nays</span>
 							</div>
-							<div className='text-xs font-medium leading-[22px] text-navBlue'>
+							<div className='text-xs font-medium leading-[22px] text-navBlue dark:text-blue-dark-medium'>
 								{formatUSDWithUnits(formatBnBalance(tallyData.nays, { numberAfterComma: 2, withThousandDelimitor: false, withUnit: true }, network), 1)}
 							</div>
 						</article>
 						<article className='flex items-center justify-between gap-x-2'>
 							<div className='flex items-center gap-x-1'>
-								<span className='text-xs font-medium leading-[18px] tracking-[0.01em]'>Support</span>
+								<span className='text-xs font-medium leading-[18px] tracking-[0.01em] dark:text-white'>Support</span>
 							</div>
-							<div className='text-xs font-medium leading-[22px] text-navBlue'>
+							<div className='text-xs font-medium leading-[22px] text-navBlue dark:text-blue-dark-medium'>
 								{formatUSDWithUnits(formatBnBalance(tallyData.support, { numberAfterComma: 2, withThousandDelimitor: false, withUnit: true }, network), 1)}
 							</div>
 						</article>
 						{activeIssuance ? (
 							<article className='flex items-center justify-between gap-x-2'>
 								<div className='flex items-center gap-x-1'>
-									<span className='text-xs font-medium leading-[18px] tracking-[0.01em]'>Issuance</span>
+									<span className='text-xs font-medium leading-[18px] tracking-[0.01em] dark:text-white'>Issuance</span>
 								</div>
-								<div className='text-xs font-medium leading-[22px] text-navBlue'>
+								<div className='text-xs font-medium leading-[22px] text-navBlue dark:text-blue-dark-medium'>
 									{formatUSDWithUnits(formatBnBalance(activeIssuance, { numberAfterComma: 2, withThousandDelimitor: false, withUnit: true }, network), 1)}
 								</div>
 							</article>

diff --git a/src/ui-components/CustomIcons.tsx b/src/ui-components/CustomIcons.tsx
@@ -126,6 +126,7 @@ import RedirectSVG from '~assets/icons/redirect-icon.svg';
 import ProposalsIconSVG from '~assets/icons/proposals-icon.svg';
 import TechComIconSVG from '~assets/icons/tech-com-icon.svg';
 import DelegateProfileGreyIcon from '~assets/icons/delegate-title.svg';
+import VoteDataSVG from '~assets/icons/vote-data-icon.svg';
 
 export const Caution = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
@@ -148,6 +149,13 @@ export const ProposalsIconListing = (props: Partial<CustomIconComponentProps>) =
 	/>
 );
 
+export const VoteDataIcon = (props: Partial<CustomIconComponentProps>) => (
+	<Icon
+		component={VoteDataSVG}
+		{...props}
+	/>
+);
+
 export const TechComIconListing = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
 		component={TechComIconSVG}

diff --git a/styles/globals.css b/styles/globals.css
@@ -42,6 +42,7 @@
   --modalOverlayDark: #E8E8E826;
   --alertColorDark: #141C2D;
   --disableStateDark: #1D1D1D;
+  --helperTextColorDark: #595959;
 }
 
 ::-webkit-scrollbar {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -46,6 +46,7 @@ module.exports = {
 				modalOverlayDark: 'var(--modalOverlayDark)',
 				alertColorDark: 'var(--alertColorDark)',
 				disableStateDark: 'var(--disableStateDark)',
+				helperTextColorDark: 'var(--helperTextColorDark)',
 				blue: {
 					light: {
 						disabled: '#96A4B6',