ui: update colors and favicons

neobase-one · Dec 5, 2023 · d1dda0b · d1dda0b
1 parent 28d466a
commit d1dda0b
Show file tree

Hide file tree

Showing 68 changed files with 180 additions and 113 deletions.
diff --git a/configs/app/ui.ts b/configs/app/ui.ts
@@ -6,7 +6,7 @@ import * as views from './ui/views';
 import { getEnvValue, parseEnvJson } from './utils';
 
 // eslint-disable-next-line max-len
-const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'linear-gradient(270deg, #D2FFED 0%, #06FC99 66.03%)';
+const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'linear-gradient(-90deg, #68CFAA 0%, #00FF98 66.03%)';
 
 const UI = Object.freeze({
   sidebar: {

diff --git a/public/static/apple-touch-icon-dark.png b/public/static/apple-touch-icon-dark.png
diff --git a/public/static/apple-touch-icon-light.png b/public/static/apple-touch-icon-light.png
diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
@@ -30,6 +30,10 @@ const semanticTokens = {
       'default': '#3CAD71',
       _dark: '#07FC99',
     },
+    bg_base: {
+      'default': 'white',
+      _dark: '#171717',
+    },
   },
   shadows: {
     action_bar: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)',

diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx
@@ -1,4 +1,4 @@
-import { chakra, Icon, Tooltip, Hide, Skeleton, Flex } from '@chakra-ui/react';
+import { Flex, Hide, Icon, Skeleton, Tooltip, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { CsvExportParams } from 'types/client/address';
@@ -38,7 +38,7 @@ const AddressCsvExportLink = ({ className, address, params, isLoading }: Props)
   }
 
   return (
-    <Tooltip isDisabled={ !isMobile } label="Download CSV">
+    <Tooltip isDisabled={ !isMobile } label="Download CSV" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
       <LinkInternal
         className={ className }
         display="inline-flex"

diff --git a/ui/address/AddressTokenTransfers.tsx b/ui/address/AddressTokenTransfers.tsx
@@ -4,8 +4,8 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
-import { AddressFromToFilterValues } from 'types/api/address';
 import type { AddressFromToFilter, AddressTokenTransferResponse } from 'types/api/address';
+import { AddressFromToFilterValues } from 'types/api/address';
 import type { TokenType } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
@@ -235,7 +235,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
       <Flex alignItems="center" py={ 1 }>
         <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
         { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
-        <Tooltip label="Reset filter">
+        <Tooltip label="Reset filter" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
           <Flex>
             <Icon
               as={ crossIcon }

diff --git a/ui/address/AddressTxsFilter.tsx b/ui/address/AddressTxsFilter.tsx
@@ -34,11 +34,17 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
           as="div"
         />
       </MenuButton>
-      <MenuList zIndex={ 2 }>
-        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="from">From</MenuItemOption>
-          <MenuItemOption value="to">To</MenuItemOption>
+      <MenuList zIndex={ 2 } bgColor="bg_base" borderColor="divider">
+        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange } >
+          <MenuItemOption value="all" bgColor="inherit" _hover={{
+            bgColor: 'divider',
+          }}>All</MenuItemOption>
+          <MenuItemOption value="from" bgColor="inherit" _hover={{
+            bgColor: 'divider',
+          }} >From</MenuItemOption>
+          <MenuItemOption value="to" bgColor="inherit" _hover={{
+            bgColor: 'divider',
+          }}>To</MenuItemOption>
         </MenuOptionGroup>
       </MenuList>
     </Menu>

diff --git a/ui/address/contract/ContractCode.tsx b/ui/address/contract/ContractCode.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton, Button, Grid, GridItem, Alert, Link, chakra, Box } from '@chakra-ui/react';
+import { Alert, Box, Button, chakra, Flex, Grid, GridItem, Link, Skeleton } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -93,6 +93,10 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
       size="sm"
       ml="auto"
       mr={ 3 }
+      bgColor="accent"
+      _hover={{
+        bgColor: 'accent',
+      }}
       as="a"
       href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }
     >

diff --git a/ui/address/contract/ContractExternalLibraries.tsx b/ui/address/contract/ContractExternalLibraries.tsx
@@ -108,7 +108,7 @@ const ContractExternalLibraries = ({ className, data }: Props) => {
       <PopoverTrigger>
         { button }
       </PopoverTrigger>
-      <PopoverContent w="400px">
+      <PopoverContent w="400px" borderColor="divider" bgColor="bg_base">
         <PopoverBody >
           { content }
         </PopoverBody>

diff --git a/ui/address/contract/ContractMethodFieldZeroes.tsx b/ui/address/contract/ContractMethodFieldZeroes.tsx
@@ -84,7 +84,7 @@ const ContractMethodFieldZeroes = ({ onClick, isDisabled }: Props) => {
           </Button>
         </PopoverTrigger>
         <Portal>
-          <PopoverContent w="110px">
+          <PopoverContent w="110px" borderColor="divider" bgColor="bg_base">
             <PopoverBody py={ 2 }>
               <List>
                 { [ 8, 12, 16, 18, 20 ].map((id) => (

diff --git a/ui/address/contract/ContractMethodsAccordionItem.tsx b/ui/address/contract/ContractMethodsAccordionItem.tsx
@@ -47,7 +47,8 @@ const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, ind
       <Element as="h2" name={ 'method_id' in data ? `method_${ data.method_id }` : '' }>
         <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left">
           { 'method_id' in data && (
-            <Tooltip label={ hasCopied ? 'Copied!' : 'Copy link' } isOpen={ isOpen || hasCopied } onClose={ onClose }>
+            <Tooltip label={ hasCopied ? 'Copied!' : 'Copy link' } isOpen={ isOpen || hasCopied } onClose={ onClose }
+              bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
               <Box
                 boxSize={ 5 }
                 color="text_secondary"

diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx
@@ -100,7 +100,7 @@ const ContractSourceCode = ({ address, implementationAddress }: Props) => {
   })();
 
   const diagramLink = diagramLinkAddress ? (
-    <Tooltip label="Visualize contract code using Sol2Uml JS library">
+    <Tooltip label="Visualize contract code using Sol2Uml JS library" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
       <LinkInternal
         href={ route({ pathname: '/visualize/sol2uml', query: { address: diagramLinkAddress } }) }
         ml={{ base: '0', lg: 'auto' }}

diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
@@ -1,4 +1,4 @@
-import { Icon, chakra, Tooltip, IconButton, useDisclosure } from '@chakra-ui/react';
+import { Icon, IconButton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -54,7 +54,8 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
 
   return (
     <>
-      <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
+      <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }
+        bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
         <IconButton
           isActive={ Boolean(watchListId) }
           className={ className }

diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
@@ -57,7 +57,7 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
 
   return (
     <>
-      <Tooltip label="Click to view QR code">
+      <Tooltip label="Click to view QR code" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
         <IconButton
           className={ className }
           aria-label="Show QR code"

diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
@@ -86,7 +86,7 @@ const TokenSelect = ({ onClick }: Props) => {
         <TokenSelectMobile data={ data } isLoading={ tokensIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ tokensIsFetching === 1 }/>
       }
-      <Tooltip label="Show all tokens">
+      <Tooltip label="Show all tokens" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
         <Box>
           <NextLink href={{ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'tokens' } }} passHref legacyBehavior>
             <IconButton

diff --git a/ui/address/tokenSelect/TokenSelectDesktop.tsx b/ui/address/tokenSelect/TokenSelectDesktop.tsx
@@ -24,7 +24,7 @@ const TokenSelectDesktop = ({ data, isLoading }: Props) => {
       <PopoverTrigger>
         <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.data } isLoading={ isLoading }/>
       </PopoverTrigger>
-      <PopoverContent w="355px" maxH="450px" overflowY="scroll">
+      <PopoverContent w="355px" maxH="450px" overflowY="scroll" borderColor="divider" bgColor="bg_base">
         <PopoverBody px={ 4 } py={ 6 } bgColor={ bgColor } boxShadow="2xl" >
           <TokenSelectMenu { ...result }/>
         </PopoverBody>

diff --git a/ui/apiDocs/SwaggerUI.tsx b/ui/apiDocs/SwaggerUI.tsx
@@ -59,6 +59,10 @@ const SwaggerUI = () => {
       backgroundColor: useToken('colors', 'accent'),
     },
 
+    '.opblock-summary-control > .opblock-summary-method': {
+      color: useColorModeValue('text', '#171717'),
+    },
+
     '.opblock': {
       borderColor: useToken('colors', 'accent') + ' !important',
       backgroundColor: 'unset !important',

diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
@@ -105,21 +105,21 @@ const BlockDetails = ({ query }: Props) => {
 
     return (
       <Text variant="secondary" whiteSpace="break-spaces">
-        <Tooltip label="Static block reward">
+        <Tooltip label="Static block reward" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
           <span>{ staticReward.dividedBy(WEI).toFixed() }</span>
         </Tooltip>
         { !txFees.isEqualTo(ZERO) && (
           <>
             { space }+{ space }
-            <Tooltip label="Txn fees">
+            <Tooltip label="Txn fees" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
               <span>{ txFees.dividedBy(WEI).toFixed() }</span>
             </Tooltip>
           </>
         ) }
         { !burntFees.isEqualTo(ZERO) && (
           <>
             { space }-{ space }
-            <Tooltip label="Burnt fees">
+            <Tooltip label="Burnt fees" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
               <span>{ burntFees.dividedBy(WEI).toFixed() }</span>
             </Tooltip>
           </>
@@ -317,7 +317,7 @@ const BlockDetails = ({ query }: Props) => {
             { burntFees.dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
           </Skeleton>
           { !txFees.isEqualTo(ZERO) && (
-            <Tooltip label="Burnt fees / Txn fees * 100%">
+            <Tooltip label="Burnt fees / Txn fees * 100%" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
               <Box>
                 <Utilization
                   ml={ 4 }

diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx
@@ -43,7 +43,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
     >
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
-          <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
+          <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
             <Skeleton isLoaded={ !isLoading } display="inline-block">
               <LinkInternal
                 fontWeight={ 600 }
@@ -93,7 +93,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
         <Td fontSize="sm">
           <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
           <Flex mt={ 2 }>
-            <Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
+            <Tooltip label={ isLoading ? undefined : 'Gas Used %' } bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
               <Box>
                 <Utilization
                   colorScheme="gray"
@@ -124,7 +124,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
               { burntFees.dividedBy(WEI).toFixed(8) }
             </Skeleton>
           </Flex>
-          <Tooltip label={ isLoading ? undefined : 'Burnt fees / Txn fees * 100%' }>
+          <Tooltip label={ isLoading ? undefined : 'Burnt fees / Txn fees * 100%' } bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
             <Box w="min-content">
               <Utilization colorScheme="accent" mt={ 2 } value={ burntFees.div(txFees).toNumber() } isLoading={ isLoading }/>
             </Box>

diff --git a/ui/home/IndexingAlertIntTxs.tsx b/ui/home/IndexingAlertIntTxs.tsx
@@ -88,7 +88,7 @@ const IndexingAlertIntTxs = () => {
       <PopoverTrigger>
         { trigger }
       </PopoverTrigger>
-      <PopoverContent maxH="450px" overflowY="scroll" w="240px">
+      <PopoverContent maxH="450px" overflowY="scroll" w="240px" borderColor="divider" bgColor="bg_base">
         <PopoverBody p={ 4 } bgColor={ bgColor } boxShadow="2xl">
           { hint }
         </PopoverBody>

diff --git a/ui/home/StatsGasPrices.tsx b/ui/home/StatsGasPrices.tsx
@@ -8,11 +8,11 @@ const StatsGasPrices = ({ gasPrices }: {gasPrices: GasPrices}) => {
     color: 'accent',
   };
   const contentStyleProps = {
-    color: 'white',
+    color: 'text',
   };
 
   return (
-    <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs">
+    <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" bgColor="bg_base">
       <GridItem { ...labelStyleProps }>Slow</GridItem>
       <GridItem { ...contentStyleProps }>{ `${ gasPrices.slow } Gacanto` }</GridItem>
       <GridItem { ...labelStyleProps }>Average</GridItem>

diff --git a/ui/home/StatsItem.tsx b/ui/home/StatsItem.tsx
@@ -1,5 +1,5 @@
 import type { SystemStyleObject, TooltipProps } from '@chakra-ui/react';
-import { chakra, Flex, LightMode, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import breakpoints from 'theme/foundations/breakpoints';
@@ -23,7 +23,6 @@ const TOOLTIP_PROPS: Partial<TooltipProps> = {
   borderRadius: 'md',
   placement: 'bottom-end',
   offset: [ 0, 0 ],
-  bgColor: 'blackAlpha.900',
 };
 
 const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading }: Props) => {
@@ -71,17 +70,15 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading
         </Skeleton>
       </Flex>
       { tooltipLabel && !isLoading && (
-        <LightMode>
-          <Hint
-            label={ tooltipLabel }
-            tooltipProps={ TOOLTIP_PROPS }
-            boxSize={ 6 }
-            color={ infoColor }
-            position="absolute"
-            top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
-            right="10px"
-          />
-        </LightMode>
+        <Hint
+          label={ tooltipLabel }
+          tooltipProps={ TOOLTIP_PROPS }
+          boxSize={ 6 }
+          color={ infoColor }
+          position="absolute"
+          top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
+          right="10px"
+        />
       ) }
     </Flex>
   );

diff --git a/ui/marketplace/MarketplaceCategoriesMenu.tsx b/ui/marketplace/MarketplaceCategoriesMenu.tsx
@@ -54,7 +54,7 @@ const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories, i
         </Box>
       </MenuButton>
 
-      <MenuList zIndex={ 3 }>
+      <MenuList zIndex={ 3 } bgColor="bg_base" borderColor="divider">
         { options.map((category: string) => (
           <MarketplaceCategoriesMenuItem
             key={ category }

diff --git a/ui/marketplace/MarketplaceCategoriesMenuItem.tsx b/ui/marketplace/MarketplaceCategoriesMenuItem.tsx
@@ -26,6 +26,10 @@ const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => {
       onClick={ handleSelection }
       display="flex"
       alignItems="center"
+      bgColor="bg_base" borderColor="divider"
+      _hover={{
+        bgColor: 'divider',
+      }}
     >
       { id in ICONS && <Icon mr={ 3 } as={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/> }
       { id }

diff --git a/ui/pages/Token.tsx b/ui/pages/Token.tsx
@@ -238,7 +238,8 @@ const TokenPageContent = () => {
   const titleContentAfter = (
     <>
       { verifiedInfoQuery.data?.tokenAddress && (
-        <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }>
+        <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }
+          bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
           <Box boxSize={ 6 }>
             <Icon as={ iconVerifiedToken } color="green.500" boxSize={ 6 } cursor="pointer"/>
           </Box>

diff --git a/ui/searchResults/SearchResultsInput.tsx b/ui/searchResults/SearchResultsInput.tsx
@@ -1,6 +1,6 @@
-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
-import type { FormEvent, FocusEvent } from 'react';
+import type { FocusEvent, FormEvent } from 'react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -87,7 +87,8 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
           value={ searchTerm }
         />
       </PopoverTrigger>
-      <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }} overflowY="scroll" ref={ menuRef }>
+      <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }}
+        overflowY="scroll" ref={ menuRef } borderColor="divider" bgColor="bg_base">
         <PopoverBody py={ 6 }>
           <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
         </PopoverBody>

diff --git a/ui/shared/AddressActions/Menu.tsx b/ui/shared/AddressActions/Menu.tsx
@@ -36,7 +36,7 @@ const AddressActions = ({ isLoading }: Props) => {
           </Flex>
         </MenuButton>
       </Skeleton>
-      <MenuList minWidth="180px" zIndex="popover">
+      <MenuList minWidth="180px" zIndex="popover" bgColor="bg_base" borderColor="divider">
         { isTokenPage && config.features.addressVerification.isEnabled &&
           <TokenInfoMenuItem py={ 2 } px={ 4 } hash={ hash } onBeforeClick={ isAccountActionAllowed }/> }
         <PrivateTagMenuItem py={ 2 } px={ 4 } hash={ hash } onBeforeClick={ isAccountActionAllowed }/>

diff --git a/ui/shared/AddressActions/TokenInfoMenuItem.tsx b/ui/shared/AddressActions/TokenInfoMenuItem.tsx
@@ -1,4 +1,4 @@
-import { MenuItem, Icon, chakra, useDisclosure } from '@chakra-ui/react';
+import { Icon, MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -65,7 +65,10 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   const content = (() => {
     if (!verifiedAddressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress.toLowerCase() === hash.toLowerCase())) {
       return (
-        <MenuItem className={ className } onClick={ handleAddAddressClick }>
+        <MenuItem className={ className } onClick={ handleAddAddressClick } bgColor="bg_base" borderColor="divider"
+          _hover={{
+            bgColor: 'divider',
+          }}>
           { icon }
           <span>{ tokenInfoQuery.data?.tokenAddress ? 'Update token info' : 'Add token info' }</span>
         </MenuItem>
@@ -75,7 +78,10 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
     const hasApplication = applicationsQuery.data?.submissions.some(({ tokenAddress }) => tokenAddress.toLowerCase() === hash.toLowerCase());
 
     return (
-      <MenuItem className={ className } onClick={ handleAddApplicationClick }>
+      <MenuItem className={ className } onClick={ handleAddApplicationClick } bgColor="bg_base" borderColor="divider"
+        _hover={{
+          bgColor: 'divider',
+        }}>
         { icon }
         <span>
           {