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
This commit is contained in:
Ernesto 2025-04-07 05:00:56 +01:00 committed by GitHub
parent d4178b14af
commit 05eb5a22d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 4 deletions

View File

@ -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

View File

@ -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>;
};

View File

@ -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,