fix deposit/withdraw color in activity feed and update outdated tailwind classes

This commit is contained in:
saml33 2024-01-11 20:19:31 +11:00
parent 8cfdf9ce2b
commit 4557eff7c2
72 changed files with 144 additions and 150 deletions

View File

@ -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 ? (

View File

@ -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

View File

@ -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">

View File

@ -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>

View File

@ -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,
})}

View File

@ -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" />

View File

@ -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>

View File

@ -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) ? (

View File

@ -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')} />

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>
)

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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')} />

View File

@ -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"
/>

View File

@ -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>

View File

@ -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' : ''
}`}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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'
}`}
>

View File

@ -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>

View File

@ -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)}

View File

@ -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"
/>

View File

@ -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>
)

View File

@ -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">

View File

@ -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,
})}

View File

@ -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}

View File

@ -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>

View File

@ -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>

View File

@ -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`}

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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`}
>

View File

@ -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>

View File

@ -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'
}`}
>

View File

@ -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>

View File

@ -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>

View File

@ -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'

View File

@ -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={`${

View File

@ -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
}`}
/>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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 })
}

View File

@ -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>

View File

@ -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>

View File

@ -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]

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 })
}

View File

@ -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`}
>

View File

@ -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>

View File

@ -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,

View File

@ -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) => {

View File

@ -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>

View File

@ -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`}
/>
)
}

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>