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

2
src/components/Card.tsx
View File

@ -25,7 +25,7 @@ export default function Card(props: Props) {
)} )}
> >
{typeof props.title === 'string' ? ( {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} {props.title}
</Text> </Text>
) : typeof props.title === 'object' ? ( ) : 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]', 'lg:mt-[73px]',
'min-h-screen gap-6 px-4 py-6 w-full relative', 'min-h-screen gap-6 px-4 py-6 w-full relative',
'flex', 'flex',
isFullWidth && accountId && (accountDetailsExpanded ? 'pr-110.5' : 'pr-24'), isFullWidth && accountId && (accountDetailsExpanded ? 'pr-118' : 'pr-24'),
!reduceMotion && isFullWidth && 'transition-all duration-300', !reduceMotion && isFullWidth && 'transition-all duration-300',
'justify-center', 'justify-center',
focusComponent && 'items-center', focusComponent && 'items-center',

4
tailwind.config.js
View File

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