design review fixes pt.1

icons/search.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m15.026 13.848 2.98 2.978a.834.834 0 1 1-1.18 1.18l-2.978-2.98a7.467 7.467 0 0 1-4.681 1.64c-4.14 0-7.5-3.36-7.5-7.5 0-4.14 3.36-7.5 7.5-7.5 4.14 0 7.5 3.36 7.5 7.5a7.466 7.466 0 0 1-1.641 4.681Zm-1.672-.619A5.814 5.814 0 0 0 15 9.167a5.832 5.832 0 0 0-5.833-5.834 5.831 5.831 0 0 0-5.834 5.834A5.832 5.832 0 0 0 9.167 15a5.814 5.814 0 0 0 4.062-1.646l.125-.125Z" fill="currentColor"/>
+</svg>

theme/components/Button.ts

@@ -47,7 +47,7 @@ const variantOutline = defineStyle((props) => {
 
   const isGrayTheme = c === 'gray' || c === 'gray-dark';
   const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const borderColor = isGrayTheme ? mode('gray.300', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
   const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const activeColor = (() => {
     if (c === 'gray') {

ui/blocks/navigation/NavigationDesktop.tsx

@@ -88,7 +88,7 @@ const NavigationDesktop = () => {
         transform={ isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }
         { ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
         transformOrigin="center"
-        position="fixed"
+        position="absolute"
         top="104px"
         left={ isCollapsed ? '80px' : '216px' }
         cursor="pointer"

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -52,7 +52,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
   return (
     <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } index={ activeTab }>
       <TabList
-        marginBottom={{ base: 6, lg: 8 }}
+        marginBottom={{ base: 6, lg: 12 }}
         flexWrap="nowrap"
         whiteSpace="nowrap"
         ref={ listRef }

ui/shared/Token.tsx

@@ -43,7 +43,7 @@ const Token = ({ symbol, className }: Props) => {
       <Link href={ url } target="_blank" ml={ 1 }>
         { token.fullName }
       </Link>
-      <Text ml={ 1 }>({ token.symbol })</Text>
+      <Text ml={ 1 } variant="secondary">({ token.symbol })</Text>
     </Center>
   );
 };

ui/shared/Utilization.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text, chakra } from '@chakra-ui/react';
+import { Box, Flex, Text, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
@@ -12,7 +12,7 @@ const Utilization = ({ className, value }: Props) => {
   const valueString = (value * 100).toFixed(2) + '%';
   return (
     <Flex className={ className } alignItems="center">
-      <Box bg="gray.100" w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
+      <Box bg={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
         <Box bg="green.500" w={ valueString } h="100%"/>
       </Box>
       <Text color="green.500" ml="10px" fontWeight="bold">{ valueString }</Text>

ui/tx/TxDetails.tsx

@@ -1,10 +1,11 @@
-import { Grid, GridItem, Text, Box, Icon, Link, Tag, Flex } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Box, Icon, Link, Tag, Flex, Tooltip, chakra } from '@chakra-ui/react';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
 import { tx } from 'data/tx';
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
+import errorIcon from 'icons/status/error.svg';
 import successIcon from 'icons/status/success.svg';
 import dayjs from 'lib/date/dayjs';
 import Address from 'ui/shared/address/Address';
@@ -97,7 +98,16 @@ const TxDetails = () => {
           <CopyToClipboard text={ tx.address_to }/>
         </Address>
         <Tag colorScheme="orange" variant="solid" flexShrink={ 0 }>SANA</Tag>
-        <Icon as={ successIcon } boxSize={ 4 } ml={ 2 } color="green.500"/>
+        <Tooltip label="Contract execution completed">
+          <chakra.span display="inline-flex">
+            <Icon as={ successIcon } boxSize={ 4 } ml={ 2 } color="green.500" cursor="pointer"/>
+          </chakra.span>
+        </Tooltip>
+        <Tooltip label="Error occured during contract execution">
+          <chakra.span display="inline-flex">
+            <Icon as={ errorIcon } boxSize={ 4 } ml={ 2 } color="red.500" cursor="pointer"/>
+          </chakra.span>
+        </Tooltip>
         <Token symbol="USDT" ml={ 3 }/>
       </DetailsInfoItem>
       <DetailsInfoItem

ui/tx/internals/TxInternalsTable.tsx

@@ -10,12 +10,12 @@ const TxInternalsTable = ({ data }: { data: typeof txData}) => {
       <Table variant="simple" size="sm">
         <Thead>
           <Tr>
-            <Th width="26%">Type</Th>
+            <Th width="28%">Type</Th>
             <Th width="20%">From</Th>
             <Th width="24px" px={ 0 }/>
             <Th width="20%">To</Th>
-            <Th width="17%" isNumeric>Value</Th>
-            <Th width="17%" isNumeric>Gas limit</Th>
+            <Th width="16%" isNumeric>Value</Th>
+            <Th width="16%" isNumeric>Gas limit</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/tx/internals/TxInternalsTableItem.tsx

@@ -1,4 +1,4 @@
-import { Tr, Td, Tag, Icon } from '@chakra-ui/react';
+import { Tr, Td, Tag, Icon, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
@@ -23,7 +23,11 @@ const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props)
   return (
     <Tr alignItems="top">
       <Td>
-        { typeTitle && <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag> }
+        { typeTitle && (
+          <Box w="126px" display="inline-block">
+            <Tag colorScheme="cyan" mr={ 5 }>{ typeTitle }</Tag>
+          </Box>
+        ) }
         <TxStatus status={ status }/>
       </Td>
       <Td>

ui/tx/logs/TxLogItem.tsx

@@ -1,7 +1,7 @@
-import { SearchIcon } from '@chakra-ui/icons';
-import { Text, Grid, GridItem, Link, Tooltip, Button, useColorModeValue } from '@chakra-ui/react';
+import { Text, Grid, GridItem, Link, Tooltip, Button, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import searchIcon from 'icons/search.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -45,12 +45,12 @@ const TxLogItem = ({ address, index, topics, data }: Props) => {
           <AddressLink hash={ address } ml={ 2 }/>
         </Address>
         <Tooltip label="Find matches topic">
-          <Link ml={ 2 }>
-            <SearchIcon w={ 5 } h={ 5 }/>
+          <Link ml={ 2 } display="inline-flex">
+            <Icon as={ searchIcon } boxSize={ 5 }/>
           </Link>
         </Tooltip>
         <Tooltip label="Log index">
-          <Button variant="outline" isActive ml={{ base: 9, lg: 'auto' }} size="sm" fontWeight={ 400 }>
+          <Button variant="outline" colorScheme="gray" isActive ml={{ base: 9, lg: 'auto' }} size="sm" fontWeight={ 400 }>
             { index }
           </Button>
         </Tooltip>

ui/tx/logs/TxLogTopic.tsx

@@ -20,7 +20,7 @@ const TxLogTopic = ({ hex, index }: Props) => {
 
   return (
     <Flex alignItems="center" px={{ base: 0, lg: 3 }} _notFirst={{ mt: 3 }} overflow="hidden" maxW="100%">
-      <Button variant="outline" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
+      <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
         { index }
       </Button>
       { /* temporary condition juse to show different states of the component */ }

ui/tx/state/TxStateStorageItem.tsx

@@ -29,12 +29,12 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage})
       background="blackAlpha.50"
       borderRadius="12px"
       mb={ 4 }
-      fontSize={{ base: 'sm', lg: 'md' }}
+      fontSize="sm"
     >
       { gridData.map((item) => (
         <React.Fragment key={ item.name }>
           <GridItem alignSelf={{ base: 'start', lg: 'center' }} fontWeight={{ base: 500, lg: 600 }} textAlign="end">{ item.name }</GridItem>
-          <GridItem display="flex" flexDir="column" rowGap={ 2 } alignItems="flex-start" >
+          <GridItem display="flex" flexDir={{ base: 'column', lg: 'row' }} rowGap={ 2 } alignItems={{ base: 'flex-start', lg: 'center' }} >
             { item.select && (
               <Select
                 size="sm"