lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix hero banner

Browse Source
This commit is contained in:
tom
2025-01-20 19:51:07 +01:00
parent 53c8b9bcba
commit aef3904deb
11 changed files with 117 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toolkit/theme/foundations/semanticTokens.ts
+46
View File
@@ -1,5 +1,9 @@
import type { ThemingConfig } from '@chakra-ui/react';
import config from 'configs/app';
const heroBannerButton = config.UI.homepage.heroBanner?.button;
const semanticTokens: ThemingConfig['semanticTokens'] = {
// TODO @tom2drum remove *_hover in favor of conditional selectors
colors: {
@@ -34,6 +38,48 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
},
},
hero: {
bg: {
DEFAULT: {
value: {
_light: heroBannerButton?._default?.background?.[0] || '{colors.blue.600}',
_dark: heroBannerButton?._default?.background?.[1] || heroBannerButton?._default?.background?.[0] || '{colors.blue.600}',
},
},
hover: {
value: {
_light: heroBannerButton?._hover?.background?.[0] || '{colors.blue.400}',
_dark: heroBannerButton?._hover?.background?.[1] || heroBannerButton?._hover?.background?.[0] || '{colors.blue.400}',
},
},
selected: {
value: {
_light: heroBannerButton?._selected?.background?.[0] || '{colors.blue.50}',
_dark: heroBannerButton?._selected?.background?.[1] || heroBannerButton?._selected?.background?.[0] || '{colors.blue.50}',
},
},
},
fg: {
DEFAULT: {
value: {
_light: heroBannerButton?._default?.text_color?.[0] || '{colors.white}',
_dark: heroBannerButton?._default?.text_color?.[1] || heroBannerButton?._default?.text_color?.[0] || '{colors.white}',
},
},
hover: {
value: {
_light: heroBannerButton?._hover?.text_color?.[0] || '{colors.white}',
_dark: heroBannerButton?._hover?.text_color?.[1] || heroBannerButton?._hover?.text_color?.[0] || '{colors.white}',
},
},
selected: {
value: {
_light: heroBannerButton?._selected?.text_color?.[0] || '{colors.blackAlpha.800}',
_dark: heroBannerButton?._selected?.text_color?.[1] || heroBannerButton?._selected?.text_color?.[0] || '{colors.blackAlpha.800}',
},
},
},
},
},
link: {
primary: {
toolkit/theme/recipes/button.recipe.ts
+16
View File
@@ -108,6 +108,22 @@ export const recipe = defineRecipe({
},
},
},
hero: {
bg: 'button.hero.bg',
color: 'button.hero.fg',
_hover: {
bg: 'button.hero.bg.hover',
color: 'button.hero.fg.hover',
},
_selected: {
bg: 'button.hero.bg.selected',
color: 'button.hero.fg.selected',
_hover: {
bg: 'button.hero.bg.selected',
color: 'button.hero.fg.selected',
},
},
},
plain: {
bg: 'transparent',
color: 'inherit',
ui/home/HeroBanner.tsx
+33 -29
View File
@@ -1,4 +1,4 @@
import { Box, Flex, Heading, useColorModeValue } from '@chakra-ui/react';
import { Box, Flex, Heading } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
@@ -13,34 +13,38 @@ const TEXT_COLOR_DEFAULT = 'white';
const BORDER_DEFAULT = 'none';
const HeroBanner = () => {
const background = useColorModeValue(
// light mode
config.UI.homepage.heroBanner?.background?.[0] ||
config.UI.homepage.plate.background ||
BACKGROUND_DEFAULT,
// dark mode
config.UI.homepage.heroBanner?.background?.[1] ||
config.UI.homepage.heroBanner?.background?.[0] ||
config.UI.homepage.plate.background ||
BACKGROUND_DEFAULT,
);
const background = {
_light:
config.UI.homepage.heroBanner?.background?.[0] ||
config.UI.homepage.plate.background ||
BACKGROUND_DEFAULT,
_dark:
config.UI.homepage.heroBanner?.background?.[1] ||
config.UI.homepage.heroBanner?.background?.[0] ||
config.UI.homepage.plate.background ||
BACKGROUND_DEFAULT,
};
const textColor = useColorModeValue(
// light mode
config.UI.homepage.heroBanner?.text_color?.[0] ||
config.UI.homepage.plate.textColor ||
TEXT_COLOR_DEFAULT,
const textColor = {
_light:
// light mode
config.UI.homepage.heroBanner?.text_color?.[0] ||
config.UI.homepage.plate.textColor ||
TEXT_COLOR_DEFAULT,
// dark mode
config.UI.homepage.heroBanner?.text_color?.[1] ||
config.UI.homepage.heroBanner?.text_color?.[0] ||
config.UI.homepage.plate.textColor ||
TEXT_COLOR_DEFAULT,
);
_dark:
config.UI.homepage.heroBanner?.text_color?.[1] ||
config.UI.homepage.heroBanner?.text_color?.[0] ||
config.UI.homepage.plate.textColor ||
TEXT_COLOR_DEFAULT,
};
const border = useColorModeValue(
config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
);
const border = {
_light:
config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
_dark:
config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
};
return (
<Flex
@@ -69,10 +73,10 @@ const HeroBanner = () => {
</Heading>
{ config.UI.navigation.layout === 'vertical' && (
<Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>
{ config.features.rewards.isEnabled && <RewardsButton variant="hero"/> }
{ config.features.rewards.isEnabled && <RewardsButton visual="hero"/> }
{
(config.features.account.isEnabled && <UserProfileDesktop buttonVariant="hero"/>) ||
(config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVariant="hero"/>)
(config.features.account.isEnabled && <UserProfileDesktop buttonVisual="hero"/>) ||
(config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVisual="hero"/>)
}
</Box>
) }
ui/pages/Home.tsx
+13 -13
View File
@@ -15,23 +15,23 @@ const rollupFeature = config.features.rollup;
const Home = () => {
const leftWidget = (() => {
if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
switch (rollupFeature.type) {
case 'zkEvm':
return <LatestZkEvmL2Batches/>;
case 'arbitrum':
return <LatestArbitrumL2Batches/>;
}
}
// const leftWidget = (() => {
// if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
// switch (rollupFeature.type) {
// case 'zkEvm':
// return <LatestZkEvmL2Batches/>;
// case 'arbitrum':
// return <LatestArbitrumL2Batches/>;
// }
// }
return <LatestBlocks/>;
})();
// return <LatestBlocks/>;
// })();
return (
<Box as="main">
<HeroBanner/>
<Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
{ /* <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
<Stats/>
<ChainIndicators/>
</Flex>
@@ -41,7 +41,7 @@ const Home = () => {
<Box flexGrow={ 1 }>
<Transactions/>
</Box>
</Flex>
</Flex> */ }
</Box>
);
};
ui/rewards/RewardsButton.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ const RewardsButton = ({ visual = 'header', size }: Props) => {
>
<Button
visual={ visual }
data-selected={ !isLoading && Boolean(apiToken) }
selected={ !isLoading && Boolean(apiToken) }
flexShrink={ 0 }
as={ apiToken ? LinkInternal : 'button' }
{ ...(apiToken ? { href: route({ pathname: '/account/rewards' }) } : {}) }
ui/shared/ad/AdBannerContent.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import type { BannerPlatform } from './types';
import type { AdBannerProviders } from 'types/client/adProviders';
import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton';
import { Skeleton } from 'toolkit/chakra/skeleton';
import AdbutlerBanner from './AdbutlerBanner';
import CoinzillaBanner from './CoinzillaBanner';
@@ -41,7 +41,7 @@ const AdBannerContent = ({ className, isLoading, provider, platform }: Props) =>
return (
<Skeleton
className={ className }
isLoaded={ !isLoading }
loading={ isLoading }
borderRadius="none"
maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
w="100%"
ui/shared/filters/FilterButton.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
colorScheme="gray"
onClick={ onClick }
isActive={ isActive }
data-selected={ Boolean(appliedFiltersNum) }
selected={ Boolean(appliedFiltersNum) }
px={ 1.5 }
flexShrink={ 0 }
as={ as }
ui/shared/radioButtonGroup/RadioButtonGroup.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ const RadioButton = (props: RadioButtonProps) => {
as="label"
aria-label={ props.title }
variant="radio_group"
data-selected={ props.isChecked }
selected={ props.isChecked }
>
<input { ...input }/>
<Flex
@@ -48,7 +48,7 @@ const RadioButton = (props: RadioButtonProps) => {
as="label"
leftIcon={ props.icon ? <IconSvg name={ props.icon } boxSize={ 5 } mr={ -1 }/> : undefined }
variant="radio_group"
data-selected={ props.isChecked }
selected={ props.isChecked }
>
<input { ...input }/>
<Flex
ui/shared/sort/ButtonDesktop.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ const ButtonDesktop = ({ children, isActive, onClick, isLoading, className }: Bu
fontWeight="600"
borderColor="transparent"
px={ 2 }
data-selected={ isActive }
selected={ isActive }
>
<Box
as={ isActive ? 'div' : 'span' }
ui/snippets/auth/AuthModal.tsx
-1
View File
@@ -18,7 +18,6 @@ import AuthModalScreenSelectMethod from './screens/AuthModalScreenSelectMethod';
import AuthModalScreenSuccessEmail from './screens/AuthModalScreenSuccessEmail';
import AuthModalScreenSuccessWallet from './screens/AuthModalScreenSuccessWallet';
// TODO @tom2drum fix auth modal
const feature = config.features.account;
interface Props {
ui/snippets/user/wallet/UserWalletButton.tsx
+2 -2
View File
@@ -47,8 +47,8 @@ const UserWalletButton = ({ size, visual, isPending, isAutoConnectDisabled, addr
ref={ ref }
size={ size }
visual={ visual }
data-selected={ Boolean(address) }
data-warning={ isAutoConnectDisabled }
selected={ Boolean(address) }
highlighted={ isAutoConnectDisabled }
textStyle="sm"
px={ address ? 2.5 : 4 }
fontWeight={ address ? 700 : 600 }