hide settle button and small styling updates

components/BalancesTable.tsx

@@ -6,6 +6,9 @@ import Button from '../components/Button'
 import { notify } from '../utils/notifications'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import useMarket from '../hooks/useMarket'
+import { ElementTitle } from './styles'
+import { InformationCircleIcon } from '@heroicons/react/outline'
+import Tooltip from './Tooltip'
 
 const BalancesTable = () => {
   const balances = useBalances()
@@ -52,15 +55,29 @@ const BalancesTable = () => {
     <div className={`flex flex-col py-6`}>
       <div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
         <div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
-          {/* balances.length && balances.find((balance) => balance.unsettled > 0) */}
+          <ElementTitle>
-          {balances.length ? (
+            <div className="pr-1">{marketName.split('/')[0]}</div>
+            <span className="text-th-fgd-4">/</span>
+            <div className="pl-1">{marketName.split('/')[1]}</div>
+          </ElementTitle>
+          {balances.length &&
+          (balances.find(({ unsettled }) => unsettled > 0) ||
+            balances.find(
+              ({ borrows, marginDeposits }) => borrows > 0 && marginDeposits > 0
+            )) ? (
             <div
               className={`flex items-center justify-between p-4 mb-2 rounded-md bg-th-bkg-1`}
             >
-              <div>Balances for {marketName}</div>
+              <div className="flex items-center text-fgd-1 font-semibold pr-4">
-              {/* <div className="text-fgd-1 font-semibold pr-4">
+                You have unsettled funds
-                You have an unsettled balance
+                <Tooltip content="If you have borrows, settling will reduce any deposits you have by the amount you have borrowed and any unsettled funds from trades will be added to your account.">
-              </div> */}
+                  <div>
+                    <InformationCircleIcon
+                      className={`h-5 w-5 ml-2 text-th-primary cursor-help`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
               <Button onClick={handleSettleAll}>Settle All</Button>
             </div>
           ) : null}

components/MarginBalances.tsx

@@ -156,37 +156,39 @@ const AddressTooltip = ({
     <>
       {owner && marginAccount ? (
         <>
-          <div className={`flex flex-nowrap`}>
+          <div className={`flex flex-nowrap text-th-fgd-3`}>
             Margin Account:
             <a
+              className="text-th-fgd-1 default-transition hover:text-th-primary"
               href={'https://explorer.solana.com/address/' + marginAccount}
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className={`ml-4 flex`}>
+              <div className={`ml-2 flex items-center`}>
-                <ExternalLinkIcon
+                <span className={`underline`}>
-                  className={`h-5 w-5 mr-1 text-mango-yellow`}
+                  {marginAccount.toString().substr(0, 5) +
-                />
+                    '...' +
-                <span className={`text-mango-yellow hover:opacity-50`}>
+                    marginAccount.toString().substr(-5)}
-                  {marginAccount}
                 </span>
+                <ExternalLinkIcon className={`h-4 w-4 ml-1`} />
               </div>
             </a>
           </div>
-          <div className={`flex mt-2`}>
+          <div className={`flex flex-nowrap text-th-fgd-3 pt-2`}>
             Account Owner:
             <a
+              className="text-th-fgd-1 default-transition hover:text-th-primary"
               href={'https://explorer.solana.com/address/' + owner}
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className={`ml-4 flex`}>
+              <div className={`ml-2 flex items-center`}>
-                <ExternalLinkIcon
+                <span className={`underline`}>
-                  className={`h-5 w-5 mr-1 text-mango-yellow`}
+                  {owner.toString().substr(0, 5) +
-                />
+                    '...' +
-                <span className={`text-mango-yellow hover:opacity-50`}>
+                    owner.toString().substr(-5)}
-                  {owner}
                 </span>
+                <ExternalLinkIcon className={`h-4 w-4 ml-1`} />
               </div>
             </a>
           </div>

components/MarketSelect.tsx

@@ -18,7 +18,7 @@ const MarketSelect = () => {
         {/* <div className="text-xs text-th-fgd-4 font-semibold mr-2">MARKETS</div> */}
         {Object.entries(spotMarkets).map(([name, address]) => (
           <div
-            className={`px-2 py-1 mr-2 rounded-md cursor-pointer default-transition bg-th-bkg-2
+            className={`flex px-2 py-1 mr-2 rounded-md cursor-pointer default-transition bg-th-bkg-2
               ${
                 selectedMarket.name === name
                   ? `text-th-primary`
@@ -28,7 +28,9 @@ const MarketSelect = () => {
             onClick={() => handleChange(name)}
             key={address as string}
           >
-            {name}
+            <div className="pr-1">{name.split('/')[0]}</div>
+            <span className="text-th-fgd-4">/</span>
+            <div className="pl-1">{name.split('/')[1]}</div>
           </div>
         ))}
       </div>

components/Tooltip.tsx

@@ -11,7 +11,7 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ children, content }) => {
     <Tippy
       animation="scale"
       appendTo={() => document.body}
-      maxWidth="none"
+      maxWidth="30rem"
       interactive
       content={
         <div className="rounded p-3 text-sm bg-th-bkg-3 text-th-fgd-2 outline-none focus:outline-none">

components/TradeForm.tsx

@@ -331,6 +331,9 @@ export default function TradeForm() {
             )
           ) : (
             <>
+              <Button disabled className="flex-grow">
+                Connect Wallet
+              </Button>
               {/* <div className="flex justify-between border border-th-fgd-4 rounded-md w-full">
                 <Button
                   onClick={() => wallet.connect()}

components/WalletSelect.tsx

@@ -26,7 +26,7 @@ export default function WalletSelect({ isPrimary = false }) {
       {({ open }) => (
         <>
           <Menu.Button
-            className={`flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 ${
+            className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 ${
               isPrimary
                 ? 'px-3 hover:bg-th-primary'
                 : 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'