fix button flicker

components/Positions.tsx

@@ -134,7 +134,7 @@ const PositionItem = ({
   const { stakeBalance, borrowBalance, bank, acct } = position
 
   const handleAddOrManagePosition = (token: string) => {
-    setActiveTab('Stake')
+    setActiveTab('Boost!')
     set((state) => {
       state.selectedToken = token
     })
@@ -192,9 +192,9 @@ const PositionItem = ({
           </div>
         </div>
         <Button onClick={() => handleAddOrManagePosition(bank.name)}>
-          <span className="mt-1 text-base tracking-wider">
+          <p className="mb-1 text-base tracking-wider text-th-bkg-1">
             {stakeBalance ? 'Manage' : 'Add Position'}
-          </span>
+          </p>
         </Button>
       </div>
       <div className="grid grid-cols-2 gap-4">

components/Stake.tsx

@@ -61,12 +61,12 @@ const Stake = () => {
         <div className="fixed bottom-0 left-0 w-full md:bottom-8 md:left-8 md:w-auto">
           {isDesktop ? (
             <a
-              className="raised-button text-shadow flex h-20 w-20 cursor-pointer items-center justify-center rounded-full border border-th-button-hover p-3 text-center text-base font-extrabold"
+              className="raised-button text-shadow group flex h-20 w-20 cursor-pointer items-center justify-center p-3 text-center text-base font-extrabold after:rounded-full"
               href={swapUrl}
               rel="noopener noreferrer"
               target="_blank"
             >
-              <div>
+              <div className="group-hover:mt-1 group-active:mt-2">
                 <p className="text-th-bkg-1">Buy</p>
                 <p className="-mt-1.5 text-th-bkg-1">
                   {formatTokenSymbol(selectedToken)}

components/StakeForm.tsx

@@ -409,7 +409,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
         {connected ? (
           <Button
             onClick={handleDeposit}
-            className="flex w-full items-center justify-center"
+            className="w-full"
             disabled={connected && (!inputAmount || showInsufficientBalance)}
             size="large"
           >
@@ -427,10 +427,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
             )}
           </Button>
         ) : (
-          <SecondaryConnectButton
-            className="flex w-full items-center justify-center"
-            isLarge
-          />
+          <SecondaryConnectButton className="w-full" isLarge />
         )}
         {tokenPositionsFull ? (
           <InlineNotification

components/UnstakeForm.tsx

@@ -354,7 +354,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
           {connected ? (
             <Button
               onClick={handleWithdraw}
-              className="flex w-full items-center justify-center"
+              className="w-full"
               disabled={connected && (!inputAmount || showInsufficientBalance)}
               size="large"
             >
@@ -372,10 +372,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
               )}
             </Button>
           ) : (
-            <SecondaryConnectButton
-              className="flex w-full items-center justify-center"
-              isLarge
-            />
+            <SecondaryConnectButton className="w-full" isLarge />
           )}
           {tokenPositionsFull ? (
             <InlineNotification

components/shared/Button.tsx

@@ -29,21 +29,23 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`rounded-xl ${
+      className={`flex items-center justify-center rounded-xl ${
         secondary
           ? 'border border-th-button focus-visible:border-th-fgd-4 md:hover:border-th-button-hover'
-          : 'raised-button text-shadow text-xl text-th-bkg-1 focus-visible:border focus-visible:border-th-fgd-4'
+          : 'raised-button text-shadow group text-xl text-th-bkg-1 after:rounded-xl'
       } ${
         size === 'medium'
           ? 'h-10 px-4'
           : size === 'large'
           ? 'h-14 px-8'
           : 'h-8 px-3'
-      } font-extrabold disabled:cursor-not-allowed disabled:opacity-80 ${className}`}
+      } font-extrabold focus:outline-none disabled:cursor-not-allowed disabled:opacity-80 ${className}`}
       type={type}
       {...props}
     >
-      <span className="mt-1">{children}</span>
+      <span className="mt-1 group-hover:mt-2 group-active:mt-3">
+        {children}
+      </span>
     </button>
   )
 }
@@ -74,12 +76,16 @@ export const IconButton = forwardRef<
           ? 'h-10 w-10'
           : ''
       } items-center justify-center rounded-full ${
-        hideBg ? 'md:hover:text-th-active' : 'raised-button-neutral'
+        hideBg
+          ? 'md:hover:text-th-active'
+          : 'raised-button-neutral group after:rounded-full'
       } text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 
       disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className} focus-visible:text-th-active`}
       ref={ref}
     >
-      {children}
+      <span className={hideBg ? '' : 'group-hover:mt-1 group-active:mt-2'}>
+        {children}
+      </span>
     </button>
   )
 })

components/wallet/ConnectWalletButton.tsx

@@ -32,56 +32,52 @@ export default function ConnectWalletButton() {
 
   return (
     <div className="relative">
-      <div className="raised-button-neutral flex h-12 w-44 items-center rounded-full bg-th-bkg-3">
-        <button
-          onClick={() => {
-            if (wallet) {
-              connect()
-            } else {
-              select(lastWalletName)
-            }
-          }}
-          className="relative flex h-12 rounded-full"
-        >
-          <div className="relative z-10 flex h-full items-center justify-center space-x-2 px-4">
-            {connected && mangoAccountLoading ? (
-              <div></div>
-            ) : (
-              <div
-                className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
-                  wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
-                }`}
-              >
-                <img
-                  src={walletIcon}
-                  className={`
+      <button
+        onClick={() => {
+          if (wallet) {
+            connect()
+          } else {
+            select(lastWalletName)
+          }
+        }}
+        className="raised-button-neutral group flex h-12 w-44 items-center after:rounded-full"
+      >
+        <div className="relative z-10 flex h-full items-center justify-center space-x-2 px-4 group-hover:mt-1 group-active:mt-2">
+          {connected && mangoAccountLoading ? (
+            <div></div>
+          ) : (
+            <div
+              className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
+                wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
+              }`}
+            >
+              <img
+                src={walletIcon}
+                className={`
                       ${
                         wallet?.adapter.name === 'Solflare'
                           ? 'h-auto w-[20px]'
                           : 'h-auto w-[28px]'
                       }`}
-                  alt={`${wallet?.adapter.name} icon`}
-                />
-              </div>
-            )}
-            <div className="text-left">
-              <div className="text-sm font-bold text-th-fgd-1">
-                {t('connect')}
-              </div>
+                alt={`${wallet?.adapter.name} icon`}
+              />
+            </div>
+          )}
+          <div className="text-left">
+            <div className="text-sm font-bold text-th-fgd-1">
+              {t('connect')}
+            </div>
 
-              <div className="text-xs font-normal leading-none text-th-fgd-3">
-                {lastWalletName}
-              </div>
+            <div className="text-xs font-normal leading-none text-th-fgd-3">
+              {lastWalletName}
             </div>
           </div>
-        </button>
-      </div>
+        </div>
+      </button>
       <Popover>
         {({ open }) => (
           <>
-            <Popover.Button
-              className={`absolute right-1.5 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-th-bkg-2 text-th-fgd-3 focus:outline-none focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-3`}
-            >
+            <Popover.Button className="absolute right-1.5 top-1/2 z-20 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-th-bkg-2 text-th-fgd-3 focus:outline-none focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-3">
               <ChevronDownIcon
                 className={`h-6 w-6 flex-shrink-0 ${
                   open ? 'rotate-180' : 'rotate-360'

components/wallet/ConnectedMenu.tsx

@@ -49,14 +49,11 @@ const ConnectedMenu = () => {
       <Popover>
         <div className="relative">
           <Popover.Button
-            className={`raised-button-neutral h-12 rounded-full ${
+            className={`raised-button-neutral group flex h-12 items-center justify-center after:rounded-full md:justify-start ${
               isDesktop ? 'w-44' : 'w-12'
             } focus:outline-none`}
           >
-            <div
-              className="flex items-center justify-center md:ml-1.5 md:justify-start"
-              id="account-step-one"
-            >
+            <div className="flex items-center group-hover:mt-1 group-active:mt-2 md:ml-1.5">
               {!mangoAccountLoading ? (
                 <ProfileImage
                   imageSize={!isDesktop ? '32' : '40'}

styles/globals.css

@@ -340,53 +340,49 @@ table p {
 /* raised buttons */
 
 .raised-button {
-  @apply relative bg-th-button transition-none;
-  box-shadow: 0 4px var(--button-hover);
+  @apply relative z-10 transition-none;
 }
 
-.raised-button:hover {
+.raised-button:after {
+  @apply absolute left-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: 4px;
 }
 
 .raised-button-neutral {
-  @apply relative bg-th-bkg-1 transition-none;
-  box-shadow: 0 4px var(--bkg-3);
+  @apply relative z-10 transition-none;
 }
 
-.raised-button-neutral:hover {
+.raised-button-neutral:after {
+  @apply absolute left-0 top-0 h-full w-full bg-th-bkg-1;
+  content: '';
+  box-shadow: 0 4px var(--bkg-3);
+  z-index: -1;
+}
+
+.raised-button-neutral:hover:after {
   background-color: var(--bkg-1);
   box-shadow: 0 2px var(--bkg-3);
   top: 2px;
 }
 
-.raised-button-neutral:active {
+.raised-button-neutral:active:after {
   box-shadow: 0 0 var(--bkg-3);
   top: 4px;
 }
 
-.raised-button-primary {
-  @apply relative bg-th-primary-1 transition-none;
-  box-shadow: 0 4px var(--primary-3);
-}
-
-.raised-button-primary:hover {
-  background-color: var(--primary-1);
-  box-shadow: 0 2px var(--primary-3);
-  top: 2px;
-}
-
-.raised-button-primary:active {
-  box-shadow: 0 0 var(--primary-3);
-  top: 4px;
-}
-
 /* shadows */
 
 .inner-shadow-top {