use tab component orderbook and trade form

components/shared/TabButtons.tsx

@@ -3,10 +3,11 @@ import { FunctionComponent } from 'react'
 
 interface TabButtonsProps {
   activeValue: string
-  onChange: (x: string) => void
+  onChange: (x: any) => void
   values: Array<any>
   showBorders?: boolean
   rounded?: boolean
+  fillWidth?: boolean
 }
 
 const TabButtons: FunctionComponent<TabButtonsProps> = ({
@@ -15,6 +16,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
   onChange,
   showBorders = false,
   rounded = false,
+  fillWidth = false,
 }) => {
   const { t } = useTranslation(['common', 'swap'])
 
@@ -25,9 +27,9 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
       }`}
     >
       {values.map((v, i) => (
-        <div key={v + i}>
+        <div className={fillWidth ? 'flex-1' : ''} key={v + i}>
           <button
-            className={`default-transition h-12 px-6 font-bold ${
+            className={`default-transition h-12 w-full px-6 font-bold ${
               rounded ? 'rounded-md' : 'rounded-none'
             } ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
               v === activeValue

components/trade/AdvancedTradeForm.tsx

@@ -5,6 +5,7 @@ import {
 } from '@blockworks-foundation/mango-v4'
 import Checkbox from '@components/forms/Checkbox'
 import Button from '@components/shared/Button'
+import TabButtons from '@components/shared/TabButtons'
 import Tooltip from '@components/shared/Tooltip'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
@@ -136,28 +137,12 @@ const AdvancedTradeForm = () => {
 
   return (
     <div>
-      <div className="grid select-none grid-cols-2 justify-between border-b border-th-bkg-3 text-base">
-        <div
-          onClick={() => setTradeType('Limit')}
-          className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
-            tradeForm.tradeType === 'Limit'
-              ? 'bg-th-bkg-2 text-th-primary'
-              : 'text-th-fgd-4 hover:text-th-fgd-2'
-          }`}
-        >
-          Limit
-        </div>
-        <div
-          onClick={() => setTradeType('Market')}
-          className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
-            tradeForm.tradeType === 'Market'
-              ? 'bg-th-bkg-2 text-th-primary'
-              : 'text-th-fgd-4 hover:text-th-fgd-2'
-          }`}
-        >
-          Market
-        </div>
-      </div>
+      <TabButtons
+        activeValue={tradeForm.tradeType}
+        onChange={(tab: 'Limit' | 'Market') => setTradeType(tab)}
+        values={['Limit', 'Market']}
+        fillWidth
+      />
       <div className="mt-6 px-4">
         <div
           className={`relative mb-3 pb-1 md:-mt-2.5 md:border-b md:border-th-bkg-3`}

components/trade/OrderbookAndTrades.tsx

@@ -1,3 +1,4 @@
+import TabButtons from '@components/shared/TabButtons'
 import { useState } from 'react'
 import Orderbook from './Orderbook'
 import RecentTrades from './RecentTrades'
@@ -6,27 +7,13 @@ const OrderbookAndTrades = () => {
   const [activeTab, setActiveTab] = useState('book')
   return (
     <div className="hide-scroll h-full">
-      <div className="grid h-[49px] select-none grid-cols-2 items-center justify-between border-b border-th-bkg-3 text-base">
-        <div
-          onClick={() => setActiveTab('book')}
-          className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
-            activeTab === 'book'
-              ? 'bg-th-bkg-2 text-th-primary'
-              : 'text-th-fgd-4 hover:text-th-fgd-2'
-          }`}
-        >
-          Book
-        </div>
-        <div
-          onClick={() => setActiveTab('trades')}
-          className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
-            activeTab === 'trades'
-              ? 'bg-th-bkg-2 text-th-primary'
-              : 'text-th-fgd-4 hover:text-th-fgd-2'
-          }`}
-        >
-          Trades
-        </div>
+      <div className="border-b border-r border-th-bkg-3">
+        <TabButtons
+          activeValue={activeTab}
+          onChange={(tab: string) => setActiveTab(tab)}
+          values={['book', 'trades']}
+          fillWidth
+        />
       </div>
       <div className={`h-full ${activeTab === 'book' ? 'visible' : 'hidden'}`}>
         <Orderbook />

public/locales/en/common.json

@@ -15,6 +15,7 @@
   "available-balance": "Available Balance",
   "balance": "Balance",
   "balances": "Balances",
+  "book": "Book",
   "borrow": "Borrow",
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
@@ -91,6 +92,7 @@
   "total-deposit-value": "Total Deposit Value",
   "total-interest-value": "Total Interest Value",
   "trade": "Trade",
+  "trades": "Trades",
   "trade-history": "Trade History",
   "transaction": "Transaction",
   "unavailable": "Unavailable",

public/locales/es/common.json

@@ -15,6 +15,7 @@
   "available-balance": "Available Balance",
   "balance": "Balance",
   "balances": "Balances",
+  "book": "Book",
   "borrow": "Borrow",
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
@@ -91,6 +92,7 @@
   "total-deposit-value": "Total Deposit Value",
   "total-interest-value": "Total Interest Value",
   "trade": "Trade",
+  "trades": "Trades",
   "trade-history": "Trade History",
   "transaction": "Transaction",
   "unavailable": "Unavailable",

public/locales/zh/common.json

@@ -15,6 +15,7 @@
   "available-balance": "Available Balance",
   "balance": "Balance",
   "balances": "Balances",
+  "book": "Book",
   "borrow": "Borrow",
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
@@ -91,6 +92,7 @@
   "total-deposit-value": "Total Deposit Value",
   "total-interest-value": "Total Interest Value",
   "trade": "Trade",
+  "trades": "Trades",
   "trade-history": "Trade History",
   "transaction": "Transaction",
   "unavailable": "Unavailable",

public/locales/zh_tw/common.json

@@ -15,6 +15,7 @@
   "available-balance": "Available Balance",
   "balance": "Balance",
   "balances": "Balances",
+  "book": "Book",
   "borrow": "Borrow",
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
@@ -91,6 +92,7 @@
   "total-deposit-value": "Total Deposit Value",
   "total-interest-value": "Total Interest Value",
   "trade": "Trade",
+  "trades": "Trades",
   "trade-history": "Trade History",
   "transaction": "Transaction",
   "unavailable": "Unavailable",