fix: yield details style polish

src/assets/translations/en/main.json

@@ -2833,7 +2833,10 @@
     "potentialEarningsAmount": "%{amount}/yr at %{apy}% APY",
     "depositNow": "Deposit Now",
     "strategyInfo": "Strategy Info",
-    "overview": "Overview"
+    "overview": "Overview",
+    "availableToAdd": "%{amount} %{symbol} available",
+    "earnUpTo": "Earn up to",
+    "addMore": "Add More"
   },
   "earn": {
     "enterFrom": "Enter from",

src/components/AccountSelector/AccountSelector.tsx

@@ -32,14 +32,25 @@ export type AccountSelectorProps = {
   disabled?: boolean
   buttonProps?: ButtonProps
   boxProps?: BoxProps
+  showBalance?: boolean
+  showIcon?: boolean
 }
 
 const chevronIconSx = {
   svg: { h: '18px', w: '18px' },
 }
 
 export const AccountSelector: FC<AccountSelectorProps> = memo(
-  ({ assetId, accountId: selectedAccountId, onChange, disabled, buttonProps, boxProps }) => {
+  ({
+    assetId,
+    accountId: selectedAccountId,
+    onChange,
+    disabled,
+    buttonProps,
+    boxProps,
+    showBalance = true,
+    showIcon = true,
+  }) => {
     const translate = useTranslate()
     const { isOpen, onOpen, onClose } = useDisclosure()
     const {
@@ -120,7 +131,7 @@ export const AccountSelector: FC<AccountSelectorProps> = memo(
             {...buttonProps}
           >
             <HStack spacing={3} flex={1}>
-              <AssetIcon assetId={assetId} size='sm' borderRadius='full' />
+              {showIcon && <AssetIcon assetId={assetId} size='sm' borderRadius='full' />}
               <VStack align='start' spacing={0} flex={1}>
                 {accountNumber !== undefined && (
                   <Text fontSize='xs' color='text.subtle'>
@@ -132,7 +143,7 @@ export const AccountSelector: FC<AccountSelectorProps> = memo(
                     <MiddleEllipsis value={fromAccountId(selectedAccountId).account} />
                   )}
                 </Text>
-                {selectedAccountDetails && (
+                {selectedAccountDetails && showBalance && (
                   <Flex alignItems='center' gap={1}>
                     <Amount.Crypto
                       value={selectedAccountDetails.cryptoBalance}

src/components/Avatar/Avatar.theme.ts

@@ -1,13 +1,25 @@
+export const AVATAR_SIZES = {
+  '2xs': '1rem',
+  xs: '1.5rem',
+  sm: '2rem',
+  md: '2.5rem',
+  lg: '3.5rem',
+  xl: '4rem',
+  '2xl': '5rem',
+} as const
+
+export type AvatarSize = keyof typeof AVATAR_SIZES
+
 export const AvatarStyle = {
   sizes: {
     md: {
       container: {
-        '--avatar-size': '2.5rem',
+        '--avatar-size': AVATAR_SIZES.md,
       },
     },
     lg: {
       container: {
-        '--avatar-size': '3.5rem',
+        '--avatar-size': AVATAR_SIZES.lg,
       },
     },
   },

src/components/Button/Button.theme.ts

@@ -62,6 +62,7 @@ export const ButtonStyle: ComponentStyleConfig = {
   variants: {
     solid: (props: StyleFunctionProps) => {
       const { colorScheme: c } = props
+      const isGreen = c === 'green'
       if (c === 'gray') {
         return {
           bg: 'background.button.secondary.base',
@@ -79,8 +80,11 @@ export const ButtonStyle: ComponentStyleConfig = {
       return {
         bg: `${c}.500`,
         color: 'white',
+        _dark: {
+          color: isGreen ? 'black' : 'white',
+        },
         _hover: {
-          bg: mode(`${c}.600`, `${c}.300`)(props),
+          bg: mode(`${c}.500`, `${c}.300`)(props),
           _disabled: {
             bg: `${c}.500`,
           },

src/components/Card/Card.theme.ts

@@ -44,7 +44,8 @@ export const CardStyle = {
     elevated: () => ({
       container: {
         bg: 'background.surface.raised.base',
-        borderColor: 'border.base',
+        boxShadow:
+          '0 1px 0 var(--chakra-colors-border-base) inset, 0 0 0 1px var(--chakra-colors-border-base) inset',
       },
     }),
     unstyled: {

src/components/LazyLoadAvatar.tsx

@@ -1,19 +1,20 @@
 import type { AvatarProps, SkeletonProps } from '@chakra-ui/react'
 import { Avatar, SkeletonCircle } from '@chakra-ui/react'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
+import type { AvatarSize } from '@/components/Avatar/Avatar.theme'
+import { AVATAR_SIZES } from '@/components/Avatar/Avatar.theme'
 import { imageLongPressSx } from '@/constants/longPress'
 
 export type LazyLoadAvatarProps = SkeletonProps &
-  Pick<AvatarProps, 'src' | 'size' | 'boxSize' | 'name' | 'icon' | 'bg'>
+  Pick<AvatarProps, 'src' | 'boxSize' | 'name' | 'icon' | 'bg' | 'size'>
 
 export const LazyLoadAvatar: React.FC<LazyLoadAvatarProps> = ({
   src,
   size = 'sm',
   borderRadius,
   name,
   icon,
-  boxSize,
   bg,
   ...rest
 }) => {
@@ -22,12 +23,14 @@ export const LazyLoadAvatar: React.FC<LazyLoadAvatarProps> = ({
   const handleImageLoaded = useCallback(() => setImageLoaded(true), [])
   const handleImageError = useCallback(() => setImageError(true), [])
 
+  const skeletonSize = useMemo(() => {
+    return AVATAR_SIZES[size as AvatarSize] ?? AVATAR_SIZES.md
+  }, [size])
+
   return (
     <SkeletonCircle
       isLoaded={Boolean(imageLoaded || (imageError && name))}
-      width='auto'
-      height='auto'
-      display='flex'
+      size={skeletonSize}
       borderRadius={borderRadius}
       {...rest}
     >
@@ -36,9 +39,8 @@ export const LazyLoadAvatar: React.FC<LazyLoadAvatarProps> = ({
         onLoad={handleImageLoaded}
         onError={handleImageError}
         src={src}
-        size={size}
         icon={icon}
-        boxSize={boxSize}
+        boxSize='100%'
         name={name}
         borderRadius={borderRadius}
         sx={imageLongPressSx}

src/pages/Yields/YieldAssetDetails.tsx

@@ -3,7 +3,6 @@ import {
   Avatar,
   Box,
   Button,
-  Container,
   Flex,
   Heading,
   HStack,
@@ -23,6 +22,7 @@ import { Amount } from '@/components/Amount/Amount'
 import { AssetIcon } from '@/components/AssetIcon'
 import { ChainIcon } from '@/components/ChainMenu'
 import { Display } from '@/components/Display'
+import { Main } from '@/components/Layout/Main'
 import { useFeatureFlag } from '@/hooks/useFeatureFlag/useFeatureFlag'
 import { bnOrZero } from '@/lib/bignumber/bignumber'
 import {
@@ -531,42 +531,54 @@ export const YieldAssetDetails = memo(() => {
     effectiveViewMode,
   ])
 
+  const headerComponent = useMemo(
+    () => (
+      <>
+        <Button
+          leftIcon={<ArrowBackIcon />}
+          variant='ghost'
+          onClick={() => navigate('/yields')}
+          mb={6}
+        >
+          {translate('common.back')}
+        </Button>
+        {assetHeaderElement}
+      </>
+    ),
+    [assetHeaderElement, navigate, translate],
+  )
+
+  const containerPaddingX = useMemo(() => ({ base: 4, xl: 0 }), [])
+
   return (
-    <Container maxW='1200px' py={{ base: 4, md: 8 }} px={{ base: 4, md: 6 }}>
-      <Button
-        leftIcon={<ArrowBackIcon />}
-        variant='ghost'
-        onClick={() => navigate('/yields')}
-        mb={6}
-      >
-        {translate('common.back')}
-      </Button>
-      {assetHeaderElement}
-      <Flex
-        justify='flex-end'
-        align={{ base: 'stretch', md: 'center' }}
-        mb={6}
-        gap={4}
-        direction={{ base: 'column', md: 'row' }}
-        width='full'
-        display={isMobile ? 'none' : 'flex'}
-      >
-        <YieldFilters
-          networks={networks}
-          selectedNetwork={selectedNetwork}
-          onSelectNetwork={handleNetworkChange}
-          providers={providers}
-          selectedProvider={selectedProvider}
-          onSelectProvider={handleProviderChange}
-          types={types}
-          selectedType={selectedType}
-          onSelectType={handleTypeChange}
-          sortOption={sortOption}
-          onSortChange={handleSortChange}
-        />
-        <ViewToggle viewMode={viewMode} setViewMode={setViewMode} />
-      </Flex>
-      {contentElement}
-    </Container>
+    <Main headerComponent={headerComponent} isSubPage>
+      <Box py={4} px={containerPaddingX}>
+        <Flex
+          justify='flex-end'
+          align={{ base: 'stretch', md: 'center' }}
+          mb={6}
+          gap={4}
+          direction={{ base: 'column', md: 'row' }}
+          width='full'
+          display={isMobile ? 'none' : 'flex'}
+        >
+          <YieldFilters
+            networks={networks}
+            selectedNetwork={selectedNetwork}
+            onSelectNetwork={handleNetworkChange}
+            providers={providers}
+            selectedProvider={selectedProvider}
+            onSelectProvider={handleProviderChange}
+            types={types}
+            selectedType={selectedType}
+            onSelectType={handleTypeChange}
+            sortOption={sortOption}
+            onSortChange={handleSortChange}
+          />
+          <ViewToggle viewMode={viewMode} setViewMode={setViewMode} />
+        </Flex>
+        {contentElement}
+      </Box>
+    </Main>
   )
 })