remove unnecessary emotion styling; use asyncawait for sleeps

components/ConnectWalletButton.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react'
-import styled from '@emotion/styled'
 import useMangoStore from '../stores/useMangoStore'
 import { Menu } from '@headlessui/react'
 import {
@@ -19,10 +18,6 @@ import { WalletIcon, ProfileIcon } from './icons'
 import AccountsModal from './AccountsModal'
 import { useEffect } from 'react'
 
-const StyledWalletTypeLabel = styled.div`
-  font-size: 0.65rem;
-`
-
 const ConnectWalletButton = () => {
   const wallet = useMangoStore((s) => s.wallet.current)
   const connected = useMangoStore((s) => s.wallet.connected)
@@ -105,9 +100,9 @@ const ConnectWalletButton = () => {
               <WalletIcon className="w-4 h-4 mr-2 fill-current" />
               <div>
                 <div className="mb-0.5 whitespace-nowrap">Connect Wallet</div>
-                <StyledWalletTypeLabel className="font-normal text-th-fgd-3 text-left leading-3 tracking-wider">
+                <div className="font-normal text-th-fgd-3 text-left leading-3 tracking-wider text-xxs">
                   {WALLET_PROVIDERS.find((p) => p.url === selectedWallet)?.name}
-                </StyledWalletTypeLabel>
+                </div>
               </div>
             </div>
           </button>

components/Input.tsx

@@ -1,9 +1,3 @@
-import styled from '@emotion/styled'
-
-const StyledInput = styled.input`
-  padding-bottom: 1px;
-`
-
 interface InputProps {
   type: string
   value: any
@@ -40,11 +34,11 @@ const Input = ({
           {prefix}
         </div>
       ) : null}
-      <StyledInput
+      <input
         type={type}
         value={value}
         onChange={onChange}
-        className={`${className} px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1 
+        className={`${className} pb-px px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1 
           border ${
             error ? 'border-th-red' : 'border-th-fgd-4'
           } default-transition hover:border-th-primary 

components/MarketCloseModal.tsx

@@ -6,7 +6,6 @@ import { notify } from '../utils/notifications'
 import Loading from './Loading'
 import { calculateTradePrice, sleep } from '../utils'
 import Modal from './Modal'
-// import useLocalStorageState from '../hooks/useLocalStorageState'
 
 interface MarketCloseModalProps {
   onClose: () => void
@@ -27,8 +26,6 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
   const config = useMangoStore.getState().selectedMarket.config
 
   const orderbook = orderBookRef.current
-  //   const [hideMarketCloseWarning, setHideMarketCloseWarning] =
-  //     useLocalStorageState('hideMarketCloseWarning', false)
   useEffect(
     () =>
       useMangoStore.subscribe(
@@ -91,9 +88,8 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
         type: 'error',
       })
     } finally {
-      sleep(500).then(() => {
-        actions.fetchMangoAccounts()
-      })
+      await sleep(500)
+      actions.fetchMangoAccounts()
       setSubmitting(false)
       onClose()
     }
@@ -115,16 +111,6 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
           Cancel
         </LinkButton>
       </div>
-      {/* <div className="pt-6">
-        <label className="cursor-pointer inline-flex items-center">
-          <input
-            type="checkbox"
-            checked={hideMarketCloseWarning}
-            onChange={() => setHideMarketCloseWarning(!hideMarketCloseWarning)}
-          />
-          <span className="ml-2 text-th-fgd-1">Don't show this again</span>
-        </label>
-      </div> */}
     </Modal>
   )
 }

components/MarketsModal.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-// import styled from '@emotion/styled'
 import Link from 'next/link'
 import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline'
 import { ChevronRightIcon } from '@heroicons/react/solid'
@@ -9,10 +8,6 @@ import useMangoStore from '../stores/useMangoStore'
 import { formatUsdValue } from '../utils'
 import { LinkButton } from './Button'
 
-// const StyledColumnHeader = styled.span`
-//   font-size: 0.6rem;
-// `
-
 const MarketsModal = ({
   isOpen,
   markets,

components/TradeForm.tsx

@@ -293,10 +293,9 @@ export default function TradeForm() {
         type: 'error',
       })
     } finally {
-      sleep(500).then(() => {
-        actions.reloadMangoAccount()
-        actions.updateOpenOrders()
-      })
+      await sleep(500)
+      actions.reloadMangoAccount()
+      actions.updateOpenOrders()
       setSubmitting(false)
     }
   }

components/UserInfo.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
 import useMangoStore from '../stores/useMangoStore'
 import { useOpenOrders } from '../hooks/useOpenOrders'
-// import usePerpPositions from '../hooks/usePerpPositions'
+import usePerpPositions from '../hooks/usePerpPositions'
 import FloatingElement from './FloatingElement'
 import OpenOrdersTable from './OpenOrdersTable'
 import BalancesTable from './BalancesTable'
@@ -18,13 +17,9 @@ const TABS = [
   'Trade History',
 ]
 
-const StyledAlertCount = styled.span`
-  font-size: 0.6rem;
-`
-
 const UserInfoTabs = ({ activeTab, setActiveTab }) => {
   const openOrders = useOpenOrders()
-  // const perpPositions = usePerpPositions()
+  const perpPositions = usePerpPositions()
   const handleTabChange = (tabName) => {
     setActiveTab(tabName)
   }
@@ -67,10 +62,9 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
                 {tabName === 'Open Orders' && openOrders?.length > 0 ? (
                   <Count count={openOrders?.length} />
                 ) : null}
-                {/* Add back when more than one perp market */}
-                {/* {tabName === 'Perp Positions' && perpPositions?.length > 0 ? (
+                {tabName === 'Perp Positions' && perpPositions?.length > 0 ? (
                   <Count count={perpPositions?.length} />
-                ) : null} */}
+                ) : null}
               </a>
             ))}
           </nav>
@@ -82,9 +76,9 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
 
 const Count = ({ count }) => (
   <div className="absolute -top-2 -right-2 z-20">
-    <StyledAlertCount className="h-4 p-1 bg-th-bkg-4 inline-flex rounded-lg flex items-center justify-center text-th-fgd-2">
+    <span className="h-4 p-1 bg-th-bkg-4 inline-flex rounded-lg items-center justify-center text-th-fgd-2 text-xxs">
       {count}
-    </StyledAlertCount>
+    </span>
   </div>
 )
 

tailwind.config.js

@@ -18,6 +18,9 @@ module.exports = {
       cursor: {
         help: 'help',
       },
+      fontSize: {
+        xxs: '.65rem',
+      },
       colors: {
         'light-theme': {
           orange: {