diff --git a/configs/envs/.env.eth_sepolia b/configs/envs/.env.eth_sepolia index 8f3cb0e164..3127563fb8 100644 --- a/configs/envs/.env.eth_sepolia +++ b/configs/envs/.env.eth_sepolia @@ -24,8 +24,8 @@ NEXT_PUBLIC_API_BASE_PATH=/ # ui config ## homepage NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs'] -NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgba(51, 53, 67, 1)' -NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(165, 252, 122, 1)' +NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(51,53,67,1) +NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(165,252,122,1) ## sidebar NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg diff --git a/deploy/values/review/values.yaml.gotmpl b/deploy/values/review/values.yaml.gotmpl index 3027a194c6..e738ae3e63 100644 --- a/deploy/values/review/values.yaml.gotmpl +++ b/deploy/values/review/values.yaml.gotmpl @@ -94,7 +94,6 @@ frontend: NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: "{ \"id\": \"632018\", \"width\": \"320\", \"height\": \"100\" }" NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: true NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: true - NEXT_PUBLIC_COLOR_THEME_DEFAULT: "dim" envFromSecret: NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI diff --git a/theme/components/Form.ts b/theme/components/Form.ts index 582c0e96ca..0c9a02e59b 100644 --- a/theme/components/Form.ts +++ b/theme/components/Form.ts @@ -1,9 +1,8 @@ import { formAnatomy as parts } from '@chakra-ui/anatomy'; import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'; import type { StyleFunctionProps } from '@chakra-ui/theme-tools'; -import { getColor, mode } from '@chakra-ui/theme-tools'; -import getDefaultFormColors from '../utils/getDefaultFormColors'; +import getFormStyles from '../utils/getFormStyles'; import FancySelect from './FancySelect'; import FormLabel from './FormLabel'; import Input from './Input'; @@ -13,8 +12,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys); function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunctionProps) { - const { theme } = props; - const { focusPlaceholderColor, errorColor } = getDefaultFormColors(props); + const formStyles = getFormStyles(props); const activeLabelStyles = { ...FormLabel.variants?.floating?.(props)._focusWithin, @@ -63,12 +61,29 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction // label styles label: FormLabel.sizes?.[size](props) || {}, 'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles, + 'textarea:not(:placeholder-shown) + label': { + bgColor: formStyles.input.filled.bgColor, + }, + [` + input[readonly] + label, + textarea[readonly] + label, + &[aria-readonly=true] label + `]: { + bgColor: formStyles.input.readOnly.bgColor, + }, [` input[aria-invalid=true] + label, textarea[aria-invalid=true] + label, &[aria-invalid=true] label `]: { - color: getColor(theme, errorColor), + color: formStyles.placeholder.error.color, + }, + [` + input[disabled] + label, + textarea[disabled] + label, + &[aria-disabled=true] label + `]: { + color: formStyles.placeholder.disabled.color, }, // input styles @@ -79,31 +94,24 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction padding: inputPx, }, 'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': activeInputStyles, - [` - input[disabled] + label, - &[aria-disabled=true] label - `]: { - backgroundColor: 'transparent', - }, - // in textarea bg of label could not be transparent; it should match the background color of input but without alpha - // so we have to use non-standard colors here - 'textarea[disabled] + label': { - backgroundColor: mode('#ececec', '#232425')(props), - }, - 'textarea[disabled] + label[data-in-modal=true]': { - backgroundColor: mode('#ececec', '#292b34')(props), - }, // indicator styles 'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': { - color: getColor(theme, focusPlaceholderColor), + color: formStyles.placeholder.default.color, }, [` input[aria-invalid=true] + label .chakra-form__required-indicator, textarea[aria-invalid=true] + label .chakra-form__required-indicator, &[aria-invalid=true] .chakra-form__required-indicator `]: { - color: getColor(theme, errorColor), + color: formStyles.placeholder.error.color, + }, + [` + input[disabled] + label .chakra-form__required-indicator, + textarea[disabled] + label .chakra-form__required-indicator, + &[aria-disabled=true] .chakra-form__required-indicator + `]: { + color: formStyles.placeholder.disabled.color, }, }, }; diff --git a/theme/components/Form/FormControl.pw.tsx b/theme/components/Form/FormControl.pw.tsx index 79cfba10ce..3e3a4f9a22 100644 --- a/theme/components/Form/FormControl.pw.tsx +++ b/theme/components/Form/FormControl.pw.tsx @@ -65,6 +65,19 @@ test.describe('floating label size md +@dark-mode', () => { await expect(component).toHaveScreenshot(); }); + test('filled read-only', async({ mount }) => { + const component = await mount( + + + + Smart contract / Address (0x...) + + , + ); + + await expect(component).toHaveScreenshot(); + }); + test('filled error', async({ mount }) => { const component = await mount( diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png index 45d9e21bdb..8114db8880 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png index f6a6920831..cb02d37576 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png index 74975f5d7b..8f252b3add 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png index 4d1637cf2c..c37d9af17f 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png index 51d89c26bb..c9c3020f33 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png new file mode 100644 index 0000000000..305028d0ad Binary files /dev/null and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png index 233dfbc010..621109f3e9 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png index 8e19274714..9b30da40a5 100644 Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png differ diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png new file mode 100644 index 0000000000..53870a1836 Binary files /dev/null and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png differ diff --git a/theme/components/FormLabel.ts b/theme/components/FormLabel.ts index c95f0e8e7a..c67ac969eb 100644 --- a/theme/components/FormLabel.ts +++ b/theme/components/FormLabel.ts @@ -1,7 +1,6 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system'; -import { getColor } from '@chakra-ui/theme-tools'; -import getDefaultFormColors from '../utils/getDefaultFormColors'; +import getFormStyles from '../utils/getFormStyles'; const baseStyle = defineStyle({ display: 'flex', @@ -13,14 +12,12 @@ const baseStyle = defineStyle({ transitionDuration: 'normal', opacity: 1, _disabled: { - opacity: 0.4, + opacity: 0.2, }, }); const variantFloating = defineStyle((props) => { - const { theme, backgroundColor } = props; - const { focusPlaceholderColor } = getDefaultFormColors(props); - const bc = backgroundColor || 'transparent'; + const formStyles = getFormStyles(props); return { left: '2px', @@ -29,8 +26,8 @@ const variantFloating = defineStyle((props) => { position: 'absolute', borderRadius: 'base', boxSizing: 'border-box', - color: 'gray.500', - backgroundColor: 'transparent', + color: formStyles.placeholder.default.color, + backgroundColor: props.bgColor || props.backgroundColor || 'transparent', pointerEvents: 'none', margin: 0, transformOrigin: 'top left', @@ -39,8 +36,8 @@ const variantFloating = defineStyle((props) => { whiteSpace: 'nowrap', textOverflow: 'ellipsis', _focusWithin: { - backgroundColor: bc, - color: getColor(theme, focusPlaceholderColor), + backgroundColor: props.bgColor || props.backgroundColor || 'transparent', + color: formStyles.placeholder.default.color, fontSize: 'xs', lineHeight: '16px', borderTopRightRadius: 'none', @@ -70,7 +67,7 @@ const sizes = { return { fontSize: 'md', lineHeight: '24px', - padding: '28px 4px 28px 24px', + padding: '26px 4px 26px 24px', right: '22px', _focusWithin: { padding: '16px 0 2px 24px', diff --git a/theme/components/Modal.ts b/theme/components/Modal.ts index d2e291f8d5..2992f4e7d8 100644 --- a/theme/components/Modal.ts +++ b/theme/components/Modal.ts @@ -10,11 +10,11 @@ import { runIfFn } from '@chakra-ui/utils'; const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys); -const baseStyleDialog = defineStyle((props) => { +const baseStyleDialog = defineStyle(() => { return { padding: 8, borderRadius: 'lg', - bg: mode('white', 'gray.900')(props), + bg: 'dialog_bg', margin: 'auto', }; }); @@ -61,7 +61,7 @@ const baseStyleOverlay = defineStyle({ }); const baseStyle = definePartsStyle((props) => ({ - dialog: runIfFn(baseStyleDialog, props), + dialog: runIfFn(baseStyleDialog), dialogContainer: baseStyleDialogContainer, header: runIfFn(baseStyleHeader, props), diff --git a/theme/components/Textarea.ts b/theme/components/Textarea.ts index 6a4c9a3a5b..bb0a00ca56 100644 --- a/theme/components/Textarea.ts +++ b/theme/components/Textarea.ts @@ -1,22 +1,8 @@ import { Textarea as TextareaComponent } from '@chakra-ui/react'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system'; -import { mode } from '@chakra-ui/theme-tools'; import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles'; -const variantFilledInactive = defineStyle((props) => { - return { - // https://bugs.chromium.org/p/chromium/issues/detail?id=1362573 - // there is a problem with scrollbar color in chromium - // so blackAlpha.50 here is replaced with #f5f5f6 - // and whiteAlpha.50 is replaced with #1a1b1b - - // bgColor: mode('blackAlpha.50', 'whiteAlpha.50')(props), - bgColor: mode('#f5f5f6', '#1a1b1b')(props), - - }; -}); - const sizes = { md: defineStyle({ fontSize: 'md', @@ -38,7 +24,6 @@ const Textarea = defineStyleConfig({ sizes, variants: { outline: defineStyle(getOutlinedFieldStyles), - filledInactive: variantFilledInactive, }, defaultProps: { variant: 'outline', diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts index 27ccd9f2a3..d2dbe3b5a3 100644 --- a/theme/foundations/semanticTokens.ts +++ b/theme/foundations/semanticTokens.ts @@ -23,6 +23,10 @@ const semanticTokens = { 'default': 'red.400', _dark: 'red.300', }, + dialog_bg: { + 'default': 'white', + _dark: 'gray.900', + }, }, shadows: { action_bar: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)', diff --git a/theme/utils/getDefaultFormColors.ts b/theme/utils/getDefaultFormColors.ts deleted file mode 100644 index 994788bf25..0000000000 --- a/theme/utils/getDefaultFormColors.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { StyleFunctionProps } from '@chakra-ui/theme-tools'; -import { mode } from '@chakra-ui/theme-tools'; - -export default function getDefaultFormColors(props: StyleFunctionProps) { - const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props; - return { - focusBorderColor: fc || mode('blue.500', 'blue.300')(props), - focusPlaceholderColor: fc || 'gray.500', - errorColor: ec || mode('red.400', 'red.300')(props), - filledColor: flc || mode('gray.300', 'gray.600')(props), - }; -} diff --git a/theme/utils/getFormStyles.ts b/theme/utils/getFormStyles.ts new file mode 100644 index 0000000000..5dda16db55 --- /dev/null +++ b/theme/utils/getFormStyles.ts @@ -0,0 +1,55 @@ +import type { StyleFunctionProps } from '@chakra-ui/theme-tools'; +import { mode, transparentize } from '@chakra-ui/theme-tools'; + +export default function getFormStyles(props: StyleFunctionProps) { + return { + input: { + empty: { + // there is no text in the empty input + // color: ???, + bgColor: props.bgColor || mode('white', 'black')(props), + borderColor: mode('gray.100', 'gray.700')(props), + }, + hover: { + color: mode('gray.800', 'gray.50')(props), + bgColor: props.bgColor || mode('white', 'black')(props), + borderColor: mode('gray.200', 'gray.500')(props), + }, + focus: { + color: mode('gray.800', 'gray.50')(props), + bgColor: props.bgColor || mode('white', 'black')(props), + borderColor: mode('blue.400', 'blue.400')(props), + }, + filled: { + color: mode('gray.800', 'gray.50')(props), + bgColor: props.bgColor || mode('white', 'black')(props), + borderColor: mode('gray.300', 'gray.600')(props), + }, + readOnly: { + color: mode('gray.800', 'gray.50')(props), + bgColor: mode('gray.200', 'gray.800')(props), + borderColor: mode('gray.200', 'gray.800')(props), + }, + // we use opacity to show the disabled state + disabled: { + opacity: 0.2, + }, + error: { + color: mode('gray.800', 'gray.50')(props), + bgColor: props.bgColor || mode('white', 'black')(props), + borderColor: mode('red.500', 'red.500')(props), + }, + }, + placeholder: { + 'default': { + color: mode('gray.500', 'gray.500')(props), + }, + disabled: { + color: transparentize('gray.500', 0.2)(props.theme), + }, + error: { + color: mode('red.500', 'red.500')(props), + }, + }, + }; +} diff --git a/theme/utils/getOutlinedFieldStyles.ts b/theme/utils/getOutlinedFieldStyles.ts index 443249ecd1..c26ed15d11 100644 --- a/theme/utils/getOutlinedFieldStyles.ts +++ b/theme/utils/getOutlinedFieldStyles.ts @@ -1,59 +1,64 @@ import type { StyleFunctionProps } from '@chakra-ui/theme-tools'; -import { mode, getColor } from '@chakra-ui/theme-tools'; +import { mode } from '@chakra-ui/theme-tools'; -import getDefaultFormColors from './getDefaultFormColors'; import getDefaultTransitionProps from './getDefaultTransitionProps'; +import getFormStyles from './getFormStyles'; export default function getOutlinedFieldStyles(props: StyleFunctionProps) { - const { theme, borderColor } = props; - const { focusBorderColor, errorColor } = getDefaultFormColors(props); + const formStyles = getFormStyles(props); const transitionProps = getDefaultTransitionProps(); return { border: '2px solid', // filled input - backgroundColor: 'transparent', - borderColor: mode('gray.300', 'gray.600')(props), + ...formStyles.input.filled, ...transitionProps, _hover: { - borderColor: mode('gray.200', 'gray.500')(props), + ...formStyles.input.hover, }, _readOnly: { boxShadow: 'none !important', userSelect: 'all', + pointerEvents: 'none', + ...formStyles.input.readOnly, + _hover: { + ...formStyles.input.readOnly, + }, + _focus: { + ...formStyles.input.readOnly, + }, }, _disabled: { - opacity: 1, - backgroundColor: mode('blackAlpha.200', 'whiteAlpha.200')(props), - borderColor: 'transparent', + ...formStyles.input.disabled, cursor: 'not-allowed', - _hover: { - borderColor: 'transparent', - }, ':-webkit-autofill': { // background color for disabled input which value was selected from browser autocomplete popup '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`, }, }, _invalid: { - borderColor: getColor(theme, errorColor), + ...formStyles.input.error, boxShadow: `none`, + _placeholder: { + color: formStyles.placeholder.error.color, + }, }, _focusVisible: { + ...formStyles.input.focus, zIndex: 1, - borderColor: getColor(theme, focusBorderColor), boxShadow: 'md', }, _placeholder: { - color: mode('blackAlpha.600', 'whiteAlpha.600')(props), + color: formStyles.placeholder.default.color, }, // not filled input - ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true])': { borderColor: borderColor || mode('gray.100', 'gray.700')(props) }, + ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true]):not([aria-readonly=true])': { + ...formStyles.input.empty, + }, // not filled input with type="date" - ':not(:placeholder-shown)[value=""]:not(:focus-visible):not(:hover):not([aria-invalid=true])': { - borderColor: borderColor || mode('gray.100', 'gray.700')(props), - color: 'gray.500', + ':not(:placeholder-shown)[value=""]:not(:focus-visible):not(:hover):not([aria-invalid=true]):not([aria-readonly=true])': { + ...formStyles.input.empty, }, ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' }, diff --git a/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png index 85a1ffa319..72cf4a5fb3 100644 Binary files a/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png index 89230b3a16..87fbcdff24 100644 Binary files a/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png index 8aba610638..42f9fd64b0 100644 Binary files a/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/address/contract/ABI/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx index 1766479979..6bed9498cc 100644 --- a/ui/address/contract/ContractSourceCode.tsx +++ b/ui/address/contract/ContractSourceCode.tsx @@ -128,7 +128,6 @@ const ContractSourceCode = ({ address, implementationAddress }: Props) => { size="xs" value={ sourceType } onChange={ handleSelectChange } - focusBorderColor="none" w="auto" fontWeight={ 600 } borderRadius="base" diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png index 1305877878..c7ad86f432 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png index ff7ca931ce..9e2810371e 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png differ diff --git a/ui/address/contract/contractSubmitAuditForm/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png b/ui/address/contract/contractSubmitAuditForm/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png index c5a18bad26..b13f4662bb 100644 Binary files a/ui/address/contract/contractSubmitAuditForm/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png and b/ui/address/contract/contractSubmitAuditForm/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png differ diff --git a/ui/address/tokenSelect/TokenSelectMenu.tsx b/ui/address/tokenSelect/TokenSelectMenu.tsx index 22f87950ed..378cf22399 100644 --- a/ui/address/tokenSelect/TokenSelectMenu.tsx +++ b/ui/address/tokenSelect/TokenSelectMenu.tsx @@ -24,7 +24,6 @@ interface Props { const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onInputChange, onSortClick, searchTerm }: Props) => { const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600'); - const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200'); const hasFilteredResult = _sumBy(Object.values(filteredData), ({ items }) => items.length) > 0; @@ -39,7 +38,7 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onI placeholder="Search by token name" ml="1px" onChange={ onInputChange } - borderColor={ inputBorderColor } + bgColor="dialog_bg" /> diff --git a/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx b/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx index 868505d158..f4b959cf4e 100644 --- a/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx +++ b/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx @@ -1,4 +1,4 @@ -import { FormControl, Input, useColorModeValue } from '@chakra-ui/react'; +import { FormControl, Input } from '@chakra-ui/react'; import React from 'react'; import type { Control, ControllerRenderProps, FormState } from 'react-hook-form'; import { Controller } from 'react-hook-form'; @@ -15,13 +15,11 @@ interface Props { } const AddressVerificationFieldAddress = ({ formState, control }: Props) => { - const backgroundColor = useColorModeValue('white', 'gray.900'); - const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps}) => { const error = 'address' in formState.errors ? formState.errors.address : undefined; return ( - + { maxLength={ ADDRESS_LENGTH } isDisabled={ formState.isSubmitting } autoComplete="off" + bgColor="dialog_bg" /> ); - }, [ formState.errors, formState.isSubmitting, backgroundColor ]); + }, [ formState.errors, formState.isSubmitting ]); return ( { - const backgroundColor = useColorModeValue('white', 'gray.900'); - const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps}) => { const error = 'message' in formState.errors ? formState.errors.message : undefined; return ( - +