tweak account page top section
This commit is contained in:
saml33
parent
d6867732f7
commit
aa9c017287
|
|
@ -1,9 +1,9 @@
|
|||
import { Fragment, ReactNode, useMemo, useState } from 'react'
|
||||
import Button, { LinkButton } from '../shared/Button'
|
||||
import {
|
||||
AdjustmentsHorizontalIcon,
|
||||
ArrowDownRightIcon,
|
||||
ArrowUpLeftIcon,
|
||||
ChevronDownIcon,
|
||||
DocumentDuplicateIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
|
|
@ -70,19 +70,18 @@ const AccountActions = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center space-x-2 md:space-x-3">
|
||||
{hasBorrows ? (
|
||||
<Button
|
||||
className="flex w-full items-center justify-center sm:w-auto"
|
||||
disabled={!mangoAccount}
|
||||
onClick={() => setShowRepayModal(true)}
|
||||
>
|
||||
<ArrowDownRightIcon className="mr-2 h-5 w-5" />
|
||||
{t('repay')}
|
||||
</Button>
|
||||
) : null}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
className="flex w-full items-center justify-center sm:w-auto"
|
||||
className="flex w-1/3 items-center justify-center sm:w-auto"
|
||||
disabled={!mangoAccount}
|
||||
onClick={() => setShowRepayModal(true)}
|
||||
secondary={!hasBorrows}
|
||||
>
|
||||
<ArrowDownRightIcon className="mr-2 h-5 w-5" />
|
||||
{t('repay')}
|
||||
</Button>
|
||||
<Button
|
||||
className="flex w-1/3 items-center justify-center sm:w-auto"
|
||||
onClick={handleBorrowModal}
|
||||
secondary
|
||||
>
|
||||
|
|
@ -91,18 +90,16 @@ const AccountActions = () => {
|
|||
</Button>
|
||||
<Menu>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Menu.Button className={`default-transition focus:outline-none`}>
|
||||
<div className="relative w-1/3 sm:w-auto">
|
||||
<Menu.Button
|
||||
className={`default-transition w-full focus:outline-none`}
|
||||
>
|
||||
<Button
|
||||
className="flex w-full items-center justify-center sm:w-auto"
|
||||
className="flex w-full items-center justify-center"
|
||||
secondary
|
||||
>
|
||||
{t('more')}
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} ml-2 h-5 w-5 flex-shrink-0`}
|
||||
/>
|
||||
<AdjustmentsHorizontalIcon className="mr-2 h-4 w-4" />
|
||||
{t('settings')}
|
||||
</Button>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
|
|
@ -116,7 +113,7 @@ const AccountActions = () => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 mt-1 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 md:rounded-r-none">
|
||||
<Menu.Items className="absolute right-0 top-10 mt-1 space-y-1.5 rounded-md bg-th-bkg-2 px-4 py-2.5">
|
||||
<Menu.Item>
|
||||
<ActionsButton
|
||||
mangoAccount={mangoAccount!}
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ const AccountPage = () => {
|
|||
|
||||
return !chartToShow ? (
|
||||
<>
|
||||
<div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-3 md:flex-row md:items-center md:justify-between md:border-b">
|
||||
<div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-3 lg:flex-row lg:items-center lg:justify-between lg:border-b">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:space-x-6">
|
||||
<div id="account-step-three">
|
||||
<Tooltip
|
||||
|
|
@ -270,7 +270,7 @@ const AccountPage = () => {
|
|||
{!loadPerformanceData ? (
|
||||
mangoAccount && performanceData.length ? (
|
||||
<div
|
||||
className="relative flex h-44 items-end sm:h-24 sm:w-48"
|
||||
className="relative mt-4 flex h-44 items-end sm:mt-0 sm:h-24 sm:w-48"
|
||||
onMouseEnter={() =>
|
||||
onHoverMenu(showExpandChart, 'onMouseEnter')
|
||||
}
|
||||
|
|
@ -316,12 +316,12 @@ const AccountPage = () => {
|
|||
</SheenLoader>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6 mb-1 md:mt-0 md:mb-0">
|
||||
<div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
|
||||
<AccountActions />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 border-b border-th-bkg-3">
|
||||
<div className="col-span-4 flex border-t border-th-bkg-3 py-3 pl-6 md:border-t-0 lg:col-span-1">
|
||||
<div className="col-span-4 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-t-0">
|
||||
<div id="account-step-four">
|
||||
<Tooltip
|
||||
maxWidth="20rem"
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ const MobileActivityFeedItem = ({
|
|||
const isLiquidation = activity_type === 'liquidate_token_with_token'
|
||||
const isSwap = activity_type === 'swap'
|
||||
const isPerp = activity_type === 'perp_trade'
|
||||
const activityName = isLiquidation ? 'liquidation' : activity_type
|
||||
const activityName = isLiquidation ? 'spot-liquidation' : activity_type
|
||||
const value = getValue(activity)
|
||||
return (
|
||||
<div key={signature} className="border-b border-th-bkg-3 p-4">
|
||||
|
|
@ -488,9 +488,7 @@ const MobileActivityFeedItem = ({
|
|||
height="20"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
<span className="ml-2 text-base">{`View on ${t(
|
||||
`settings:${preferredExplorer.name}`
|
||||
)}`}</span>
|
||||
<span className="ml-2 text-base">{t('view-transaction')}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue