mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
ebbee2ba57
* Support redirect to a correct view from search * show domains on address page * migrate to new API version to display address domains * another api update * new design for chain widget on home page + tests * chain widget styles for mobile devices * ecosystems page * update types * add ecosystems to navigation * address portfolio: pt.1 * portfolio tokens list * filter portfolio by chain * skip redirect when navigating to search result by clicking on "show all results" link * net worth block design * add filter input to chain select and fix tokens table * calculate address portfolio * adjust card logic * support custom token types in multichain explorer * handle case when new worth is 0 * add text filter to tokens list * fixes * demo envs * portfolio tests * ecosystems test * change signature for getTokenTypes function * fix adding token to the wallet from the list * lazy load all address domains * show contract creator and implementations info * fix tests * add poor reputation tokens toggle * tweaks * dim celo native tokens * disable env validator * fix tests * remove tokens with 0 usd value from top tokens * fixes * preserve selected chain when switching tabs on address page * add hints to stats widgets on home page * update envs for demo * fix portfolio cards and home page * update styles for contract creator and implementations * fix select issues * add chains from cluster to network menu * hide csv export link on empty logs page * update screenshots * rollback select fix * update cut length calculation for portfolio cards * fix chain select * update screenshots * fix tests * more fixes * add sorting to ecosystems table * fix test * fixes * fix loading state in ecosystems page * review fixes * fix tests
102 lines
1.9 KiB
TypeScript
102 lines
1.9 KiB
TypeScript
import { defineSlotRecipe } from '@chakra-ui/react';
|
|
|
|
export const recipe = defineSlotRecipe({
|
|
slots: [ 'root', 'label', 'helpText', 'valueUnit', 'valueText', 'indicator' ],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1',
|
|
position: 'relative',
|
|
flex: '1',
|
|
},
|
|
label: {
|
|
display: 'inline-flex',
|
|
gap: '1.5',
|
|
alignItems: 'center',
|
|
color: 'text.primary',
|
|
textStyle: 'sm',
|
|
},
|
|
helpText: {
|
|
color: 'text.primary',
|
|
textStyle: 'xs',
|
|
},
|
|
valueUnit: {
|
|
color: 'text.primary',
|
|
textStyle: 'xs',
|
|
fontWeight: 'initial',
|
|
letterSpacing: 'initial',
|
|
},
|
|
valueText: {
|
|
verticalAlign: 'baseline',
|
|
fontWeight: '500',
|
|
letterSpacing: 'normal',
|
|
fontFeatureSettings: 'initial',
|
|
fontVariantNumeric: 'initial',
|
|
display: 'inline-flex',
|
|
gap: '1',
|
|
},
|
|
indicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginEnd: 0,
|
|
'& :where(svg)': {
|
|
w: '1em',
|
|
h: '1em',
|
|
},
|
|
'&[data-type=up]': {
|
|
color: 'stat.indicator.up',
|
|
},
|
|
'&[data-type=down]': {
|
|
color: 'stat.indicator.down',
|
|
},
|
|
},
|
|
},
|
|
|
|
variants: {
|
|
orientation: {
|
|
horizontal: {
|
|
root: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
},
|
|
},
|
|
positive: {
|
|
'true': {
|
|
valueText: {
|
|
color: 'stat.indicator.up',
|
|
},
|
|
},
|
|
'false': {
|
|
valueText: {
|
|
color: 'stat.indicator.down',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
valueText: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
md: {
|
|
valueText: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
lg: {
|
|
valueText: {
|
|
textStyle: 'lg',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
defaultVariants: {
|
|
size: 'sm',
|
|
orientation: 'horizontal',
|
|
},
|
|
});
|