fix: cta border removed

ALI-SULAIMAN-ALI · Oct 30, 2023 · cf33c91 · cf33c91
1 parent a2b292e
commit cf33c91
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 26 deletions.
diff --git a/src/components/AppLayout/NavHeader.tsx b/src/components/AppLayout/NavHeader.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 /* eslint-disable no-tabs */
-import { ApplayoutIdentityIcon, Dashboard, OptionMenu } from '~src/ui-components/CustomIcons';
+import { ApplayoutIdentityIcon, Dashboard, OptionMenu, PolkasafeWhiteIcon } from '~src/ui-components/CustomIcons';
 import { CloseOutlined } from '@ant-design/icons';
 import Image from 'next/image';
 import { Button, Divider, Skeleton, Space } from 'antd';
@@ -37,7 +37,6 @@ import { useNetworkSelector, useUserDetailsSelector } from '~src/redux/selectors
 import { useDispatch } from 'react-redux';
 import { logout, setUserDetailsState } from '~src/redux/userDetails';
 import { useTheme } from 'next-themes';
-import PolkaSafeDarkIcon from '~assets/polkasafe-white-logo.svg';
 
 const RPCDropdown = dynamic(() => import('~src/ui-components/RPCDropdown'), {
 	loading: () => <Skeleton active />,
@@ -118,9 +117,9 @@ const NavHeader = ({ className, sidedrawer, setSidedrawer, displayName, isVerifi
 					rel='noreferrer'
 					className='custom-link'
 				>
-					<span className='flex text-sm font-medium text-bodyBlue hover:text-pink_primary dark:text-blue-dark-high '>
+					<span className='flex items-center gap-x-2 text-sm font-medium text-bodyBlue hover:text-pink_primary dark:text-blue-dark-high'>
 						<TownHall />
-						<div className='ml-2 '> TownHall </div>
+						<span> TownHall </span>
 					</span>
 				</a>
 			)
@@ -135,9 +134,15 @@ const NavHeader = ({ className, sidedrawer, setSidedrawer, displayName, isVerifi
 					rel='noreferrer'
 					className='custom-link'
 				>
-					<span className='flex text-sm font-medium text-bodyBlue hover:text-pink_primary dark:text-blue-dark-high'>
-						{theme === 'dark' ? <PolkaSafeDarkIcon /> : <PolkaSafe />}
-						<span className='ml-2'>Polkasafe</span>
+					<span className='flex items-center gap-x-2 text-sm font-medium text-bodyBlue hover:text-pink_primary dark:text-blue-dark-high'>
+						{theme === 'dark' ? (
+							<span className='flex items-center justify-center'>
+								<PolkasafeWhiteIcon className='text-2xl' />
+							</span>
+						) : (
+							<PolkaSafe />
+						)}
+						<span>Polkasafe</span>
 					</span>
 				</a>
 			)

diff --git a/src/components/Post/Comment/Comment.tsx b/src/components/Post/Comment/Comment.tsx
@@ -98,7 +98,7 @@ export const Comment: FC<ICommentProps> = (props) => {
 			/>
 			<div className='w-full overflow-hidden'>
 				<CreationLabel
-					className='creation-label comment-modal mt-0 rounded-t-md bg-transparent px-0 py-2 pt-4 dark:bg-[#141416] md:px-4'
+					className='creation-label comment-modal mt-0 rounded-t-md bg-comment_bg px-0 py-2 pt-4 dark:bg-[#141416] md:px-4'
 					created_at={created_at}
 					defaultAddress={comment.proposer}
 					username={comment.username}

diff --git a/src/components/Post/Comment/CommentsContainer.tsx b/src/components/Post/Comment/CommentsContainer.tsx
@@ -306,7 +306,7 @@ const CommentsContainer: FC<ICommentsContainerProps> = (props) => {
 								>
 									<div
 										onClick={() => getFilteredComments(data.sentiment)}
-										className={`flex cursor-pointer items-center gap-[3.46px] rounded-[4px] p-[3.17px] text-xs hover:bg-[#FEF2F8] dark:bg-[#33071E] ${
+										className={`flex cursor-pointer items-center gap-[3.46px] rounded-[4px] p-[3.17px] text-xs hover:bg-[#FEF2F8]  ${
 											checkActive(data.sentiment) && 'bg-[#FEF2F8] text-pink_primary dark:bg-[#33071E]'
 										} ${loading ? 'pointer-events-none cursor-not-allowed opacity-50' : ''} ${
 											overallSentiments[data.sentiment] == 0 ? 'pointer-events-none' : ''

diff --git a/src/components/Post/Comment/EditableCommentContent.tsx b/src/components/Post/Comment/EditableCommentContent.tsx
@@ -627,7 +627,7 @@ const EditableCommentContent: FC<IEditableCommentContentProps> = (props) => {
 							}}
 							className='mb-0'
 						/>
-						<div className='background mb-[10px] mt-[-25px] h-[70px] rounded-e-md bg-gray-100 p-2'>
+						<div className='background mb-[10px] mt-[-25px] h-[70px] rounded-md rounded-e-md border-0 border-solid bg-gray-100 p-2 dark:border dark:border-[#3B444F] dark:bg-transparent'>
 							<div className='flex gap-[2px] text-[12px] text-[#334D6E]'>
 								Sentiment:<h5 className='text-[12px] text-pink_primary'> {handleSentimentText()}</h5>
 							</div>
@@ -668,13 +668,13 @@ const EditableCommentContent: FC<IEditableCommentContentProps> = (props) => {
 									<Button
 										htmlType='button'
 										onClick={handleCancel}
-										className='mr-2 flex h-[26px] items-center dark:bg-transparent dark:text-white'
+										className='dark:border-borderColorDark mr-2 flex h-[26px] items-center dark:bg-transparent dark:text-white'
 									>
 										<CloseOutlined />
 									</Button>
 									<Button
 										htmlType='submit'
-										className='flex h-[26px] items-center border-white bg-pink_primary text-white hover:bg-pink_secondary'
+										className='flex h-[26px] items-center border-white bg-pink_primary text-white hover:bg-pink_secondary dark:border-transparent'
 									>
 										<CheckOutlined />
 									</Button>
@@ -775,14 +775,14 @@ const EditableCommentContent: FC<IEditableCommentContentProps> = (props) => {
 											htmlType='button'
 											disabled={loadingReply}
 											onClick={handleReplyCancel}
-											className='mr-2 flex items-center dark:bg-transparent dark:text-white'
+											className='mr-2 flex items-center dark:border-[#3B444F] dark:bg-transparent dark:text-white'
 										>
 											<CloseOutlined /> Cancel
 										</Button>
 										<Button
 											htmlType='submit'
 											disabled={loadingReply}
-											className='flex items-center border-white bg-pink_primary text-white hover:bg-pink_secondary'
+											className='flex items-center border-none bg-pink_primary text-white hover:bg-pink_secondary'
 										>
 											<CheckOutlined /> Reply
 										</Button>

diff --git a/src/components/Post/Comment/EditableReplyContent.tsx b/src/components/Post/Comment/EditableReplyContent.tsx
@@ -540,13 +540,13 @@ const EditableReplyContent = ({ userId, className, commentId, content, replyId,
 								<Button
 									htmlType='button'
 									onClick={handleCancel}
-									className='mr-2 flex items-center'
+									className='dark:border-borderColorDark mr-2 flex items-center dark:bg-transparent dark:text-white'
 								>
 									<CloseOutlined /> Cancel
 								</Button>
 								<Button
 									htmlType='submit'
-									className='flex items-center border-white bg-pink_primary text-white hover:bg-pink_secondary'
+									className='dark:border-borderColorDark flex items-center border-white bg-pink_primary text-white hover:bg-pink_secondary'
 								>
 									<CheckOutlined /> Reply
 								</Button>
@@ -560,10 +560,10 @@ const EditableReplyContent = ({ userId, className, commentId, content, replyId,
 							className='rounded-b-md bg-[#ebf0f5] px-2 py-2 text-sm dark:bg-[#141416] md:px-4'
 							md={content}
 						/>
-						<div className='flex flex-wrap items-center gap-3 bg-[#ebf0f5] dark:bg-section-dark-overlay'>
+						<div className='flex flex-wrap items-center gap-3'>
 							{isEditable && (
 								<Button
-									className={'flex items-center border-none p-0 text-pink_primary shadow-none dark:bg-transparent dark:text-blue-dark-helper'}
+									className={'flex items-center border-none bg-transparent p-0 text-pink_primary shadow-none dark:text-blue-dark-helper'}
 									disabled={loading}
 									onClick={toggleEdit}
 								>
@@ -580,7 +580,7 @@ const EditableReplyContent = ({ userId, className, commentId, content, replyId,
 							)}
 							{id === userId ? (
 								<Button
-									className={'flex items-center border-none pl-1.5 pr-0 text-xs text-pink_primary shadow-none dark:bg-transparent dark:text-blue-dark-helper'}
+									className={'flex items-center border-none bg-transparent pl-1.5 pr-0 text-xs text-pink_primary shadow-none dark:text-blue-dark-helper'}
 									onClick={deleteReply}
 								>
 									<DeleteOutlined />
@@ -619,7 +619,7 @@ const EditableReplyContent = ({ userId, className, commentId, content, replyId,
 										color='#E5007A'
 									>
 										<Button
-											className={`mt-[-2px] flex items-center justify-start border-none pl-1 pr-1 text-xs text-pink_primary shadow-none dark:bg-transparent dark:text-blue-dark-helper ${
+											className={`mt-[-2px] flex items-center justify-start border-none bg-transparent pl-1 pr-1 text-xs text-pink_primary shadow-none dark:text-blue-dark-helper ${
 												reply.reply_source ? 'disabled-reply' : ''
 											}`}
 										>
@@ -629,7 +629,7 @@ const EditableReplyContent = ({ userId, className, commentId, content, replyId,
 								) : (
 									!isReplying && (
 										<Button
-											className={'flex items-center border-none p-0 text-xs text-pink_primary shadow-none dark:bg-transparent dark:text-blue-dark-helper'}
+											className={'flex items-center border-none bg-transparent p-0 text-xs text-pink_primary shadow-none dark:text-blue-dark-helper'}
 											onClick={() => setIsReplying(!isReplying)}
 										>
 											<ReplyIcon className='mr-1' />
@@ -674,14 +674,14 @@ const EditableReplyContent = ({ userId, className, commentId, content, replyId,
 										<Button
 											htmlType='button'
 											onClick={() => handleReplyCancel()}
-											className='mr-2 flex items-center'
+											className='dark:border-borderColorDark mr-2 flex items-center dark:bg-transparent dark:text-white'
 										>
 											<CloseOutlined /> Cancel
 										</Button>
 										<Button
 											loading={loading}
 											onClick={() => handleReplySave()}
-											className='flex items-center border-white bg-pink_primary text-white hover:bg-pink_secondary'
+											className='flex items-center bg-pink_primary text-white hover:bg-pink_secondary dark:border-none'
 										>
 											<CheckOutlined />
 											Reply

diff --git a/src/components/Post/PostCommentForm.tsx b/src/components/Post/PostCommentForm.tsx
@@ -429,7 +429,7 @@ const PostCommentForm: FC<IPostCommentFormProps> = (props) => {
 											disabled={!content}
 											loading={loading}
 											htmlType='submit'
-											className={`my-0 mt-3 flex items-center border-white bg-pink_primary text-white hover:bg-pink_secondary ${!content ? 'bg-gray-500 hover:bg-gray-500' : ''}`}
+											className={`my-0 mt-3 flex items-center border-none bg-pink_primary text-white hover:bg-pink_secondary ${!content ? 'bg-gray-500 hover:bg-gray-500' : ''}`}
 										>
 											<CheckOutlined /> Comment
 										</Button>

diff --git a/src/ui-components/CommentHistoryModal.tsx b/src/ui-components/CommentHistoryModal.tsx
@@ -64,7 +64,7 @@ export const getSentimentIcon = (sentiment: ESentiment, theme: string) => {
 const CommentHistoryModal = ({ className, open, setOpen, history, defaultAddress, username, user_id }: Props) => {
 	const [historyData, setHistoryData] = useState<IHistoryData[]>(history);
 	const getSentimentLabel = (sentiment: ESentiment) => {
-		return <div className={`${poppins.variable} ${poppins.className} bg-pink-100 pl-1 pr-1 text-[10px] font-light leading-4 tracking-wide`}>{getSentimentTitle(sentiment)}</div>;
+		return <div className={`${poppins.variable} ${poppins.className} pl-1 pr-1 text-[10px] font-light leading-4 tracking-wide`}>{getSentimentTitle(sentiment)}</div>;
 	};
 	const { resolvedTheme: theme } = useTheme();
 	const items: TimelineItemProps[] = historyData?.map((item, index) => {

diff --git a/src/ui-components/CreationLabel.tsx b/src/ui-components/CreationLabel.tsx
@@ -104,7 +104,7 @@ const CreationLabel: FC<ICreationLabelProps> = (props) => {
 	const { resolvedTheme: theme } = useTheme();
 
 	const getSentimentLabel = (sentiment: ESentiment) => {
-		return <div className={`${poppins.variable} ${poppins.className} bg-pink-100 pl-1 pr-1 text-[10px] font-light leading-4 tracking-wide`}>{getSentimentTitle(sentiment)}</div>;
+		return <div className={`${poppins.variable} ${poppins.className} pl-1 pr-1 text-[10px] font-light leading-4 tracking-wide`}>{getSentimentTitle(sentiment)}</div>;
 	};
 
 	const items: MenuProps['items'] = [

diff --git a/src/ui-components/CustomIcons.tsx b/src/ui-components/CustomIcons.tsx
@@ -6,6 +6,7 @@ import Icon from '@ant-design/icons';
 import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
 import React from 'react';
 
+import PolkasafeWhiteIconSVG from '~assets/polkasafe-white-logo.svg';
 import CautionIcon from '~assets/icons/Caution 2.svg';
 import RetrySVG from '~assets/icons/Refresh.svg';
 import OpenAiSVG from '~assets/icons/openai.svg';
@@ -128,6 +129,13 @@ 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 PolkasafeWhiteIcon = (props: Partial<CustomIconComponentProps>) => (
+	<Icon
+		component={PolkasafeWhiteIconSVG}
+		{...props}
+	/>
+);
+
 export const Caution = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
 		component={CautionIcon}

diff --git a/styles/globals.css b/styles/globals.css
@@ -43,6 +43,8 @@
   --alertColorDark: #141C2D;
   --disableStateDark: #1D1D1D;
   --helperTextColorDark: #595959;
+
+  --borderColorDark: #3B444F;
 }
 
 ::-webkit-scrollbar {

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