icon button sizes

components/TokenList.tsx

@@ -26,7 +26,7 @@ import Tooltip from './shared/Tooltip'
 import { formatTokenSymbol } from 'utils/tokens'
 
 const TokenList = () => {
-  const { t } = useTranslation(['common', 'trade'])
+  const { t } = useTranslation(['common', 'token', 'trade'])
   const { connected } = useWallet()
   const [showZeroBalances, setShowZeroBalances] = useState(true)
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
@@ -81,7 +81,7 @@ const TokenList = () => {
 
   return (
     <ContentBox hideBorder hidePadding className="md:-mt-[36px]">
-      <div className="flex items-center justify-end md:mb-5">
+      <div className="flex items-center justify-end md:mb-4">
         <div className="flex w-full items-center justify-between border-b border-th-bkg-3 py-3 px-6 md:w-auto md:border-0 md:py-0">
           {!showTableView ? <p>{t('show-zero-balances')}</p> : null}
           <Switch
@@ -95,7 +95,7 @@ const TokenList = () => {
         </div>
       </div>
       {showTableView ? (
-        <table className="-mt-1 min-w-full">
+        <table className="min-w-full">
           <thead>
             <tr>
               <th className="text-left">{t('token')}</th>
@@ -231,7 +231,10 @@ const TokenList = () => {
                       id={i === 0 ? 'account-step-ten' : ''}
                     >
                       <ActionsMenu bank={bank} mangoAccount={mangoAccount} />
-                      <IconButton onClick={() => goToTokenPage(bank)}>
+                      <IconButton
+                        onClick={() => goToTokenPage(bank)}
+                        size="small"
+                      >
                         <ChevronRightIcon className="h-5 w-5" />
                       </IconButton>
                     </div>
@@ -320,7 +323,10 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
         </div>
         <div className="flex items-center space-x-3">
           <ActionsMenu bank={bank} mangoAccount={mangoAccount} />
-          <IconButton onClick={() => setShowTokenDetails((prev) => !prev)}>
+          <IconButton
+            onClick={() => setShowTokenDetails((prev) => !prev)}
+            size="small"
+          >
             <ChevronDownIcon
               className={`${
                 showTokenDetails ? 'rotate-180' : 'rotate-360'

components/profile/EditProfileForm.tsx

@@ -128,7 +128,7 @@ const EditProfileForm = ({
       <div className="my-6 flex justify-center">
         <div className="relative ">
           <IconButton
-            className="absolute -top-1 -right-1"
+            className="absolute -top-2 -right-2"
             size="small"
             onClick={onEditProfileImage}
           >

components/shared/Button.tsx

@@ -75,7 +75,7 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
         size === 'large'
           ? 'h-12 w-12'
           : size === 'small'
-          ? 'h-7 w-7'
+          ? 'h-8 w-8'
           : 'h-10 w-10'
       } default-transition items-center justify-center rounded-full ${
         hideBg ? 'md:hover:text-th-primary' : 'bg-th-bkg-4 md:hover:bg-th-bkg-3'

components/shared/IconDropMenu.tsx

@@ -41,7 +41,7 @@ const IconDropMenu = ({
         <div className="relative">
           <Popover.Button
             className={`flex ${
-              large ? 'h-12 w-12' : 'h-10 w-10'
+              large ? 'h-12 w-12' : 'h-8 w-8'
             } default-transition items-center justify-center rounded-full border border-th-fgd-4 md:hover:border-th-bkg-4 ${
               theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
             } md:hover:text-th-fgd-1 ${

components/stats/SpotMarketsTable.tsx

@@ -29,7 +29,7 @@ const SpotMarketsTable = () => {
   return (
     <ContentBox hideBorder hidePadding>
       {showTableView ? (
-        <table className="-mt-1 min-w-full">
+        <table className="min-w-full">
           <thead>
             <tr>
               <th className="text-left">{t('market')}</th>

components/stats/TokenStats.tsx

@@ -98,7 +98,7 @@ const TokenStats = () => {
         </div>
       </div>
       {showTableView ? (
-        <table className="-mt-1 min-w-full">
+        <table className="min-w-full">
           <thead>
             <tr>
               <th className="text-left">{t('token')}</th>
@@ -214,7 +214,10 @@ const TokenStats = () => {
                   </td>
                   <td>
                     <div className="flex justify-end">
-                      <IconButton onClick={() => goToTokenPage(bank)}>
+                      <IconButton
+                        onClick={() => goToTokenPage(bank)}
+                        size="small"
+                      >
                         <ChevronRightIcon className="h-5 w-5" />
                       </IconButton>
                     </div>

components/swap/JupiterRouteInfo.tsx

@@ -226,7 +226,6 @@ const JupiterRouteInfo = ({
           className="absolute mr-3 text-th-fgd-2"
           onClick={onClose}
           size="small"
-          hideBg
         >
           <ArrowLeftIcon className="h-5 w-5" />
         </IconButton>

components/swap/SwapForm.tsx

@@ -242,7 +242,7 @@ const SwapForm = () => {
           <h2 className="text-base text-th-fgd-2">{t('swap')}</h2>
           <div id="swap-step-one">
             <IconButton
-              className="text-th-fgd-3"
+              className="-mr-2 text-th-fgd-3"
               hideBg
               onClick={() => setShowSettings(true)}
               size="small"