fix: delegation dashboard

ALI-SULAIMAN-ALI · Oct 29, 2023 · fd02384 · fd02384
1 parent 10a7ef9
commit fd02384
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 25 deletions.
diff --git a/public/assets/icons/delegate-title.svg b/public/assets/icons/delegate-title.svg
diff --git a/src/components/DelegationDashboard/TracksListing.tsx b/src/components/DelegationDashboard/TracksListing.tsx
@@ -183,7 +183,7 @@ const DashboardTrackListing = ({ className }: Props) => {
 	return (
 		<div className={className}>
 			<div
-				className={`flex items-center gap-2 border-l-0 border-r-0 border-t-0 px-8 py-6 text-xl font-medium text-sidebarBlue max-lg:gap-0 ${
+				className={`flex items-center gap-2 border-l-0 border-r-0 border-t-0 px-8 py-6 text-xl font-medium text-sidebarBlue dark:text-white max-lg:gap-0 ${
 					showTable && 'border-b-[1px] border-solid border-[#e7ebf0] dark:text-blue-dark-high'
 				} max-lg:px-4`}
 			>
@@ -265,7 +265,7 @@ const DashboardTrackListing = ({ className }: Props) => {
 									setStatusValue(ETrackDelegationStatus.Undelegated);
 									filterByStatus(ETrackDelegationStatus.Undelegated);
 								}}
-								className={`ml-[17px] flex cursor-pointer items-center justify-center border-none text-sm font-normal  tracking-wide text-[#E5007A] shadow-none max-md:mt-[10px] ${
+								className={`ml-[17px] flex cursor-pointer items-center justify-center border-none text-sm font-normal  tracking-wide text-[#E5007A] shadow-none dark:bg-transparent max-md:mt-[10px] ${
 									!api || (!apiReady && 'opacity-50')
 								}`}
 							>

diff --git a/src/components/Listing/Tracks/DelegateModal.tsx b/src/components/Listing/Tracks/DelegateModal.tsx
@@ -29,13 +29,10 @@ import Balance from '~src/components/Balance';
 import executeTx from '~src/util/executeTx';
 import { formatedBalance } from '~src/util/formatedBalance';
 import usePolkasafe from '~src/hooks/usePolkasafe';
-
-import CrossIcon from '~assets/sidebar/delegation-close.svg';
 import DelegateProfileWhiteIcon from '~assets/icons/delegation-listing.svg';
-import DelegateProfileGreyIcon from '~assets/icons/delegate-title.svg';
 import LockIcon from '~assets/icons/lock.svg';
 import { useNetworkSelector, useUserDetailsSelector } from '~src/redux/selectors';
-import { CloseIcon } from '~src/ui-components/CustomIcons';
+import { CloseIcon, DelegateModalIcon } from '~src/ui-components/CustomIcons';
 import { useTheme } from 'next-themes';
 
 const ZERO_BN = new BN(0);
@@ -348,7 +345,7 @@ const DelegateModal = ({ className, defaultTarget, open, setOpen, trackNum, isMu
 				wrapClassName={`${className} dark:bg-modalOverlayDark`}
 				title={
 					<div className='-mx-6 mb-6 flex items-center border-0 border-b-[1px] border-solid border-[#D2D8E0] px-6 pb-4 text-[20px] font-semibold text-bodyBlue dark:border-separatorDark dark:bg-section-dark-overlay dark:text-blue-dark-high'>
-						<DelegateProfileGreyIcon className='mr-2' />
+						<DelegateModalIcon className='mr-2 text-lightBlue dark:text-icon-dark-inactive' />
 						Delegate
 					</div>
 				}
@@ -491,7 +488,7 @@ const DelegateModal = ({ className, defaultTarget, open, setOpen, trackNum, isMu
 									inputClassName='text-[#7c899b] text-sm dark:bg-section-dark-overlay'
 									theme={theme}
 								/>
-								<div className='mb-2 mt-4 border-solid border-white dark:border-separatorDark'>
+								<div className='mb-2 mt-4'>
 									<label className='flex items-center text-sm text-lightBlue dark:text-blue-dark-medium'>
 										Conviction
 										<span>
@@ -554,7 +551,7 @@ const DelegateModal = ({ className, defaultTarget, open, setOpen, trackNum, isMu
 										{checkedTrack && (
 											<div
 												key={checkedTrack?.trackId}
-												className='flex items-center justify-center gap-2 rounded-[20px] border-[1px] border-solid border-[#D2D8E0] px-3 py-2 text-sm text-[#7c899b]'
+												className='flex items-center justify-center gap-2 rounded-[20px] border-[1px] border-solid border-[#D2D8E0] px-3 py-2 text-sm text-[#7c899b] dark:border-separatorDark dark:text-white'
 											>
 												{checkedTrack?.name}
 											</div>
@@ -565,14 +562,14 @@ const DelegateModal = ({ className, defaultTarget, open, setOpen, trackNum, isMu
 												.map((list, index) => (
 													<div
 														key={index}
-														className='flex items-center justify-center gap-2 rounded-[20px] border-[1px] border-solid border-[#D2D8E0] px-3 py-2 text-sm text-[#7c899b]'
+														className='flex items-center justify-center gap-2 rounded-[20px] border-[1px] border-solid border-[#D2D8E0] px-3 py-2 text-sm text-[#7c899b] dark:border-separatorDark dark:text-white'
 													>
 														{list}
 														<span
 															onClick={() => handleClose(String(list))}
 															className='flex items-center justify-center'
 														>
-															<CrossIcon />
+															<CloseIcon className='text-lightBlue dark:text-icon-dark-inactive' />
 														</span>
 													</div>
 												))}

diff --git a/src/components/UserProfile/BasicInformation.tsx b/src/components/UserProfile/BasicInformation.tsx
@@ -112,10 +112,7 @@ const BasicInformation: FC<IBasicInformationProps> = (props) => {
 			<div className='flex gap-x-6'>
 				<div className='hidden w-full max-w-[103px] md:block'></div>
 				<div className='flex-1'>
-					<Divider
-						className='my-6'
-						style={{ borderColor: '#d2d8e0' }}
-					/>
+					<Divider className='my-6 border-[#d2d8e0] dark:border-separatorDark' />
 					<article>
 						<label
 							className='cursor-pointer text-sm font-medium text-[#485F7D] dark:text-blue-dark-medium'

diff --git a/src/components/UserProfile/EditProfile.tsx b/src/components/UserProfile/EditProfile.tsx
@@ -201,7 +201,7 @@ const EditProfileModal: FC<IEditProfileModalProps> = (props) => {
 					setOpen(false);
 					setOpenModal && setOpenModal(false);
 				}}
-				title={<h3 className='text-xl font-semibold text-[#1D2632]'>Edit Profile</h3>}
+				title={<div className='text-xl font-semibold text-[#1D2632] dark:bg-section-dark-overlay dark:text-white'>Edit Profile</div>}
 				closeIcon={<CloseIcon className='text-lightBlue dark:text-icon-dark-inactive' />}
 				footer={
 					<div className='-mx-6 -mb-5 px-6 pb-4'>
@@ -215,7 +215,7 @@ const EditProfileModal: FC<IEditProfileModalProps> = (props) => {
 								}}
 								disabled={loading}
 								size='middle'
-								className='h-[40px] w-[134px] rounded-[4px] border border-solid border-pink_primary text-sm font-medium text-pink_primary'
+								className='h-[40px] w-[134px] rounded-[4px] border border-solid border-pink_primary text-sm font-medium text-pink_primary dark:bg-section-dark-overlay'
 							>
 								Cancel
 							</Button>,
@@ -267,6 +267,7 @@ const EditProfileModal: FC<IEditProfileModalProps> = (props) => {
 						{
 							children: (
 								<Socials
+									theme={theme}
 									loading={loading}
 									profile={profile}
 									setProfile={setProfile}

diff --git a/src/components/UserProfile/Socials.tsx b/src/components/UserProfile/Socials.tsx
@@ -8,16 +8,19 @@ import React, { FC } from 'react';
 import { ProfileDetails } from '~src/auth/types';
 import { socialLinks } from './Details';
 import { SocialIcon } from '~src/ui-components/SocialLinks';
+import styled from 'styled-components';
 
 interface ISocialsProps {
 	loading: boolean;
 	setProfile: React.Dispatch<React.SetStateAction<ProfileDetails>>;
 	profile: ProfileDetails;
 	errorCheck?: string | undefined;
+	theme?: string;
 }
 
 const Socials: FC<ISocialsProps> = (props) => {
-	const { loading, profile, setProfile, errorCheck } = props;
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { loading, profile, setProfile, errorCheck, theme } = props;
 	return (
 		<div className='flex max-h-[552px] flex-col gap-y-4'>
 			{socialLinks.map((socialLink) => {
@@ -32,7 +35,7 @@ const Socials: FC<ISocialsProps> = (props) => {
 							<span>{strLink}</span>
 						</label>
 						<Input
-							className='h-10 rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] text-[#1D2632] dark:border-[#3B444F] dark:bg-transparent dark:text-blue-dark-high dark:focus:border-[#91054F]'
+							className='h-10 rounded-[4px] border border-solid border-[rgba(72,95,125,0.2)] text-[#1D2632] dark:border-[#3B444F] dark:bg-section-dark-overlay dark:text-blue-dark-high dark:focus:border-[#91054F]'
 							size='large'
 							type='url'
 							prefix={<LinkOutlined className='mr-1.5 text-base text-[rgba(72,95,125,0.2)]' />}
@@ -84,4 +87,9 @@ const Socials: FC<ISocialsProps> = (props) => {
 	);
 };
 
-export default Socials;
+export default styled(Socials)`
+	.ant-input .ant-input-lg {
+		background-color: ${(props) => (props.theme === 'dark' ? '#0d0d0d' : '#fff')} !important;
+		color: ${(props) => (props.theme === 'dark' ? '#fff' : '#1D2632')} !important;
+	}
+`;
diff --git a/src/ui-components/CustomIcons.tsx b/src/ui-components/CustomIcons.tsx
@@ -125,6 +125,7 @@ import PgpSVG from '~assets/icons/pgp-icon.svg';
 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';
 
 export const Caution = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
@@ -189,6 +190,13 @@ export const PolkassemblyIcon = (props: Partial<CustomIconComponentProps>) => (
 	/>
 );
 
+export const DelegateModalIcon = (props: Partial<CustomIconComponentProps>) => (
+	<Icon
+		component={DelegateProfileGreyIcon}
+		{...props}
+	/>
+);
+
 export const JudgementIcon = (props: Partial<CustomIconComponentProps>) => (
 	<Icon
 		component={JudgementSVG}

diff --git a/src/ui-components/DelegationProfile.tsx b/src/ui-components/DelegationProfile.tsx
@@ -126,12 +126,14 @@ const DelegationProfile = ({ username, address, isSearch, className }: Props) =>
 							const link = social_links && Array.isArray(social_links) ? social_links?.find((s) => s.type === social)?.link || '' : '';
 							return (
 								<SocialLink
-									className={`flex h-[39px] w-[40px] items-center justify-center rounded-[20px] bg-[#edeff3] p-[10px] text-2xl hover:text-[#576D8B] ${isSearch ? 'mt-2' : 'mt-4'}`}
+									className={`flex h-[39px] w-[40px] items-center justify-center rounded-[20px] bg-[#edeff3] p-[10px] text-2xl hover:text-[#576D8B] dark:bg-inactiveIconDark ${
+										isSearch ? 'mt-2' : 'mt-4'
+									}`}
 									key={index}
 									link={link}
 									disable={!link}
 									type={social}
-									iconClassName={`text-lg ${link ? 'text-[#576D8B]' : 'text-[#96A4B6]'}`}
+									iconClassName={`text-lg ${link ? 'text-[#576D8B] dark:text-blue-dark-medium' : 'text-[#96A4B6] dark:text-[#424141]'}`}
 								/>
 							);
 						})}
@@ -152,7 +154,7 @@ const DelegationProfile = ({ username, address, isSearch, className }: Props) =>
 						{username === userProfile.username && (
 							<Button
 								onClick={() => setOpenEditModal(true)}
-								className='h-[40px] w-[87px] border-[1px] border-solid border-pink_primary font-medium text-pink_primary max-lg:w-auto'
+								className='h-[40px] w-[87px] border-[1px] border-solid border-pink_primary font-medium text-pink_primary dark:bg-section-dark-overlay max-lg:w-auto'
 							>
 								<EditIcon className='text-[14px] tracking-wide text-pink_primary ' />
 								<span className='max-md:hidden'>Edit</span>

diff --git a/src/ui-components/Tabs/index.tsx b/src/ui-components/Tabs/index.tsx
@@ -34,6 +34,9 @@ const StyledTabs = styled(AntdTabs)`
 	.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
 		color: ${(props) => (props.theme == 'dark' ? '#FF60B5' : '#e5007a')} !important;
 	}
+	.dmTqqK .borderRemove .ant-tabs-nav-list {
+		background: ${(props) => (props.theme == 'dark' ? '#0D0D0D' : 'white')} !important;
+	}
 `;
 
 export const Tabs = (props: any) => {