fixed raised button flicker
This commit is contained in:
parent
8e304aa560
commit
68cfd1594d
|
@ -41,7 +41,7 @@ import Link from 'next/link'
|
|||
import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
|
||||
|
||||
export const TOPBAR_ICON_BUTTON_CLASSES =
|
||||
'relative flex h-16 w-16 items-center justify-center border-l border-r border-th-bkg-3 focus-visible:bg-th-bkg-3 md:border-r-0 md:hover:bg-th-bkg-2'
|
||||
'relative flex h-16 w-16 items-center justify-center border-l border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
|
@ -224,12 +224,14 @@ const TopBar = () => {
|
|||
<div className="flex items-center">
|
||||
{isUnownedAccount ||
|
||||
(!connected && !isDesktop) ? null : !isDesktop ? (
|
||||
<button
|
||||
onClick={() => handleDepositWithdrawModal('deposit')}
|
||||
className={TOPBAR_ICON_BUTTON_CLASSES}
|
||||
>
|
||||
<DepositWithdrawIcon className="h-6 w-6" />
|
||||
</button>
|
||||
<div className="h-[63px] bg-th-bkg-1">
|
||||
<button
|
||||
onClick={() => handleDepositWithdrawModal('deposit')}
|
||||
className={TOPBAR_ICON_BUTTON_CLASSES}
|
||||
>
|
||||
<DepositWithdrawIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => handleDepositWithdrawModal('deposit')}
|
||||
|
|
|
@ -139,7 +139,7 @@ const AssetsBorrowsTable = () => {
|
|||
<p className="mb-0.5 text-right text-xs">
|
||||
{t('rate')}
|
||||
</p>
|
||||
<p className="text-right text-th-down">
|
||||
<p className="text-right font-mono text-th-down">
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -31,7 +31,7 @@ const NotificationsButton = () => {
|
|||
return (
|
||||
<>
|
||||
<button
|
||||
className={TOPBAR_ICON_BUTTON_CLASSES}
|
||||
className={`border-r md:border-r-0 ${TOPBAR_ICON_BUTTON_CLASSES}`}
|
||||
onClick={() => toggleModal()}
|
||||
>
|
||||
<BellIcon className="h-5 w-5" />
|
||||
|
|
|
@ -33,7 +33,7 @@ import dayjs from 'dayjs'
|
|||
import HolographicCard from './HolographicCard'
|
||||
|
||||
const CLAIM_BUTTON_CLASSES =
|
||||
'raised-button font-rewards mx-auto mt-6 block rounded-lg px-6 py-3 text-xl focus:outline-none'
|
||||
'raised-button group mx-auto block h-12 px-6 pt-1 font-rewards text-xl after:rounded-lg focus:outline-none lg:h-14'
|
||||
|
||||
const WINNER_TITLES = [
|
||||
'Congratulations',
|
||||
|
@ -313,9 +313,9 @@ const ClaimPage = () => {
|
|||
className={CLAIM_BUTTON_CLASSES}
|
||||
onClick={() => handleClaimRewards()}
|
||||
>
|
||||
<span className="mt-1">{`Claim ${claims.length} Prize${
|
||||
claims.length > 1 ? 's' : ''
|
||||
}`}</span>
|
||||
<span className="block text-th-fgd-1 group-hover:mt-1 group-active:mt-2">{`Claim ${
|
||||
claims.length
|
||||
} Prize${claims.length > 1 ? 's' : ''}`}</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
|
@ -323,7 +323,7 @@ const ClaimPage = () => {
|
|||
className={CLAIM_BUTTON_CLASSES}
|
||||
onClick={() => startShowRewards()}
|
||||
>
|
||||
<span className="mt-1">
|
||||
<span className="block text-th-fgd-1 group-hover:mt-1 group-active:mt-2">
|
||||
{' '}
|
||||
{loadingMetadata ? (
|
||||
<Loading className="w-3"></Loading>
|
||||
|
|
|
@ -119,10 +119,12 @@ const Season = ({
|
|||
chances to win big.
|
||||
</p>
|
||||
<button
|
||||
className="raised-button mx-auto block rounded-lg px-6 py-2 font-rewards text-xl focus:outline-none lg:py-3"
|
||||
className="raised-button group mx-auto block h-12 px-6 pt-1 font-rewards text-xl after:rounded-lg focus:outline-none lg:h-14"
|
||||
onClick={scrollToFaqs}
|
||||
>
|
||||
<span className="mt-1">How it Works</span>
|
||||
<span className="block text-th-fgd-1 group-hover:mt-1 group-active:mt-2">
|
||||
How it Works
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -240,10 +242,9 @@ const Season = ({
|
|||
{!loadingAccountPointsAndRank ? (
|
||||
accountPointsAndRank?.rank ? (
|
||||
<span className="capitalize">
|
||||
{accountPointsAndRank.rank +
|
||||
accountPointsAndRank?.total_season_accounts
|
||||
? `/${accountPointsAndRank.total_season_accounts}`
|
||||
: ''}
|
||||
{`${accountPointsAndRank.rank}/${
|
||||
accountPointsAndRank.total_season_accounts || '–'
|
||||
}`}
|
||||
</span>
|
||||
) : (
|
||||
'–'
|
||||
|
@ -330,10 +331,12 @@ const Season = ({
|
|||
)}
|
||||
</div>
|
||||
<button
|
||||
className="raised-button mx-auto block w-full rounded-lg px-6 py-1 font-rewards text-lg focus:outline-none"
|
||||
className="raised-button group mx-auto block h-10 w-full px-6 pt-1 font-rewards text-xl after:rounded-lg focus:outline-none lg:h-12"
|
||||
onClick={() => setShowLeaderboards(topAccountsTier)}
|
||||
>
|
||||
<span className="mt-1.5 text-xl">Full Leaderboard</span>
|
||||
<span className="block text-th-fgd-1 group-hover:mt-1 group-active:mt-2">
|
||||
Full Leaderboard
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -35,7 +35,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
disabled={disabled}
|
||||
className={`rounded-md ${
|
||||
themeData.buttonStyle === 'raised'
|
||||
? 'raised-button'
|
||||
? 'raised-button group relative top-0 after:rounded-md'
|
||||
: secondary
|
||||
? 'border border-th-button focus-visible:border-th-fgd-4 md:hover:border-th-button-hover'
|
||||
: 'bg-th-button focus-visible:border focus-visible:border-th-fgd-4 md:hover:bg-th-button-hover'
|
||||
|
@ -53,7 +53,15 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
type={type}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<span
|
||||
className={`flex ${
|
||||
themeData.buttonStyle === 'raised'
|
||||
? 'group-hover:mt-1 group-active:mt-2'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -787,16 +787,12 @@ const AdvancedTradeForm = () => {
|
|||
<Button
|
||||
className={`flex w-full items-center justify-center ${
|
||||
tradeForm.side === 'buy'
|
||||
? `bg-th-up-dark md:hover:bg-th-up-dark ${
|
||||
themeData.buttonStyle === 'raised'
|
||||
? 'raised-buy-button'
|
||||
: 'text-white md:hover:brightness-90'
|
||||
}`
|
||||
: `bg-th-down-dark md:hover:bg-th-down-dark ${
|
||||
themeData.buttonStyle === 'raised'
|
||||
? 'raised-sell-button'
|
||||
: 'text-white md:hover:brightness-90'
|
||||
}`
|
||||
? themeData.buttonStyle === 'raised'
|
||||
? 'raised-buy-button'
|
||||
: 'bg-th-up-dark text-white md:hover:bg-th-up-dark md:hover:brightness-90'
|
||||
: themeData.buttonStyle === 'raised'
|
||||
? 'raised-sell-button'
|
||||
: 'bg-th-down-dark text-white md:hover:bg-th-down-dark md:hover:brightness-90'
|
||||
}`}
|
||||
disabled={disabled}
|
||||
size="large"
|
||||
|
|
|
@ -856,42 +856,76 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
/* raised button */
|
||||
|
||||
.raised-button {
|
||||
@apply relative flex items-center justify-center bg-th-button text-th-fgd-1 transition-none;
|
||||
box-shadow: 0 6px var(--button-hover);
|
||||
@apply relative z-10 transition-none;
|
||||
}
|
||||
|
||||
.raised-button:hover {
|
||||
background-color: var(--button);
|
||||
.raised-button:after {
|
||||
@apply absolute left-0 top-0 h-full w-full bg-th-button;
|
||||
content: '';
|
||||
box-shadow: 0 4px var(--button-hover);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.raised-button:hover:after {
|
||||
background-color: var(--button);
|
||||
box-shadow: 0 2px var(--button-hover);
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.raised-button:active {
|
||||
.raised-button:active:after {
|
||||
box-shadow: 0 0 var(--button-hover);
|
||||
top: 6px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
/* raised buy button */
|
||||
|
||||
.raised-buy-button {
|
||||
@apply relative flex items-center justify-center bg-th-up text-black transition-none;
|
||||
box-shadow: 0 6px var(--up-dark);
|
||||
@apply relative z-10 text-black transition-none;
|
||||
}
|
||||
|
||||
.raised-buy-button:hover {
|
||||
background-color: var(--up) !important;
|
||||
.raised-buy-button:after {
|
||||
@apply absolute left-0 top-0 h-full w-full bg-th-up;
|
||||
content: '';
|
||||
box-shadow: 0 4px var(--up-dark);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.raised-buy-button:hover:after {
|
||||
background-color: var(--up);
|
||||
box-shadow: 0 2px var(--up-dark);
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.raised-buy-button:active {
|
||||
.raised-buy-button:active:after {
|
||||
box-shadow: 0 0 var(--up-dark);
|
||||
top: 6px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
/* raised sell button */
|
||||
|
||||
.raised-sell-button {
|
||||
@apply relative z-10 text-white transition-none;
|
||||
}
|
||||
|
||||
.raised-sell-button:after {
|
||||
@apply absolute left-0 top-0 h-full w-full bg-th-down;
|
||||
content: '';
|
||||
box-shadow: 0 4px var(--down-dark);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.raised-sell-button:hover:after {
|
||||
background-color: var(--down);
|
||||
box-shadow: 0 2px var(--down-dark);
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.raised-sell-button:active:after {
|
||||
box-shadow: 0 0 var(--down-dark);
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
/* .raised-sell-button {
|
||||
@apply relative flex items-center justify-center bg-th-down text-white transition-none;
|
||||
box-shadow: 0 6px var(--down-dark);
|
||||
}
|
||||
|
@ -905,7 +939,7 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
.raised-sell-button:active {
|
||||
box-shadow: 0 0 var(--down-dark);
|
||||
top: 6px;
|
||||
}
|
||||
} */
|
||||
|
||||
.pagination {
|
||||
margin-top: 15px;
|
||||
|
|
Loading…
Reference in New Issue