align tabs to trade page

components/SwapHistoryTable.tsx

@@ -70,10 +70,7 @@ const SwapHistoryTable = ({
                 } = h
                 const borrowAmount =
                   loan > 0
-                    ? `${trimDecimals(
-                        loan,
-                        countLeadingZeros(loan) + 2
-                      )} ${swap_in_symbol}`
+                    ? `${trimDecimals(loan, countLeadingZeros(loan) + 2)}`
                     : 0
                 const borrowFee =
                   swap_in_loan_origination_fee > 0
@@ -87,7 +84,9 @@ const SwapHistoryTable = ({
                 return (
                   <tr key={signature}>
                     <td>
-                      <p>{dayjs(block_datetime).format('ddd D MMM')}</p>
+                      <p className="font-body tracking-wide">
+                        {dayjs(block_datetime).format('ddd D MMM')}
+                      </p>
                       <p className="text-xs text-th-fgd-3">
                         {dayjs(block_datetime).format('h:mma')}
                       </p>
@@ -104,10 +103,12 @@ const SwapHistoryTable = ({
                             />
                           </div>
                           <div>
-                            <p className="mb-1.5 whitespace-nowrap leading-none">{`${trimDecimals(
-                              swap_in_amount,
-                              inDecimals
-                            )} ${swap_in_symbol}`}</p>
+                            <p className="mb-1.5 whitespace-nowrap leading-none">
+                              {`${trimDecimals(swap_in_amount, inDecimals)}`}
+                              <span className="ml-1 font-body tracking-wide">
+                                {swap_in_symbol}
+                              </span>
+                            </p>
                             <p className="text-xs leading-none text-th-fgd-3">
                               {formatFixedDecimals(swap_in_price_usd, true)}
                               <span className="mx-1 text-th-fgd-4">|</span>
@@ -131,10 +132,12 @@ const SwapHistoryTable = ({
                             />
                           </div>
                           <div>
-                            <p className="mb-1.5 whitespace-nowrap leading-none">{`${trimDecimals(
-                              swap_out_amount,
-                              outDecimals
-                            )} ${swap_out_symbol}`}</p>
+                            <p className="mb-1.5 whitespace-nowrap leading-none">
+                              {`${trimDecimals(swap_out_amount, outDecimals)}`}
+                              <span className="ml-1 font-body tracking-wide">
+                                {swap_out_symbol}
+                              </span>
+                            </p>
                             <p className="text-xs leading-none text-th-fgd-3">
                               {formatFixedDecimals(swap_out_price_usd, true)}
                               <span className="mx-1 text-th-fgd-4">|</span>
@@ -149,7 +152,12 @@ const SwapHistoryTable = ({
                     </td>
                     <td>
                       <div className="flex flex-col text-right">
-                        <p>{borrowAmount}</p>
+                        <p>
+                          {borrowAmount}
+                          <span className="ml-1 font-body tracking-wide">
+                            {swap_in_symbol}
+                          </span>
+                        </p>
                       </div>
                     </td>
                     <td>

components/TokenList.tsx

@@ -82,8 +82,8 @@ const TokenList = () => {
   }, [connected])
 
   return (
-    <ContentBox hideBorder hidePadding className="mt-0 md:-mt-10">
-      <div className="mb-6 flex items-center justify-end">
+    <ContentBox hideBorder hidePadding className="-mt-[53px]">
+      <div className="mb-10 flex items-center justify-end pr-0 md:mb-6 md:pr-6">
         <Switch
           className="text-th-fgd-3"
           checked={showZeroBalances}

components/account/AccountTabs.tsx

@@ -3,6 +3,7 @@ import mangoStore from '@store/mangoStore'
 import TabButtons from '../shared/TabButtons'
 import TokenList from '../TokenList'
 import SwapHistoryTable from '../SwapHistoryTable'
+import { useRouter } from 'next/router'
 
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
@@ -10,6 +11,7 @@ const AccountTabs = () => {
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
   const tradeHistory = mangoStore((s) => s.mangoAccount.stats.tradeHistory.data)
   const loading = mangoStore((s) => s.mangoAccount.stats.tradeHistory.loading)
+  const { pathname } = useRouter()
 
   useEffect(() => {
     if (mangoAccount) {
@@ -24,7 +26,8 @@ const AccountTabs = () => {
           activeValue={activeTab}
           onChange={(v) => setActiveTab(v)}
           values={['balances', 'swap:swap-history']}
-          large
+          showBorders={pathname !== '/'}
+          rounded={pathname === '/'}
         />
       </div>
       {activeTab === 'balances' ? (

components/shared/TabButtons.tsx

@@ -3,43 +3,37 @@ import { FunctionComponent } from 'react'
 
 interface TabButtonsProps {
   activeValue: string
-  className?: string
   onChange: (x: string) => void
   values: Array<any>
-  large?: boolean
+  showBorders?: boolean
+  rounded?: boolean
 }
 
 const TabButtons: FunctionComponent<TabButtonsProps> = ({
   activeValue,
-  className,
   values,
   onChange,
-  large,
+  showBorders = false,
+  rounded = false,
 }) => {
   const { t } = useTranslation(['common', 'swap'])
 
   return (
-    <div className="flex w-max space-x-8">
+    <div
+      className={`flex bg-th-bkg-1 text-th-fgd-4 ${
+        showBorders ? 'md:border-b md:border-th-bkg-3' : ''
+      }`}
+    >
       {values.map((v, i) => (
-        <div className="relative" key={v + i}>
-          <div
-            className={`absolute top-9 h-[2px] w-full bg-th-primary transition-all duration-200 ease-in`}
-            style={
-              v === activeValue
-                ? { transform: 'scale3d(1,1,1)', opacity: 1 }
-                : { transform: 'scale3d(0,1,1)', opacity: 0 }
-            }
-          />
+        <div key={v + i}>
           <button
-            className={`${className} relative cursor-pointer rounded-md text-center font-bold ${
-              large ? 'text-xl' : 'text-base'
-            } 
-              ${
-                v === activeValue
-                  ? `text-th-fgd-1`
-                  : `text-th-fgd-4 md:hover:text-th-fgd-1`
-              }
-            `}
+            className={`default-transition rounded-md px-6 py-4 font-bold ${
+              !rounded ? 'md:rounded-none' : ''
+            } ${showBorders ? 'md:border-r md:border-th-bkg-3' : ''} ${
+              v === activeValue
+                ? 'bg-th-bkg-2 text-th-primary'
+                : 'hover:cursor-pointer hover:text-th-fgd-2'
+            }`}
             key={`${v}${i}`}
             onClick={() => onChange(v)}
           >

components/swap/SwapForm.tsx

@@ -200,7 +200,7 @@ const SwapForm = () => {
       // showBackground
       className="relative overflow-hidden rounded md:rounded-none md:border-r-0 md:border-t-0 md:border-b-0"
     >
-      <div className="p-5 pt-3">
+      <div className="p-6 pt-3">
         <Transition
           className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
           show={showConfirm}
@@ -388,7 +388,7 @@ const SwapForm = () => {
       {/* {!!mangoAccount ? ( */}
       <div
         id="step-ten"
-        className={`border-t border-th-bkg-3 px-6  transition-all ${
+        className={`border-t border-th-bkg-3 bg-th-bkg-2 px-6 transition-all ${
           showHealthImpact ? 'max-h-40 py-4 ' : 'h-0'
         }`}
       >

components/swap/SwapPage.tsx

@@ -18,7 +18,7 @@ const SwapPage = () => {
       <div className="col-span-12 mt-2 space-y-6 border-th-bkg-3 md:col-span-6 md:mt-0 md:border-b lg:col-span-4">
         <Swap />
       </div>
-      <div className="col-span-12 p-2 pt-8 md:p-6">
+      <div className="col-span-12 mt-6 md:mt-0">
         <AccountTabs />
       </div>
     </div>

components/trade/BalanceAndOpenOrders.tsx

@@ -1,6 +1,7 @@
 import { Serum3Side } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
 import SideBadge from '@components/shared/SideBadge'
+import TabButtons from '@components/shared/TabButtons'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import { Order } from '@project-serum/serum/lib/market'
 import mangoStore from '@store/mangoStore'
@@ -27,22 +28,13 @@ const BalanceAndOpenOrders = () => {
 
   return (
     <div className="h-full overflow-y-scroll">
-      <div className="sticky top-0 flex select-none border-b border-th-bkg-3 bg-th-bkg-1 text-th-fgd-4">
-        {TABS.map((tab) => {
-          return (
-            <div
-              key={tab}
-              onClick={() => setSelectedTab(tab)}
-              className={`border-r border-th-bkg-3 px-4 py-4 font-bold ${
-                selectedTab === tab
-                  ? 'bg-th-bkg-2 text-th-primary'
-                  : 'hover:cursor-pointer hover:text-th-fgd-2'
-              }`}
-            >
-              {tab}
-            </div>
-          )
-        })}
+      <div className="sticky top-0">
+        <TabButtons
+          activeValue={selectedTab}
+          onChange={(tab: string) => setSelectedTab(tab)}
+          values={TABS}
+          showBorders
+        />
       </div>
       {selectedTab === 'Balances' ? <Balances /> : null}
       {selectedTab === 'Open Orders' ? <OpenOrders /> : null}