Merge pull request #333 from blockworks-foundation/align-icons

align icons to side nav

components/AccountInfo.tsx

@@ -7,8 +7,11 @@ import {
   ZERO_I80F48,
 } from '@blockworks-foundation/mango-client'
 import { useCallback, useState } from 'react'
-import { ExclamationIcon, ExternalLinkIcon } from '@heroicons/react/solid'
+import {
-import { BellIcon } from '@heroicons/react/outline'
+  BellIcon,
+  ExclamationIcon,
+  ExternalLinkIcon,
+} from '@heroicons/react/solid'
 import useMangoStore, { MNGO_INDEX } from '../stores/useMangoStore'
 import { abbreviateAddress, formatUsdValue, usdFormatter } from '../utils'
 import { notify } from '../utils/notifications'

components/AccountNameModal.tsx

@@ -3,7 +3,7 @@ import useMangoStore from '../stores/useMangoStore'
 import {
   ExclamationCircleIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import Input, { Label } from './Input'
 import Button from './Button'
 import Modal from './Modal'
@@ -83,7 +83,7 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
         <p className="flex items-center justify-center">
           {t('edit-nickname')}
           <Tooltip content={t('tooltip-name-onchain')}>
-            <InformationCircleIcon className="ml-2 h-5 w-5 text-th-primary" />
+            <InformationCircleIcon className="ml-2 h-5 w-5 text-th-fgd-4" />
           </Tooltip>
         </p>
       </Modal.Header>

components/AccountsModal.tsx

@@ -5,7 +5,7 @@ import {
   HeartIcon,
   PlusCircleIcon,
   UsersIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import useMangoStore from '../stores/useMangoStore'
 import { MangoAccount, MangoGroup } from '@blockworks-foundation/mango-client'
 import { abbreviateAddress, formatUsdValue } from '../utils'

components/AlphaModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { CheckCircleIcon } from '@heroicons/react/outline'
+import { CheckCircleIcon } from '@heroicons/react/solid'
 import Modal from './Modal'
 import Button from './Button'
 import useLocalStorageState from '../hooks/useLocalStorageState'

components/BalancesTable.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'
 import useMangoStore from '../stores/useMangoStore'
 import Button, { LinkButton } from '../components/Button'
 import { notify } from '../utils/notifications'
-import { ArrowSmDownIcon, ExclamationIcon } from '@heroicons/react/outline'
+import { ArrowSmDownIcon, ExclamationIcon } from '@heroicons/react/solid'
 import { Market } from '@project-serum/serum'
 import { getTokenBySymbol } from '@blockworks-foundation/mango-client'
 import Loading from './Loading'

components/CloseAccountModal.tsx

@@ -6,10 +6,7 @@ import {
   useState,
 } from 'react'
 import useMangoStore, { MNGO_INDEX } from '../stores/useMangoStore'
-import {
+import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-} from '@heroicons/react/outline'
 import Button from './Button'
 import Modal from './Modal'
 import { ElementTitle } from './styles'

components/ConnectWalletButton.tsx

@@ -12,7 +12,7 @@ import {
   CurrencyDollarIcon,
   LogoutIcon,
   UserCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import { notify } from 'utils/notifications'
 import { abbreviateAddress } from 'utils'
 import useMangoStore from 'stores/useMangoStore'

components/CreateAlertModal.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react'
-import { PlusCircleIcon, TrashIcon } from '@heroicons/react/outline'
+import { PlusCircleIcon, TrashIcon } from '@heroicons/react/solid'
 import Modal from './Modal'
 import Input, { Label } from './Input'
 import { ElementTitle } from './styles'

components/DelegateModal.tsx

@@ -4,7 +4,7 @@ import {
   ExclamationCircleIcon,
   XIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import Input, { Label } from './Input'
 import Tooltip from './Tooltip'
 import Button, { IconButton } from './Button'
@@ -119,7 +119,7 @@ const DelegateModal: FunctionComponent<DelegateModalProps> = ({
                 </div>
               }
             >
-              <InformationCircleIcon className="ml-2 h-5 w-5 text-th-primary" />
+              <InformationCircleIcon className="ml-2 h-5 w-5 text-th-fgd-4" />
             </Tooltip>
           </ElementTitle>
         </div>

components/DepositModal.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react'
-import { ExclamationCircleIcon } from '@heroicons/react/outline'
+import { ExclamationCircleIcon } from '@heroicons/react/solid'
 import Modal from './Modal'
 import Input, { Label } from './Input'
 import AccountSelect from './AccountSelect'

components/FavoritesShortcutBar.tsx

@@ -1,7 +1,6 @@
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import { FAVORITE_MARKETS_KEY } from './TradeNavMenu'
-import { StarIcon } from '@heroicons/react/solid'
+import { StarIcon, QuestionMarkCircleIcon } from '@heroicons/react/solid'
-import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
 import Link from 'next/link'

components/FloatingElement.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useCallback } from 'react'
-import { LinkIcon } from '@heroicons/react/outline'
+import { LinkIcon } from '@heroicons/react/solid'
 import useMangoStore from '../stores/useMangoStore'
 import { MoveIcon } from './icons'
 import EmptyState from './EmptyState'

components/GlobalNotification.tsx

@@ -3,7 +3,7 @@ import sumBy from 'lodash/sumBy'
 import useInterval from '../hooks/useInterval'
 import { CLUSTER, SECONDS } from '../stores/useMangoStore'
 import { useTranslation } from 'next-i18next'
-import { ExclamationIcon } from '@heroicons/react/outline'
+import { ExclamationIcon } from '@heroicons/react/solid'
 import { Connection } from '@solana/web3.js'
 
 const tpsAlertThreshold = 1000

components/InlineNotification.tsx

@@ -4,7 +4,7 @@ import {
   ExclamationCircleIcon,
   ExclamationIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 
 interface InlineNotificationProps {
   desc?: string | (() => string)
@@ -38,7 +38,7 @@ const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
       <ExclamationIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-orange" />
     ) : null}
     {type === 'info' ? (
-      <InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
+      <InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
     ) : null}
     <div>
       <div className="text-th-fgd-3">{title}</div>

components/JupiterForm.tsx

@@ -13,13 +13,14 @@ import { connectionSelector } from '../stores/selectors'
 import sortBy from 'lodash/sortBy'
 import sum from 'lodash/sum'
 import {
+  ChevronDownIcon,
+  SwitchHorizontalIcon,
   CogIcon,
   ExclamationCircleIcon,
   ExternalLinkIcon,
   InformationCircleIcon,
   SwitchVerticalIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
-import { ChevronDownIcon, SwitchHorizontalIcon } from '@heroicons/react/solid'
 import { abbreviateAddress } from '../utils'
 import SwapTokenSelect from './SwapTokenSelect'
 import { notify } from '../utils/notifications'
@@ -827,7 +828,7 @@ const JupiterForm: FunctionComponent = () => {
                           }
                           placement={'left'}
                         >
-                          <InformationCircleIcon className="ml-1.5 h-3.5 w-3.5 cursor-help text-th-primary" />
+                          <InformationCircleIcon className="ml-1.5 h-4 w-4 cursor-help text-th-fgd-4" />
                         </Tooltip>
                       </div>
                     </div>
@@ -894,7 +895,7 @@ const JupiterForm: FunctionComponent = () => {
                               }
                               placement={'left'}
                             >
-                              <InformationCircleIcon className="ml-1.5 h-3.5 w-3.5 cursor-help text-th-primary" />
+                              <InformationCircleIcon className="ml-1.5 h-4 w-4 cursor-help text-th-fgd-4" />
                             </Tooltip>
                           </div>
                           <div>

components/LeaderboardTable.tsx

@@ -7,7 +7,7 @@ import {
   ChartPieIcon,
   ExternalLinkIcon,
   TrendingUpIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import { getProfilePicture } from '@solflare-wallet/pfp'
 import useMangoStore from '../stores/useMangoStore'
 import { connectionSelector } from '../stores/selectors'

components/MarketDetails.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'next-i18next'
 import SwitchMarketDropdown from './SwitchMarketDropdown'
 import Tooltip from './Tooltip'
 import { useWallet } from '@solana/wallet-adapter-react'
-import { InformationCircleIcon } from '@heroicons/react/outline'
+import { InformationCircleIcon } from '@heroicons/react/solid'
 
 const OraclePrice = () => {
   const oraclePrice = useOraclePrice()
@@ -111,7 +111,7 @@ const MarketDetails = () => {
                         content={t('tooltip-funding')}
                         placement={'bottom'}
                       >
-                        <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-3 hover:cursor-help" />
+                        <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-4 hover:cursor-help" />
                       </Tooltip>
                     </div>
                     <div className="text-th-fgd-1 md:text-xs">
@@ -138,7 +138,7 @@ const MarketDetails = () => {
                         )} ${baseSymbol}`}
                         placement={'bottom'}
                       >
-                        <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-3 hover:cursor-help" />
+                        <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-4 hover:cursor-help" />
                       </Tooltip>
                     </div>
                   </div>

components/MarketMenuItem.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useRouter } from 'next/router'
-import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
+import { QuestionMarkCircleIcon } from '@heroicons/react/solid'
 import Link from 'next/link'
 import * as MonoIcons from './icons'
 import { initialMarket } from './SettingsModal'

components/MarketSelect.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { MenuIcon, PlusCircleIcon } from '@heroicons/react/outline'
+import { MenuIcon, PlusCircleIcon } from '@heroicons/react/solid'
 import MarketMenuItem from './MarketMenuItem'
 import { LinkButton } from './Button'
 import MarketsModal from './MarketsModal'

components/MarketsModal.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline'
+import { ChevronRightIcon, EyeIcon, EyeOffIcon } from '@heroicons/react/solid'
-import { ChevronRightIcon } from '@heroicons/react/solid'
 import Modal from './Modal'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import useMangoStore from '../stores/useMangoStore'

components/Modal.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Portal } from 'react-portal'
-import { XIcon } from '@heroicons/react/outline'
+import { XIcon } from '@heroicons/react/solid'
 
 const Modal: any = React.forwardRef<any, any>((props, ref) => {
   const {

components/NewAccount.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent, useState } from 'react'
 import {
   ExclamationCircleIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import Input, { Label } from './Input'
 import AccountSelect from './AccountSelect'
 import { ElementTitle } from './styles'
@@ -151,7 +151,7 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
           {t('account-name')}{' '}
           <span className="ml-1 text-th-fgd-3">{t('optional')}</span>
           <Tooltip content={t('tooltip-name-onchain')}>
-            <InformationCircleIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
+            <InformationCircleIcon className="ml-2 h-5 w-5 text-th-fgd-4" />
           </Tooltip>
         </Label>
         <Input

components/NftProfilePicModal.tsx

@@ -3,7 +3,7 @@ import { PublicKey } from '@solana/web3.js'
 import { notify } from 'utils/notifications'
 import useMangoStore from '../stores/useMangoStore'
 import { useWallet } from '@solana/wallet-adapter-react'
-import { PhotographIcon } from '@heroicons/react/outline'
+import { PhotographIcon } from '@heroicons/react/solid'
 import Modal from './Modal'
 import { ElementTitle } from './styles'
 import {

components/Notification.tsx

@@ -4,7 +4,7 @@ import {
   ExternalLinkIcon,
   InformationCircleIcon,
   XCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import useMangoStore, {
   CLIENT_TX_TIMEOUT,
   CLUSTER,

components/OpenOrdersTable.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { PencilIcon, TrashIcon, XIcon } from '@heroicons/react/outline'
+import { PencilIcon, TrashIcon, XIcon } from '@heroicons/react/solid'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import Button, { IconButton } from './Button'

components/PerpPositionsTable.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
-import { ExclamationIcon } from '@heroicons/react/outline'
+import { ExclamationIcon } from '@heroicons/react/solid'
 import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
 import useMangoStore from '../stores/useMangoStore'
 import { LinkButton } from '../components/Button'

components/ResetLayout.tsx

@@ -1,4 +1,4 @@
-import { TemplateIcon } from '@heroicons/react/outline'
+import { TemplateIcon } from '@heroicons/react/solid'
 import { defaultLayouts, GRID_LAYOUT_KEY } from './TradePageGrid'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import Tooltip from './Tooltip'

components/Settings.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { CogIcon } from '@heroicons/react/outline'
+import { CogIcon } from '@heroicons/react/solid'
 import SettingsModal from './SettingsModal'
 
 const Settings = () => {

components/SwapTokenInfo.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useEffect, useMemo, useState } from 'react'
-import { ExternalLinkIcon, EyeOffIcon } from '@heroicons/react/outline'
+import { ExternalLinkIcon, EyeOffIcon } from '@heroicons/react/solid'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { AreaChart, Area, XAxis, YAxis, Tooltip } from 'recharts'

components/SwapTokenInsights.tsx

@@ -6,7 +6,7 @@ import ButtonGroup from './ButtonGroup'
 import { numberCompacter, numberFormatter } from './SwapTokenInfo'
 import Button, { IconButton } from './Button'
 import Input from './Input'
-import { SearchIcon, XIcon } from '@heroicons/react/outline'
+import { SearchIcon, XIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 import { ExpandableRow } from './TableElements'
 

components/SwapTokenSelect.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo, useState, PureComponent, useEffect } from 'react'
-import { SearchIcon } from '@heroicons/react/outline'
+import { SearchIcon } from '@heroicons/react/solid'
 import Modal from './Modal'
 import { FixedSizeList } from 'react-window'
 import { Token } from '../@types/types'

components/SwitchMarketDropdown.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useCallback, useMemo, useRef, useState } from 'react'
 import { Popover, Transition } from '@headlessui/react'
-import { SearchIcon } from '@heroicons/react/outline'
+import { ChevronDownIcon, SearchIcon } from '@heroicons/react/solid'
-import { ChevronDownIcon } from '@heroicons/react/solid'
 import Input from './Input'
 import { useTranslation } from 'next-i18next'
 import MarketNavItem from './MarketNavItem'

components/TabButtons.tsx

@@ -1,5 +1,5 @@
 import * as MonoIcons from './icons'
-import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
+import { QuestionMarkCircleIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 
 const TabButtons = ({

components/TradeHistoryFilterModal.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useEffect, useMemo, useState } from 'react'
-import { RefreshIcon } from '@heroicons/react/outline'
+import { RefreshIcon } from '@heroicons/react/solid'
 import Input, { Label } from './Input'
 import Button, { LinkButton } from './Button'
 import Modal from './Modal'

components/TradeHistoryTable.tsx

@@ -28,7 +28,7 @@ import {
   InformationCircleIcon,
   RefreshIcon,
   SaveIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import { fetchHourlyPerformanceStats } from './account_page/AccountOverview'
 import useMangoStore from '../stores/useMangoStore'
 import Loading from './Loading'
@@ -190,7 +190,7 @@ const TradeHistoryTable = ({
                   </div>
                 }
               >
-                <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-pointer text-th-fgd-3" />
+                <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-pointer text-th-fgd-4" />
               </Tooltip>
             ) : null}
           </div>
@@ -245,7 +245,7 @@ const TradeHistoryTable = ({
                   <SaveIcon className={`mr-1.5 h-4 w-4`} />
                   {t('export-trades-csv')}
                   <Tooltip content={t('trade-export-disclaimer')}>
-                    <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-help text-th-fgd-3" />
+                    <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-help text-th-fgd-4" />
                   </Tooltip>
                 </a>
               </div>

components/UiLock.tsx

@@ -1,4 +1,4 @@
-import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
+import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/solid'
 import { Transition } from '@headlessui/react'
 import useMangoStore from '../stores/useMangoStore'
 import ResetLayout from './ResetLayout'

components/WithdrawModal.tsx

@@ -11,7 +11,7 @@ import Tooltip from './Tooltip'
 import {
   ExclamationCircleIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import Select from './Select'
 import { withdraw } from '../utils/mango'
 import {
@@ -384,7 +384,7 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                   <span>{t('borrow-funds')}</span>
                   <Tooltip content={t('tooltip-interest-charged')}>
                     <InformationCircleIcon
-                      className={`ml-2 h-5 w-5 cursor-help text-th-primary`}
+                      className={`ml-2 h-5 w-5 cursor-help text-th-fgd-4`}
                     />
                   </Tooltip>
                 </div>
@@ -508,7 +508,7 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                       {t('health-check')}
                       <Tooltip content={t('tooltip-after-withdrawal')}>
                         <InformationCircleIcon
-                          className={`ml-2 h-5 w-5 cursor-help text-th-primary`}
+                          className={`ml-2 h-5 w-5 cursor-help text-th-fgd-4`}
                         />
                       </Tooltip>
                     </div>

components/account_page/AccountFunding.tsx

@@ -23,7 +23,7 @@ const utc = require('dayjs/plugin/utc')
 dayjs.extend(utc)
 import { exportDataToCSV } from '../../utils/export'
 import Button from '../Button'
-import { SaveIcon } from '@heroicons/react/outline'
+import { SaveIcon } from '@heroicons/react/solid'
 import TabButtons from 'components/TabButtons'
 
 const QUOTE_DECIMALS = 6

components/account_page/AccountHistory.tsx

@@ -5,7 +5,7 @@ import {
   ExternalLinkIcon,
   InformationCircleIcon,
   SaveIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import {
   getMarketByBaseSymbolAndKind,
   getTokenBySymbol,
@@ -249,7 +249,7 @@ const LiquidationHistoryTable = ({ history, view }) => {
               </div>
             }
           >
-            <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-pointer text-th-fgd-3" />
+            <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-help text-th-fgd-4" />
           </Tooltip>
         </div>
         <Button
@@ -607,7 +607,7 @@ const HistoryTable = ({ history, view }) => {
               </div>
             }
           >
-            <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-pointer text-th-fgd-3" />
+            <InformationCircleIcon className="ml-1.5 h-5 w-5 cursor-help text-th-fgd-4" />
           </Tooltip>
         </div>
         <Button

components/account_page/AccountInterest.tsx

@@ -26,7 +26,7 @@ import useLocalStorageState from '../../hooks/useLocalStorageState'
 const utc = require('dayjs/plugin/utc')
 dayjs.extend(utc)
 import { exportDataToCSV } from '../../utils/export'
-import { SaveIcon } from '@heroicons/react/outline'
+import { SaveIcon } from '@heroicons/react/solid'
 import Button from '../Button'
 import TabButtons from 'components/TabButtons'
 

components/account_page/AccountOverviewStats.tsx

@@ -9,8 +9,7 @@ import {
   YAxis,
   Tooltip as ChartTooltip,
 } from 'recharts'
-import { ScaleIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon, ScaleIcon } from '@heroicons/react/solid'
-import { InformationCircleIcon } from '@heroicons/react/outline'
 import useDimensions from 'react-cool-dimensions'
 import { useTranslation } from 'next-i18next'
 import { ZERO_BN } from '@blockworks-foundation/mango-client'

components/account_page/AccountPerformance.tsx

@@ -12,7 +12,7 @@ import Chart from '../Chart'
 const utc = require('dayjs/plugin/utc')
 dayjs.extend(utc)
 import { exportDataToCSV } from '../../utils/export'
-import { SaveIcon } from '@heroicons/react/outline'
+import { SaveIcon } from '@heroicons/react/solid'
 import Button from '../Button'
 
 export const handleDustTicks = (v) =>

components/account_page/AccountPerformancePerToken.tsx

@@ -3,8 +3,6 @@ import dayjs from 'dayjs'
 import isEmpty from 'lodash/isEmpty'
 import { useTranslation } from 'next-i18next'
 import { LineChart, XAxis, YAxis, Line, Tooltip } from 'recharts'
-import { SaveIcon } from '@heroicons/react/outline'
-
 import useMangoStore from '../../stores/useMangoStore'
 import { numberCompactFormatter } from '../../utils/'
 import { exportDataToCSV } from '../../utils/export'
@@ -14,7 +12,7 @@ import Select from 'components/Select'
 import Checkbox from 'components/Checkbox'
 import ButtonGroup from 'components/ButtonGroup'
 import * as MonoIcons from '../icons'
-import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
+import { SaveIcon, QuestionMarkCircleIcon } from '@heroicons/react/solid'
 import { useTheme } from 'next-themes'
 import { CHART_COLORS } from './LongShortChart'
 

components/account_page/LongShortChart.tsx

@@ -1,7 +1,7 @@
 import { PieChart, Pie, Cell, Tooltip } from 'recharts'
 import { formatUsdValue, tokenPrecision } from 'utils'
 import * as MonoIcons from '../icons'
-import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
+import { QuestionMarkCircleIcon } from '@heroicons/react/solid'
 import { useTheme } from 'next-themes'
 
 export const CHART_COLORS = (theme) => {

components/account_page/MangoAccountLookup.tsx

@@ -3,7 +3,7 @@ import Button from 'components/Button'
 import Input from 'components/Input'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
-import { ExclamationCircleIcon } from '@heroicons/react/outline'
+import { ExclamationCircleIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 
 export const MangoAccountLookup = () => {

components/mobile/BottomBar.tsx

@@ -18,7 +18,7 @@ import {
   LightBulbIcon,
   SwitchHorizontalIcon,
   UserAddIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 
 const StyledBarItemLabel = ({ children, ...props }) => (
   <div style={{ fontSize: '0.6rem', lineHeight: 1 }} {...props}>

components/mobile/MobileTradePage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react'
 import { Disclosure } from '@headlessui/react'
 import dynamic from 'next/dynamic'
-import { XIcon } from '@heroicons/react/outline'
+import { XIcon } from '@heroicons/react/solid'
 import useMangoStore from '../../stores/useMangoStore'
 import { getWeights, PerpMarket } from '@blockworks-foundation/mango-client'
 import { CandlesIcon } from '../icons'

components/mobile/SwipeableTabs.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/outline'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
 import useDrag from 'hooks/useDrag'
 import { useTranslation } from 'next-i18next'
 import React, { useContext, useEffect, useState } from 'react'

components/trade_form/AdvancedTradeForm.tsx

@@ -10,10 +10,7 @@ import {
   PerpOrderType,
   ZERO_I80F48,
 } from '@blockworks-foundation/mango-client'
-import {
+import { ExclamationIcon, InformationCircleIcon } from '@heroicons/react/solid'
-  ExclamationIcon,
-  InformationCircleIcon,
-} from '@heroicons/react/outline'
 import { notify } from '../../utils/notifications'
 import {
   calculateTradePrice,
@@ -1216,7 +1213,7 @@ export default function AdvancedTradeForm({
                         {t('max-slippage')}
                         <Tooltip content={t('tooltip-slippage')}>
                           <div className="outline-none focus:outline-none">
-                            <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-3" />
+                            <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-4" />
                           </div>
                         </Tooltip>
                       </div>

components/trade_form/TradeForm.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { SwitchHorizontalIcon } from '@heroicons/react/outline'
+import { SwitchHorizontalIcon } from '@heroicons/react/solid'
 import { getWeights } from '@blockworks-foundation/mango-client'
 import useMangoStore from '../../stores/useMangoStore'
 import AdvancedTradeForm from './AdvancedTradeForm'

pages/account.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react'
 import {
   BellIcon,
+  ChevronDownIcon,
   CurrencyDollarIcon,
   DuplicateIcon,
   ExclamationCircleIcon,
@@ -16,8 +17,7 @@ import {
   SwitchHorizontalIcon,
   TrashIcon,
   UsersIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
-import { ChevronDownIcon } from '@heroicons/react/solid'
 import { nativeToUi, ZERO_BN } from '@blockworks-foundation/mango-client'
 import useMangoStore, { serumProgramId, MNGO_INDEX } from 'stores/useMangoStore'
 import AccountOrders from 'components/account_page/AccountOrders'

pages/fees.tsx

@@ -7,7 +7,7 @@ import {
 } from '@project-serum/serum/lib/token-instructions'
 import { percentFormat } from '../utils/index'
 import Tooltip from '../components/Tooltip'
-import { InformationCircleIcon } from '@heroicons/react/outline'
+import { InformationCircleIcon } from '@heroicons/react/solid'
 import DepositMsrmModal from '../components/DepositMsrmModal'
 import WithdrawMsrmModal from '../components/WithdrawMsrmModal'
 import { useState } from 'react'
@@ -78,7 +78,7 @@ export default function Fees() {
               <Tooltip content={t('if-referred-tooltip')}>
                 <div>
                   <InformationCircleIcon
-                    className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-4`}
                   />
                 </div>
               </Tooltip>
@@ -111,7 +111,7 @@ export default function Fees() {
               >
                 <div>
                   <InformationCircleIcon
-                    className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-4`}
                   />
                 </div>
               </Tooltip>

pages/referral.tsx

@@ -25,7 +25,7 @@ import {
   CurrencyDollarIcon,
   DuplicateIcon,
   LinkIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import { MngoMonoIcon } from '../components/icons'
 import Link from 'next/link'
 import {

pages/risk-calculator.tsx

@@ -1,4 +1,4 @@
-import { ChevronUpIcon, RefreshIcon } from '@heroicons/react/outline'
+import { ChevronUpIcon, RefreshIcon } from '@heroicons/react/solid'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import { Disclosure } from '@headlessui/react'
 import useMangoStore, { serumProgramId } from '../stores/useMangoStore'