misc styling

components/TokenList.tsx

@@ -466,7 +466,7 @@ const ActionsMenu = ({
               src={`/icons/${bank.name.toLowerCase()}.svg`}
             />
           </div>
-          <p>{bank.name}</p>
+          <p className="font-body tracking-wide">{bank.name}</p>
         </div>
         <LinkButton
           className="w-full text-left"

components/swap/SwapTokenChart.tsx

@@ -112,8 +112,8 @@ const CustomizedLabel = ({
         dy={value === min ? 16 : -8}
         fill={theme === 'Light' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.7)'}
         fontSize={10}
-        fontFamily="Roboto Mono"
         textAnchor={x && y && x > width / 3 ? 'end' : 'start'}
+        className="font-mono"
       >
         {formatFixedDecimals(value)}
       </Text>
@@ -268,8 +268,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 <>
                   <div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
                     <FlipNumbers
-                      height={40}
-                      width={26}
+                      height={48}
+                      width={32}
                       play
                       numbers={formatFixedDecimals(mouseData['price'])}
                     />
@@ -285,10 +285,10 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 </>
               ) : (
                 <>
-                  <div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
+                  <div className="mb-1 flex flex-col text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
                     <FlipNumbers
-                      height={40}
-                      width={26}
+                      height={48}
+                      width={32}
                       play
                       numbers={formatFixedDecimals(
                         chartData[chartData.length - 1]['price']

components/trade/AdvancedMarketHeader.tsx

@@ -27,7 +27,7 @@ const MarketSelectDropdown = () => {
     <Popover>
       {({ close, open }) => (
         <div className="relative flex flex-col overflow-visible">
-          <Popover.Button className="flex w-full items-center hover:text-th-primary">
+          <Popover.Button className="default-transition flex w-full items-center hover:text-th-primary">
             <div className="text-xl font-bold md:text-base">
               {selectedMarket?.name || DEFAULT_MARKET_NAME}
             </div>

components/trade/AdvancedTradeForm.tsx

@@ -234,13 +234,13 @@ const AdvancedTradeForm = () => {
           </div>
         </div>
       </div>
-      <div className="flex">
+      <div className="mt-4 flex">
         <SpotSlider />
       </div>
-      <div className="mt-5 flex flex-wrap px-5">
+      <div className="flex flex-wrap px-5">
         {tradeForm.tradeType === 'Limit' ? (
           <div className="flex">
-            <div className="mr-4 ">
+            <div className="mr-4 mt-4">
               <Tooltip
                 className="hidden md:block"
                 delay={250}
@@ -255,7 +255,7 @@ const AdvancedTradeForm = () => {
                 </Checkbox>
               </Tooltip>
             </div>
-            <div className="mr-4 ">
+            <div className="mr-4 mt-4">
               <Tooltip
                 className="hidden md:block"
                 delay={250}
@@ -274,7 +274,7 @@ const AdvancedTradeForm = () => {
             </div>
           </div>
         ) : null}
-        <div className="">
+        <div className="mt-4">
           <Tooltip
             delay={250}
             placement="left"
@@ -289,7 +289,7 @@ const AdvancedTradeForm = () => {
           </Tooltip>
         </div>
       </div>
-      <div className="mt-5 flex px-4">
+      <div className="mt-6 flex px-4">
         <Button
           onClick={handlePlaceOrder}
           className={`flex w-full items-center justify-center text-white ${
@@ -298,7 +298,7 @@ const AdvancedTradeForm = () => {
               : 'bg-th-red-dark md:hover:bg-th-red'
           }`}
           disabled={false}
-          size="medium"
+          size="large"
         >
           <span className="capitalize">Place {tradeForm.side} Order</span>
         </Button>

components/trade/SpotSlider.tsx

@@ -39,7 +39,7 @@ const SpotSlider = () => {
   }, [])
 
   return (
-    <div className="mt-4 w-full px-4">
+    <div className="w-full px-4">
       <LeverageSlider
         amount={0}
         leverageMax={leverageMax}