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 (
-
+
-
+
);
- }, [ formState.errors, backgroundColor ]);
+ }, [ formState.errors ]);
return (
{
- const backgroundColor = useColorModeValue('white', 'gray.900');
-
const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps}) => {
const error = 'signature' in formState.errors ? formState.errors.signature : undefined;
return (
-
+
);
- }, [ formState.errors, formState.isSubmitting, backgroundColor ]);
+ }, [ formState.errors, formState.isSubmitting ]);
return (
{ rootError } }
-