fix: calendar + polkasafe dark mode icon

ALI-SULAIMAN-ALI · Oct 28, 2023 · 10a7ef9 · 10a7ef9
1 parent 71d525b
commit 10a7ef9
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 28 deletions.
diff --git a/pages/calendar/index.tsx b/pages/calendar/index.tsx
@@ -58,25 +58,39 @@ interface ICalendarViewProps {
 
 const StyledCalendar: any = styled(Calendar)`
 	.events-calendar-mini {
+		border: 2px solid ${(props) => (props.theme === 'dark' ? '#4B4B4B' : '#e8e8e8')} !important;
 		.rbc-month-view {
 			background: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')} !important;
+			border: none !important;
 		}
-		.rbc-month-row {
+		/* .rbc-month-row {
 			background: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')} !important;
-		}
+		} */
 		.rbc-header,
 		.rbc-day-bg {
 			background: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')} !important;
 		}
-		.rbc-row-bg > .rbc-day-bg {
+		.rbc-day-bg {
 			border-left: none !important;
 		}
 		.rbc-off-range > button {
 			color: ${(props) => (props.theme === 'dark' ? '#9090990' : '#E8E8E8')} !important;
 		}
+		.rbc-month-row {
+			background: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')} !important;
+			.rbc-day-bg.rbc-today {
+				border: 1px solid #e6007a;
+				background-color: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')} !important;
+			}
+			.rbc-day-bg {
+				border-left: 1px solid ${(props) => (props.theme === 'dark' ? '#4B4B4B' : '#ddd')} !important;
+			}
+			border-top: 1px solid ${(props) => (props.theme === 'dark' ? '#4B4B4B' : '#ddd')} !important;
+		}
 	}
 	.rbc-month-view {
 		background: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')};
+		border: none !important;
 	}
 	.custom-calendar-toolbar {
 		background: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')};
@@ -89,6 +103,25 @@ const StyledCalendar: any = styled(Calendar)`
 			border: 1px solid #e6007a;
 			background-color: ${(props) => (props.theme === 'dark' ? '#0D0D0D' : '#fff')} !important;
 		}
+		.rbc-day-bg {
+			border-left: 1px solid ${(props) => (props.theme === 'dark' ? '#4B4B4B' : '#ddd')} !important;
+		}
+		border-top: 1px solid ${(props) => (props.theme === 'dark' ? '#4B4B4B' : '#ddd')} !important;
+	}
+
+	.rbc-month-header {
+		height: 44px;
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid ${(props) => (props.theme === 'dark' ? '#4B4B4B' : '#eee')} !important;
+
+		.rbc-header {
+			font-size: 16px;
+			font-weight: 400 !important;
+			border: none !important;
+			text-align: left;
+			margin-left: 2px;
+		}
 	}
 	.rbc-date-cell {
 		text-align: center !important;
@@ -555,7 +588,7 @@ const CalendarView: FC<ICalendarViewProps> = ({ className, small = false, emitCa
 
 	return (
 		<>
-			<div className={`${className} rounded-xl bg-white p-3 drop-shadow-md dark:bg-section-dark-overlay`}>
+			<div className={`${className} rounded-xl bg-white p-3 drop-shadow-md dark:border-separatorDark dark:bg-section-dark-overlay`}>
 				{error && <ErrorAlert errorMsg={error} />}
 
 				{accessible && (
@@ -591,7 +624,7 @@ const CalendarView: FC<ICalendarViewProps> = ({ className, small = false, emitCa
 								className='calendar-left-panel dark:bg-section-dark-overlay'
 							>
 								<div className='p-5 pl-2 pt-0'>
-									<p className='text-md mb-2 text-center font-medium text-sidebarBlue dark:text-blue-dark-medium'>Current Time: {dayjs(utcDate).format('D-MM-YY | h:mm a UTC')} </p>
+									<p className='text-md mb-2 text-center font-medium text-sidebarBlue dark:text-white'>Current Time: {dayjs(utcDate).format('D-MM-YY | h:mm a UTC')} </p>
 
 									<Spin
 										spinning={categoriesLoading}
@@ -1026,7 +1059,6 @@ export default styled(CalendarView)`
 
 		.events-calendar-mini {
 			height: 320px;
-			border: 2px solid #e8e8e8;
 			border-radius: 10px;
 			padding: 15px 8px;
 			margin-bottom: 24px;
@@ -1375,21 +1407,6 @@ export default styled(CalendarView)`
 			}
 		}
 
-		.rbc-month-header {
-			height: 44px;
-			display: flex;
-			align-items: center;
-			border-bottom: 2px solid #eee;
-
-			.rbc-header {
-				font-size: 16px;
-				font-weight: 400 !important;
-				border: none !important;
-				text-align: left;
-				margin-left: 2px;
-			}
-		}
-
 		.rbc-time-header-cell {
 			min-height: inherit;
 

diff --git a/src/components/AppLayout/NavHeader.tsx b/src/components/AppLayout/NavHeader.tsx
@@ -37,6 +37,7 @@ 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 />,
@@ -135,7 +136,7 @@ const NavHeader = ({ className, sidedrawer, setSidedrawer, displayName, isVerifi
 					className='custom-link'
 				>
 					<span className='flex text-sm font-medium text-bodyBlue hover:text-pink_primary dark:text-blue-dark-high'>
-						<PolkaSafe />
+						{theme === 'dark' ? <PolkaSafeDarkIcon /> : <PolkaSafe />}
 						<span className='ml-2'>Polkasafe</span>
 					</span>
 				</a>

diff --git a/src/components/Calendar/CustomToolbarMini.tsx b/src/components/Calendar/CustomToolbarMini.tsx
@@ -44,7 +44,7 @@ function CustomToolbarMini(props: any) {
 					onClick={goToBack}
 					className='text-md cursor-pointer font-medium hover:font-bold hover:text-sidebarBlue dark:text-icon-dark-inactive'
 				/>
-				<span className=' mx-3 font-medium text-sidebarBlue dark:text-blue-dark-medium'>{dayjs(props.date).format('MMMM YYYY')}</span>
+				<span className=' mx-3 font-medium text-sidebarBlue dark:text-blue-dark-medium dark:text-white'>{dayjs(props.date).format('MMMM YYYY')}</span>
 				<RightOutlined
 					onClick={goToNext}
 					className='text-md cursor-pointer font-medium hover:font-bold  hover:text-sidebarBlue dark:text-icon-dark-inactive'

diff --git a/src/components/Gov2Home/Gov2LatestActivity/index.tsx b/src/components/Gov2Home/Gov2LatestActivity/index.tsx
@@ -29,6 +29,10 @@ const Container = styled.div`
 		white-space: nowrap;
 	}
 
+	.ant-table-wrapper .ant-table-container::after {
+		background-color: ${(props) => (props.theme == 'dark' ? '#0D0D0D' : 'white')} !important;
+	}
+
 	th.ant-table-cell {
 		color: ${(props) => (props.theme == 'dark' ? '#909090' : '#485F7D')} !important;
 		background-color: ${(props) => (props.theme == 'dark' ? '#0D0D0D' : '')} !important;
@@ -85,7 +89,7 @@ const Container = styled.div`
 	.ant-table-wrapper .ant-table-thead > tr > th,
 	.ant-table-wrapper .ant-table-thead > tr > td {
 		border-bottom: ${(props) => (props.theme == 'dark' ? '1px solid #323232' : '1px solid #E1E6EB')} !important;
-		background: ${(props) => (props.theme == 'dark' ? '#0d0d0d' : '#ffffff')} !important;
+		background: ${(props) => (props.theme == 'dark' ? '#1C1D1F' : '#fafafa')} !important;
 	}
 	.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
 	.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {

diff --git a/src/components/Home/UpcomingEvents.tsx b/src/components/Home/UpcomingEvents.tsx
@@ -58,6 +58,9 @@ const Calendar = styled(StyledCalendar)`
 		color: ${(props) => (props.theme === 'dark' ? '#fff' : '#000')} !important;
 		background: ${(props) => (props.theme === 'dark' ? '#000' : '#fff')} !important;
 	}
+	.ant-select-dropdown {
+		background-color: ${(props) => (props.theme === 'dark' ? '#0d0d0d' : '#fff')} !important;
+	}
 `;
 
 const UpcomingEvents = ({ className }: Props) => {
@@ -416,7 +419,7 @@ const UpcomingEvents = ({ className }: Props) => {
 	const CalendarElement = () => (
 		<Spin spinning={loading}>
 			<Calendar
-				className='mb-4 rounded-xl border border-solid border-gray-200 dark:bg-section-dark-overlay'
+				className='mb-4 rounded-xl border border-solid border-gray-200 dark:border-separatorDark dark:bg-section-dark-overlay'
 				fullscreen={false}
 				cellRender={dateCellRender}
 				theme={theme}

diff --git a/src/components/Parachains/ChainDataTable/index.tsx b/src/components/Parachains/ChainDataTable/index.tsx
@@ -42,7 +42,7 @@ interface ParachainRowData {
 
 const Table = styled(AntdTable)`
 	.ant-table-thead > tr > th {
-		background: ${(props) => (props.theme === 'dark' ? '#1C1D1F' : 'white')} !important;
+		background: ${(props) => (props.theme === 'dark' ? '#1C1D1F' : '#fafafa')} !important;
 		color: ${(props) => (props.theme === 'dark' ? 'white' : 'black')} !important;
 		font-weight: 500 !important;
 		border-bottom: ${(props) => (props.theme === 'dark' ? '1px solid #323232' : '')} !important;

diff --git a/src/components/PreImagesTable.tsx b/src/components/PreImagesTable.tsx
@@ -23,7 +23,7 @@ interface IPreImagesTableProps {
 
 const Table = styled(AntdTable)`
 	.ant-table-thead > tr > th {
-		background: ${(props) => (props.theme === 'dark' ? '#1C1D1F' : 'white')} !important;
+		background: ${(props) => (props.theme === 'dark' ? '#1C1D1F' : '#fafafa')} !important;
 		color: ${(props) => (props.theme === 'dark' ? 'white' : 'black')} !important;
 		font-weight: 500 !important;
 		border-bottom: ${(props) => (props.theme === 'dark' ? '1px solid #323232' : '')} !important;
@@ -90,7 +90,7 @@ const PreImagesTable: FC<IPreImagesTableProps> = (props) => {
 				proposedCall.section &&
 				proposedCall.method && (
 					<div className='flex items-center'>
-						<code className='rounded-md px-2 dark:bg-slate-200'>
+						<code className='rounded-md px-2 dark:bg-separatorDark dark:text-white'>
 							{proposedCall.section}.{proposedCall.method}
 						</code>
 						{proposedCall.args && (