From 32578711b28896acf117eeed11530417915159eb Mon Sep 17 00:00:00 2001
From: tjs <tjshipe@gmail.com>
Date: Fri, 30 Sep 2022 00:21:23 -0400
Subject: [PATCH] general refinements

---
 components/Layout.tsx                     |  4 +--
 components/MangoAccountsList.tsx          |  4 +--
 components/OnboardingTour.tsx             |  2 +-
 components/SideNav.tsx                    | 32 ++++++++---------------
 components/mobile/BottomBar.tsx           | 24 ++++++++++-------
 components/shared/IconDropMenu.tsx        |  6 ++---
 components/shared/Modal.tsx               |  4 +--
 components/shared/Notification.tsx        |  8 ++++--
 components/shared/TabButtons.tsx          | 13 +++++++--
 components/shared/Transitions.tsx         |  4 +--
 components/swap/SwapForm.tsx              |  2 +-
 components/swap/SwapFormTokenList.tsx     | 27 ++++++++++---------
 components/swap/SwapSettings.tsx          |  2 +-
 components/trade/AdvancedMarketHeader.tsx |  4 +--
 components/trade/RecentTrades.tsx         |  2 +-
 components/trade/TradingViewChart.tsx     |  1 +
 styles/colors.ts                          |  2 +-
 styles/globals.css                        |  3 +--
 tailwind.config.js                        |  2 +-
 utils/constants.ts                        |  2 +-
 20 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index cef9d66d..21653440 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -35,7 +35,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
   }, [width])
 
   useEffect(() => {
-    const animationFrames = 5
+    const animationFrames = 15
 
     for (let x = 1; x <= animationFrames; x++) {
       setTimeout(() => {
@@ -55,7 +55,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
           <BounceLoader />
         </div>
       ) : null}
-      <div className="flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all">
+      <div className="flex-grow bg-th-bkg-1 text-th-fgd-2 transition-all">
         <div className="flex">
           <div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
             <BottomBar />
diff --git a/components/MangoAccountsList.tsx b/components/MangoAccountsList.tsx
index de3b7b09..f7faee25 100644
--- a/components/MangoAccountsList.tsx
+++ b/components/MangoAccountsList.tsx
@@ -76,7 +76,7 @@ const MangoAccountsList = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Popover.Panel className="absolute top-[13.5px] -right-5 z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-3 bg-th-bkg-1 p-4">
+                <Popover.Panel className="absolute top-[13.5px] -right-5 z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-2 bg-th-bkg-3 p-4 text-th-fgd-3">
                   {loading ? (
                     <Loading />
                   ) : mangoAccounts.length ? (
@@ -84,7 +84,7 @@ const MangoAccountsList = ({
                       <div key={acc.publicKey.toString()}>
                         <button
                           onClick={() => handleSelectMangoAccount(acc)}
-                          className="mb-3 flex w-full items-center justify-between border-b border-th-bkg-3 pb-3"
+                          className="mb-3 flex w-full items-center justify-between border-b border-th-bkg-4 pb-3 hover:text-th-fgd-1"
                         >
                           {acc.name}
                           {acc.publicKey.toString() ===
diff --git a/components/OnboardingTour.tsx b/components/OnboardingTour.tsx
index a1906959..33afafb4 100644
--- a/components/OnboardingTour.tsx
+++ b/components/OnboardingTour.tsx
@@ -28,7 +28,7 @@ const OnboardingTour = () => {
           onClick={handleClose}
           className={`absolute right-4 top-4 z-50 text-th-bkg-3 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
         >
-          <XMarkIcon className={`h-5 w-5`} />
+          <XMarkIcon className={`h-6 w-6`} />
         </button>
         <h3 className="text-th-bkg-1">{title}</h3>
         <p className="text-sm text-th-bkg-1">{description}</p>
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 8f5e5ac5..b6ebc118 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -42,7 +42,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
 
   return (
     <div
-      className={`transition-all duration-500 ${
+      className={`transition-all duration-300 ${
         collapsed ? 'w-[64px]' : 'w-44 lg:w-48 xl:w-52'
       } border-r border-th-bkg-3 bg-th-bkg-1`}
     >
@@ -50,7 +50,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
         <div className="my-2">
           <Link href={'/'} shallow={true} passHref>
             <div
-              className={`h-14 items-center transition-all duration-500 ease-in-out ${
+              className={`h-14 items-center transition-all duration-300 ease-in-out ${
                 collapsed ? '' : 'justify-start'
               } pb-1 pt-2 pl-4`}
             >
@@ -323,26 +323,16 @@ export const ExpandableMenuItem = ({
             {icon}
           </div>
         </Popover.Button>
-        <Transition
-          show={showMenu}
-          as={Fragment}
-          enter="transition ease-in duration-300"
-          enterFrom="opacity-0 scale-90"
-          enterTo="opacity-100 scale-100"
-          leave="transition ease-out duration-300"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+
+        <Popover.Panel
+          className={`absolute z-20 w-56 rounded-md rounded-l-none border border-th-bkg-3 bg-th-bkg-1 py-2 ${
+            alignBottom
+              ? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
+              : 'top-1/2 left-[63px] -translate-y-1/2'
+          }`}
         >
-          <Popover.Panel
-            className={`absolute z-20 w-56 rounded-md rounded-l-none border border-th-bkg-3 bg-th-bkg-1 py-2 ${
-              alignBottom
-                ? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
-                : 'top-1/2 left-[63px] -translate-y-1/2'
-            }`}
-          >
-            {children}
-          </Popover.Panel>
-        </Transition>
+          {children}
+        </Popover.Panel>
       </div>
     </Popover>
   ) : (
diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx
index 930dc182..69fcb964 100644
--- a/components/mobile/BottomBar.tsx
+++ b/components/mobile/BottomBar.tsx
@@ -12,6 +12,7 @@ import {
   ChevronRightIcon,
   CurrencyDollarIcon as FeesIcon,
   LightBulbIcon,
+  ArrowsRightLeftIcon,
 } from '@heroicons/react/20/solid'
 
 const StyledBarItemLabel = ({
@@ -58,18 +59,18 @@ const BottomBar = () => {
               asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
             } col-span-1 flex cursor-pointer flex-col items-center`}
           >
-            <TradeIcon className="mb-1 h-4 w-4" />
-            <StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
+            <ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
+            <StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
           </a>
         </Link>
-        <Link href="/stats" shallow={true}>
+        <Link href="/trade" shallow={true}>
           <a
             className={`${
-              asPath === '/stats' ? 'text-th-primary' : 'text-th-fgd-3'
+              asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
             } col-span-1 flex cursor-pointer flex-col items-center`}
           >
-            <ChartBarIcon className="mb-1 h-4 w-4" />
-            <StyledBarItemLabel>{t('stats')}</StyledBarItemLabel>
+            <TradeIcon className="mb-1 h-4 w-4" />
+            <StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
           </a>
         </Link>
         <a
@@ -99,19 +100,24 @@ const MoreMenuPanel = ({
   const { t } = useTranslation('common')
   return (
     <div
-      className={`fixed bottom-0 z-30 h-96 w-full overflow-hidden bg-th-bkg-2 px-4 transition duration-500 ease-in-out ${
+      className={`fixed bottom-0 z-30 h-96 w-full overflow-hidden rounded-t-3xl bg-th-bkg-2 px-4 transition duration-300 ease-in-out ${
         showPanel ? 'translate-y-0' : 'translate-y-full'
       }`}
     >
       <div className="flex justify-end py-4">
         <IconButton onClick={() => setShowPanel(false)} hideBg>
-          <XMarkIcon className="h-5 w-5" />
+          <XMarkIcon className="h-6 w-6" />
         </IconButton>
       </div>
       <div
         className="border-b border-th-bkg-4"
         onClick={() => setShowPanel(false)}
       >
+        <MoreMenuItem
+          title={t('stats')}
+          path="/stats"
+          icon={<ChartBarIcon className="h-5 w-5" />}
+        />
         <MoreMenuItem
           title={t('fees')}
           path="/fees"
@@ -140,7 +146,7 @@ const MoreMenuItem = ({
   isExternal?: boolean
 }) => {
   const classNames =
-    'default-transition flex w-full items-center justify-between border-t border-th-bkg-4 px-2 py-3 text-th-fgd-2 hover:text-th-fgd-1'
+    'default-transition flex w-full items-center justify-between border-t border-th-bkg-4 px-2 py-4 text-th-fgd-2 hover:text-th-fgd-1'
   return isExternal ? (
     <a
       className={classNames}
diff --git a/components/shared/IconDropMenu.tsx b/components/shared/IconDropMenu.tsx
index d5311d54..d25a77e5 100644
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@@ -49,15 +49,15 @@ const IconDropMenu = ({
             }`}
             disabled={disabled}
           >
-            {open ? <XMarkIcon className="h-5 w-5" /> : icon}
+            {open ? <XMarkIcon className="h-6 w-6" /> : icon}
           </Popover.Button>
           <Transition
             appear={true}
             show={open}
             as={Fragment}
             enter="transition ease-in duration-100"
-            enterFrom="opacity-0 scale-90"
-            enterTo="opacity-100 scale-100"
+            enterFrom="scale-90"
+            enterTo="scale-100"
             leave="transition ease-out duration-100"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx
index 2a634b75..bf493684 100644
--- a/components/shared/Modal.tsx
+++ b/components/shared/Modal.tsx
@@ -26,7 +26,7 @@ function Modal({
     >
       <div className="min-h-screen px-4 text-center">
         <Dialog.Overlay
-          className={`fixed inset-0 bg-black opacity-50 ${
+          className={`fixed inset-0 backdrop-blur-sm ${
             disableOutsideClose ? 'pointer-events-none' : ''
           }`}
         />
@@ -39,7 +39,7 @@ function Modal({
               onClick={onClose}
               className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
             >
-              <XMarkIcon className={`h-5 w-5`} />
+              <XMarkIcon className={`h-6 w-6`} />
             </button>
           ) : null}
           <Dialog.Title>{title}</Dialog.Title>
diff --git a/components/shared/Notification.tsx b/components/shared/Notification.tsx
index 2b23a1f5..e5833f4c 100644
--- a/components/shared/Notification.tsx
+++ b/components/shared/Notification.tsx
@@ -106,8 +106,10 @@ const Notification = ({ notification }: { notification: Notification }) => {
           hideNotification()
         }
       },
-      parsedTitle || type === 'confirm' || type === 'error'
+      parsedTitle || type === 'confirm'
         ? CLIENT_TX_TIMEOUT
+        : type === 'error'
+        ? 30000
         : 8000
     )
 
@@ -151,7 +153,9 @@ const Notification = ({ notification }: { notification: Notification }) => {
               {parsedTitle || title}
             </p>
             {description ? (
-              <p className={`mb-0 mt-0.5 leading-tight text-th-fgd-3`}>
+              <p
+                className={`mb-0 mt-0.5 break-all text-sm leading-tight text-th-fgd-3`}
+              >
                 {description}
               </p>
             ) : null}
diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx
index 53fbd0e1..8269995c 100644
--- a/components/shared/TabButtons.tsx
+++ b/components/shared/TabButtons.tsx
@@ -29,7 +29,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
       {values.map(([label, count], i) => (
         <div className={fillWidth ? 'flex-1' : ''} key={label + i}>
           <button
-            className={`default-transition h-12 w-full px-6 font-bold ${
+            className={`default-transition flex h-12 w-full items-center justify-center px-6 font-bold ${
               rounded ? 'rounded-md' : 'rounded-none'
             } ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
               label === activeValue
@@ -39,7 +39,16 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
             key={`${label}${i}`}
             onClick={() => onChange(label)}
           >
-            {t(label)} {count ? ` (${count})` : null}
+            <span className="">{t(label)} </span>
+            {count ? (
+              <div
+                className={`ml-1.5 rounded ${
+                  label === activeValue ? 'bg-th-bkg-4' : 'bg-th-bkg-3'
+                } px-1.5 font-mono text-xxs`}
+              >
+                {count}
+              </div>
+            ) : null}
           </button>
         </div>
       ))}
diff --git a/components/shared/Transitions.tsx b/components/shared/Transitions.tsx
index ffb3428c..5fc1940a 100644
--- a/components/shared/Transitions.tsx
+++ b/components/shared/Transitions.tsx
@@ -1,8 +1,8 @@
 import { Transition } from '@headlessui/react'
 import { CSSProperties, ReactNode } from 'react'
 
-const transitionEnterStyle = 'transition-all ease-in duration-300'
-const transitionExitStyle = 'transition-all ease-out duration-300'
+const transitionEnterStyle = 'transition-all ease-out duration-500'
+const transitionExitStyle = 'transition-all ease-in duration-300'
 
 export const EnterRightExitLeft = ({
   children,
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 70607aff..b5ac8975 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -287,7 +287,7 @@ const SwapForm = () => {
             />
           ) : null}
         </div>
-        <div className="flex justify-center">
+        <div className="-mb-2 flex justify-center">
           <button
             className="rounded-full border border-th-bkg-4 p-1.5 text-th-fgd-3 md:hover:text-th-primary"
             onClick={handleSwitchTokens}
diff --git a/components/swap/SwapFormTokenList.tsx b/components/swap/SwapFormTokenList.tsx
index 6bd6971a..300785c7 100644
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@@ -106,19 +106,19 @@ const SwapFormTokenList = ({
   const [search, setSearch] = useState('')
   const tokens = mangoStore.getState().jupiterTokens
   const walletTokens = mangoStore((s) => s.wallet.tokens)
-  const jupiterTokens = mangoStore((s) => s.jupiterTokens)
+  // const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const inputBank = mangoStore((s) => s.swap.inputBank)
   const outputBank = mangoStore((s) => s.swap.outputBank)
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
   const group = mangoStore((s) => s.group)
 
-  const popularTokens = useMemo(() => {
-    return tokens.filter((token) => {
-      return !token?.name || !token?.symbol
-        ? false
-        : popularTokenSymbols.includes(token.symbol)
-    })
-  }, [tokens])
+  // const popularTokens = useMemo(() => {
+  //   return tokens.filter((token) => {
+  //     return !token?.name || !token?.symbol
+  //       ? false
+  //       : popularTokenSymbols.includes(token.symbol)
+  //   })
+  // }, [tokens])
 
   useEffect(() => {
     function onEscape(e: any) {
@@ -170,11 +170,12 @@ const SwapFormTokenList = ({
     }
   }, [tokens, walletTokens, inputBank, outputBank, mangoAccount, group])
 
-  const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value)
-  }
+  // const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
+  //   setSearch(e.target.value)
+  // }
 
-  const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
+  // const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
+  const sortedTokens = tokenInfos
 
   return (
     <>
@@ -184,7 +185,7 @@ const SwapFormTokenList = ({
           : `${t('swap')} ${t('swap:to')}`}
       </p>
       <IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
-        <XMarkIcon className="h-5 w-5" />
+        <XMarkIcon className="h-6 w-6" />
       </IconButton>
       {/* No need for search/popular tokens until we have more tokens */}
 
diff --git a/components/swap/SwapSettings.tsx b/components/swap/SwapSettings.tsx
index 4b560b27..9dedfff4 100644
--- a/components/swap/SwapSettings.tsx
+++ b/components/swap/SwapSettings.tsx
@@ -34,7 +34,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
     <>
       <h3 className="mb-3">{t('settings')}</h3>
       <IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
-        <XMarkIcon className="h-5 w-5" />
+        <XMarkIcon className="h-6 w-6" />
       </IconButton>
 
       <div className="mt-4">
diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx
index 76ff8acb..76fd95b7 100644
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@@ -52,7 +52,7 @@ const MarketSelectDropdown = () => {
         <div className="relative flex flex-col overflow-visible">
           <Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-primary">
             <MarketLogos baseURI={baseLogoURI} quoteURI={quoteLogoURI} />
-            <div className="text-xl font-bold md:text-base">
+            <div className="text-xl font-bold text-th-fgd-1 md:text-base">
               {selectedMarket?.name || DEFAULT_MARKET_NAME}
             </div>
             <ChevronDownIcon
@@ -122,7 +122,7 @@ const OraclePrice = () => {
   )
 
   return (
-    <div className="font-mono text-xs text-th-fgd-1">
+    <div className="font-mono text-xs text-th-fgd-2">
       $
       {baseTokenBank.uiPrice
         ? formatFixedDecimals(baseTokenBank.uiPrice)
diff --git a/components/trade/RecentTrades.tsx b/components/trade/RecentTrades.tsx
index 9fa95b38..4c4775ed 100644
--- a/components/trade/RecentTrades.tsx
+++ b/components/trade/RecentTrades.tsx
@@ -96,7 +96,7 @@ const RecentTrades = () => {
                 <div className={`text-right text-th-fgd-2`}>
                   {formattedSize.toFixed()}
                 </div>
-                <div className={`text-right text-th-fgd-4`}>
+                <div className={`text-right tracking-tighter text-th-fgd-4`}>
                   {trade.time && new Date(trade.time).toLocaleTimeString()}
                 </div>
               </div>
diff --git a/components/trade/TradingViewChart.tsx b/components/trade/TradingViewChart.tsx
index bf9337c1..46fadca2 100644
--- a/components/trade/TradingViewChart.tsx
+++ b/components/trade/TradingViewChart.tsx
@@ -138,6 +138,7 @@ const TradingViewChart = () => {
           'header_interval_dialog_button',
           'show_interval_dialog_on_key_press',
           'header_symbol_search',
+          'popup_hints',
         ],
         fullscreen: defaultProps.fullscreen,
         autosize: defaultProps.autosize,
diff --git a/styles/colors.ts b/styles/colors.ts
index 92dbc72d..310f1176 100644
--- a/styles/colors.ts
+++ b/styles/colors.ts
@@ -1,6 +1,6 @@
 export const COLORS: any = {
   BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
-  GREEN: { Mango: '#AFD803', Dark: '#5EBF4d', Light: '#5EBF4d' },
+  GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
   PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
   RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
 }
diff --git a/styles/globals.css b/styles/globals.css
index 78a686a7..14ecb593 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -266,13 +266,12 @@ table th {
 }
 
 table p {
-  @apply font-mono text-sm tracking-tight text-th-fgd-1;
+  @apply font-mono text-sm tracking-tight text-th-fgd-2;
 }
 
 /* Scrollbars */
 
 .font-mono {
-  @apply tracking-tight;
   -webkit-font-feature-settings: 'zero' 1;
   font-feature-settings: 'zero' 1;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 232e2a88..f408259d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -64,7 +64,7 @@ module.exports = {
             dark: '#E4AF11',
           },
           red: { DEFAULT: '#F84638', dark: '#C7251A', muted: '#6d2832' },
-          green: { DEFAULT: '#AFD803', dark: '#91B503', muted: '#49601b' },
+          green: { DEFAULT: '#A6CD03', dark: '#84A21C', muted: '#49601b' },
           orange: { DEFAULT: '#FF9C24' },
           'bkg-1': '#1C1924', // '#141026',
           'bkg-2': '#252232', // '#1D1832',
diff --git a/utils/constants.ts b/utils/constants.ts
index 678bcedf..6241159b 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -1,6 +1,6 @@
 export const LAST_ACCOUNT_KEY = 'mangoAccount-0.1'
 
-export const CLIENT_TX_TIMEOUT = 60000
+export const CLIENT_TX_TIMEOUT = 90000
 
 export const INPUT_TOKEN_DEFAULT = 'USDC'