From 7cd26e9da5e297fb3fe4857bb8b97ae29859051a Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 24 Mar 2023 23:22:29 +1100
Subject: [PATCH 1/3] add focus states and improve keyboard navigation

---
 components/BorrowForm.tsx                   |  31 +--
 components/DepositForm.tsx                  |  31 +--
 components/RepayForm.tsx                    |  29 +--
 components/SideNav.tsx                      | 218 +++++++++-----------
 components/WithdrawForm.tsx                 |  31 +--
 components/forms/ButtonGroup.tsx            |   1 +
 components/forms/DateRangePicker.tsx        |   4 +-
 components/forms/Input.tsx                  |   2 +-
 components/forms/Select.tsx                 |  28 ++-
 components/forms/Switch.tsx                 |   5 +-
 components/modals/TradeVolumeAlertModal.tsx |   2 +-
 components/modals/UserSetupModal.tsx        |   2 +-
 components/settings/DisplaySettings.tsx     |   8 +-
 components/shared/Button.tsx                |  31 ++-
 components/shared/FavoriteMarketButton.tsx  |   4 +-
 components/shared/IconDropMenu.tsx          |   2 +-
 components/shared/MaxAmountButton.tsx       |   2 +-
 components/shared/TabUnderline.tsx          |   2 +-
 components/shared/TokenListButton.tsx       |  34 +++
 components/swap/SwapForm.tsx                |  20 +-
 components/swap/SwapFormTokenList.tsx       |  10 +-
 components/swap/SwapReviewRouteInfo.tsx     |   9 +
 components/swap/SwapSettings.tsx            |  16 +-
 components/swap/TokenSelect.tsx             |   7 +-
 components/trade/AdvancedTradeForm.tsx      |  60 +++---
 components/trade/FavoriteMarketsBar.tsx     |  25 +--
 components/trade/MarketSelectDropdown.tsx   |  34 +--
 components/wallet/ConnectWalletButton.tsx   |  56 +++--
 components/wallet/ConnectedMenu.tsx         | 162 +++++++--------
 components/wallet/WalletSelect.tsx          |   2 +-
 styles/globals.css                          |   2 +-
 31 files changed, 406 insertions(+), 464 deletions(-)
 create mode 100644 components/shared/TokenListButton.tsx

diff --git a/components/BorrowForm.tsx b/components/BorrowForm.tsx
index fbd89872..c1785f0f 100644
--- a/components/BorrowForm.tsx
+++ b/components/BorrowForm.tsx
@@ -3,13 +3,11 @@ import {
   ArrowLeftIcon,
   ArrowUpLeftIcon,
   ArrowUpTrayIcon,
-  ChevronDownIcon,
   ExclamationCircleIcon,
   LinkIcon,
 } from '@heroicons/react/20/solid'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/legacy/image'
 import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, {
   NumberFormatValues,
@@ -44,6 +42,7 @@ import { floorToDecimal } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
+import TokenListButton from './shared/TokenListButton'
 
 interface BorrowFormProps {
   onSuccess: () => void
@@ -234,26 +233,12 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                   />
                 ) : null}
               </div>
-              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-                <button
-                  onClick={() => setShowTokenList(true)}
-                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-                >
-                  <div className="mr-2.5 flex min-w-[24px] items-center">
-                    <Image
-                      alt=""
-                      width="24"
-                      height="24"
-                      src={
-                        logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
-                      }
-                    />
-                  </div>
-                  <div className="flex w-full items-center justify-between">
-                    <div className="text-xl font-bold">{selectedToken}</div>
-                    <ChevronDownIcon className="h-6 w-6" />
-                  </div>
-                </button>
+              <div className="col-span-1">
+                <TokenListButton
+                  token={selectedToken}
+                  logoUri={logoUri}
+                  setShowList={setShowTokenList}
+                />
               </div>
               <div className="col-span-1">
                 <NumberFormat
@@ -264,7 +249,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={handleInputChange}
diff --git a/components/DepositForm.tsx b/components/DepositForm.tsx
index ab53ecb0..0cba21b9 100644
--- a/components/DepositForm.tsx
+++ b/components/DepositForm.tsx
@@ -1,13 +1,11 @@
 import {
   ArrowDownTrayIcon,
   ArrowLeftIcon,
-  ChevronDownIcon,
   ExclamationCircleIcon,
   LinkIcon,
 } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/legacy/image'
 import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
@@ -37,6 +35,7 @@ import { floorToDecimal } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
+import TokenListButton from './shared/TokenListButton'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -222,26 +221,12 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                   value={tokenMax.maxAmount}
                 />
               </div>
-              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-                <button
-                  onClick={() => setShowTokenList(true)}
-                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-                >
-                  <div className="mr-2.5 flex min-w-[24px] items-center">
-                    <Image
-                      alt=""
-                      width="24"
-                      height="24"
-                      src={
-                        logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
-                      }
-                    />
-                  </div>
-                  <div className="flex w-full items-center justify-between">
-                    <div className="text-xl font-bold">{selectedToken}</div>
-                    <ChevronDownIcon className="h-6 w-6" />
-                  </div>
-                </button>
+              <div className="col-span-1">
+                <TokenListButton
+                  token={selectedToken}
+                  logoUri={logoUri}
+                  setShowList={setShowTokenList}
+                />
               </div>
               <div className="col-span-1">
                 <NumberFormat
@@ -252,7 +237,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) => {
diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index 0065b06f..d9131d70 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -1,14 +1,11 @@
 import {
   ArrowDownRightIcon,
   ArrowLeftIcon,
-  ChevronDownIcon,
   ExclamationCircleIcon,
-  QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/legacy/image'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
@@ -35,6 +32,7 @@ import ConnectEmptyState from './shared/ConnectEmptyState'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
+import TokenListButton from './shared/TokenListButton'
 
 interface RepayFormProps {
   onSuccess: () => void
@@ -233,23 +231,12 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                   />
                 ) : null}
               </div>
-              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-                <button
-                  onClick={() => setShowTokenList(true)}
-                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-                >
-                  <div className="mr-2.5 flex min-w-[24px] items-center">
-                    {logoUri ? (
-                      <Image alt="" width="24" height="24" src={logoUri} />
-                    ) : (
-                      <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
-                    )}
-                  </div>
-                  <div className="flex w-full items-center justify-between">
-                    <div className="text-xl font-bold">{selectedToken}</div>
-                    <ChevronDownIcon className="h-6 w-6" />
-                  </div>
-                </button>
+              <div className="col-span-1">
+                <TokenListButton
+                  token={selectedToken}
+                  logoUri={logoUri}
+                  setShowList={setShowTokenList}
+                />
               </div>
               <div className="col-span-1">
                 <NumberFormat
@@ -260,7 +247,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) => {
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index b22e8671..2fc13a3b 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -10,14 +10,13 @@ import {
   Cog8ToothIcon,
   ArrowsRightLeftIcon,
   ArrowTrendingUpIcon,
-  XMarkIcon,
   MagnifyingGlassIcon,
   BanknotesIcon,
   NewspaperIcon,
 } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import { Fragment, ReactNode, useState } from 'react'
+import { Fragment, ReactNode } from 'react'
 import { Disclosure, Popover, Transition } from '@headlessui/react'
 import MangoAccountSummary from './account/MangoAccountSummary'
 import Tooltip from './shared/Tooltip'
@@ -27,7 +26,6 @@ import mangoStore from '@store/mangoStore'
 import HealthHeart from './account/HealthHeart'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useTheme } from 'next-themes'
-import { IconButton } from './shared/Button'
 
 const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation(['common', 'search'])
@@ -182,7 +180,6 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                 size={32}
               />
             }
-            isOpen
             panelTitle={mangoAccount?.name ? mangoAccount.name : t('account')}
             title={
               <div className="w-24 text-left">
@@ -200,7 +197,6 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
             }
             alignBottom
             hideIconBg
-            showClose
           >
             <div className="px-4 py-2">
               <MangoAccountSummary />
@@ -293,8 +289,6 @@ export const ExpandableMenuItem = ({
   hideIconBg,
   icon,
   panelTitle,
-  isOpen,
-  showClose,
   title,
 }: {
   alignBottom?: boolean
@@ -303,134 +297,114 @@ export const ExpandableMenuItem = ({
   hideIconBg?: boolean
   icon: ReactNode
   panelTitle?: string
-  isOpen?: boolean
-  showClose?: boolean
   title: string | ReactNode
 }) => {
-  const [showMenu, setShowMenu] = useState(isOpen || false)
   const { theme } = useTheme()
 
-  const toggleMenu = () => {
-    setShowMenu(!showMenu)
-  }
-
   return collapsed ? (
-    <Popover>
-      <div
-        className={`relative z-30 ${alignBottom ? '' : 'py-2 pl-4'}`}
-        role="button"
+    <Popover className={`relative z-30 ${alignBottom ? '' : 'py-2 pl-4'}`}>
+      <Popover.Button
+        className={`${theme === 'Light' ? 'text-th-fgd-3' : 'text-th-fgd-2'} ${
+          alignBottom ? '' : 'focus:text-th-active focus:ring-0'
+        } md:hover:text-th-active`}
       >
-        <Popover.Button
-          className={`${
-            theme === 'Light' ? 'text-th-fgd-3' : 'text-th-fgd-2'
-          } md:hover:text-th-active`}
-          onClick={() => toggleMenu()}
+        <div
+          className={` ${
+            hideIconBg
+              ? ''
+              : `flex h-8 w-8 items-center justify-center rounded-full ${
+                  theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
+                }`
+          } ${
+            alignBottom
+              ? 'default-transition flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'
+              : ''
+          }`}
         >
-          <div
-            className={` ${
-              hideIconBg
-                ? ''
-                : `flex h-8 w-8 items-center justify-center rounded-full ${
-                    theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
-                  }`
-            } ${
-              alignBottom
-                ? 'default-transition flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'
-                : ''
-            }`}
-          >
-            {icon}
+          {icon}
+        </div>
+      </Popover.Button>
+      <Popover.Panel
+        className={`absolute left-[64px] z-20 w-56 rounded-md rounded-l-none bg-th-bkg-1 focus:outline-none ${
+          alignBottom
+            ? 'bottom-0 rounded-b-none border-b-0 p-0'
+            : 'top-1/2 -translate-y-1/2'
+        }`}
+      >
+        <div
+          className={`rounded-md rounded-l-none bg-th-bkg-2 ${
+            alignBottom ? 'pt-4 pb-2' : 'py-2'
+          }`}
+        >
+          <div className="flex items-center justify-between pl-4 pr-2">
+            {panelTitle ? (
+              <h3 className="text-sm font-bold">{panelTitle}</h3>
+            ) : null}
           </div>
-        </Popover.Button>
-
-        {showMenu ? (
-          <Popover.Panel
-            static
-            className={`absolute z-20 w-56 rounded-md rounded-l-none bg-th-bkg-1  ${
-              alignBottom
-                ? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
-                : 'top-1/2 left-[63px] -translate-y-1/2'
-            }`}
-          >
-            <div className="rounded-md rounded-l-none bg-th-bkg-2 py-2">
-              <div className="flex items-center justify-between pl-4 pr-2">
-                {panelTitle ? (
-                  <h3 className="text-sm font-bold">{panelTitle}</h3>
-                ) : null}
-                {showClose ? (
-                  <IconButton
-                    onClick={() => setShowMenu(false)}
-                    hideBg
-                    size="small"
-                  >
-                    <XMarkIcon className="h-5 w-5" />
-                  </IconButton>
-                ) : null}
-              </div>
-              {children}
-            </div>
-          </Popover.Panel>
-        ) : null}
-      </div>
+          {children}
+        </div>
+      </Popover.Panel>
     </Popover>
   ) : (
     <Disclosure>
-      <div
-        onClick={() => setShowMenu(!showMenu)}
-        role="button"
-        className={`w-full px-4 py-2 ${
-          alignBottom ? 'h-[64px] hover:bg-th-bkg-2' : ''
-        }`}
-      >
-        <Disclosure.Button
-          className={`flex h-full w-full items-center justify-between rounded-none md:hover:text-th-active`}
-        >
-          <div className="flex items-center">
-            <div
-              className={
-                hideIconBg
-                  ? ''
-                  : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
-              }
+      {({ open }) => (
+        <>
+          <div
+            className={`w-full px-4 py-2 ${
+              alignBottom ? 'h-[64px] hover:bg-th-bkg-2' : ''
+            }`}
+          >
+            <Disclosure.Button
+              className={`flex h-full w-full items-center justify-between rounded-none focus:text-th-active focus:ring-0 md:hover:text-th-active`}
             >
-              {icon}
-            </div>
-            <Transition
-              appear={true}
-              show={!collapsed}
-              as={Fragment}
-              enter="transition ease-in duration-300"
-              enterFrom="opacity-50"
-              enterTo="opacity-100"
-              leave="transition ease-out duration-300"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <span className="ml-3 truncate xl:text-base">{title}</span>
-            </Transition>
+              <div className="flex items-center">
+                <div
+                  className={
+                    hideIconBg
+                      ? ''
+                      : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
+                  }
+                >
+                  {icon}
+                </div>
+                <Transition
+                  appear={true}
+                  show={!collapsed}
+                  as={Fragment}
+                  enter="transition ease-in duration-300"
+                  enterFrom="opacity-50"
+                  enterTo="opacity-100"
+                  leave="transition ease-out duration-300"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                >
+                  <span className="ml-3 truncate xl:text-base">{title}</span>
+                </Transition>
+              </div>
+              <ChevronDownIcon
+                className={`${
+                  open ? 'rotate-180' : 'rotate-360'
+                } h-5 w-5 flex-shrink-0`}
+              />
+            </Disclosure.Button>
           </div>
-          <ChevronDownIcon
-            className={`${
-              showMenu ? 'rotate-180' : 'rotate-360'
-            } h-5 w-5 flex-shrink-0`}
-          />
-        </Disclosure.Button>
-      </div>
-      <Transition
-        appear={true}
-        show={showMenu}
-        as={Fragment}
-        enter="transition-all ease-in duration-300"
-        enterFrom="opacity-100 max-h-0"
-        enterTo="opacity-100 max-h-80"
-        leave="transition-all ease-out duration-300"
-        leaveFrom="opacity-100 max-h-80"
-        leaveTo="opacity-0 max-h-0"
-      >
-        <Disclosure.Panel className="w-full overflow-hidden">
-          <div className={`${!alignBottom ? 'ml-1.5' : ''}`}>{children}</div>
-        </Disclosure.Panel>
-      </Transition>
+          <Transition
+            as={Fragment}
+            enter="transition-all ease-in duration-300"
+            enterFrom="opacity-100 max-h-0"
+            enterTo="opacity-100 max-h-80"
+            leave="transition-all ease-out duration-300"
+            leaveFrom="opacity-100 max-h-80"
+            leaveTo="opacity-0 max-h-0"
+          >
+            <Disclosure.Panel className="w-full overflow-hidden">
+              <div className={`${!alignBottom ? 'ml-1.5' : ''}`}>
+                {children}
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </>
+      )}
     </Disclosure>
   )
 }
diff --git a/components/WithdrawForm.tsx b/components/WithdrawForm.tsx
index 857dbb81..3ae9249f 100644
--- a/components/WithdrawForm.tsx
+++ b/components/WithdrawForm.tsx
@@ -2,13 +2,11 @@ import { HealthType } from '@blockworks-foundation/mango-v4'
 import {
   ArrowLeftIcon,
   ArrowUpTrayIcon,
-  ChevronDownIcon,
   ExclamationCircleIcon,
   LinkIcon,
 } from '@heroicons/react/20/solid'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/legacy/image'
 import { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 
@@ -39,6 +37,7 @@ import { floorToDecimal } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
+import TokenListButton from './shared/TokenListButton'
 
 interface WithdrawFormProps {
   onSuccess: () => void
@@ -211,26 +210,12 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
                   />
                 ) : null}
               </div>
-              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-                <button
-                  onClick={() => setShowTokenList(true)}
-                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-                >
-                  <div className="mr-2.5 flex min-w-[24px] items-center">
-                    <Image
-                      alt=""
-                      width="24"
-                      height="24"
-                      src={
-                        logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
-                      }
-                    />
-                  </div>
-                  <div className="flex w-full items-center justify-between">
-                    <div className="text-xl font-bold">{selectedToken}</div>
-                    <ChevronDownIcon className="h-6 w-6" />
-                  </div>
-                </button>
+              <div className="col-span-1">
+                <TokenListButton
+                  token={selectedToken}
+                  logoUri={logoUri}
+                  setShowList={setShowTokenList}
+                />
               </div>
               <div className="col-span-1">
                 <NumberFormat
@@ -241,7 +226,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) =>
diff --git a/components/forms/ButtonGroup.tsx b/components/forms/ButtonGroup.tsx
index d7b38e12..2802760e 100644
--- a/components/forms/ButtonGroup.tsx
+++ b/components/forms/ButtonGroup.tsx
@@ -52,6 +52,7 @@ const ButtonGroup = <T extends Values>({
             style={{
               width: `${100 / values.length}%`,
             }}
+            type="button"
           >
             {names ? (unit ? names[i] + unit : names[i]) : unit ? v + unit : v}
           </button>
diff --git a/components/forms/DateRangePicker.tsx b/components/forms/DateRangePicker.tsx
index 0eb1b6a1..b08ae05a 100644
--- a/components/forms/DateRangePicker.tsx
+++ b/components/forms/DateRangePicker.tsx
@@ -34,7 +34,7 @@ const MangoDateRangePicker = ({
           <div className="w-full">
             <Label text={t('date-from')} />
             <input
-              className="default-transition h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+              className="default-transition h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
               {...startDateInputProps}
               placeholder="Start Date"
             />
@@ -45,7 +45,7 @@ const MangoDateRangePicker = ({
           <div className="w-full">
             <Label text={t('date-to')} />
             <input
-              className="default-transition h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+              className="default-transition h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
               {...endDateInputProps}
               placeholder="End Date"
             />
diff --git a/components/forms/Input.tsx b/components/forms/Input.tsx
index 426ea598..85855401 100644
--- a/components/forms/Input.tsx
+++ b/components/forms/Input.tsx
@@ -44,7 +44,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
           className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-input-bkg px-3 text-base
           text-th-fgd-1 ${
             error ? 'border-th-down' : 'border-th-input-border'
-          } focus:outline-none 
+          } focus:border-th-fgd-4 focus:outline-none
           md:hover:border-th-input-border-hover 
           ${
             disabled
diff --git a/components/forms/Select.tsx b/components/forms/Select.tsx
index 41922fda..9a6c9235 100644
--- a/components/forms/Select.tsx
+++ b/components/forms/Select.tsx
@@ -27,7 +27,7 @@ const Select = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`default-transition h-full w-full rounded-md bg-th-input-bkg py-2.5 font-normal ring-1 ring-inset ring-th-input-border focus:border-th-input-border-hover focus:outline-none md:hover:ring-th-input-border-hover`}
+              className={`default-transition h-full w-full rounded-md bg-th-input-bkg py-2.5 font-normal ring-1 ring-inset ring-th-input-border focus:border-th-fgd-4 focus:outline-none md:hover:ring-th-input-border-hover`}
             >
               <div
                 className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}
@@ -38,20 +38,17 @@ const Select = ({
                   <span className="text-th-fgd-3">{placeholder}</span>
                 )}
                 <ChevronDownIcon
-                  className={`default-transition h-5 w-5 flex-shrink-0 text-th-fgd-1 ${
+                  className={`default-transition h-5 w-5 flex-shrink-0 text-th-fgd-3 ${
                     open ? 'rotate-180' : 'rotate-360'
                   }`}
                 />
               </div>
             </Listbox.Button>
-            {open ? (
-              <Listbox.Options
-                static
-                className={`thin-scroll absolute left-0 z-20 mt-1 max-h-60 w-full origin-top-left space-y-2 overflow-auto rounded-md bg-th-bkg-2 p-4 text-th-fgd-1 outline-none ${dropdownPanelClassName}`}
-              >
-                {children}
-              </Listbox.Options>
-            ) : null}
+            <Listbox.Options
+              className={`thin-scroll absolute left-0 z-20 mt-1 max-h-60 w-full origin-top-left space-y-2 overflow-auto rounded-md bg-th-bkg-2 p-4 outline-none ${dropdownPanelClassName}`}
+            >
+              {children}
+            </Listbox.Options>
           </>
         )}
       </Listbox>
@@ -67,13 +64,12 @@ interface OptionProps {
 
 const Option = ({ value, children, className }: OptionProps) => {
   return (
-    <Listbox.Option className="mb-0" value={value}>
+    <Listbox.Option
+      className="default-transition mb-0 text-th-fgd-2 hover:cursor-pointer focus:text-th-active md:hover:text-th-fgd-1"
+      value={value}
+    >
       {({ selected }) => (
-        <div
-          className={`default-transition rounded text-th-fgd-2 hover:cursor-pointer md:hover:text-th-fgd-1 ${
-            selected ? 'text-th-active' : ''
-          } ${className}`}
-        >
+        <div className={` ${selected ? 'text-th-active' : ''} ${className}`}>
           {children}
         </div>
       )}
diff --git a/components/forms/Switch.tsx b/components/forms/Switch.tsx
index e10b624b..ce17d4ee 100644
--- a/components/forms/Switch.tsx
+++ b/components/forms/Switch.tsx
@@ -27,8 +27,9 @@ const Switch: FunctionComponent<SwitchProps> = ({
         className={`${
           checked ? 'bg-th-success' : 'bg-th-bkg-4'
         } relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full 
-        border-2 border-transparent transition-colors duration-200 ease-in-out 
-        focus:outline-none ${disabled ? 'opacity-60' : ''}`}
+        border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-1 focus:outline-offset-2 focus:outline-th-fgd-4 focus:ring-0 ${
+          disabled ? 'opacity-60' : ''
+        }`}
         role="switch"
         aria-checked={checked}
         onClick={handleClick}
diff --git a/components/modals/TradeVolumeAlertModal.tsx b/components/modals/TradeVolumeAlertModal.tsx
index dfca8bc4..45143e3f 100644
--- a/components/modals/TradeVolumeAlertModal.tsx
+++ b/components/modals/TradeVolumeAlertModal.tsx
@@ -20,7 +20,7 @@ const volumeAlertSound = new Howl({
 export const DEFAULT_VOLUME_ALERT_SETTINGS = { seconds: 30, value: 10000 }
 
 const INPUT_CLASSES =
-  'h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 font-mono text-base text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover'
+  'h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 font-mono text-base text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover'
 
 const TradeVolumeAlertModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation(['common', 'trade'])
diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx
index 5b5be9d9..280042db 100644
--- a/components/modals/UserSetupModal.tsx
+++ b/components/modals/UserSetupModal.tsx
@@ -418,7 +418,7 @@ const UserSetupModal = ({
                       allowNegative={false}
                       isNumericString={true}
                       decimalScale={tokenMax.decimals || 6}
-                      className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                      className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
                       placeholder="0.00"
                       value={depositAmount}
                       onValueChange={(e: NumberFormatValues) => {
diff --git a/components/settings/DisplaySettings.tsx b/components/settings/DisplaySettings.tsx
index a4151afd..05e47158 100644
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@@ -88,9 +88,7 @@ const DisplaySettings = () => {
           >
             {THEMES.map((theme) => (
               <Select.Option key={theme} value={t(`settings:${theme}`)}>
-                <div className="flex w-full items-center justify-between">
-                  {t(`settings:${theme}`)}
-                </div>
+                {t(`settings:${theme}`)}
               </Select.Option>
             ))}
           </Select>
@@ -117,9 +115,7 @@ const DisplaySettings = () => {
           >
             {NOTIFICATION_POSITIONS.map((val) => (
               <Select.Option key={val} value={t(`settings:${val}`)}>
-                <div className="flex w-full items-center justify-between">
-                  {t(`settings:${val}`)}
-                </div>
+                {t(`settings:${val}`)}
               </Select.Option>
             ))}
           </Select>
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
index cf709aa3..8722e584 100644
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from 'next-themes'
-import { FunctionComponent, ReactNode } from 'react'
+import { forwardRef, FunctionComponent, ReactNode, Ref } from 'react'
 
 interface AllButtonProps {
   onClick?: (e?: React.MouseEvent) => void
@@ -33,7 +33,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
       disabled={disabled}
       className={`rounded-md ${
         secondary
-          ? 'border border-th-button md:hover:border-th-button-hover'
+          ? 'border border-th-button focus:border-th-fgd-2 focus:ring-0 md:hover:border-th-button-hover'
           : 'bg-th-button md:hover:bg-th-button-hover'
       } ${
         size === 'medium'
@@ -57,19 +57,16 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
 interface IconButtonProps {
   hideBg?: boolean
   size?: 'small' | 'medium' | 'large'
+  ref?: Ref<HTMLButtonElement>
 }
 
 type IconButtonCombinedProps = AllButtonProps & IconButtonProps
 
-export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
-  children,
-  onClick,
-  disabled = false,
-  className,
-  hideBg,
-  size,
-  ...props
-}) => {
+export const IconButton = forwardRef<
+  HTMLButtonElement,
+  IconButtonCombinedProps
+>((props, ref) => {
+  const { children, onClick, disabled = false, className, hideBg, size } = props
   return (
     <button
       onClick={onClick}
@@ -85,15 +82,17 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
       } default-transition items-center justify-center rounded-full ${
         hideBg
           ? 'md:hover:text-th-active'
-          : 'border border-th-button md:hover:border-th-button-hover'
+          : 'border border-th-button focus:border-th-fgd-3 md:hover:border-th-button-hover'
       } 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}`}
-      {...props}
+      disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className} focus:text-th-active focus:ring-0`}
+      ref={ref}
     >
       {children}
     </button>
   )
-}
+})
+
+IconButton.displayName = 'IconButton'
 
 interface LinkButtonProps {
   icon?: ReactNode
@@ -115,7 +114,7 @@ export const LinkButton: FunctionComponent<LinkButtonCombinedProps> = ({
       disabled={disabled}
       className={`default-transition flex items-center border-0 font-bold ${
         secondary ? 'text-th-active' : 'text-th-fgd-2'
-      } underline focus:outline-none disabled:cursor-not-allowed  disabled:opacity-50 md:hover:no-underline  ${className}`}
+      } rounded-sm underline focus:text-th-active focus:no-underline focus:ring-0 disabled:cursor-not-allowed  disabled:opacity-50 md:hover:no-underline  ${className}`}
       {...props}
       type="button"
     >
diff --git a/components/shared/FavoriteMarketButton.tsx b/components/shared/FavoriteMarketButton.tsx
index e7a35646..8f7e3060 100644
--- a/components/shared/FavoriteMarketButton.tsx
+++ b/components/shared/FavoriteMarketButton.tsx
@@ -27,14 +27,14 @@ const FavoriteMarketButton = ({
     (marketName: string) => marketName === market.name
   ) ? (
     <button
-      className="default-transition flex items-center justify-center text-th-active md:hover:text-th-fgd-3"
+      className="default-transition flex items-center justify-center text-th-active focus:text-th-fgd-4 focus:ring-0 md:hover:text-th-fgd-3"
       onClick={() => removeFromFavorites(market.name)}
     >
       <FilledStarIcon className="h-5 w-5" />
     </button>
   ) : (
     <button
-      className="default-transition flex items-center justify-center text-th-fgd-4 md:hover:text-th-active"
+      className="default-transition flex items-center justify-center text-th-fgd-4 focus:text-th-active focus:ring-0 md:hover:text-th-active"
       onClick={() => addToFavorites(market.name)}
     >
       <StarIcon className="h-5 w-5" />
diff --git a/components/shared/IconDropMenu.tsx b/components/shared/IconDropMenu.tsx
index ee0a6c20..ea854f1f 100644
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@@ -46,7 +46,7 @@ const IconDropMenu = ({
                 : size === 'medium'
                 ? 'h-10 w-10'
                 : 'h-8 w-8'
-            } default-transition items-center justify-center rounded-full border border-th-button text-th-fgd-1 md:hover:border-th-button-hover md:hover:text-th-fgd-1 ${
+            } default-transition items-center justify-center rounded-full border border-th-button text-th-fgd-1 focus:border-th-fgd-2 focus:ring-0 md:hover:border-th-button-hover md:hover:text-th-fgd-1 ${
               disabled ? 'cursor-not-allowed opacity-60' : ''
             }`}
             disabled={disabled}
diff --git a/components/shared/MaxAmountButton.tsx b/components/shared/MaxAmountButton.tsx
index 161ca8a2..8e5432fa 100644
--- a/components/shared/MaxAmountButton.tsx
+++ b/components/shared/MaxAmountButton.tsx
@@ -24,7 +24,7 @@ const MaxAmountButton = ({
       onClick={onClick}
     >
       <p className="mr-1 text-th-fgd-4">{label}:</p>
-      <span className="font-mono text-th-fgd-2 underline">
+      <span className="font-mono">
         <FormatNumericValue value={value} decimals={decimals} />
       </span>
     </LinkButton>
diff --git a/components/shared/TabUnderline.tsx b/components/shared/TabUnderline.tsx
index b1a12d15..6900f27f 100644
--- a/components/shared/TabUnderline.tsx
+++ b/components/shared/TabUnderline.tsx
@@ -48,7 +48,7 @@ const TabUnderline = <T extends Values>({
           <button
             onClick={() => onChange(value)}
             className={`default-transition relative flex h-10 w-1/2 
-            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 md:h-auto md:rounded-none md:hover:opacity-100 ${
+            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 focus:text-th-fgd-1 focus:ring-0 md:h-auto md:rounded-none md:hover:opacity-100 ${
               small ? 'text-sm' : 'text-sm lg:text-base'
             }
             ${
diff --git a/components/shared/TokenListButton.tsx b/components/shared/TokenListButton.tsx
new file mode 100644
index 00000000..6abe79da
--- /dev/null
+++ b/components/shared/TokenListButton.tsx
@@ -0,0 +1,34 @@
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import Image from 'next/image'
+
+const TokenListButton = ({
+  logoUri,
+  token,
+  setShowList,
+}: {
+  logoUri: string | undefined
+  token: string
+  setShowList: (x: boolean) => void
+}) => {
+  return (
+    <button
+      onClick={() => setShowList(true)}
+      className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none border border-th-input-border bg-th-input-bkg py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1 focus:border-th-fgd-4 focus:ring-0"
+    >
+      <div className="mr-2.5 flex min-w-[24px] items-center">
+        <Image
+          alt=""
+          width="24"
+          height="24"
+          src={logoUri || `/icons/${token.toLowerCase()}.svg`}
+        />
+      </div>
+      <div className="flex w-full items-center justify-between">
+        <div className="text-xl font-bold">{token}</div>
+        <ChevronDownIcon className="h-6 w-6" />
+      </div>
+    </button>
+  )
+}
+
+export default TokenListButton
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 4e6fcf52..8d4c59da 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -24,7 +24,6 @@ import Button, { IconButton } from '../shared/Button'
 import Loading from '../shared/Loading'
 import { EnterBottomExitBottom } from '../shared/Transitions'
 import useQuoteRoutes from './useQuoteRoutes'
-import SheenLoader from '../shared/SheenLoader'
 import { HealthType } from '@blockworks-foundation/mango-v4'
 import {
   INPUT_TOKEN_DEFAULT,
@@ -57,6 +56,9 @@ export const withValueLimit = (values: NumberFormatValues): boolean => {
     : true
 }
 
+const NUMBER_FORMAT_CLASSNAMES =
+  'w-full rounded-l-none rounded-r-lg border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none lg:text-lg xl:text-xl'
+
 const set = mangoStore.getState().set
 
 const SwapForm = () => {
@@ -338,7 +340,7 @@ const SwapForm = () => {
             ) : null}
           </div>
           <div className="mb-3 grid grid-cols-2" id="swap-step-two">
-            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
+            <div className="col-span-1">
               <TokenSelect
                 bank={
                   inputBank ||
@@ -357,7 +359,7 @@ const SwapForm = () => {
                 decimalScale={inputBank?.mintDecimals || 6}
                 name="amountIn"
                 id="amountIn"
-                className="w-full rounded-l-none rounded-r-lg border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none lg:text-lg xl:text-xl"
+                className={NUMBER_FORMAT_CLASSNAMES}
                 placeholder="0.00"
                 value={amountInFormValue}
                 onValueChange={handleAmountInChange}
@@ -382,7 +384,7 @@ const SwapForm = () => {
           </div>
           <p className="mb-2 text-th-fgd-2 lg:text-base">{t('swap:receive')}</p>
           <div id="swap-step-three" className="mb-3 grid grid-cols-2">
-            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
+            <div className="col-span-1">
               <TokenSelect
                 bank={
                   outputBank ||
@@ -392,12 +394,10 @@ const SwapForm = () => {
                 type="output"
               />
             </div>
-            <div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-input-border text-right text-lg font-bold text-th-fgd-3 xl:text-xl">
+            <div className="col-span-1 flex h-[54px]">
               {loadingSwapDetails ? (
-                <div className="w-full">
-                  <SheenLoader className="flex flex-1 rounded-l-none">
-                    <div className="h-[52px] w-full rounded-r-lg bg-th-bkg-4" />
-                  </SheenLoader>
+                <div className="flex w-full items-center justify-center rounded-l-none rounded-r-lg border border-th-input-border bg-th-bkg-2">
+                  <Loading />
                 </div>
               ) : (
                 <NumberFormat
@@ -408,7 +408,7 @@ const SwapForm = () => {
                   decimalScale={outputBank?.mintDecimals || 6}
                   name="amountOut"
                   id="amountOut"
-                  className="w-full rounded-l-none rounded-r-lg bg-th-input-bkg p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none lg:text-lg xl:text-xl"
+                  className={NUMBER_FORMAT_CLASSNAMES}
                   placeholder="0.00"
                   value={amountOutFormValue}
                   onValueChange={handleAmountOutChange}
diff --git a/components/swap/SwapFormTokenList.tsx b/components/swap/SwapFormTokenList.tsx
index 8add88d0..baa9cdea 100644
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo, useEffect } from 'react'
+import { memo, useMemo, useEffect, useRef } from 'react'
 import { Token } from '../../types/jupiter'
 import mangoStore from '@store/mangoStore'
 import { IconButton } from '../shared/Button'
@@ -133,6 +133,7 @@ const SwapFormTokenList = ({
   const outputBank = mangoStore((s) => s.swap.outputBank)
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
+  const focusRef = useRef<HTMLButtonElement>(null)
 
   // const popularTokens = useMemo(() => {
   //   return tokens.filter((token) => {
@@ -202,6 +203,12 @@ const SwapFormTokenList = ({
   // const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
   const sortedTokens = tokenInfos
 
+  useEffect(() => {
+    if (focusRef?.current) {
+      focusRef.current.focus()
+    }
+  }, [focusRef])
+
   return (
     <>
       <p className="mb-3">
@@ -215,6 +222,7 @@ const SwapFormTokenList = ({
         className="absolute top-2 right-2 text-th-fgd-3 hover:text-th-fgd-2"
         onClick={onClose}
         hideBg
+        ref={focusRef}
       >
         <XMarkIcon className="h-6 w-6" />
       </IconButton>
diff --git a/components/swap/SwapReviewRouteInfo.tsx b/components/swap/SwapReviewRouteInfo.tsx
index 7949704b..8b63133f 100644
--- a/components/swap/SwapReviewRouteInfo.tsx
+++ b/components/swap/SwapReviewRouteInfo.tsx
@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react'
 import {
@@ -199,6 +200,7 @@ const SwapReviewRouteInfo = ({
     SOUND_SETTINGS_KEY,
     INITIAL_SOUND_SETTINGS
   )
+  const focusRef = useRef<HTMLButtonElement>(null)
 
   const inputTokenIconUri = useMemo(() => {
     return inputTokenInfo ? inputTokenInfo.logoURI : ''
@@ -211,6 +213,12 @@ const SwapReviewRouteInfo = ({
     )
   }, [selectedRoute, outputTokenInfo])
 
+  useEffect(() => {
+    if (focusRef?.current) {
+      focusRef.current.focus()
+    }
+  }, [focusRef])
+
   useEffect(() => {
     setCoingeckoPrices(EMPTY_COINGECKO_PRICES)
     const fetchTokenPrices = async () => {
@@ -354,6 +362,7 @@ const SwapReviewRouteInfo = ({
           className="absolute top-4 left-4 mr-3 text-th-fgd-2"
           onClick={onClose}
           size="small"
+          ref={focusRef}
         >
           <ArrowLeftIcon className="h-5 w-5" />
         </IconButton>
diff --git a/components/swap/SwapSettings.tsx b/components/swap/SwapSettings.tsx
index 3e0d3937..b108b708 100644
--- a/components/swap/SwapSettings.tsx
+++ b/components/swap/SwapSettings.tsx
@@ -1,6 +1,6 @@
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import mangoStore from '@store/mangoStore'
 import ButtonGroup from '../forms/ButtonGroup'
 import Input from '../forms/Input'
@@ -14,6 +14,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
   const margin = mangoStore((s) => s.swap.margin)
   const slippage = mangoStore((s) => s.swap.slippage)
   const set = mangoStore((s) => s.set)
+  const focusRef = useRef<HTMLButtonElement>(null)
 
   const [showCustomSlippageForm, setShowCustomSlippageForm] = useState(false)
   const [inputValue, setInputValue] = useState(slippage.toString())
@@ -36,10 +37,21 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
     })
   }
 
+  useEffect(() => {
+    if (focusRef?.current) {
+      focusRef.current.focus()
+    }
+  }, [focusRef])
+
   return (
     <>
       <h3 className="mb-3">{t('settings')}</h3>
-      <IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
+      <IconButton
+        className="absolute top-2 right-2"
+        onClick={onClose}
+        hideBg
+        ref={focusRef}
+      >
         <XMarkIcon className="h-6 w-6" />
       </IconButton>
 
diff --git a/components/swap/TokenSelect.tsx b/components/swap/TokenSelect.tsx
index 7d2ee369..0709661a 100644
--- a/components/swap/TokenSelect.tsx
+++ b/components/swap/TokenSelect.tsx
@@ -28,10 +28,9 @@ const TokenSelect = ({ bank, showTokenList, type }: TokenSelectProps) => {
   }
 
   return (
-    <div
+    <button
       onClick={() => showTokenList(type)}
-      className="default-transition flex h-full items-center rounded-lg rounded-r-none p-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-      role="button"
+      className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none border border-th-input-border bg-th-input-bkg py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1 focus:border-th-fgd-4 focus:ring-0"
     >
       <div className="mr-2.5 flex min-w-[24px] items-center">
         {logoURI ? (
@@ -44,7 +43,7 @@ const TokenSelect = ({ bank, showTokenList, type }: TokenSelectProps) => {
         <div className="text-xl font-bold text-th-fgd-1">{bank?.name}</div>
         <ChevronDownIcon className="h-6 w-6" />
       </div>
-    </div>
+    </button>
   )
 }
 
diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index 49179243..b577ace5 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -60,6 +60,12 @@ const successSound = new Howl({
   volume: 0.5,
 })
 
+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'
+
+const INPUT_PREFIX_CLASSNAMES =
+  'absolute left-2 top-1/2 h-5 w-5 flex-shrink-0 -translate-y-1/2'
+
 const AdvancedTradeForm = () => {
   const { t } = useTranslation(['common', 'trade'])
   const { mangoAccount } = useMangoAccount()
@@ -400,9 +406,9 @@ const AdvancedTradeForm = () => {
                   {t('trade:limit-price')}
                 </p>
               </div>
-              <div className="default-transition flex items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 text-sm font-bold text-th-fgd-1 md:hover:border-th-input-border-hover lg:text-base">
+              <div className="relative">
                 {quoteLogoURI ? (
-                  <div className="h-5 w-5 flex-shrink-0">
+                  <div className={INPUT_PREFIX_CLASSNAMES}>
                     <Image alt="" width="20" height="20" src={quoteLogoURI} />
                   </div>
                 ) : (
@@ -418,14 +424,12 @@ const AdvancedTradeForm = () => {
                   decimalScale={6}
                   name="price"
                   id="price"
-                  className="ml-2 w-full bg-transparent font-mono focus:outline-none"
+                  className="default-transition flex w-full items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover lg:text-base"
                   placeholder="0.00"
                   value={tradeForm.price}
                   onValueChange={handlePriceChange}
                 />
-                <div className="text-xs font-normal text-th-fgd-4">
-                  {quoteSymbol}
-                </div>
+                <div className={INPUT_SUFFIX_CLASSNAMES}>{quoteSymbol}</div>
               </div>
             </>
           ) : null}
@@ -435,11 +439,24 @@ const AdvancedTradeForm = () => {
             useMargin={useMargin}
           />
           <div className="flex flex-col">
-            <div className="default-transition flex items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 text-sm font-bold text-th-fgd-1 md:hover:z-10 md:hover:border-th-input-border-hover lg:text-base">
-              <div className="h-5 w-5 flex-shrink-0">
+            <div className="relative">
+              <NumberFormat
+                inputMode="decimal"
+                thousandSeparator=","
+                allowNegative={false}
+                isNumericString={true}
+                decimalScale={minOrderDecimals}
+                name="base"
+                id="base"
+                className="default-transition relative flex w-full items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:z-10 focus:border-th-fgd-4 focus:outline-none md:hover:z-10 md:hover:border-th-input-border-hover lg:text-base"
+                placeholder="0.00"
+                value={tradeForm.baseSize}
+                onValueChange={handleBaseSizeChange}
+              />
+              <div className={`z-10 ${INPUT_PREFIX_CLASSNAMES}`}>
                 <LogoWithFallback
                   alt=""
-                  className="z-10 drop-shadow-md"
+                  className="drop-shadow-md"
                   width={'24'}
                   height={'24'}
                   src={baseLogoURI || `/icons/${baseSymbol?.toLowerCase()}.svg`}
@@ -450,26 +467,13 @@ const AdvancedTradeForm = () => {
                   }
                 />
               </div>
-              <NumberFormat
-                inputMode="decimal"
-                thousandSeparator=","
-                allowNegative={false}
-                isNumericString={true}
-                decimalScale={minOrderDecimals}
-                name="base"
-                id="base"
-                className="ml-2 w-full bg-transparent font-mono focus:outline-none"
-                placeholder="0.00"
-                value={tradeForm.baseSize}
-                onValueChange={handleBaseSizeChange}
-              />
-              <div className="text-xs font-normal text-th-fgd-4">
+              <div className={`z-10 ${INPUT_SUFFIX_CLASSNAMES}`}>
                 {baseSymbol}
               </div>
             </div>
-            <div className="default-transition -mt-[1px] flex items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 text-sm font-bold text-th-fgd-1 md:hover:border-th-input-border-hover lg:text-base">
+            <div className="relative">
               {quoteLogoURI ? (
-                <div className="h-5 w-5 flex-shrink-0">
+                <div className={INPUT_PREFIX_CLASSNAMES}>
                   <Image alt="" width="20" height="20" src={quoteLogoURI} />
                 </div>
               ) : (
@@ -485,14 +489,12 @@ const AdvancedTradeForm = () => {
                 decimalScale={tickDecimals}
                 name="quote"
                 id="quote"
-                className="ml-2 w-full bg-transparent font-mono focus:outline-none"
+                className="default-transition -mt-[1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover lg:text-base"
                 placeholder="0.00"
                 value={tradeForm.quoteSize}
                 onValueChange={handleQuoteSizeChange}
               />
-              <div className="text-xs font-normal text-th-fgd-4">
-                {quoteSymbol}
-              </div>
+              <div className={INPUT_SUFFIX_CLASSNAMES}>{quoteSymbol}</div>
             </div>
           </div>
         </div>
diff --git a/components/trade/FavoriteMarketsBar.tsx b/components/trade/FavoriteMarketsBar.tsx
index ff20123a..215095ec 100644
--- a/components/trade/FavoriteMarketsBar.tsx
+++ b/components/trade/FavoriteMarketsBar.tsx
@@ -34,17 +34,19 @@ const FavoriteMarketsBar = () => {
           market = group?.getSerum3MarketByName(mkt)
         }
         return (
-          <Link href={`/trade?name=${mkt}`} key={mkt} shallow={true}>
-            <div
-              className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-active hover:opacity-100 ${
-                selectedMarket && selectedMarket.name === mkt
-                  ? 'text-th-active'
-                  : 'text-th-fgd-1 opacity-60'
-              }`}
-            >
-              {market ? <MarketLogos market={market} size="small" /> : null}
-              <span className="mb-0 mr-1.5 text-xs">{mkt}</span>
-              {/* {change24h ? (
+          <Link
+            className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-active hover:opacity-100 focus:text-th-fgd-1 focus:opacity-100 focus:outline-none ${
+              selectedMarket && selectedMarket.name === mkt
+                ? 'text-th-active'
+                : 'text-th-fgd-1 opacity-60'
+            }`}
+            href={`/trade?name=${mkt}`}
+            key={mkt}
+            shallow={true}
+          >
+            {market ? <MarketLogos market={market} size="small" /> : null}
+            <span className="mb-0 mr-1.5 text-xs">{mkt}</span>
+            {/* {change24h ? (
                 <div
                   className={`text-xs ${
                     change24h
@@ -57,7 +59,6 @@ const FavoriteMarketsBar = () => {
                   {`${(change24h * 100).toFixed(1)}%`}
                 </div>
               ) : null} */}
-            </div>
           </Link>
         )
       })}
diff --git a/components/trade/MarketSelectDropdown.tsx b/components/trade/MarketSelectDropdown.tsx
index a460b28d..4d93dabe 100644
--- a/components/trade/MarketSelectDropdown.tsx
+++ b/components/trade/MarketSelectDropdown.tsx
@@ -45,10 +45,10 @@ const MarketSelectDropdown = () => {
     <Popover>
       {({ open, close }) => (
         <div
-          className="relative flex flex-col overflow-visible"
+          className="relative -ml-2 flex flex-col overflow-visible"
           id="trade-step-one"
         >
-          <Popover.Button className="default-transition flex h-12 items-center justify-between hover:text-th-active">
+          <Popover.Button className="default-transition flex h-12 items-center justify-between px-2 hover:text-th-active">
             <div className="flex items-center">
               {selectedMarket ? <MarketLogos market={selectedMarket} /> : null}
               <div className="whitespace-nowrap text-xl font-bold text-th-fgd-1 md:text-base">
@@ -74,24 +74,15 @@ const MarketSelectDropdown = () => {
                       }}
                     >
                       <Link
+                        className="default-transition flex items-center hover:cursor-pointer focus:text-th-active focus:outline-none md:hover:text-th-fgd-3"
                         href={{
                           pathname: '/trade',
                           query: { name: m.name },
                         }}
                         shallow={true}
                       >
-                        <div className="default-transition flex items-center hover:cursor-pointer md:hover:text-th-fgd-3">
-                          <MarketLogos market={m} />
-                          <span
-                            className={
-                              m.name === selectedMarket?.name
-                                ? 'text-th-active'
-                                : ''
-                            }
-                          >
-                            {m.name}
-                          </span>
-                        </div>
+                        <MarketLogos market={m} />
+                        <span>{m.name}</span>
                       </Link>
                       <FavoriteMarketButton market={m} />
                     </div>
@@ -114,24 +105,15 @@ const MarketSelectDropdown = () => {
                         }}
                       >
                         <Link
+                          className="default-transition flex items-center hover:cursor-pointer focus:text-th-active focus:outline-none md:hover:text-th-fgd-3"
                           href={{
                             pathname: '/trade',
                             query: { name: m.name },
                           }}
                           shallow={true}
                         >
-                          <div className="default-transition flex items-center hover:cursor-pointer md:hover:text-th-fgd-3">
-                            <MarketLogos market={m} />
-                            <span
-                              className={
-                                m.name === selectedMarket?.name
-                                  ? 'text-th-active'
-                                  : ''
-                              }
-                            >
-                              {m.name}
-                            </span>
-                          </div>
+                          <MarketLogos market={m} />
+                          <span>{m.name}</span>
                         </Link>
                         <FavoriteMarketButton market={m} />
                       </div>
diff --git a/components/wallet/ConnectWalletButton.tsx b/components/wallet/ConnectWalletButton.tsx
index ebc7fc9f..f781a1eb 100644
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@@ -25,37 +25,35 @@ export const ConnectWalletButton: React.FC = () => {
       <button
         onClick={handleConnect}
         disabled={!groupLoaded}
-        className={` text-white focus:outline-none disabled:cursor-wait disabled:opacity-25`}
+        className="relative flex h-16 w-44 bg-th-bkg-3 py-2 text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100 disabled:cursor-wait disabled:opacity-25"
       >
-        <div className="relative flex h-16 w-44 bg-th-bkg-3 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
-          <div className="default-transition relative z-10 flex h-full items-center justify-center space-x-3 px-4">
-            {connecting ? (
-              <Loading className="h-[28px] w-[28px]" />
-            ) : (
-              <div
-                className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
-                  wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
-                }`}
-              >
-                <img
-                  src={wallet?.adapter.icon || selectedWallet?.adapter.icon}
-                  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="mb-1.5 flex font-display text-base leading-none text-th-fgd-1">
-                {t('connect')}
-              </div>
+        <div className="default-transition relative z-10 flex h-full items-center justify-center space-x-3 px-4">
+          {connecting ? (
+            <Loading className="h-[28px] w-[28px]" />
+          ) : (
+            <div
+              className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
+                wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
+              }`}
+            >
+              <img
+                src={wallet?.adapter.icon || selectedWallet?.adapter.icon}
+                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="mb-1.5 flex font-display text-base leading-none text-th-fgd-1">
+              {t('connect')}
+            </div>
 
-              <div className="text-xxs font-normal leading-3 text-th-fgd-3">
-                {preselectedWalletName}
-              </div>
+            <div className="text-xxs font-normal leading-3 text-th-fgd-3">
+              {preselectedWalletName}
             </div>
           </div>
         </div>
diff --git a/components/wallet/ConnectedMenu.tsx b/components/wallet/ConnectedMenu.tsx
index d15aa82a..4f9d9d4a 100644
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@@ -1,4 +1,4 @@
-import { Menu, Transition } from '@headlessui/react'
+import { Popover, Transition } from '@headlessui/react'
 import {
   ArrowRightOnRectangleIcon,
   CurrencyDollarIcon,
@@ -74,103 +74,91 @@ const ConnectedMenu = () => {
 
   return (
     <>
-      <Menu>
-        {({ open }) => (
-          <div className="relative">
-            <Menu.Button
-              className={`default-transition h-16 ${
-                !isMobile ? 'w-48 border-l border-th-bkg-3 px-4' : ''
-              } hover:bg-th-bkg-2 focus:outline-none`}
-            >
-              <div className="flex items-center" id="account-step-one">
-                <ProfileImage
-                  imageSize="40"
-                  placeholderSize="24"
-                  isOwnerProfile
-                />
-                {!loadProfileDetails && !isMobile ? (
-                  <div className="ml-2.5 overflow-hidden text-left">
-                    <p className="text-xs text-th-fgd-3">
-                      {wallet?.adapter.name}
-                    </p>
-                    <p className="truncate pr-2 text-sm font-bold text-th-fgd-1">
-                      {publicKey ? abbreviateAddress(publicKey) : ''}
-                    </p>
-                    {/* <p className="truncate pr-2 text-sm font-bold capitalize text-th-fgd-1">
+      <Popover>
+        <div className="relative">
+          <Popover.Button
+            className={`default-transition h-16 ${
+              !isMobile ? 'w-48 border-l border-th-bkg-3 px-4' : ''
+            } hover:bg-th-bkg-2 focus:outline-none`}
+          >
+            <div className="flex items-center" id="account-step-one">
+              <ProfileImage
+                imageSize="40"
+                placeholderSize="24"
+                isOwnerProfile
+              />
+              {!loadProfileDetails && !isMobile ? (
+                <div className="ml-2.5 overflow-hidden text-left">
+                  <p className="text-xs text-th-fgd-3">
+                    {wallet?.adapter.name}
+                  </p>
+                  <p className="truncate pr-2 text-sm font-bold text-th-fgd-1">
+                    {publicKey ? abbreviateAddress(publicKey) : ''}
+                  </p>
+                  {/* <p className="truncate pr-2 text-sm font-bold capitalize text-th-fgd-1">
                       {profileDetails?.profile_name
                         ? profileDetails.profile_name
                         : 'Profile Unavailabe'}
                     </p> */}
-                  </div>
-                ) : null}
-              </div>
-            </Menu.Button>
-            <Transition
-              appear={true}
-              show={open}
-              as={Fragment}
-              enter="transition ease-in duration-200"
-              enterFrom="opacity-0 scale-75"
-              enterTo="opacity-100 scale-100"
-              leave="transition ease-out duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Menu.Items className="absolute right-0 top-[61px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 md:rounded-r-none">
-                <Menu.Item>
-                  <button
-                    className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-fgd-1"
-                    onClick={() => setShowEditProfileModal(true)}
-                  >
-                    <UserCircleIcon className="h-4 w-4" />
-                    <div className="pl-2 text-left">
-                      {t('profile:edit-profile-pic')}
-                    </div>
-                  </button>
-                </Menu.Item>
-                {isMobile ? (
-                  <Menu.Item>
-                    <button
-                      className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none"
-                      onClick={() => setShowMangoAccountsModal(true)}
-                    >
-                      <CurrencyDollarIcon className="h-4 w-4" />
-                      <div className="pl-2 text-left">{t('accounts')}</div>
-                    </button>
-                  </Menu.Item>
-                ) : null}
-                {/* <Menu.Item>
-                  <button
-                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
+                </div>
+              ) : null}
+            </div>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-in duration-200"
+            enterFrom="opacity-0 scale-75"
+            enterTo="opacity-100 scale-100"
+            leave="transition ease-out duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Popover.Panel className="absolute right-0 top-[61px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 focus:outline-none md:rounded-r-none">
+              <button
+                className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:text-th-active focus:outline-none focus:ring-0 md:hover:cursor-pointer md:hover:text-th-fgd-1"
+                onClick={() => setShowEditProfileModal(true)}
+              >
+                <UserCircleIcon className="h-4 w-4" />
+                <div className="pl-2 text-left">
+                  {t('profile:edit-profile-pic')}
+                </div>
+              </button>
+              {isMobile ? (
+                <button
+                  className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:text-th-active focus:outline-none focus:ring-0"
+                  onClick={() => setShowMangoAccountsModal(true)}
+                >
+                  <CurrencyDollarIcon className="h-4 w-4" />
+                  <div className="pl-2 text-left">{t('accounts')}</div>
+                </button>
+              ) : null}
+              {/* <button
+                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none focus:ring-0 focus:text-th-active"
                     onClick={() => setShowProfileImageModal(true)}
                   >
                     <ProfileIcon className="h-4 w-4" />
                     <div className="pl-2 text-left">
                       {t('edit-profile-image')}
                     </div>
-                  </button>
-                </Menu.Item> */}
-                <Menu.Item>
-                  <button
-                    className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-fgd-1"
-                    onClick={handleDisconnect}
-                  >
-                    <ArrowRightOnRectangleIcon className="h-4 w-4" />
-                    <div className="pl-2 text-left">
-                      <div className="pb-0.5">{t('disconnect')}</div>
-                      {publicKey ? (
-                        <div className="font-mono text-xs text-th-fgd-4">
-                          {abbreviateAddress(publicKey)}
-                        </div>
-                      ) : null}
+                  </button> */}
+              <button
+                className="default-transition flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:text-th-active focus:outline-none focus:ring-0 md:hover:cursor-pointer md:hover:text-th-fgd-1"
+                onClick={handleDisconnect}
+              >
+                <ArrowRightOnRectangleIcon className="h-4 w-4" />
+                <div className="pl-2 text-left">
+                  <div className="pb-0.5">{t('disconnect')}</div>
+                  {publicKey ? (
+                    <div className="font-mono text-xs text-th-fgd-4">
+                      {abbreviateAddress(publicKey)}
                     </div>
-                  </button>
-                </Menu.Item>
-              </Menu.Items>
-            </Transition>
-          </div>
-        )}
-      </Menu>
+                  ) : null}
+                </div>
+              </button>
+            </Popover.Panel>
+          </Transition>
+        </div>
+      </Popover>
       {showEditProfileModal ? (
         <EditProfileModal
           isOpen={showEditProfileModal}
diff --git a/components/wallet/WalletSelect.tsx b/components/wallet/WalletSelect.tsx
index f6aa1b63..f85db28c 100644
--- a/components/wallet/WalletSelect.tsx
+++ b/components/wallet/WalletSelect.tsx
@@ -13,7 +13,7 @@ const WalletSelect = () => {
       {({ open }) => (
         <>
           <Menu.Button
-            className={`flex h-full w-12 cursor-pointer items-center justify-center rounded-none bg-transparent text-th-fgd-3 hover:brightness-[1.1] focus:outline-none disabled:opacity-25`}
+            className={`flex h-full w-12 cursor-pointer items-center justify-center rounded-none bg-transparent text-th-fgd-3 hover:brightness-[1.1] focus:text-th-active focus:outline-none focus:ring-0 disabled:opacity-25`}
             disabled={!group}
           >
             <ChevronDownIcon
diff --git a/styles/globals.css b/styles/globals.css
index a05b0b7e..6d3bde55 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -401,7 +401,7 @@ body {
 }
 
 button {
-  @apply tracking-wider focus:outline-none;
+  @apply tracking-wider focus:outline-none focus:ring-1 focus:ring-inset focus:ring-th-fgd-4;
 }
 
 svg {

From ea80f1698a7490a0838b5b803ac56a351cecfb3e Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 6 Apr 2023 13:24:29 +1000
Subject: [PATCH 2/3] implement pr feedback

---
 components/BorrowForm.tsx                    |  5 ++++-
 components/DepositForm.tsx                   |  4 ++--
 components/RepayForm.tsx                     |  4 ++--
 components/WithdrawForm.tsx                  |  4 ++--
 components/account/AccountPage.tsx           |  6 +++---
 components/account/HistoryTabs.tsx           |  6 +++---
 components/forms/ButtonGroup.tsx             |  6 +++---
 components/forms/Input.tsx                   |  2 +-
 components/modals/MangoAccountsListModal.tsx |  4 ++--
 components/modals/UserSetupModal.tsx         |  3 ++-
 components/shared/Button.tsx                 |  4 ++--
 components/shared/IconDropMenu.tsx           |  4 +++-
 components/shared/LeverageSlider.tsx         |  2 +-
 components/shared/MaxAmountButton.tsx        |  2 +-
 components/shared/TabButtons.tsx             |  6 +++---
 components/shared/TabUnderline.tsx           | 10 +++++-----
 components/swap/SwapForm.tsx                 |  2 +-
 components/trade/AdvancedTradeForm.tsx       |  6 +++---
 styles/globals.css                           |  2 +-
 19 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/components/BorrowForm.tsx b/components/BorrowForm.tsx
index a87e60d1..7127c969 100644
--- a/components/BorrowForm.tsx
+++ b/components/BorrowForm.tsx
@@ -49,6 +49,9 @@ interface BorrowFormProps {
   token?: string
 }
 
+export const ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES =
+  'default-transition w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4'
+
 function BorrowForm({ onSuccess, token }: BorrowFormProps) {
   const { t } = useTranslation('common')
   const { group } = useMangoGroup()
@@ -244,7 +247,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
+                  className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={handleInputChange}
diff --git a/components/DepositForm.tsx b/components/DepositForm.tsx
index 43c02383..4fa94353 100644
--- a/components/DepositForm.tsx
+++ b/components/DepositForm.tsx
@@ -35,7 +35,7 @@ import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
 import TokenListButton from './shared/TokenListButton'
-import { BackButton } from './BorrowForm'
+import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -232,7 +232,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
+                  className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) => {
diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index b5f4deec..206af17b 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -32,7 +32,7 @@ import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
 import TokenListButton from './shared/TokenListButton'
-import { BackButton } from './BorrowForm'
+import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 
 interface RepayFormProps {
   onSuccess: () => void
@@ -242,7 +242,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
+                  className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) => {
diff --git a/components/WithdrawForm.tsx b/components/WithdrawForm.tsx
index 54129f19..7ce387ef 100644
--- a/components/WithdrawForm.tsx
+++ b/components/WithdrawForm.tsx
@@ -37,7 +37,7 @@ import BankAmountWithValue from './shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
 import TokenListButton from './shared/TokenListButton'
-import { BackButton } from './BorrowForm'
+import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 
 interface WithdrawFormProps {
   onSuccess: () => void
@@ -221,7 +221,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
+                  className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) =>
diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 04df9299..1c0dd955 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -296,10 +296,10 @@ const AccountPage = () => {
           <div className="hide-scroll flex justify-center space-x-2 md:justify-start">
             {TABS.map((tab) => (
               <button
-                className={`default-transition rounded-md py-1.5 px-2.5 text-sm font-medium focus:bg-th-bkg-3 focus:text-th-fgd-1 md:hover:text-th-fgd-2 ${
+                className={`default-transition rounded-md py-1.5 px-2.5 text-sm font-medium focus:bg-th-bkg-3 md:hover:text-th-fgd-2 ${
                   activeTab === tab
-                    ? 'bg-th-bkg-3 text-th-active'
-                    : 'text-th-fgd-3'
+                    ? 'bg-th-bkg-3 text-th-active focus:text-th-active'
+                    : 'text-th-fgd-3 focus:text-th-fgd-1'
                 }`}
                 onClick={() => setActiveTab(tab)}
                 key={tab}
diff --git a/components/account/HistoryTabs.tsx b/components/account/HistoryTabs.tsx
index 5b947e79..058ee8c9 100644
--- a/components/account/HistoryTabs.tsx
+++ b/components/account/HistoryTabs.tsx
@@ -27,10 +27,10 @@ const HistoryTabs = () => {
         <div className="hide-scroll flex space-x-2 pl-4 md:pl-6">
           {TABS.map((tab) => (
             <button
-              className={`default-transition rounded-md py-1.5 px-2.5 text-sm font-medium focus:bg-th-bkg-4 focus:text-th-fgd-1 md:hover:bg-th-bkg-4 ${
+              className={`default-transition rounded-md py-1.5 px-2.5 text-sm font-medium focus:bg-th-bkg-4 md:hover:bg-th-bkg-4 ${
                 activeTab === tab
-                  ? 'bg-th-bkg-4 text-th-active'
-                  : 'text-th-fgd-3'
+                  ? 'bg-th-bkg-4 text-th-active focus:text-th-active'
+                  : 'text-th-fgd-3 focus:text-th-fgd-1'
               }`}
               onClick={() => setActiveTab(tab)}
               key={tab}
diff --git a/components/forms/ButtonGroup.tsx b/components/forms/ButtonGroup.tsx
index 546fd5a9..aa296818 100644
--- a/components/forms/ButtonGroup.tsx
+++ b/components/forms/ButtonGroup.tsx
@@ -37,13 +37,13 @@ const ButtonGroup = <T extends Values>({
         ) : null}
         {values.map((v, i) => (
           <button
-            className={`${className} default-transition relative w-1/2 cursor-pointer rounded-md px-3 text-center focus:bg-th-bkg-3 focus:text-th-fgd-1 disabled:cursor-not-allowed ${
+            className={`${className} default-transition relative w-1/2 cursor-pointer rounded-md px-3 text-center focus:bg-th-bkg-3 disabled:cursor-not-allowed ${
               large ? 'h-12 text-sm' : 'h-10 text-xs'
             } font-normal
               ${
                 v === activeValue
-                  ? `text-th-active`
-                  : `text-th-fgd-2 md:hover:text-th-active`
+                  ? `text-th-active focus:text-th-active`
+                  : `text-th-fgd-2 focus:text-th-fgd-1 md:hover:text-th-fgd-1`
               }
             `}
             disabled={disabled}
diff --git a/components/forms/Input.tsx b/components/forms/Input.tsx
index 85855401..68d1606b 100644
--- a/components/forms/Input.tsx
+++ b/components/forms/Input.tsx
@@ -45,7 +45,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
           text-th-fgd-1 ${
             error ? 'border-th-down' : 'border-th-input-border'
           } focus:border-th-fgd-4 focus:outline-none
-          md:hover:border-th-input-border-hover 
+          md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4
           ${
             disabled
               ? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-4'
diff --git a/components/modals/MangoAccountsListModal.tsx b/components/modals/MangoAccountsListModal.tsx
index fba87e82..15e66497 100644
--- a/components/modals/MangoAccountsListModal.tsx
+++ b/components/modals/MangoAccountsListModal.tsx
@@ -128,7 +128,7 @@ const MangoAccountsListModal = ({
                     >
                       <button
                         onClick={() => handleSelectMangoAccount(acc)}
-                        className="default-transition flex h-full w-full items-center justify-between rounded-md rounded-r-none bg-th-bkg-2 px-4 text-th-fgd-1 focus:bg-th-bkg-3 md:hover:bg-th-bkg-3"
+                        className="default-transition flex h-full w-full items-center justify-between rounded-md rounded-r-none border border-th-bkg-4 px-4 text-th-fgd-1 focus:border-th-fgd-4 md:hover:border-th-fgd-4"
                       >
                         <div className="flex w-full items-center justify-between">
                           <div className="flex items-center space-x-2.5">
@@ -190,7 +190,7 @@ const MangoAccountsListModal = ({
                           </div>
                         </div>
                       </button>
-                      <div className="flex h-full items-center justify-center rounded-md rounded-l-none bg-th-bkg-3">
+                      <div className="flex h-full items-center justify-center rounded-md rounded-l-none border border-l-0 border-th-bkg-4">
                         <Tooltip
                           className="hidden md:block"
                           content={t('copy-address')}
diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx
index ad4a15e3..f9615418 100644
--- a/components/modals/UserSetupModal.tsx
+++ b/components/modals/UserSetupModal.tsx
@@ -45,6 +45,7 @@ import { isMangoError } from 'types'
 import ColorBlur from '@components/ColorBlur'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { ACCEPT_TERMS_KEY } from 'utils/constants'
+import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES } from '@components/BorrowForm'
 
 const UserSetupModal = ({
   isOpen,
@@ -429,7 +430,7 @@ const UserSetupModal = ({
                       allowNegative={false}
                       isNumericString={true}
                       decimalScale={tokenMax.decimals || 6}
-                      className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover"
+                      className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                       placeholder="0.00"
                       value={depositAmount}
                       onValueChange={(e: NumberFormatValues) => {
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
index a2c86d56..81c241a8 100644
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@@ -34,7 +34,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
       className={`rounded-md ${
         secondary
           ? 'border border-th-button focus:border-th-fgd-4 md:hover:border-th-button-hover'
-          : 'bg-th-button md:hover:bg-th-button-hover'
+          : 'bg-th-button focus:border focus:border-th-fgd-4 md:hover:bg-th-button-hover'
       } ${
         size === 'medium'
           ? 'h-10 px-4'
@@ -45,7 +45,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
         theme === 'High Contrast' && !secondary
           ? 'text-th-bkg-1'
           : 'text-th-fgd-1'
-      } focus:brightness-125 disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
+      } disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
       type={type}
       {...props}
     >
diff --git a/components/shared/IconDropMenu.tsx b/components/shared/IconDropMenu.tsx
index f2325341..0469013b 100644
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@@ -46,7 +46,9 @@ const IconDropMenu = ({
                 : size === 'medium'
                 ? 'h-10 w-10'
                 : 'h-8 w-8'
-            } default-transition items-center justify-center rounded-full border border-th-button text-th-fgd-1 focus:border-th-fgd-2 md:hover:border-th-button-hover md:hover:text-th-fgd-1 ${
+            } default-transition items-center justify-center rounded-full border border-th-button text-th-fgd-1 ${
+              !open ? 'focus:border-th-fgd-2' : ''
+            } md:hover:border-th-button-hover md:hover:text-th-fgd-1 ${
               disabled ? 'cursor-not-allowed opacity-60' : ''
             }`}
             disabled={disabled}
diff --git a/components/shared/LeverageSlider.tsx b/components/shared/LeverageSlider.tsx
index 834abce6..f3029173 100644
--- a/components/shared/LeverageSlider.tsx
+++ b/components/shared/LeverageSlider.tsx
@@ -55,7 +55,7 @@ const LeverageSlider = ({
         min="0"
         max={leverageMax}
         step={step}
-        className="w-full"
+        className="w-full focus:outline-none"
         onChange={handleSliderChange}
         value={value}
       ></input>
diff --git a/components/shared/MaxAmountButton.tsx b/components/shared/MaxAmountButton.tsx
index 8e5432fa..7a881040 100644
--- a/components/shared/MaxAmountButton.tsx
+++ b/components/shared/MaxAmountButton.tsx
@@ -19,7 +19,7 @@ const MaxAmountButton = ({
 }) => {
   return (
     <LinkButton
-      className={`font-normal no-underline ${className}`}
+      className={`font-normal no-underline ${className} md:hover:text-th-fgd-3`}
       disabled={disabled}
       onClick={onClick}
     >
diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx
index 8682af27..0b7dcd48 100644
--- a/components/shared/TabButtons.tsx
+++ b/components/shared/TabButtons.tsx
@@ -25,7 +25,7 @@ const TabButtons = <T extends Values>({
       {values.map(([label, count], i) => (
         <div className={fillWidth ? 'flex-1' : ''} key={`${label}` + i}>
           <button
-            className={`default-transition flex h-12 w-full items-center justify-center px-4 font-normal focus:bg-th-bkg-2 focus:text-th-fgd-1 md:px-6 ${
+            className={`default-transition flex h-12 w-full items-center justify-center px-4 font-normal focus:bg-th-bkg-2 md:px-6 ${
               rounded ? 'rounded-md' : 'rounded-none'
             } ${
               showBorders
@@ -39,8 +39,8 @@ const TabButtons = <T extends Values>({
                   ? 'bg-th-up-dark font-display text-th-fgd-1'
                   : label === 'sell'
                   ? 'bg-th-down-dark font-display text-th-fgd-1'
-                  : 'bg-th-bkg-2 text-th-active'
-                : 'hover:cursor-pointer hover:text-th-fgd-2'
+                  : 'bg-th-bkg-2 text-th-active focus:text-th-active'
+                : 'hover:cursor-pointer hover:text-th-fgd-2 focus:text-th-fgd-1'
             }`}
             key={`${label}${i}`}
             onClick={() => onChange(label)}
diff --git a/components/shared/TabUnderline.tsx b/components/shared/TabUnderline.tsx
index f44e879f..6fb3f24a 100644
--- a/components/shared/TabUnderline.tsx
+++ b/components/shared/TabUnderline.tsx
@@ -48,17 +48,17 @@ const TabUnderline = <T extends Values>({
           <button
             onClick={() => onChange(value)}
             className={`default-transition relative flex h-10 w-1/2 
-            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 focus:text-th-fgd-1 md:h-auto md:rounded-none md:hover:opacity-100 ${
+            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 md:h-auto md:rounded-none md:hover:opacity-100 ${
               small ? 'text-sm' : 'text-sm lg:text-base'
             }
             ${
               activeValue === value
                 ? activeValue === 'buy'
-                  ? 'text-th-up'
+                  ? 'text-th-up focus:text-th-up'
                   : activeValue === 'sell'
-                  ? 'text-th-down'
-                  : 'text-th-active'
-                : 'text-th-fgd-4 hover:text-th-fgd-3'
+                  ? 'text-th-down focus:text-th-down'
+                  : 'text-th-active focus:text-th-active'
+                : 'text-th-fgd-4 focus:text-th-fgd-1 md:hover:text-th-fgd-3'
             }
           `}
             key={`${value}` + i}
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 5ba8315d..0f524291 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -57,7 +57,7 @@ export const withValueLimit = (values: NumberFormatValues): boolean => {
 }
 
 const NUMBER_FORMAT_CLASSNAMES =
-  'w-full rounded-l-none rounded-r-lg border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none lg:text-lg xl:text-xl'
+  'default-transition w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4'
 
 const set = mangoStore.getState().set
 
diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index 23805050..8dc6228f 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -469,7 +469,7 @@ const AdvancedTradeForm = () => {
                   decimalScale={tickDecimals}
                   name="price"
                   id="price"
-                  className="default-transition flex w-full items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover lg:text-base"
+                  className="default-transition flex w-full items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
                   placeholder="0.00"
                   value={tradeForm.price}
                   onValueChange={handlePriceChange}
@@ -493,7 +493,7 @@ const AdvancedTradeForm = () => {
                 decimalScale={minOrderDecimals}
                 name="base"
                 id="base"
-                className="default-transition relative flex w-full items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:z-10 focus:border-th-fgd-4 focus:outline-none md:hover:z-10 md:hover:border-th-input-border-hover lg:text-base"
+                className="default-transition relative flex w-full items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:z-10 focus:border-th-fgd-4 focus:outline-none md:hover:z-10 md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
                 placeholder="0.00"
                 value={tradeForm.baseSize}
                 onValueChange={handleBaseSizeChange}
@@ -534,7 +534,7 @@ const AdvancedTradeForm = () => {
                 decimalScale={tickDecimals}
                 name="quote"
                 id="quote"
-                className="default-transition -mt-[1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover lg:text-base"
+                className="default-transition -mt-[1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
                 placeholder="0.00"
                 value={tradeForm.quoteSize}
                 onValueChange={handleQuoteSizeChange}
diff --git a/styles/globals.css b/styles/globals.css
index 49733c8a..6e713833 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -543,7 +543,7 @@ table p {
 /* slider */
 
 input[type='range'] {
-  @apply h-1.5 appearance-none rounded bg-th-bkg-3 bg-gradient-to-r from-th-active to-th-active bg-no-repeat;
+  @apply default-transition h-1.5 appearance-none rounded bg-th-bkg-3 bg-gradient-to-r from-th-active to-th-active bg-no-repeat focus:bg-th-bkg-4;
 }
 
 input[type='range']::-webkit-slider-thumb {

From 214ece99d9ad5cda6ef3abf4e2eb5b9907f95a5f Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 17 Apr 2023 11:51:53 +1000
Subject: [PATCH 3/3] focus on modal close last in tab order

---
 components/shared/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx
index bacfb73a..725e0ec2 100644
--- a/components/shared/Modal.tsx
+++ b/components/shared/Modal.tsx
@@ -47,6 +47,7 @@ function Modal({
               : 'p-4 pt-6 sm:h-auto sm:max-w-md sm:rounded-lg sm:border sm:border-th-bkg-3 sm:p-6'
           } relative `}
         >
+          <div>{children}</div>
           {!hideClose ? (
             <button
               onClick={onClose}
@@ -55,7 +56,6 @@ function Modal({
               <XMarkIcon className={`h-6 w-6`} />
             </button>
           ) : null}
-          <div>{children}</div>
         </Dialog.Panel>
       </div>
     </Dialog>