From 05eb5a22d3ef292f2d1e0a9e59b1167e6f5f857d Mon Sep 17 00:00:00 2001
From: Ernesto <ernestnamdi66@gmail.com>
Date: Mon, 7 Apr 2025 05:00:56 +0100
Subject: [PATCH] chore: fixed bug on chart and ui issue in sale page (#11354)

* fixing eslint

* chore: fixed bug on chart and ui issue in sale page

* chore: fixed all eslint issues

* chore: fixed linting

* sales page

* chore: resolved sales theme

* lint
---
 packages/page-coretime/src/Sale/index.tsx    |  4 +--
 packages/page-coretime/src/WhiteBox.tsx      |  7 ++++-
 packages/react-components/src/Chart/index.ts | 32 +++++++++++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/page-coretime/src/Sale/index.tsx b/packages/page-coretime/src/Sale/index.tsx
index 4ae0443553..77c2a150ac 100644
--- a/packages/page-coretime/src/Sale/index.tsx
+++ b/packages/page-coretime/src/Sale/index.tsx
@@ -117,8 +117,8 @@ function Sale ({ relayName }: Props): React.ReactElement<Props> {
             phaseName={phaseName}
             saleParams={saleParams}
           />}
-        <div style={{ backgroundColor: 'white', borderRadius: '4px', gridColumn: '1 / -1', justifySelf: 'center', padding: '24px', width: '100%' }}>
-          <p style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '1rem' }}>{t('Sale history information')}</p>
+        <div style={{ borderRadius: '4px', gridColumn: '1 / -1', justifySelf: 'center', padding: '24px', width: '100%' }}>
+          <p style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '1rem' }}>{t('Sale information')}</p>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
             <div style={{ maxWidth: '300px' }}>
               <Dropdown
diff --git a/packages/page-coretime/src/WhiteBox.tsx b/packages/page-coretime/src/WhiteBox.tsx
index f93193a357..e8653c2623 100644
--- a/packages/page-coretime/src/WhiteBox.tsx
+++ b/packages/page-coretime/src/WhiteBox.tsx
@@ -3,8 +3,13 @@
 
 import React, { type ReactNode } from 'react';
 
+import { useTheme } from '@polkadot/react-hooks';
+
 export const WhiteBox = ({ children, style }: { children: ReactNode, style?: React.CSSProperties }) => {
-  return <div style={{ backgroundColor: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', justifyItems: 'center', minWidth: '250px', padding: '24px', ...style }}>
+  const { theme } = useTheme();
+  const backgroundColor = theme === 'dark' ? '#333' : 'white';
+
+  return <div style={{ backgroundColor, borderRadius: '4px', display: 'flex', flexDirection: 'column', justifyItems: 'center', minWidth: '250px', padding: '24px', ...style }}>
     {children}
   </div>;
 };
diff --git a/packages/react-components/src/Chart/index.ts b/packages/react-components/src/Chart/index.ts
index 987fbee1ab..d42f51ff85 100644
--- a/packages/react-components/src/Chart/index.ts
+++ b/packages/react-components/src/Chart/index.ts
@@ -1,6 +1,8 @@
 // Copyright 2017-2025 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ChartType, Plugin } from 'chart.js';
+
 import { CategoryScale, Chart, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import crosshairPlugin from 'chartjs-plugin-crosshair';
@@ -9,7 +11,35 @@ import Doughnut from './Doughnut.js';
 import HorizBar from './HorizBar.js';
 import Line from './Line.js';
 
-Chart.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, annotationPlugin, crosshairPlugin);
+interface CrosshairChart {
+  crosshair?: boolean;
+}
+
+function CustomCrosshairPlugin (plugin: Plugin<ChartType>): Plugin<ChartType> {
+  const originalAfterDraw = plugin.afterDraw;
+
+  if (originalAfterDraw) {
+    plugin.afterDraw = function (chart, args): void {
+      if ((chart as CrosshairChart).crosshair) {
+        // @ts-expect-error - Pass exactly what the original plugin expects
+        originalAfterDraw.call(this, chart, args);
+      }
+    };
+  }
+
+  return plugin;
+}
+
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  annotationPlugin,
+  CustomCrosshairPlugin(crosshairPlugin as Plugin<ChartType>)
+);
 
 export default {
   Doughnut,