LaconicNetwork/mars-v2-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: fixed the portfolio account detail page layout

Browse Source
This commit is contained in:
Linkie Link 2024-02-14 13:19:16 +01:00
parent 0154065ffb
commit b273cc23b3
No known key found for this signature in database
GPG Key ID: 5318B0F2564D38EA
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/account/Health/HealthIcon.tsx
View File

@ -5,7 +5,7 @@ import { ExclamationMarkCircled, Heart } from 'components/common/Icons'
interface Props { interface Props {
isLoading: boolean isLoading: boolean
health: number health: number
className: string className?: string
colorClass?: string colorClass?: string
} }
@ -14,9 +14,9 @@ export default function HealthIcon(props: Props) {
const color = colorClass ?? 'text-white' const color = colorClass ?? 'text-white'
return ( return (
<> <div className='w-5'>
{!isLoading && health === 0 ? ( {!isLoading && health === 0 ? (
<ExclamationMarkCircled className={classNames('w-5 text-loss animate-pulse', className)} /> <ExclamationMarkCircled className={classNames(' text-loss animate-pulse', className)} />
) : ( ) : (
<Heart <Heart
className={classNames( className={classNames(
@ -26,6 +26,6 @@ export default function HealthIcon(props: Props) {
)} )}
/> />
)} )}
</> </div>
) )
} }

2
src/components/portfolio/Account/BreadCrumbs.tsx
View File

@ -19,7 +19,9 @@ export default function PortfolioAccountPageHeader(props: Props) {
<NavLink to={getRoute('portfolio', searchParams, address, selectedAccountId)}> <NavLink to={getRoute('portfolio', searchParams, address, selectedAccountId)}>
<Text className='text-white/40'>Portfolio</Text> <Text className='text-white/40'>Portfolio</Text>
</NavLink> </NavLink>
<div className='h-3'>
<ArrowRight className='h-3 text-white/60 ' /> <ArrowRight className='h-3 text-white/60 ' />
</div>
<Text tag='span'>Credit Account {props.accountId}</Text> <Text tag='span'>Credit Account {props.accountId}</Text>
</div> </div>
) )

10
src/components/portfolio/SummarySkeleton.tsx
View File

@ -3,10 +3,10 @@ import React from 'react'
import HealthBar from 'components/account/Health/HealthBar' import HealthBar from 'components/account/Health/HealthBar'
import HealthIcon from 'components/account/Health/HealthIcon' import HealthIcon from 'components/account/Health/HealthIcon'
import Card from 'components/common/Card' import Card from 'components/common/Card'
import HLSTag from 'components/hls/HLSTag'
import Loading from 'components/common/Loading' import Loading from 'components/common/Loading'
import Text from 'components/common/Text' import Text from 'components/common/Text'
import TitleAndSubCell from 'components/common/TitleAndSubCell' import TitleAndSubCell from 'components/common/TitleAndSubCell'
import HLSTag from 'components/hls/HLSTag'
import useAccount from 'hooks/accounts/useAccount' import useAccount from 'hooks/accounts/useAccount'
import { DEFAULT_PORTFOLIO_STATS } from 'utils/constants' import { DEFAULT_PORTFOLIO_STATS } from 'utils/constants'
@ -31,9 +31,11 @@ export default function SummarySkeleton(props: Props) {
{account?.kind === 'high_levered_strategy' && <HLSTag />} {account?.kind === 'high_levered_strategy' && <HLSTag />}
</div> </div>
{health !== undefined && healthFactor !== undefined && ( {health !== undefined && healthFactor !== undefined && (
<div className='flex gap-1 max-w-[300px] flex-grow'> <div className='flex items-center justify-end flex-grow gap-2'>
<HealthIcon isLoading={healthFactor === 0} health={health} className='w-5' /> <HealthIcon isLoading={healthFactor === 0} health={health} />
<HealthBar health={health} healthFactor={healthFactor} className='h-full' /> <div className='w-[260px]'>
<HealthBar health={health} healthFactor={healthFactor} className='h-3' />
</div>
</div> </div>
)} )}
</div> </div>