mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
d0c66e1e3f
* display main data * display rest of tx fields * placeholder data * always show tabs * manage error and retries on details tab * don't retry if degraded view is active * fix tests * fix tx receipt * change styles and wording for warning * tweaks * gray alert style change and update screenshots * add retries to RPC call * fixes after merge
98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
import { alertAnatomy as parts } from '@chakra-ui/anatomy';
|
|
import type { StyleFunctionProps } from '@chakra-ui/styled-system';
|
|
import { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system';
|
|
import { transparentize } from '@chakra-ui/theme-tools';
|
|
|
|
const { definePartsStyle, defineMultiStyleConfig } =
|
|
createMultiStyleConfigHelpers(parts.keys);
|
|
|
|
const $fg = cssVar('alert-fg');
|
|
const $bg = cssVar('alert-bg');
|
|
|
|
function getBg(props: StyleFunctionProps) {
|
|
const { theme, colorScheme: c } = props;
|
|
const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
|
|
return {
|
|
light: `colors.${ c }.${ c === 'red' ? '50' : '100' }`,
|
|
dark: darkBg,
|
|
};
|
|
}
|
|
|
|
const baseStyle = definePartsStyle({
|
|
container: {
|
|
bg: $bg.reference,
|
|
borderRadius: 'md',
|
|
px: 6,
|
|
py: 3,
|
|
},
|
|
title: {
|
|
fontWeight: 'bold',
|
|
lineHeight: '6',
|
|
marginEnd: '2',
|
|
},
|
|
description: {
|
|
lineHeight: '6',
|
|
},
|
|
icon: {
|
|
color: $fg.reference,
|
|
flexShrink: 0,
|
|
marginEnd: '3',
|
|
w: '5',
|
|
h: '6',
|
|
},
|
|
spinner: {
|
|
color: $fg.reference,
|
|
flexShrink: 0,
|
|
marginEnd: '3',
|
|
w: '5',
|
|
h: '5',
|
|
},
|
|
});
|
|
|
|
const variantSubtle = definePartsStyle((props) => {
|
|
const { colorScheme } = props;
|
|
const bg = getBg(props);
|
|
|
|
return {
|
|
container: {
|
|
[$fg.variable]: colorScheme === 'gray' ? 'colors.blackAlpha.800' : `colors.${ colorScheme }.500`,
|
|
[$bg.variable]: colorScheme === 'gray' ? 'colors.blackAlpha.100' : bg.light,
|
|
_dark: {
|
|
[$fg.variable]: colorScheme === 'gray' ? 'colors.whiteAlpha.800' : `colors.${ colorScheme }.200`,
|
|
[$bg.variable]: colorScheme === 'gray' ? 'colors.whiteAlpha.200' : bg.dark,
|
|
},
|
|
},
|
|
};
|
|
});
|
|
|
|
const variantSolid = definePartsStyle((props) => {
|
|
const { colorScheme: c } = props;
|
|
return {
|
|
container: {
|
|
[$fg.variable]: `colors.white`,
|
|
[$bg.variable]: `colors.${ c }.500`,
|
|
_dark: {
|
|
[$fg.variable]: `colors.gray.900`,
|
|
[$bg.variable]: `colors.${ c }.200`,
|
|
},
|
|
color: $fg.reference,
|
|
},
|
|
};
|
|
});
|
|
|
|
const variants = {
|
|
subtle: variantSubtle,
|
|
solid: variantSolid,
|
|
};
|
|
|
|
const Alert = defineMultiStyleConfig({
|
|
baseStyle,
|
|
variants,
|
|
defaultProps: {
|
|
variant: 'subtle',
|
|
colorScheme: 'blue',
|
|
},
|
|
});
|
|
|
|
export default Alert;
|