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

fix: fixed the AccountDetails position

Browse Source
This commit is contained in:
Linkie Link 2023-10-24 20:09:56 +02:00
parent a64f266cda
commit 79a2e86d8f
No known key found for this signature in database
GPG Key ID: 5318B0F2564D38EA
4 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Account/AccountDetails/index.tsx
View File

@ -112,8 +112,8 @@ function AccountDetails(props: Props) {
<div
data-testid='account-details'
className={classNames(
accountDetailsExpanded ? 'right-6.5' : '-right-80',
'w-100 flex items-start gap-4 absolute top-6',
accountDetailsExpanded ? 'right-4' : '-right-90',
'w-110 flex items-start gap-4 absolute top-6',
!reduceMotion && 'transition-all duration-300',
)}
>
@ -173,7 +173,7 @@ function AccountDetails(props: Props) {
{glowElement(!reduceMotion)}
</div>
<div className='flex w-90 backdrop-blur-sticky'>
<Card className='w-full bg-white/5' title={<AccountDetailsHeader />}>
<Card className='w-90 bg-white/5' title={<AccountDetailsHeader />}>
<AccountComposition account={account} />
<Text className='w-full px-4 py-2 text-white bg-white/10'>Balances</Text>
<AccountBalancesTable

2
src/components/Card.tsx
View File

@ -25,7 +25,7 @@ export default function Card(props: Props) {
)}
>
{typeof props.title === 'string' ? (
<Text size='lg' className='flex w-full items-center bg-white/10 p-4 font-semibold'>
<Text size='lg' className='flex items-center w-full p-4 font-semibold bg-white/10'>
{props.title}
</Text>
) : typeof props.title === 'object' ? (

2
src/pages/_layout.tsx
View File

@ -61,7 +61,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
'lg:mt-[73px]',
'min-h-screen gap-6 px-4 py-6 w-full relative',
'flex',
isFullWidth && accountId && (accountDetailsExpanded ? 'pr-110.5' : 'pr-24'),
isFullWidth && accountId && (accountDetailsExpanded ? 'pr-118' : 'pr-24'),
!reduceMotion && isFullWidth && 'transition-all duration-300',
'justify-center',
focusComponent && 'items-center',

4
tailwind.config.js
View File

@ -231,7 +231,8 @@ module.exports = {
24: '96px',
35: '140px',
80: '320px',
110.5: '442px',
90: '360px',
118: '472px',
},
transitionDuration: {
3000: '3000ms',
@ -255,6 +256,7 @@ module.exports = {
90: '360px',
92.5: '370px',
100: '400px',
110: '440px',
120: '480px',
140: '560px',
},