fixed raised button flicker

components/TopBar.tsx

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

components/borrow/AssetsBorrowsTable.tsx

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

components/notifications/NotificationsButton.tsx

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

components/rewards/Claim.tsx

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

components/rewards/Season.tsx

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

components/shared/Button.tsx

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

components/trade/AdvancedTradeForm.tsx

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

styles/globals.css

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