mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
* 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
35 lines
909 B
TypeScript
35 lines
909 B
TypeScript
import { Icon } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import ArrowIcon from 'icons/arrows/east.svg';
|
|
|
|
import type { IconButtonProps } from '../../chakra/icon-button';
|
|
import { IconButton } from '../../chakra/icon-button';
|
|
import { Link } from '../../chakra/link';
|
|
import { Tooltip } from '../../chakra/tooltip';
|
|
|
|
export interface BackToButtonProps extends IconButtonProps {
|
|
href?: string;
|
|
hint?: string;
|
|
}
|
|
|
|
export const BackToButton = ({ href, hint, boxSize = 6, ...rest }: BackToButtonProps) => {
|
|
|
|
const button = (
|
|
<IconButton { ...rest } boxSize={ boxSize } variant="icon_secondary">
|
|
<Icon
|
|
transform="rotate(180deg)"
|
|
boxSize={ boxSize }
|
|
>
|
|
<ArrowIcon/>
|
|
</Icon>
|
|
</IconButton>
|
|
);
|
|
|
|
return (
|
|
<Tooltip content={ hint } disabled={ !hint }>
|
|
{ href ? <Link href={ href } asChild>{ button }</Link> : button }
|
|
</Tooltip>
|
|
);
|
|
};
|