diff --git a/configs/app/ui.ts b/configs/app/ui.ts index 366ef2d5ee..674580d944 100644 --- a/configs/app/ui.ts +++ b/configs/app/ui.ts @@ -109,6 +109,7 @@ const UI = Object.freeze({ heading: parseEnvJson(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_HEADING')), body: parseEnvJson(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_BODY')), }, + maxContentWidth: getEnvValue('NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED') === 'false' ? false : true, }); export default UI; diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts index 95c07d0237..3a332fc0a0 100644 --- a/deploy/tools/envs-validator/schema.ts +++ b/deploy/tools/envs-validator/schema.ts @@ -696,6 +696,7 @@ const schema = yup const isUndefined = data === undefined; return isUndefined || fontFamilySchema.isValidSync(data); }), + NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED: yup.boolean(), // 5. Features configuration NEXT_PUBLIC_API_SPEC_URL: yup diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base index 9d0e91dacb..f5231bdb0e 100644 --- a/deploy/tools/envs-validator/test/.env.base +++ b/deploy/tools/envs-validator/test/.env.base @@ -34,6 +34,7 @@ NEXT_PUBLIC_FOOTER_LINKS=https://example.com NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=false +NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED=false NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs'] NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','current_epoch'] NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#fff' diff --git a/docs/ENVS.md b/docs/ENVS.md index cdc4bc8708..f9e34fa288 100644 --- a/docs/ENVS.md +++ b/docs/ENVS.md @@ -301,6 +301,7 @@ Settings for meta tags, OG tags and SEO | NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ | | NEXT_PUBLIC_FONT_FAMILY_HEADING | `FontFamily`, see full description [below](#font-family-configuration-properties) | Special typeface to use in page headings (`

`, `

`, etc.) | - | - | `{'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}` | v1.35.0+ | | NEXT_PUBLIC_FONT_FAMILY_BODY | `FontFamily`, see full description [below](#font-family-configuration-properties) | Main typeface to use in page content elements. | - | - | `{'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}` | v1.35.0+ | +| NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED | `boolean` | Set to `true` to restrict the page content width on extra-large screens. | - | `true` | `false` | v1.34.1+ | #### Network explorer configuration properties diff --git a/playwright/ContentWrapper.tsx b/playwright/ContentWrapper.tsx deleted file mode 100644 index c3c1769266..0000000000 --- a/playwright/ContentWrapper.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Box, useColorModeValue } from '@chakra-ui/react'; -import React from 'react'; - -interface Props { - children?: React.ReactNode; -} - -const ContentWrapper = ({ children }: Props) => { - const bgColor = useColorModeValue('white', 'black'); - return { children }; -}; - -export default React.memo(ContentWrapper); diff --git a/playwright/fixtures/render.tsx b/playwright/fixtures/render.tsx index e89f21cd9a..789f77ad63 100644 --- a/playwright/fixtures/render.tsx +++ b/playwright/fixtures/render.tsx @@ -6,7 +6,6 @@ import React from 'react'; import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; -import ContentWrapper from 'playwright/ContentWrapper'; import type { Props as TestAppProps } from 'playwright/TestApp'; import TestApp from 'playwright/TestApp'; @@ -28,7 +27,7 @@ export type RenderFixture = (component: JSX.Element, options?: Options, props?: const fixture: TestFixture = async({ mount }, use) => { await use((component, options, props) => { return mount( - { component }, + { component }, options, ); }); diff --git a/playwright/utils/config.ts b/playwright/utils/config.ts index 32a234a605..3e85475096 100644 --- a/playwright/utils/config.ts +++ b/playwright/utils/config.ts @@ -4,6 +4,7 @@ export const viewport = { mobile: devices['iPhone 13 Pro'].viewport, md: { width: 1001, height: 800 }, xl: { width: 1600, height: 1000 }, + xxl: { width: 1920, height: 1200 }, }; export const maskColor = '#4299E1'; // blue.400 diff --git a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index c4cf92223e..c80b68fb63 100644 Binary files a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/theme/foundations/breakpoints.ts b/theme/foundations/breakpoints.ts index aa60d95011..ece6201c12 100644 --- a/theme/foundations/breakpoints.ts +++ b/theme/foundations/breakpoints.ts @@ -4,8 +4,9 @@ const breakpoints = { // md: '768px', lg: '1000px', xl: '1440px', + '2xl': '1920px', // these breakpoint are needed just to make others work - '2xl': '3000px', + '3xl': '3000px', }; export default breakpoints; diff --git a/theme/global.ts b/theme/global.ts index c6fa5fbc6c..e50b7eeaf6 100644 --- a/theme/global.ts +++ b/theme/global.ts @@ -7,7 +7,7 @@ import getDefaultTransitionProps from './utils/getDefaultTransitionProps'; const global = (props: StyleFunctionProps) => ({ body: { - bg: mode('gray.100', '#3A4957')(props), + bg: mode('white', 'black')(props), ...getDefaultTransitionProps(), '-webkit-tap-highlight-color': 'transparent', 'font-variant-ligatures': 'no-contextual', diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png index 7b6fa0a19c..01ce5a1443 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png differ diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png index 117fabce32..35ddd924f3 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 71f79d74a9..a754d976b0 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png index 86accc8f75..3ae82484e9 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png index b51769292c..791fee07ea 100644 Binary files a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png differ diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png index 5718405868..1a7b39a125 100644 Binary files a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png differ diff --git a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index ecaa1c41c1..78db057d84 100644 Binary files a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png index 23b562efa1..60abf294c3 100644 Binary files a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png differ diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png index 913bb8eb1c..7926b0fd51 100644 Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png differ diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png index 1b86a8de8e..8ef301e424 100644 Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png differ diff --git a/ui/shared/layout/Layout.pw.tsx b/ui/shared/layout/Layout.pw.tsx index bc2cad67d5..4f5fa38fe7 100644 --- a/ui/shared/layout/Layout.pw.tsx +++ b/ui/shared/layout/Layout.pw.tsx @@ -18,8 +18,8 @@ test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => { await expect(component).toHaveScreenshot(); }); -test.describe('xl screen', () => { - test.use({ viewport: pwConfig.viewport.xl }); +test.describe('xxl screen', () => { + test.use({ viewport: pwConfig.viewport.xxl }); test('vertical navigation', async({ render }) => { const component = await render(Page Content); diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-horizontal-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-horizontal-navigation-1.png deleted file mode 100644 index 5c45de933d..0000000000 Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-horizontal-navigation-1.png and /dev/null differ diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-vertical-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-vertical-navigation-1.png deleted file mode 100644 index a637e006b6..0000000000 Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-vertical-navigation-1.png and /dev/null differ diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png new file mode 100644 index 0000000000..05f4bce2e4 Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png differ diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png new file mode 100644 index 0000000000..f4e2c356fd Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png differ diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx index 78d6f0cf31..62678c70d0 100644 --- a/ui/shared/layout/components/Container.tsx +++ b/ui/shared/layout/components/Container.tsx @@ -1,10 +1,6 @@ import { Box, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; -import config from 'configs/app'; - -import { CONTENT_MAX_WIDTH } from '../utils'; - interface Props { children: React.ReactNode; className?: string; @@ -17,7 +13,6 @@ const Container = ({ children, className }: Props) => { diff --git a/ui/shared/layout/components/MainColumn.tsx b/ui/shared/layout/components/MainColumn.tsx index 4f76325b86..75133c9651 100644 --- a/ui/shared/layout/components/MainColumn.tsx +++ b/ui/shared/layout/components/MainColumn.tsx @@ -16,6 +16,7 @@ const MainColumn = ({ children, className }: Props) => { flexGrow={ 1 } w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }} paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }} + paddingRight={{ '2xl': 6 }} paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height paddingBottom={ 8 } > diff --git a/ui/shared/layout/utils.ts b/ui/shared/layout/utils.ts index 3b1b9f474a..e0b6e2c1a3 100644 --- a/ui/shared/layout/utils.ts +++ b/ui/shared/layout/utils.ts @@ -1,3 +1,6 @@ import config from 'configs/app'; -export const CONTENT_MAX_WIDTH = config.UI.navigation.layout === 'horizontal' ? 1440 : 1512; +const maxWidthVerticalNavigation = config.UI.maxContentWidth ? 1_920 : 10_000; +const maxWidthHorizontalNavigation = config.UI.maxContentWidth ? 1_440 : 10_000; + +export const CONTENT_MAX_WIDTH = config.UI.navigation.layout === 'horizontal' ? maxWidthHorizontalNavigation : maxWidthVerticalNavigation; diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx index a29f4f8d2a..c205352170 100644 --- a/ui/snippets/footer/Footer.tsx +++ b/ui/snippets/footer/Footer.tsx @@ -162,7 +162,7 @@ const Footer = () => { }; const contentProps: GridProps = { - px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }, + px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12, '2xl': 6 }, py: { base: 4, lg: 8 }, gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' }, columnGap: { lg: '32px', xl: '100px' }, diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png index b82cc3b1ae..cfab3a85f0 100644 Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png differ diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png index 71c12cc4fc..bdc1060a74 100644 Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png index ba385f1c84..6094e3a85e 100644 Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png differ diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png index bb01d54087..0b3ae86f08 100644 Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png differ diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png index 244098dd3b..d6cd8469a7 100644 Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 16aad3fa23..dcdc0bf595 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png index dfb329c593..51117c86fb 100644 Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png differ diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png index fa9e923045..1afae83b0a 100644 Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png differ diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png index b65fd6d4e8..5e247adba1 100644 Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png and b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png index 0662b18baa..16498cc879 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png index 9c44c058c4..45b34d445e 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png index 91e3c53c3e..91c5da3027 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png index 55b56b1734..405eee4950 100644 Binary files a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png index 67461ee482..57d31f2169 100644 Binary files a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png index 20e3177ded..b10ddfbe29 100644 Binary files a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png index 35fd0ae618..cbeefa84af 100644 Binary files a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png index b6109084ac..3e44a5260e 100644 Binary files a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png index 62030cc6a6..269cb71e62 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png differ