mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
f0e713b877
* UI customizations: new features Fixes #2905 * colors for graphs * introduce env variable * colors for topbar, stats, selected state and tabs * fix build * fix validator * refactor link.primary.hover color token * refactor selected colors * update styles for switch and fix some color tokens * change color for selectable controls * icon color tokens refactoring * UI customizations: new features Fixes #2905 * test for common components * tweaks * migrate from color-mode-hex cookie to color-theme cookie * clean up * update screenshots * more screenshot updates * update default color of chart line * update envs for mega eth
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { Box } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { Tooltip } from 'toolkit/chakra/tooltip';
|
|
|
|
interface Props {
|
|
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
isActive: boolean;
|
|
bg: string;
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
const SettingsSample = ({ label, value, bg, onClick, isActive }: Props) => {
|
|
const bgColor = { base: 'white', _dark: 'gray.900' };
|
|
const activeBgColor = { base: 'blue.50', _dark: 'whiteAlpha.100' };
|
|
const activeBorderColor = { base: 'blackAlpha.800', _dark: 'gray.50' };
|
|
|
|
return (
|
|
<Box p="9px" bgColor={ isActive ? activeBgColor : 'transparent' } borderRadius="base">
|
|
<Tooltip content={ label }>
|
|
<Box
|
|
bg={ bg }
|
|
boxSize="22px"
|
|
borderRadius="full"
|
|
borderWidth="1px"
|
|
borderColor={ isActive ? activeBgColor : bgColor }
|
|
position="relative"
|
|
cursor="pointer"
|
|
_before={{
|
|
position: 'absolute',
|
|
display: 'block',
|
|
boxSizing: 'content-box',
|
|
content: '""',
|
|
top: '-3px',
|
|
left: '-3px',
|
|
width: 'calc(100% + 2px)',
|
|
height: 'calc(100% + 2px)',
|
|
borderStyle: 'solid',
|
|
borderRadius: 'full',
|
|
borderWidth: '2px',
|
|
borderColor: isActive ? activeBorderColor : 'transparent',
|
|
}}
|
|
_hover={{
|
|
_before: {
|
|
borderColor: isActive ? activeBorderColor : 'hover',
|
|
},
|
|
}}
|
|
data-value={ value }
|
|
onClick={ onClick }
|
|
/>
|
|
</Tooltip>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default React.memo(SettingsSample);
|