From 02294a489cfb7c87d411b3e1de44b3955b12f306 Mon Sep 17 00:00:00 2001
From: Sahas <sahasvivek001@gmail.com>
Date: Sun, 29 Oct 2023 02:12:09 +0530
Subject: [PATCH] fix: offchain poll posts

---
 .../OptionPoll/CreateOptionPoll.tsx           |  2 +-
 .../Post/ActionsBar/ReportButton/index.tsx    | 11 +++++++---
 .../PostEditOrLinkCTA/ContinueWithLinking.tsx |  8 +++----
 .../ContinueWithoutLinking.tsx                |  8 +++----
 .../PostEditOrLinkCTA/LinkingAndEditing.tsx   | 14 ++++++-------
 src/components/Post/Poll/GeneralSignals.tsx   | 21 ++++++++++++-------
 src/ui-components/AddTags.tsx                 |  4 ++--
 src/ui-components/AyeNayButtons.tsx           |  4 ++--
 styles/globals.css                            |  2 ++
 tailwind.config.js                            |  2 ++
 10 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/components/Post/ActionsBar/OptionPoll/CreateOptionPoll.tsx b/src/components/Post/ActionsBar/OptionPoll/CreateOptionPoll.tsx
index 4fd6db62fd..8b9246d32d 100644
--- a/src/components/Post/ActionsBar/OptionPoll/CreateOptionPoll.tsx
+++ b/src/components/Post/ActionsBar/OptionPoll/CreateOptionPoll.tsx
@@ -141,7 +141,7 @@ const CreatePoll: FC<ICreatePollProps> = (props) => {
 	return (
 		<>
 			<Button
-				className={'flex items-center border-none px-1.5 text-pink_primary shadow-none'}
+				className={'flex items-center border-none px-1.5 text-pink_primary shadow-none dark:border-none dark:bg-transparent dark:text-blue-dark-helper'}
 				onClick={() => setShowModal(true)}
 			>
 				<AuditOutlined />
diff --git a/src/components/Post/ActionsBar/ReportButton/index.tsx b/src/components/Post/ActionsBar/ReportButton/index.tsx
index 1a4a997e5a..af18138462 100644
--- a/src/components/Post/ActionsBar/ReportButton/index.tsx
+++ b/src/components/Post/ActionsBar/ReportButton/index.tsx
@@ -172,11 +172,15 @@ const ReportButton: FC<IReportButtonProps> = (props) => {
 				className={`${type === 'comment' ? 'm-0 p-0' : 'm-0 px-1'} flex cursor-pointer items-center gap-x-[6px] border-none bg-transparent shadow-none`}
 				onClick={() => setShowModal(true)}
 			>
-				{isDeleteModal ? <DeleteOutlined className={`${className} text-pink_primary`} /> : <FlagOutlined className={`${className} p-0 text-pink_primary`} />}
 				{isDeleteModal ? (
-					<span className={`${className} break-keep text-pink_primary`}>Delete</span>
+					<DeleteOutlined className={`${className} text-pink_primary dark:text-blue-dark-helper`} />
 				) : (
-					<span className={`${className} ${type === 'comment' ? 'p-0' : ''} break-keep text-pink_primary`}>Report</span>
+					<FlagOutlined className={`${className} p-0 text-pink_primary dark:text-blue-dark-helper`} />
+				)}
+				{isDeleteModal ? (
+					<span className={`${className} break-keep text-pink_primary dark:text-blue-dark-helper`}>Delete</span>
+				) : (
+					<span className={`${className} ${type === 'comment' ? 'p-0' : ''} break-keep text-pink_primary dark:text-blue-dark-helper`}>Report</span>
 				)}
 			</button>
 			<Modal
@@ -194,6 +198,7 @@ const ReportButton: FC<IReportButtonProps> = (props) => {
 						key='back'
 						disabled={loading}
 						onClick={() => setShowModal(false)}
+						className='dark:bg-transparent'
 					>
 						Cancel
 					</Button>,
diff --git a/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithLinking.tsx b/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithLinking.tsx
index 7e668512b1..c285017d37 100644
--- a/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithLinking.tsx
+++ b/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithLinking.tsx
@@ -184,8 +184,8 @@ const ContinueWithLinking: FC<IContinueWithLinking> = (props) => {
 						loading={loading}
 						disabled={formDisabled}
 						onClick={() => form.submit()}
-						className={`'border-none capitalize' rounded-[4px] bg-pink_primary px-4 py-1 text-sm font-medium leading-[21px] tracking-[0.0125em] text-white outline-none ${
-							formDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+						className={`'border-none capitalize' rounded-[4px] bg-pink_primary px-4 py-1 text-sm font-medium leading-[21px] tracking-[0.0125em] text-white outline-none dark:border-none ${
+							formDisabled ? 'cursor-not-allowed' : 'cursor-pointer dark:border-none'
 						}`}
 					>
 						{url && prevUrl === url ? 'Save' : 'Preview'}
@@ -206,7 +206,7 @@ const ContinueWithLinking: FC<IContinueWithLinking> = (props) => {
 				>
 					<Form.Item
 						name='url'
-						label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Link Discussion Post</span>}
+						label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Link Discussion Post</span>}
 						rules={[
 							{
 								required: true
@@ -223,7 +223,7 @@ const ContinueWithLinking: FC<IContinueWithLinking> = (props) => {
 								setPost(undefined);
 							}}
 							placeholder='Enter your post URL here'
-							className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-[#3B444F] dark:bg-transparent dark:text-blue-dark-high dark:focus:border-[#91054F]'
+							className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-separatorDark dark:bg-transparent dark:font-light dark:text-white dark:focus:border-[#91054F]'
 						/>
 					</Form.Item>
 					<LinkPostPreview
diff --git a/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithoutLinking.tsx b/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithoutLinking.tsx
index 0d58866b0b..69ef881d1f 100644
--- a/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithoutLinking.tsx
+++ b/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/ContinueWithoutLinking.tsx
@@ -118,7 +118,7 @@ const ContinueWithoutLinking: FC<IContinueWithoutLinking> = (props) => {
 				>
 					<Form.Item
 						name='title'
-						label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Title</span>}
+						label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Title</span>}
 						rules={[
 							{
 								required: true
@@ -130,15 +130,15 @@ const ContinueWithoutLinking: FC<IContinueWithoutLinking> = (props) => {
 							name='title'
 							autoFocus
 							placeholder='Add your title here'
-							className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-[#3B444F] dark:bg-transparent dark:text-blue-dark-high dark:focus:border-[#91054F]'
+							className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-separatorDark dark:bg-transparent dark:font-normal dark:text-white dark:focus:border-[#91054F]'
 						/>
 					</Form.Item>
 					<div className='mt-[30px]'>
-						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Description</label>
+						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Description</label>
 						<ContentForm />
 					</div>
 					<div className='mt-[30px]'>
-						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Tags</label>
+						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Tags</label>
 						<AddTags
 							tags={tags}
 							setTags={setTags}
diff --git a/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/LinkingAndEditing.tsx b/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/LinkingAndEditing.tsx
index 6e2eeb883a..5e875d1681 100644
--- a/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/LinkingAndEditing.tsx
+++ b/src/components/Post/GovernanceSideBar/PostEditOrLinkCTA/LinkingAndEditing.tsx
@@ -269,7 +269,7 @@ const LinkingAndEditing: FC<ILinkingAndEditingProps> = (props) => {
 				>
 					<Form.Item
 						name='title'
-						label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Title</span>}
+						label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Title</span>}
 						rules={[
 							{
 								required: true
@@ -287,11 +287,11 @@ const LinkingAndEditing: FC<ILinkingAndEditingProps> = (props) => {
 								}))
 							}
 							placeholder='Add your title here'
-							className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-[#3B444F] dark:bg-transparent dark:text-blue-dark-high dark:focus:border-[#91054F]'
+							className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-separatorDark dark:bg-transparent dark:text-white dark:focus:border-[#91054F] dark:font-normal'
 						/>
 					</Form.Item>
 					<div className='mt-[30px]'>
-						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Description</label>
+						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Description</label>
 						<ContentForm
 							onChange={(content) => {
 								setEditPostValue((prev) => ({
@@ -303,7 +303,7 @@ const LinkingAndEditing: FC<ILinkingAndEditingProps> = (props) => {
 						/>
 					</div>
 					<div className='mt-[30px]'>
-						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Tags</label>
+						<label className='mb-2 flex items-center text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Tags</label>
 						<AddTags
 							tags={tags}
 							setTags={setTags}
@@ -312,7 +312,7 @@ const LinkingAndEditing: FC<ILinkingAndEditingProps> = (props) => {
 					</div>
 					{post_link ? (
 						<article>
-							<h3 className='mb-2 text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Linked Discussion</h3>
+							<h3 className='mb-2 text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Linked Discussion</h3>
 							<LinkPostPreview post={post} />
 							<div className='my-2 flex items-center justify-end'>
 								<Button
@@ -333,7 +333,7 @@ const LinkingAndEditing: FC<ILinkingAndEditingProps> = (props) => {
 						<article className='flex flex-col gap-y-3'>
 							<Form.Item
 								name='url'
-								label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-[#475F7D]'>Link {!isOnchainPost ? 'Onchain' : 'Discussion'} Post</span>}
+								label={<span className='text-lg font-semibold leading-[27px] tracking-[0.01em] text-lightBlue dark:text-white'>Link {!isOnchainPost ? 'Onchain' : 'Discussion'} Post</span>}
 								className='mb-0 mt-5'
 							>
 								<Input
@@ -345,7 +345,7 @@ const LinkingAndEditing: FC<ILinkingAndEditingProps> = (props) => {
 									}}
 									autoFocus
 									placeholder='Enter your post URL here'
-									className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-[#3B444F] dark:bg-transparent dark:text-blue-dark-high dark:focus:border-[#91054F]'
+									className='rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] p-2 text-sm font-medium leading-[21px] tracking-[0.01em] text-[#475F7D] placeholder:text-[#CED4DE] dark:border-separatorDark dark:bg-transparent dark:text-white dark:focus:border-[#91054F] dark:font-normal'
 								/>
 							</Form.Item>
 							<LinkPostPreview post={post} />
diff --git a/src/components/Post/Poll/GeneralSignals.tsx b/src/components/Post/Poll/GeneralSignals.tsx
index 3def179c88..3f8456617e 100644
--- a/src/components/Post/Poll/GeneralSignals.tsx
+++ b/src/components/Post/Poll/GeneralSignals.tsx
@@ -21,6 +21,7 @@ import POLL_TYPE from '~src/global/pollTypes';
 import { ProposalType } from '~src/global/proposalType';
 import { useUserDetailsSelector } from '~src/redux/selectors';
 import nextApiClientFetch from '~src/util/nextApiClientFetch';
+import { useTheme } from 'next-themes';
 
 interface IGeneralSignalsProps {
 	className?: string;
@@ -38,6 +39,7 @@ const GeneralSignals: FC<IGeneralSignalsProps> = ({ className, endBlock, pollId,
 	const [ayes, setAyes] = useState(0);
 	const [nays, setNays] = useState(0);
 	const [ownVote, setOwnVote] = useState<Vote | null>(null);
+	const { resolvedTheme: theme } = useTheme();
 
 	useEffect(() => {
 		let ayes = 0;
@@ -199,13 +201,16 @@ const GeneralSignals: FC<IGeneralSignalsProps> = ({ className, endBlock, pollId,
 					<div className='flex flex-col items-center text-base text-white'>
 						<div
 							id='bigCircle'
-							className={`${ayes >= nays ? 'bg-aye_green' : 'bg-nay_red'} z-10 flex h-[110px] w-[110px] items-center justify-center rounded-full`}
+							className={`${ayes >= nays ? (theme === 'dark' ? 'bg-aye_green_Dark' : 'bg-aye_green') : theme === 'dark' ? 'bg-nay_red_Dark' : 'bg-nay_red'} 
+								z-10 flex h-[110px] w-[110px] items-center justify-center rounded-full`}
 						>
 							{ayes == 0 && nays == 0 ? '0' : ayes >= nays ? ((ayes / (ayes + nays)) * 100).toFixed(1) : ((nays / (ayes + nays)) * 100).toFixed(1)}%
 						</div>
 						<div
 							id='smallCircle'
-							className={`${ayes < nays ? 'bg-aye_green' : 'bg-nay_red'} z-20 -mt-8 flex h-[75px] w-[75px] items-center justify-center rounded-full border-2 border-white`}
+							className={`${
+								ayes < nays ? (theme === 'dark' ? 'bg-aye_green_Dark' : 'bg-ayeColor') : theme === 'dark' ? 'bg-nay_red_Dark' : 'bg-nayColor'
+							} z-20 -mt-8 flex h-[75px] w-[75px] items-center justify-center rounded-full border-2 border-white`}
 						>
 							{ayes == 0 && nays == 0 ? '0' : ayes < nays ? ((ayes / (ayes + nays)) * 100).toFixed(1) : ((nays / (ayes + nays)) * 100).toFixed(1)}%
 						</div>
@@ -213,13 +218,13 @@ const GeneralSignals: FC<IGeneralSignalsProps> = ({ className, endBlock, pollId,
 
 					<div className='ml-12 flex flex-1 flex-col justify-between py-12'>
 						<div className='mb-auto flex items-center'>
-							<div className='mr-auto font-medium text-sidebarBlue'>Aye</div>
-							<div className='mr-12 text-navBlue'>{ayes}</div>
+							<div className='mr-auto font-medium text-sidebarBlue dark:text-icon-dark-inactive'>Aye</div>
+							<div className='mr-12 text-navBlue dark:text-white'>{ayes}</div>
 						</div>
 
 						<div className='flex items-center'>
-							<div className='mr-auto font-medium text-sidebarBlue'>Nay</div>
-							<div className='mr-12 text-navBlue'>{nays}</div>
+							<div className='mr-auto font-medium text-sidebarBlue dark:text-icon-dark-inactive'>Nay</div>
+							<div className='mr-12 text-navBlue dark:text-white'>{nays}</div>
 						</div>
 					</div>
 				</div>
@@ -244,7 +249,7 @@ const GeneralSignals: FC<IGeneralSignalsProps> = ({ className, endBlock, pollId,
 								Poll ended.{' '}
 								{canEdit ? (
 									<Button
-										className='info'
+										className='info dark:border-separatorDark dark:bg-section-dark-overlay dark:text-white'
 										onClick={extendsPoll}
 									>
 										Extend Poll
@@ -259,7 +264,7 @@ const GeneralSignals: FC<IGeneralSignalsProps> = ({ className, endBlock, pollId,
 							{ownVote && canVote && (
 								<Button
 									size='middle'
-									className='info text-muted cancelVoteLink '
+									className='info text-muted cancelVoteLink dark:border-separatorDark dark:bg-section-dark-overlay dark:text-white'
 									onClick={cancelVote}
 								>
 									Cancel <span className='capitalize'>&nbsp;{ownVote.toLowerCase()}&nbsp;</span> vote
diff --git a/src/ui-components/AddTags.tsx b/src/ui-components/AddTags.tsx
index 52fe7090b5..5dd7ccabac 100644
--- a/src/ui-components/AddTags.tsx
+++ b/src/ui-components/AddTags.tsx
@@ -161,7 +161,7 @@ const AddTags = ({ tags, setTags, className, disabled, onChange }: Props) => {
 										onPressEnter={handleInputConfirm}
 										className={`text-normal  mr-2 flex items-center rounded-xl bg-white px-[16px] py-[4px] text-xs text-[#90A0B7] dark:bg-section-dark-overlay ${
 											charLimitReached && 'border-red-500'
-										} dark:border-[#3B444F] dark:bg-transparent dark:text-blue-dark-high dark:focus:border-[#91054F]`}
+										} dark:border-[#3B444F] dark:bg-section-dark-overlay dark:text-blue-dark-high dark:focus:border-[#91054F]`}
 										suffix={
 											<span
 												className='cursor-pointer'
@@ -187,7 +187,7 @@ const AddTags = ({ tags, setTags, className, disabled, onChange }: Props) => {
 								<Tag
 									key={index}
 									className={`text-normal mt-1 rounded-xl border-[#90A0B7] bg-white px-[16px] py-[4px] text-xs tracking-wide text-[#90A0B7] dark:bg-section-dark-overlay ${
-										disabled ? 'bg-[#F5F5F5]' : 'hover:border-pink_primary'
+										disabled ? 'dark:bg-disableStateDark bg-[#F5F5F5]' : 'hover:border-pink_primary'
 									}`}
 									closable={!disabled}
 									onClose={(e) => {
diff --git a/src/ui-components/AyeNayButtons.tsx b/src/ui-components/AyeNayButtons.tsx
index 37fe351d22..10515a6b20 100644
--- a/src/ui-components/AyeNayButtons.tsx
+++ b/src/ui-components/AyeNayButtons.tsx
@@ -21,7 +21,7 @@ const AyeNayButton = ({ className, disabled, onClickAye, onClickNay, size, custo
 		<Button
 			name='aye'
 			htmlType='submit'
-			className={`mr-7 flex items-center justify-center rounded-md border-aye_green bg-aye_green text-white hover:border-green-600 hover:bg-green-600 ${customWidth} max-[370px]:w-[120px]`}
+			className={`dark:border-aye_green_Dark dark:bg-aye_green_Dark mr-7 flex items-center justify-center rounded-md border-aye_green bg-aye_green text-white hover:border-green-600 hover:bg-green-600 ${customWidth} max-[370px]:w-[120px]`}
 			disabled={disabled}
 			size={size}
 			onClick={onClickAye}
@@ -33,7 +33,7 @@ const AyeNayButton = ({ className, disabled, onClickAye, onClickNay, size, custo
 		<Button
 			name='nay'
 			htmlType='submit'
-			className={` flex items-center justify-center rounded-md border-nay_red bg-nay_red text-white hover:bg-red_primary hover:text-white ${customWidth} max-[370px]:w-[120px]`}
+			className={`dark:border-nay_red_Dark dark:bg-nay_red_Dark flex items-center justify-center rounded-md border-nay_red bg-nay_red text-white hover:bg-red_primary hover:text-white ${customWidth} max-[370px]:w-[120px]`}
 			disabled={disabled}
 			size={size}
 			onClick={onClickNay}
diff --git a/styles/globals.css b/styles/globals.css
index af3f11617b..293720f300 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -29,7 +29,9 @@
   --red_primary: #ff5a47;
   --red_secondary: #d94c3d;
   --aye_green: #2ed47a;
+  --aye_green_Dark: #64A057;
   --nay_red: #ff3c5f;
+  --nay_red_Dark: #BD2020;
   --ligth_red: #fff1f4;
   --comment_bg: #f9fafb;
   --font_default: "Poppins";
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f79a18c9b..0bb39b9776 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,7 +37,9 @@ module.exports = {
 				red_primary: 'var(--red_primary)',
 				red_secondary: 'var(--red_secondary)',
 				aye_green: 'var(--aye_green)',
+				aye_green_Dark: 'var(--aye_green_Dark)',
 				nay_red: 'var(--nay_red)',
+				nay_red_Dark: 'var(--nay_red_Dark)',
 				comment_bg: 'var(--comment_bg)',
 				separatorDark: 'var(--separatorDark)',
 				inactiveIconDark: 'var(--inactiveIconDark)',