fix deposit/withdraw color in activity feed and update outdated tailwind classes
This commit is contained in:
parent
8cfdf9ce2b
commit
4557eff7c2
|
@ -343,7 +343,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 shrink-0" />
|
||||
{t('swap:insufficient-collateral')}
|
||||
</div>
|
||||
) : isBorrow || !inputAmount ? (
|
||||
|
|
|
@ -154,7 +154,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
|||
>
|
||||
{sidebarImageUrl && !collapsed ? (
|
||||
<img
|
||||
className={`absolute bottom-16 h-auto w-full flex-shrink-0`}
|
||||
className={`absolute bottom-16 h-auto w-full shrink-0`}
|
||||
onClick={() => playAnimation()}
|
||||
src={sidebarImageUrl}
|
||||
alt="next"
|
||||
|
@ -169,10 +169,10 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
|||
} pb-1 pl-3`}
|
||||
>
|
||||
<div
|
||||
className={`flex h-16 flex-shrink-0 cursor-pointer items-center bg-th-bkg-1`}
|
||||
className={`flex h-16 shrink-0 cursor-pointer items-center bg-th-bkg-1`}
|
||||
>
|
||||
<img
|
||||
className={`h-9 w-9 flex-shrink-0`}
|
||||
className={`h-9 w-9 shrink-0`}
|
||||
src={themeData.logoPath}
|
||||
alt="logo"
|
||||
/>
|
||||
|
@ -599,9 +599,7 @@ export const ExpandableMenuItem = ({
|
|||
</Transition>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-5 w-5 flex-shrink-0`}
|
||||
className={`${open ? 'rotate-180' : 'rotate-0'} h-5 w-5 shrink-0`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
|
|
|
@ -566,8 +566,8 @@ const MobileTokenListItem = ({ data }: { data: TableData }) => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -787,7 +787,7 @@ export const ActionsMenu = ({
|
|||
>
|
||||
{!showText && isDesktop ? (
|
||||
<div className="flex items-center justify-center border-b border-th-bkg-3 pb-2">
|
||||
<div className="mr-2 flex flex-shrink-0 items-center">
|
||||
<div className="mr-2 flex shrink-0 items-center">
|
||||
<TokenLogo bank={bank} size={20} />
|
||||
</div>
|
||||
<p className="font-body">
|
||||
|
|
|
@ -129,7 +129,7 @@ const TopBar = () => {
|
|||
<div className="flex h-[63px] w-16 items-center justify-center bg-th-bkg-1 md:hidden">
|
||||
<Link href="/" shallow={true}>
|
||||
<img
|
||||
className="h-8 w-8 flex-shrink-0"
|
||||
className="h-8 w-8 shrink-0"
|
||||
src={themeData.logoPath}
|
||||
alt="logo"
|
||||
/>
|
||||
|
@ -159,9 +159,9 @@ const TopBar = () => {
|
|||
{abbreviateAddress(mangoAccount.publicKey)}
|
||||
</p>
|
||||
{copied === mangoAccount.publicKey.toString() ? (
|
||||
<CheckCircleIcon className="h-4 w-4 flex-shrink-0 text-th-success" />
|
||||
<CheckCircleIcon className="h-4 w-4 shrink-0 text-th-success" />
|
||||
) : (
|
||||
<DocumentDuplicateIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<DocumentDuplicateIcon className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
<p>{t('wallet')}</p>
|
||||
|
@ -175,9 +175,9 @@ const TopBar = () => {
|
|||
{abbreviateAddress(mangoAccount.owner)}
|
||||
</p>
|
||||
{copied === mangoAccount.owner.toString() ? (
|
||||
<CheckCircleIcon className="h-4 w-4 flex-shrink-0 text-th-success" />
|
||||
<CheckCircleIcon className="h-4 w-4 shrink-0 text-th-success" />
|
||||
) : (
|
||||
<DocumentDuplicateIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<DocumentDuplicateIcon className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
|
@ -202,7 +202,7 @@ const TopBar = () => {
|
|||
<div className="flex h-[63px] items-center justify-between border-x border-th-bkg-3 bg-th-bkg-1 px-4 md:border-l-0">
|
||||
{accountPointsAndRank?.rank ? (
|
||||
<div
|
||||
className={`relative hidden h-6 w-6 flex-shrink-0 items-center justify-center rounded-full sm:flex ${
|
||||
className={`relative hidden h-6 w-6 shrink-0 items-center justify-center rounded-full sm:flex ${
|
||||
accountPointsAndRank.rank < 4 ? '' : 'bg-th-bkg-3'
|
||||
} mr-2`}
|
||||
>
|
||||
|
@ -258,7 +258,7 @@ const TopBar = () => {
|
|||
</span>
|
||||
{!isOnline ? (
|
||||
<div className="absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full bg-th-down px-4 py-2 md:top-8">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-th-fgd-1" />
|
||||
<ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-th-fgd-1" />
|
||||
<p className="ml-2 text-th-fgd-1">
|
||||
Your connection appears to be offline
|
||||
</p>
|
||||
|
|
|
@ -272,7 +272,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
|
|||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 shrink-0" />
|
||||
{t('swap:insufficient-balance', {
|
||||
symbol: selectedToken,
|
||||
})}
|
||||
|
|
|
@ -71,7 +71,7 @@ const AccountStats = ({ hideView }: { hideView: () => void }) => {
|
|||
<>
|
||||
<div className="flex h-14 items-center space-x-4 border-b border-th-bkg-3">
|
||||
<button
|
||||
className="flex h-14 w-14 flex-shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
className="flex h-14 w-14 shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
onClick={hideView}
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
|
|
|
@ -34,7 +34,7 @@ const ActionTokenItem = ({
|
|||
!showBorrowRates && !showDepositRates ? 'w-1/2' : 'w-1/4'
|
||||
} items-center`}
|
||||
>
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<div className="mr-2.5 flex shrink-0 items-center">
|
||||
<TokenLogo bank={bank} />
|
||||
</div>
|
||||
<p className="text-left text-th-fgd-1">{name}</p>
|
||||
|
|
|
@ -259,7 +259,7 @@ export const getValue = (activity: any, mangoAccountAddress: string) => {
|
|||
}
|
||||
if (activity_type === 'deposit' || activity_type === 'withdraw') {
|
||||
const { usd_equivalent } = activity.activity_details
|
||||
value = activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent
|
||||
value = activity_type === 'withdraw' ? usd_equivalent : usd_equivalent * -1
|
||||
}
|
||||
if (activity_type === 'swap') {
|
||||
const { swap_out_amount, swap_out_price_usd } = activity.activity_details
|
||||
|
@ -369,7 +369,7 @@ const ActivityFeedTable = () => {
|
|||
<div className="flex items-center justify-end">
|
||||
<ChevronDownIcon
|
||||
className={`h-6 w-6 text-th-fgd-3 ${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
@ -624,8 +624,8 @@ const MobileActivityFeedItem = ({
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -636,7 +636,7 @@ const MobileActivityFeedItem = ({
|
|||
enterTo="opacity-100"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="border-t border-th-bkg-3 px-4 py-4">
|
||||
<div className="border-t border-th-bkg-3 p-4">
|
||||
{isLiquidationActivityFeedItem(activity) ? (
|
||||
<LiquidationActivityDetails activity={activity} />
|
||||
) : isPerpTradeActivityFeedItem(activity) ? (
|
||||
|
|
|
@ -165,8 +165,8 @@ const ActivityFilters = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
showFilters ? 'rotate-180' : 'rotate-360'
|
||||
} ml-1.5 h-5 w-5 flex-shrink-0`}
|
||||
showFilters ? 'rotate-180' : 'rotate-0'
|
||||
} ml-1.5 h-5 w-5 shrink-0`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
</button>
|
||||
|
@ -307,7 +307,7 @@ const FiltersForm = ({
|
|||
<div className="col-span-2 lg:col-span-1">
|
||||
<Label text={t('tokens')} />
|
||||
<MultiSelectDropdown
|
||||
options={symbols}
|
||||
options={symbols.sort((a, b) => a.localeCompare(b))}
|
||||
selected={advancedFilters.symbol || []}
|
||||
toggleOption={toggleSymbolOption}
|
||||
/>
|
||||
|
@ -334,7 +334,7 @@ const FiltersForm = ({
|
|||
/>
|
||||
</div>
|
||||
<div className="flex h-12 items-center justify-center">
|
||||
<ChevronRightIcon className="mx-1 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
|
||||
<ChevronRightIcon className="mx-1 h-5 w-5 shrink-0 text-th-fgd-3" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<Label text={t('activity:value-to')} />
|
||||
|
|
|
@ -240,7 +240,7 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
<>
|
||||
<div className="hide-scroll flex h-14 items-center space-x-4 overflow-x-auto border-b border-th-bkg-3">
|
||||
<button
|
||||
className="flex h-14 w-14 flex-shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
className="flex h-14 w-14 shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
onClick={hideView}
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
|
|
|
@ -194,8 +194,8 @@ const MarketsHealthTable = ({
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -106,7 +106,7 @@ const TokensHealthTable = ({
|
|||
>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<div className="mr-2.5 flex shrink-0 items-center">
|
||||
<TokenLogo bank={bank} />
|
||||
</div>
|
||||
<p className="font-body">{asset}</p>
|
||||
|
@ -250,8 +250,8 @@ const TokensHealthTable = ({
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -143,8 +143,8 @@ const AssetsBorrowsTable = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -192,8 +192,8 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -70,7 +70,7 @@ const ChatForm = ({
|
|||
ref={callbackRef}
|
||||
/>
|
||||
<button className="mx-2 bg-transparent" type="submit">
|
||||
<PaperAirplaneIcon className="h-5 w-5 flex-shrink-0 rotate-90" />
|
||||
<PaperAirplaneIcon className="h-5 w-5 shrink-0 rotate-90" />
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
|
|
|
@ -253,8 +253,8 @@ const AccountDisplay = ({ account }: { account: FollowedAccount }) => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} ml-4 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} ml-4 h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel>
|
||||
|
|
|
@ -303,7 +303,7 @@ const MobilePerpMarketItem = ({
|
|||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="flex flex-shrink-0 items-center">
|
||||
<div className="flex shrink-0 items-center">
|
||||
<MarketLogos market={market} />
|
||||
</div>
|
||||
<p className="mr-2 leading-none text-th-fgd-1">{market.name}</p>
|
||||
|
@ -335,8 +335,8 @@ const MobilePerpMarketItem = ({
|
|||
<MarketChange market={market} />
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -397,7 +397,7 @@ const MobileSpotItem = ({ data }: { data: TableData }) => {
|
|||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="flex flex-shrink-0 items-center">
|
||||
<div className="flex shrink-0 items-center">
|
||||
<TokenLogo bank={baseBank} />
|
||||
</div>
|
||||
<p className="ml-3 leading-none text-th-fgd-1">{tokenName}</p>
|
||||
|
@ -424,8 +424,8 @@ const MobileSpotItem = ({ data }: { data: TableData }) => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -40,7 +40,7 @@ const Checkbox = ({
|
|||
<div
|
||||
className={`${
|
||||
checked && !disabled && !halfState ? 'bg-th-active' : 'bg-th-bkg-4'
|
||||
} flex h-4 w-4 flex-shrink-0 cursor-pointer items-center justify-center rounded`}
|
||||
} flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded`}
|
||||
>
|
||||
{halfState ? (
|
||||
<div className="mb-0.5 font-bold text-th-bkg-1">–</div>
|
||||
|
|
|
@ -40,7 +40,7 @@ const MangoDateRangePicker = ({
|
|||
/>
|
||||
</div>
|
||||
<div className="flex h-12 items-center justify-center">
|
||||
<ChevronRightIcon className="mx-1 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
|
||||
<ChevronRightIcon className="mx-1 h-5 w-5 shrink-0 text-th-fgd-3" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<Label text={t('date-to')} />
|
||||
|
|
|
@ -40,7 +40,7 @@ const MultiSelectDropdown = ({
|
|||
)}
|
||||
<ChevronDownIcon
|
||||
className={`ml-0.5 h-6 w-6 ${
|
||||
open ? 'rotate-180 transform' : 'rotate-360 transform'
|
||||
open ? 'rotate-180 transform' : 'rotate-0 transform'
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
|
@ -49,8 +49,8 @@ const Select = <T extends Values>({
|
|||
)}
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`ml-1 h-5 w-5 flex-shrink-0 text-th-fgd-3 ${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
className={`ml-1 h-5 w-5 shrink-0 text-th-fgd-3 ${
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -30,7 +30,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
|
|||
checked ? 'bg-th-success' : 'bg-th-bkg-4'
|
||||
} relative inline-flex ${
|
||||
small ? 'h-4 w-8' : 'h-5 w-10'
|
||||
} flex-shrink-0 cursor-pointer rounded-full
|
||||
} shrink-0 cursor-pointer rounded-full
|
||||
border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-th-fgd-4 ${
|
||||
disabled ? 'opacity-60' : ''
|
||||
}`}
|
||||
|
|
|
@ -472,7 +472,7 @@ const ListMarket = ({ goBack }: { goBack: () => void }) => {
|
|||
{t('adv-fields')}
|
||||
<ChevronDownIcon
|
||||
className={`h-5 w-5 text-th-fgd-3 ${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -35,7 +35,7 @@ const ListMarketOrTokenPage = () => {
|
|||
<h1 className="mb-4 flex items-center">{t('new-listing')}</h1>
|
||||
<ul className="mb-6">
|
||||
<li className="mb-2 flex items-center text-base">
|
||||
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
||||
<InformationCircleIcon className="mr-2 h-5 w-5 shrink-0 text-th-fgd-4" />
|
||||
<span>
|
||||
{t('before-listing-1')}{' '}
|
||||
<a
|
||||
|
@ -48,11 +48,11 @@ const ListMarketOrTokenPage = () => {
|
|||
</span>
|
||||
</li>
|
||||
<li className="mb-2 flex items-center text-base">
|
||||
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
||||
<InformationCircleIcon className="mr-2 h-5 w-5 shrink-0 text-th-fgd-4" />
|
||||
{t('before-listing-3')}
|
||||
</li>
|
||||
<li className="mb-2 flex items-center text-base">
|
||||
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
||||
<InformationCircleIcon className="mr-2 h-5 w-5 shrink-0 text-th-fgd-4" />
|
||||
{t('before-listing-4')}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -736,7 +736,7 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
|
|||
{t('adv-fields')}
|
||||
<ChevronDownIcon
|
||||
className={`h-5 w-5 text-th-fgd-3 ${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -186,7 +186,7 @@ const ProposalCard = ({
|
|||
href={`https://dao.mango.markets/dao/MNGO/proposal/${proposal.pubkey.toBase58()}`}
|
||||
>
|
||||
<span className="mr-2">{proposal.account.name}</span>
|
||||
<ArrowTopRightOnSquareIcon className="mb-1 inline-block h-4 w-4 flex-shrink-0" />
|
||||
<ArrowTopRightOnSquareIcon className="mb-1 inline-block h-4 w-4 shrink-0" />
|
||||
</a>
|
||||
</h2>
|
||||
<p className="mb-2 break-all md:mb-0">{description}</p>
|
||||
|
|
|
@ -69,7 +69,7 @@ const QuorumProgress = ({ governance, proposal, communityMint }: Props) => {
|
|||
} required`}</p>
|
||||
) : (
|
||||
<div className="flex items-center">
|
||||
<CheckCircleIcon className="mr-1.5 h-4 w-4 flex-shrink-0 text-th-success" />
|
||||
<CheckCircleIcon className="mr-1.5 h-4 w-4 shrink-0 text-th-success" />
|
||||
<p className="text-fgd-1 mb-0 font-bold">
|
||||
{t('required-approval-achieved')}
|
||||
</p>
|
||||
|
|
|
@ -73,7 +73,7 @@ const LeaderboardRow = ({
|
|||
>
|
||||
<div className="flex w-full items-center space-x-3">
|
||||
<div
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
|
||||
className={`relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${
|
||||
rank < 4 ? '' : 'bg-th-bkg-3'
|
||||
}`}
|
||||
>
|
||||
|
|
|
@ -190,7 +190,7 @@ const MangoAccountsListModal = ({
|
|||
: 'text-th-fgd-4'
|
||||
}`}
|
||||
>
|
||||
<HeartIcon className="mr-1 h-4 w-4 flex-shrink-0" />
|
||||
<HeartIcon className="mr-1 h-4 w-4 shrink-0" />
|
||||
<span>{maintHealth}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -202,7 +202,7 @@ const MobileCategoryHeading = ({
|
|||
return (
|
||||
<div className="mb-2 flex items-center md:hidden">
|
||||
<IconButton
|
||||
className="flex-shrink-0 text-th-fgd-3"
|
||||
className="shrink-0 text-th-fgd-3"
|
||||
hideBg
|
||||
size="medium"
|
||||
onClick={() => setActiveTab(null)}
|
||||
|
|
|
@ -97,7 +97,7 @@ const SharePositionModal = ({
|
|||
<div className="w-1/2 text-left">
|
||||
<div className="px-8">
|
||||
<img
|
||||
className="mb-8 h-7 w-auto flex-shrink-0"
|
||||
className="mb-8 h-7 w-auto shrink-0"
|
||||
src="/logos/logo-with-text.svg"
|
||||
alt="Mango"
|
||||
/>
|
||||
|
|
|
@ -32,7 +32,7 @@ export default SwapIntroModal
|
|||
const ListItem = ({ desc }: { desc: string }) => {
|
||||
return (
|
||||
<li className="mt-3 flex items-start">
|
||||
<CheckCircleIcon className="mr-1.5 mt-[1px] h-5 w-5 flex-shrink-0 text-th-up " />
|
||||
<CheckCircleIcon className="mr-1.5 mt-[1px] h-5 w-5 shrink-0 text-th-up " />
|
||||
<span className="text-th-fgd-2 md:text-base md:leading-snug">{desc}</span>
|
||||
</li>
|
||||
)
|
||||
|
|
|
@ -20,7 +20,7 @@ const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
target="_blank"
|
||||
>
|
||||
{t('terms-of-use')}
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 shrink-0" />
|
||||
</a>
|
||||
<span className="mx-1">and</span>
|
||||
<a
|
||||
|
@ -30,7 +30,7 @@ const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
target="_blank"
|
||||
>
|
||||
{t('risks')}
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 shrink-0" />
|
||||
</a>
|
||||
</p>
|
||||
<Button className="w-full" onClick={onClose} size="large">
|
||||
|
|
|
@ -272,7 +272,7 @@ const UserSetupModal = ({
|
|||
className="-bottom-20 -right-20 bg-th-bkg-1 opacity-30 mix-blend-multiply"
|
||||
/>
|
||||
<img
|
||||
className={`absolute left-6 top-6 h-10 w-10 flex-shrink-0`}
|
||||
className={`absolute left-6 top-6 h-10 w-10 shrink-0`}
|
||||
src="/logos/logo-mark.svg"
|
||||
alt="next"
|
||||
/>
|
||||
|
@ -335,7 +335,7 @@ const UserSetupModal = ({
|
|||
target="_blank"
|
||||
>
|
||||
{t('terms-of-use')}
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 shrink-0" />
|
||||
</a>
|
||||
<span className="mx-1">and</span>
|
||||
<a
|
||||
|
@ -345,7 +345,7 @@ const UserSetupModal = ({
|
|||
target="_blank"
|
||||
>
|
||||
{t('risks')}
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 shrink-0" />
|
||||
</a>
|
||||
</p>
|
||||
</Checkbox>
|
||||
|
@ -409,9 +409,7 @@ const UserSetupModal = ({
|
|||
>
|
||||
<div>More</div>
|
||||
<div>
|
||||
<ChevronDownIcon
|
||||
className={`h-5 w-5 flex-shrink-0`}
|
||||
/>
|
||||
<ChevronDownIcon className={`h-5 w-5 shrink-0`} />
|
||||
</div>
|
||||
</button>
|
||||
) : null}
|
||||
|
@ -608,7 +606,7 @@ const UserSetupModal = ({
|
|||
<Loading />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 shrink-0" />
|
||||
{t('swap:insufficient-balance', {
|
||||
symbol: depositToken,
|
||||
})}
|
||||
|
|
|
@ -100,7 +100,7 @@ const BidNftModal = ({ isOpen, onClose, listing }: ListingModalProps) => {
|
|||
{listing.asset?.json?.image ? (
|
||||
<ImgWithLoader
|
||||
alt={listing.asset?.name || 'Unknown'}
|
||||
className="mb-3 h-40 w-40 flex-shrink-0 rounded-md"
|
||||
className="mb-3 h-40 w-40 shrink-0 rounded-md"
|
||||
src={listing.asset.json.image}
|
||||
/>
|
||||
) : null}
|
||||
|
|
|
@ -182,7 +182,7 @@ const ListingsView = () => {
|
|||
<div className="flex h-60 w-full items-center overflow-hidden rounded-t-lg">
|
||||
<ImgWithLoader
|
||||
alt="nft"
|
||||
className="h-auto w-full flex-shrink-0"
|
||||
className="h-auto w-full shrink-0"
|
||||
src={imgSource}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -93,7 +93,7 @@ const SellNftModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
>
|
||||
<ImgWithLoader
|
||||
alt={n.name}
|
||||
className="h-16 w-16 flex-shrink-0 rounded-full"
|
||||
className="h-16 w-16 shrink-0 rounded-full"
|
||||
src={n.image}
|
||||
/>
|
||||
</button>
|
||||
|
|
|
@ -247,7 +247,7 @@ const TransactionNotification = ({
|
|||
}`}
|
||||
>
|
||||
<div className={`relative flex w-full items-center p-3.5 sm:w-96`}>
|
||||
<div className={`mr-1 flex-shrink-0`}>
|
||||
<div className={`mr-1 shrink-0`}>
|
||||
{type === 'success' ? (
|
||||
<CheckCircleIcon className={`h-6 w-6 text-th-success`} />
|
||||
) : null}
|
||||
|
@ -282,11 +282,11 @@ const TransactionNotification = ({
|
|||
? txid
|
||||
: `${txid.slice(0, 14)}...${txid.slice(txid.length - 14)}`}
|
||||
</div>
|
||||
<ArrowTopRightOnSquareIcon className="mb-0.5 ml-1 h-5 w-5 flex-shrink-0" />
|
||||
<ArrowTopRightOnSquareIcon className="mb-0.5 ml-1 h-5 w-5 shrink-0" />
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={`absolute right-2 top-2 flex-shrink-0`}>
|
||||
<div className={`absolute right-2 top-2 shrink-0`}>
|
||||
<button
|
||||
onClick={hideNotification}
|
||||
className={`text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-3`}
|
||||
|
|
|
@ -153,7 +153,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
|
|||
>
|
||||
<ImgWithLoader
|
||||
alt={n.name}
|
||||
className="h-16 w-16 flex-shrink-0 rounded-full sm:h-20 sm:w-20"
|
||||
className="h-16 w-16 shrink-0 rounded-full sm:h-20 sm:w-20"
|
||||
src={n.image}
|
||||
/>
|
||||
</button>
|
||||
|
|
|
@ -23,7 +23,7 @@ const ProfileImage = ({
|
|||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`flex flex-shrink-0 items-center justify-center rounded-full bg-th-bkg-3`}
|
||||
className={`flex shrink-0 items-center justify-center rounded-full bg-th-bkg-3`}
|
||||
style={{ width: `${imageSize}px`, height: `${imageSize}px` }}
|
||||
>
|
||||
<div
|
||||
|
|
|
@ -58,8 +58,8 @@ const Faqs = () => {
|
|||
<p className="rewards-p font-bold">{faq.q}</p>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -131,7 +131,7 @@ const Leaderboards = ({
|
|||
<div className="flex w-full items-center justify-between rounded-lg border border-th-active p-3 md:rounded-xl md:p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
|
||||
className={`relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${
|
||||
accountPointsAndRank.rank < 4 ? '' : 'bg-th-bkg-3'
|
||||
} md:mr-2`}
|
||||
>
|
||||
|
@ -224,7 +224,7 @@ const LeaderboardCard = ({
|
|||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
|
||||
className={`relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${
|
||||
rank < 4 ? '' : 'bg-th-bkg-3'
|
||||
} md:mr-2`}
|
||||
>
|
||||
|
|
|
@ -26,7 +26,7 @@ const RewardsTierCard = ({
|
|||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-th-bkg-1">
|
||||
<div className="mr-4 flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-th-bkg-1">
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -405,7 +405,7 @@ const Season = ({
|
|||
>
|
||||
<div className="flex items-center space-x-2 font-mono">
|
||||
<div
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
|
||||
className={`relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${
|
||||
rank < 4 ? '' : 'bg-th-bkg-3'
|
||||
}`}
|
||||
>
|
||||
|
|
|
@ -293,7 +293,7 @@ const AccountSettings = () => {
|
|||
className="mt-3 flex items-center"
|
||||
onClick={() => setShowAccountSizeModal(true)}
|
||||
>
|
||||
<SquaresPlusIcon className="mr-1.5 h-4 w-4 flex-shrink-0" />
|
||||
<SquaresPlusIcon className="mr-1.5 h-4 w-4 shrink-0" />
|
||||
<span className="whitespace-nowrap">
|
||||
{t('settings:increase-account-slots')}
|
||||
</span>
|
||||
|
@ -323,8 +323,8 @@ const AccountSettings = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
@ -432,8 +432,8 @@ const AccountSettings = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
@ -506,8 +506,8 @@ const AccountSettings = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
@ -582,8 +582,8 @@ const AccountSettings = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
@ -623,8 +623,8 @@ const AccountSettings = () => {
|
|||
</p>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -255,8 +255,8 @@ const BalancesTable = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -83,7 +83,7 @@ export const IconButton = forwardRef<
|
|||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`flex flex-shrink-0 ${
|
||||
className={`flex shrink-0 ${
|
||||
size === 'large'
|
||||
? 'h-12 w-12'
|
||||
: size === 'small'
|
||||
|
|
|
@ -21,9 +21,7 @@ const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
|
|||
hideBorder,
|
||||
hidePadding,
|
||||
}) => {
|
||||
const iconClasses = `mr-1.5 ${
|
||||
hidePadding ? 'h-4 w-4' : 'h-5 w-5'
|
||||
} flex-shrink-0`
|
||||
const iconClasses = `mr-1.5 ${hidePadding ? 'h-4 w-4' : 'h-5 w-5'} shrink-0`
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
|
|
|
@ -125,11 +125,11 @@ export const SortableColumnHeader = ({
|
|||
>
|
||||
<span className={`text-th-fgd-3 ${titleClass}`}>{title}</span>
|
||||
<ArrowSmallDownIcon
|
||||
className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
|
||||
className={`default-transition ml-1 h-4 w-4 shrink-0 ${
|
||||
sortConfig?.key === sortKey
|
||||
? sortConfig?.direction === 'ascending'
|
||||
? 'rotate-180'
|
||||
: 'rotate-360'
|
||||
: 'rotate-0'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
|
|
|
@ -5,7 +5,7 @@ import TokenReduceOnlyDesc from './TokenReduceOnlyDesc'
|
|||
const TableTokenName = ({ bank, symbol }: { bank: Bank; symbol: string }) => {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<div className="mr-2.5 flex shrink-0 items-center">
|
||||
<TokenLogo bank={bank} showRewardsLogo />
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -207,8 +207,8 @@ const PerpMarketDetailsTable = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -237,8 +237,8 @@ const PerpPositionsStatsTable = ({
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} ml-3 h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
|
|
|
@ -36,7 +36,7 @@ const PerpStatsPage = () => {
|
|||
<>
|
||||
<div className="flex h-14 items-center space-x-4 border-b border-th-bkg-3">
|
||||
<button
|
||||
className="flex h-14 w-14 flex-shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
className="flex h-14 w-14 shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
onClick={() =>
|
||||
router.push(router.pathname, undefined, { shallow: true })
|
||||
}
|
||||
|
|
|
@ -257,8 +257,8 @@ const TokenDetailsTable = () => {
|
|||
<TableTokenName bank={bank} symbol={bank.name} />
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -311,8 +311,8 @@ const TokenOverviewTable = () => {
|
|||
<TableTokenName bank={bank} symbol={symbol} />
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -35,7 +35,7 @@ const FavoriteSwapsBar = () => {
|
|||
leaveFrom="opacity-100 h-8"
|
||||
leaveTo="opacity-0 h-0"
|
||||
>
|
||||
<StarIcon className="h-4 w-4 flex-shrink-0 text-th-fgd-4" />
|
||||
<StarIcon className="h-4 w-4 shrink-0 text-th-fgd-4" />
|
||||
{favoriteSwaps.map((pair: string) => {
|
||||
const inputToken = pair.split('/')[0]
|
||||
const outputToken = pair.split('/')[1]
|
||||
|
|
|
@ -232,7 +232,7 @@ const SwapHistoryTable = () => {
|
|||
<Td>
|
||||
<div className="flex items-center">
|
||||
{inBank ? (
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<div className="mr-2.5 flex shrink-0 items-center">
|
||||
<TokenLogo bank={inBank} />
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -250,7 +250,7 @@ const SwapHistoryTable = () => {
|
|||
<Td>
|
||||
<div className="flex items-center">
|
||||
{outBank ? (
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<div className="mr-2.5 flex shrink-0 items-center">
|
||||
<TokenLogo bank={outBank} />
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -379,8 +379,8 @@ const SwapHistoryTable = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -955,7 +955,7 @@ const SwapReviewRouteInfo = ({
|
|||
<p>{t('swap:route-info')}</p>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-5 w-5 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -430,8 +430,8 @@ const SwapOrders = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
|
|
@ -134,7 +134,7 @@ const CoingeckoStats = ({
|
|||
{showFullDesc ? 'Less' : 'More'}
|
||||
<ArrowSmallUpIcon
|
||||
className={`h-5 w-5 ${
|
||||
showFullDesc ? 'rotate-360' : 'rotate-180'
|
||||
showFullDesc ? 'rotate-0' : 'rotate-180'
|
||||
} default-transition`}
|
||||
/>
|
||||
</span>
|
||||
|
|
|
@ -124,7 +124,7 @@ const TokenPage = () => {
|
|||
<>
|
||||
<div className="flex h-14 items-center space-x-4 border-b border-th-bkg-3">
|
||||
<button
|
||||
className="flex h-14 w-14 flex-shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
className="flex h-14 w-14 shrink-0 items-center justify-center border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2"
|
||||
onClick={() =>
|
||||
router.push(router.pathname, undefined, { shallow: true })
|
||||
}
|
||||
|
|
|
@ -183,7 +183,7 @@ const LeaderboardRow = ({
|
|||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
|
||||
className={`relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${
|
||||
rank < 4 ? '' : 'bg-th-bkg-3'
|
||||
} md:mr-2`}
|
||||
>
|
||||
|
|
|
@ -145,7 +145,7 @@ const AdvancedMarketHeader = ({
|
|||
className="ml-4 flex items-center whitespace-nowrap text-th-fgd-3"
|
||||
onClick={() => setShowMarketDetails(true)}
|
||||
>
|
||||
<InformationCircleIcon className="h-5 w-5 flex-shrink-0 md:mr-1.5 md:h-4 md:w-4" />
|
||||
<InformationCircleIcon className="h-5 w-5 shrink-0 md:mr-1.5 md:h-4 md:w-4" />
|
||||
<span className="hidden text-xs md:inline">
|
||||
{t('trade:market-details', { market: '' })}
|
||||
</span>
|
||||
|
|
|
@ -95,7 +95,7 @@ export const INPUT_SUFFIX_CLASSNAMES =
|
|||
'absolute right-[1px] top-1/2 flex h-[calc(100%-2px)] -translate-y-1/2 items-center rounded-r-md bg-th-input-bkg px-2 text-xs font-normal text-th-fgd-4'
|
||||
|
||||
export const INPUT_PREFIX_CLASSNAMES =
|
||||
'absolute left-2 top-1/2 h-5 w-5 flex-shrink-0 -translate-y-1/2'
|
||||
'absolute left-2 top-1/2 h-5 w-5 shrink-0 -translate-y-1/2'
|
||||
|
||||
export const DEFAULT_CHECKBOX_SETTINGS = {
|
||||
ioc: false,
|
||||
|
|
|
@ -29,7 +29,7 @@ const FavoriteMarketsBar = () => {
|
|||
>
|
||||
<Tooltip content="Remove all favorites">
|
||||
<div onClick={() => setFavorites([])} className="cursor-pointer">
|
||||
<StarIcon className="h-4 w-4 flex-shrink-0 text-th-fgd-4" />
|
||||
<StarIcon className="h-4 w-4 shrink-0 text-th-fgd-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
{favoriteMarkets.map((mkt: string) => {
|
||||
|
|
|
@ -49,7 +49,7 @@ const GroupSize = ({
|
|||
|
||||
<ChevronDownIcon
|
||||
className={`ml-0.5 h-5 w-5 text-th-fgd-3 ${
|
||||
open ? 'rotate-180 transform' : 'rotate-360 transform'
|
||||
open ? 'rotate-180 transform' : 'rotate-0 transform'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -96,12 +96,12 @@ const MarketLogos = ({
|
|||
: size === 'large'
|
||||
? 'w-[24px]'
|
||||
: 'w-[20px]'
|
||||
} flex-shrink-0`}
|
||||
} shrink-0`}
|
||||
>
|
||||
<div className="absolute left-0 top-0 z-10 rounded-full bg-th-bkg-2">
|
||||
<LogoWithFallback
|
||||
alt=""
|
||||
className="flex-shrink-0"
|
||||
className="shrink-0"
|
||||
width={pxSize}
|
||||
height={pxSize}
|
||||
src={logos.baseLogoURI || `/icons/${logos?.name?.toLowerCase()}.svg`}
|
||||
|
@ -112,7 +112,7 @@ const MarketLogos = ({
|
|||
{logos.quoteLogoURI && market instanceof Serum3Market ? (
|
||||
<Image
|
||||
alt=""
|
||||
className="flex-shrink-0 opacity-60"
|
||||
className="shrink-0 opacity-60"
|
||||
width={pxSize}
|
||||
height={pxSize}
|
||||
src={logos.quoteLogoURI}
|
||||
|
@ -136,7 +136,7 @@ const FallbackIcon = ({
|
|||
<QuestionMarkCircleIcon
|
||||
className={`${
|
||||
size === 'small' ? 'h-4 w-4' : size === 'large' ? 'h-6 w-6' : 'h-5 w-5'
|
||||
} flex-shrink-0 text-th-fgd-3`}
|
||||
} shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -146,7 +146,7 @@ const MarketSelectDropdown = () => {
|
|||
{selectedMarket ? (
|
||||
<MarketLogos market={selectedMarket} />
|
||||
) : (
|
||||
<Loading className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
<Loading className="mr-2 h-5 w-5 shrink-0" />
|
||||
)}
|
||||
<div className="whitespace-nowrap text-left text-xl font-bold text-th-fgd-1 md:text-base">
|
||||
{selectedMarket?.name || (
|
||||
|
@ -164,8 +164,8 @@ const MarketSelectDropdown = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} ml-2 mt-0.5 h-6 w-6 flex-shrink-0 text-th-fgd-2`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} ml-2 mt-0.5 h-6 w-6 shrink-0 text-th-fgd-2`}
|
||||
/>
|
||||
</Popover.Button>
|
||||
<Popover.Panel className="absolute -left-4 top-12 z-40 w-screen border-y border-th-bkg-3 bg-th-bkg-2 md:w-[580px] md:border-r">
|
||||
|
|
|
@ -519,8 +519,8 @@ const PerpPositions = () => {
|
|||
</span>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} ml-3 h-6 w-6 shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
@ -699,7 +699,7 @@ const PerpPositions = () => {
|
|||
onClick={() => setShowCloseAllModal(true)}
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<NukeIcon className="mr-2 h-4 w-4 flex-shrink-0 text-th-active" />
|
||||
<NukeIcon className="mr-2 h-4 w-4 shrink-0 text-th-active" />
|
||||
{t('trade:close-all')}
|
||||
</div>
|
||||
</Button>
|
||||
|
@ -713,7 +713,7 @@ const PerpPositions = () => {
|
|||
disabled={!group || !basePosition}
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<TwitterIcon className="mr-2 h-4 w-4 flex-shrink-0" />
|
||||
<TwitterIcon className="mr-2 h-4 w-4 shrink-0" />
|
||||
{t('trade:tweet-position')}
|
||||
</div>
|
||||
</Button>
|
||||
|
|
|
@ -92,8 +92,8 @@ export default function ConnectWalletButton({
|
|||
className={`flex h-16 w-10 items-center justify-center rounded-none border-l border-th-bkg-4 bg-th-bkg-3 text-th-fgd-3 hover:brightness-[1.1] focus:outline-none focus-visible:bg-th-bkg-4`}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={`h-6 w-6 flex-shrink-0 ${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
className={`h-6 w-6 shrink-0 ${
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
/>
|
||||
</Popover.Button>
|
||||
|
@ -137,7 +137,7 @@ export default function ConnectWalletButton({
|
|||
onClick={handleShowSetup}
|
||||
>
|
||||
<div className="relative z-10 flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
<WalletIcon className="mr-2 h-5 w-5 shrink-0" />
|
||||
{t('connect')}
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
@ -180,7 +180,7 @@ const Dashboard: NextPage = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-5 w-5 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
|
@ -521,7 +521,7 @@ const Dashboard: NextPage = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-5 w-5 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
|
@ -808,7 +808,7 @@ const Dashboard: NextPage = () => {
|
|||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
open ? 'rotate-180' : 'rotate-0'
|
||||
} h-5 w-5 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
|
|
Loading…
Reference in New Issue