Merge pull request #96 from blockworks-foundation/click-table-row

allow click table rows

components/TokenList.tsx

@@ -93,8 +93,8 @@ const TokenList = () => {
                   </Tooltip>
                 </div>
               </Th>
-              <Th className="bg-th-bkg-1 text-right">{t('trade:in-orders')}</Th>
+              <Th className="text-right">{t('trade:in-orders')}</Th>
-              <Th className="bg-th-bkg-1 text-right">{t('trade:unsettled')}</Th>
+              <Th className="text-right">{t('trade:unsettled')}</Th>
               <Th className="flex justify-end" id="account-step-nine">
                 <Tooltip content="The sum of interest earned and interest paid for each token">
                   <span className="tooltip-underline">
@@ -109,7 +109,9 @@ const TokenList = () => {
                   </Tooltip>
                 </div>
               </Th>
-              <Th />
+              <Th className="text-right">
+                <span className="pr-9">{t('actions')}</span>
+              </Th>
             </TrHead>
           </thead>
           <tbody>
@@ -145,7 +147,11 @@ const TokenList = () => {
                 spotBalances[bank.mint.toString()]?.unsettled || 0
 
               return (
-                <TrBody className="last:border-y-0" key={bank.name}>
+                <TrBody
+                  className="default-transition md:hover:cursor-pointer md:hover:bg-th-bkg-2"
+                  key={bank.name}
+                  onClick={() => goToTokenPage(bank.name)}
+                >
                   <Td>
                     <div className="flex items-center">
                       <div className="mr-2.5 flex flex-shrink-0 items-center">
@@ -210,14 +216,9 @@ const TokenList = () => {
                     </div>
                   </Td>
                   <Td>
-                    <div className="flex justify-end space-x-2">
+                    <div className="flex items-center justify-end">
                       <ActionsMenu bank={bank} mangoAccount={mangoAccount} />
-                      <IconButton
+                      <ChevronRightIcon className="ml-4 h-5 w-5 text-th-fgd-3" />
-                        onClick={() => goToTokenPage(bank.name)}
-                        size="small"
-                      >
-                        <ChevronRightIcon className="h-5 w-5" />
-                      </IconButton>
                     </div>
                   </Td>
                 </TrBody>
@@ -479,6 +480,7 @@ const ActionsMenu = ({
       {isUnownedAccount ? null : (
         <IconDropMenu
           icon={<EllipsisHorizontalIcon className="h-5 w-5" />}
+          panelClassName="w-40 shadow-md"
           postion="leftBottom"
         >
           <div className="flex items-center justify-center border-b border-th-bkg-3 pb-2">

components/stats/PerpMarketsTable.tsx

@@ -104,7 +104,11 @@ const PerpMarketsTable = ({
               const openInterest = market.baseLotsToUi(market.openInterest)
 
               return (
-                <TrBody key={market.publicKey.toString()}>
+                <TrBody
+                  className="default-transition md:hover:cursor-pointer md:hover:bg-th-bkg-2"
+                  key={market.publicKey.toString()}
+                  onClick={() => setShowPerpDetails(perpMarkets[index])}
+                >
                   <Td>
                     <div className="flex items-center">
                       <MarketLogos market={market} />
@@ -190,12 +194,7 @@ const PerpMarketsTable = ({
                   </Td>
                   <Td>
                     <div className="flex justify-end">
-                      <IconButton
+                      <ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
-                        onClick={() => setShowPerpDetails(perpMarkets[index])}
-                        size="small"
-                      >
-                        <ChevronRightIcon className="h-5 w-5" />
-                      </IconButton>
                     </div>
                   </Td>
                 </TrBody>

components/stats/TokenStats.tsx

@@ -112,7 +112,11 @@ const TokenStats = () => {
               )
 
               return (
-                <TrBody key={bank.name}>
+                <TrBody
+                  className="default-transition md:hover:cursor-pointer md:hover:bg-th-bkg-2"
+                  key={bank.name}
+                  onClick={() => goToTokenPage(bank)}
+                >
                   <Td>
                     <div className="flex items-center">
                       <div className="mr-2.5 flex flex-shrink-0 items-center">
@@ -196,12 +200,7 @@ const TokenStats = () => {
                   </Td>
                   <Td>
                     <div className="flex justify-end">
-                      <IconButton
+                      <ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
-                        onClick={() => goToTokenPage(bank)}
-                        size="small"
-                      >
-                        <ChevronRightIcon className="h-5 w-5" />
-                      </IconButton>
                     </div>
                   </Td>
                 </TrBody>