style tweaks

theme/foundations/semanticTokens.ts

@@ -4,6 +4,10 @@ const semanticTokens = {
       'default': 'blackAlpha.200',
       _dark: 'whiteAlpha.200',
     },
+    text_secondary: {
+      'default': 'gray.500',
+      _dark: 'gray.400',
+    },
     link: {
       'default': 'blue.600',
       _dark: 'blue.300',

ui/contractVerification/ContractVerificationFormRow.tsx

@@ -17,7 +17,7 @@ const ContractVerificationFormRow = ({ children, className }: Props) => {
   return (
     <>
       <GridItem className={ className } _notFirst={{ mt: { base: 3, lg: 0 } }}>{ firstChildren }</GridItem>
-      { isMobile && !secondChildren ? null : <GridItem fontSize="sm" className={ className }>{ secondChildren }</GridItem> }
+      { isMobile && !secondChildren ? null : <GridItem fontSize="sm" className={ className } color="text_secondary">{ secondChildren }</GridItem> }
     </>
   );
 };

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -70,9 +70,9 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
       { isVyper ? null : (
         <>
           <span>The compiler version is specified in </span>
-          <Code>pragma solidity X.X.X</Code>
+          <Code color="text_secondary">pragma solidity X.X.X</Code>
           <span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span>
-          <Code>solc —version</Code>
+          <Code color="text_secondary">solc —version</Code>
           <span> to check.</span>
         </>
       ) }

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -14,6 +14,7 @@ import {
   PopoverBody,
   useColorModeValue,
   DarkMode,
+  useBoolean,
 } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
@@ -37,7 +38,7 @@ interface Props {
 }
 
 const ContractVerificationFieldMethod = ({ control, isDisabled }: Props) => {
-
+  const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean();
   const tooltipBg = useColorModeValue('gray.700', 'gray.900');
 
   const renderItem = React.useCallback((method: VerificationMethod) => {
@@ -48,7 +49,11 @@ const ContractVerificationFieldMethod = ({ control, isDisabled }: Props) => {
         return (
           <>
             <span>Via standard </span>
-            <Link href="https://docs.soliditylang.org/en/latest/using-the-compiler.html#input-description" target="_blank">
+            <Link
+              href={ isDisabled ? undefined : 'https://docs.soliditylang.org/en/latest/using-the-compiler.html#input-description' }
+              target="_blank"
+              cursor={ isDisabled ? 'not-allowed' : 'pointer' }
+            >
                 Input JSON
             </Link>
           </>
@@ -57,9 +62,9 @@ const ContractVerificationFieldMethod = ({ control, isDisabled }: Props) => {
         return (
           <>
             <span>Via sourcify: sources and metadata JSON file</span>
-            <Popover trigger="hover">
+            <Popover trigger="hover" isLazy isOpen={ isDisabled ? false : isPopoverOpen } onOpen={ setIsPopoverOpen.on } onClose={ setIsPopoverOpen.off }>
               <PopoverTrigger>
-                <chakra.span cursor="pointer" display="inline-block" verticalAlign="middle" h="24px" ml={ 1 }>
+                <chakra.span cursor={ isDisabled ? 'not-allowed' : 'pointer' } display="inline-block" verticalAlign="middle" h="24px" ml={ 1 }>
                   <Icon as={ infoIcon } boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/>
                 </chakra.span>
               </PopoverTrigger>
@@ -94,7 +99,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled }: Props) => {
       default:
         break;
     }
-  }, [ tooltipBg ]);
+  }, [ isDisabled, isPopoverOpen, setIsPopoverOpen.off, setIsPopoverOpen.on, tooltipBg ]);
 
   const renderRadioGroup = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'method'>}) => {
     return (

ui/contractVerification/fields/ContractVerificationFieldName.tsx

@@ -44,7 +44,7 @@ const ContractVerificationFieldName = ({ hint }: Props) => {
       { hint ? <span>{ hint }</span> : (
         <>
           <span>Must match the name specified in the code. For example, in </span>
-          <Code>{ `contract MyContract {..}` }</Code>
+          <Code color="text_secondary">{ `contract MyContract {..}` }</Code>
           <span>. <chakra.span fontWeight={ 600 }>MyContract</chakra.span> is the contract name.</span>
         </>
       ) }