From 636c79443af9510061c1cced0099e70c087e47de Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 25 Jul 2022 11:47:12 +1000
Subject: [PATCH] position icon menu panel

---
 components/TokenList.tsx           |  2 ++
 components/shared/IconDropMenu.tsx | 32 ++++++++++++++++++++++++++----
 components/swap/SwapTokenChart.tsx |  8 ++++----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index b029ade7..1acc80f7 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -134,6 +134,8 @@ const TokenList = () => {
                     <div className="flex justify-end space-x-2">
                       <IconDropMenu
                         icon={<DotsHorizontalIcon className="h-5 w-5" />}
+                        postion="leftBottom"
+                        disabled={!mangoAccount}
                       >
                         <LinkButton
                           className="w-full text-left"
diff --git a/components/shared/IconDropMenu.tsx b/components/shared/IconDropMenu.tsx
index 520b2f32..d2041f15 100644
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@@ -5,12 +5,35 @@ import { Fragment, ReactNode } from 'react'
 const IconDropMenu = ({
   icon,
   children,
+  disabled,
   large,
+  postion = 'bottomRight',
 }: {
   icon: ReactNode
   children: ReactNode
+  disabled?: boolean
   large?: boolean
+  postion?:
+    | 'bottomLeft'
+    | 'bottomRight'
+    | 'topLeft'
+    | 'topRight'
+    | 'leftBottom'
+    | 'leftTop'
+    | 'rightBottom'
+    | 'rightTop'
 }) => {
+  const panelPosition = {
+    bottomLeft: large ? 'left-0 top-14' : 'left-0 top-12',
+    bottomRight: large ? 'right-0 top-14' : 'right-0 top-12',
+    topLeft: large ? 'left-0 bottom-14' : 'left-0 bottom-12',
+    topRight: large ? 'right-0 bottom-14' : 'right-0 bottom-12',
+    leftBottom: large ? 'right-14 bottom-0' : 'right-12 bottom-0',
+    leftTop: large ? 'right-14 top-0' : 'right-12 top-0',
+    rightBottom: large ? 'left-14 bottom-0' : 'left-12 bottom-0',
+    rightTop: large ? 'left-14 top-0' : 'left-12 top-0',
+  }
+
   return (
     <Popover>
       {({ open }) => (
@@ -18,7 +41,10 @@ const IconDropMenu = ({
           <Popover.Button
             className={`flex ${
               large ? 'h-12 w-12' : 'h-10 w-10'
-            } items-center justify-center rounded-full border border-th-bkg-button hover:text-th-primary`}
+            } items-center justify-center rounded-full border border-th-bkg-button hover:text-th-primary ${
+              disabled ? 'cursor-not-allowed opacity-60' : ''
+            }`}
+            disabled={disabled}
           >
             {open ? <XIcon className="h-5 w-5" /> : icon}
           </Popover.Button>
@@ -34,9 +60,7 @@ const IconDropMenu = ({
             leaveTo="opacity-0"
           >
             <Popover.Panel
-              className={`absolute right-0 ${
-                large ? 'top-14' : 'top-12'
-              } z-20 w-48 space-y-2 rounded-md border border-th-bkg-3 bg-th-bkg-1 p-4`}
+              className={`absolute ${panelPosition[postion]} z-20 w-48 space-y-2 rounded-md border border-th-bkg-3 bg-th-bkg-1 p-4`}
             >
               {children}
             </Popover.Panel>
diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx
index d967c613..e9f62c30 100644
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@@ -180,7 +180,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
               ) : null}
               {mouseData ? (
                 <>
-                  <div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
+                  <div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
                     <FlipNumbers
                       height={40}
                       width={26}
@@ -206,13 +206,13 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                       </span>
                     </span>
                   </div>
-                  <p className="text-th-fgd-4">
+                  <p className="text-sm text-th-fgd-4">
                     {dayjs(mouseData['time']).format('DD MMM YY, h:mma')}
                   </p>
                 </>
               ) : (
                 <>
-                  <div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
+                  <div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
                     <FlipNumbers
                       height={40}
                       width={26}
@@ -238,7 +238,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                       </span>
                     </span>
                   </div>
-                  <p className="text-th-fgd-4">
+                  <p className="text-sm text-th-fgd-4">
                     {dayjs(chartData[chartData.length - 1]['time']).format(
                       'DD MMM YY, h:mma'
                     )}