diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index 39b9d4df542..cb70e47af7c 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -15,12 +15,14 @@ diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 30bd8f937ea..e3e9f0ee915 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -119,54 +119,47 @@
- -
- {#if isDesktopOrLarger} -
-
-
{$t('activities.header.from')}
-
{$t('activities.header.to')}
-
{$t('activities.header.amount')}
-
- {$t('activities.header.status')} - +
+ +
+ {#if isDesktopOrLarger} +
+
+
{$t('activities.header.from')}
+
{$t('activities.header.to')}
+
{$t('activities.header.amount')}
+
+ {$t('activities.header.status')} + +
+
{$t('activities.header.explorer')}
-
{$t('activities.header.explorer')}
-
-
- {/if} - - {#if renderLoading} -
- {$t('common.loading')}... -
- {/if} - - {#if renderTransactions} -
- {#each transactionsToShow as item (item.hash)} - openDetails(item)} /> -
- {/each} -
- {/if} - - {#if renderNoTransactions} -
- {$t('activities.no_transactions')} -
- {/if} - - - +
+ {/if} + + {#if renderLoading} +
+ {$t('common.loading')}... +
+ {/if} + + {#if renderTransactions} +
+ {#each transactionsToShow as item (item.hash)} + openDetails(item)} /> +
+ {/each} +
+ {/if} + + {#if renderNoTransactions} +
+ {$t('activities.no_transactions')} +
+ {/if} +
diff --git a/packages/bridge-ui-v2/src/components/Activities/Transaction.svelte b/packages/bridge-ui-v2/src/components/Activities/Transaction.svelte index 271b4163539..0d66a37a242 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Transaction.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Transaction.svelte @@ -34,7 +34,7 @@ tabindex="0" on:click={handleClick} on:keydown={handlePress} - class="flex text-white md:h-[80px] h-[45px] w-full"> + class="flex text-primary-content md:h-[80px] h-[45px] w-full"> {#if isDesktopOrLarger}
@@ -47,7 +47,7 @@ {item.symbol}
{:else} -
+
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index 219e8f09cce..cb7fa2020d0 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -9,7 +9,6 @@ import { InputBox } from '$components/InputBox'; import { LoadingText } from '$components/LoadingText'; import { Tooltip } from '$components/Tooltip'; - import { processingFeeComponent } from '$config'; import { ProcessingFeeMethod } from '$libs/fee'; import { parseToWei } from '$libs/util/parseToWei'; import { uid } from '$libs/util/uid'; @@ -31,11 +30,11 @@ let errorCalculatingEnoughEth = false; let modalOpen = false; - let inputBox: InputBox; + let inputBox: InputBox | undefined; // Public API export function resetProcessingFee() { - inputBox.clear(); + inputBox?.clear(); selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; } @@ -58,19 +57,13 @@ } function cancelModal() { - inputBox.clear(); + inputBox?.clear(); selectedFeeMethod = prevOptionSelected; closeModal(); } - function closeModalWithDelay() { - // By adding delay there is enough time to see the selected option - // before closing the modal. Better experience for the user. - setTimeout(closeModal, processingFeeComponent.closingDelayOptionClick); - } - function focusInputBox() { - inputBox.focus(); + inputBox?.focus(); } function inputProcessFee(event: Event) { diff --git a/packages/bridge-ui-v2/src/components/Card/Card.svelte b/packages/bridge-ui-v2/src/components/Card/Card.svelte index c82eed3b36e..7050be733f9 100644 --- a/packages/bridge-ui-v2/src/components/Card/Card.svelte +++ b/packages/bridge-ui-v2/src/components/Card/Card.svelte @@ -7,7 +7,7 @@ md:rounded-[20px] md:border md:border-divider-border - md:glassy-gradient-card`; + dark:md:glassy-gradient-card`; export let title: string; export let text = ''; diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index ac990452895..54fd3f549d7 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -25,7 +25,7 @@ small ? 'px-2 py-[6px]' : 'px-6 py-[10px]', small ? 'rounded-md' : 'rounded-[10px]', small ? 'w-auto' : 'w-full', - readOnly ? '' : 'hover:bg-tertiary-interactive-hover', + readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover', 'flex justify-start content-center body-bold py-2 px-[20px]', ); diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 35c95d40d2e..47bfae1cf44 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -20,12 +20,14 @@ py-[20px] border-b border-b-divider-border - glassy-primary-background + glassy-background + bg-grey-5/10 + dark:bg-grey-900/10 md:border-b-0 md:px-10 md:py-7 "> - +
{#if isBridgePage} diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte index 72b205328e7..1bf645f4839 100644 --- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte +++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte @@ -24,7 +24,8 @@ | 'arrow-top-right' | 'up-down' | 'check' - | 'trash'; + | 'trash' + | 'adjustments';
@@ -64,7 +80,7 @@ md:w-[226px] ">
@@ -87,7 +103,7 @@ {$t('nav.activities')} -
  • +
  • {$t('nav.explorer')} @@ -99,6 +115,13 @@ {$t('nav.guide')}
    • +
  • + +
    • diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index ac2bdecebf4..815206d6b3f 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -4,6 +4,7 @@ "faucet": "Faucet", "activities": "Activities", "explorer": "Explorer", + "theme": "Theme", "guide": "Guide", "nft": "NFT", "token": "Token" diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts index 786e52b96c3..633f27b0052 100644 --- a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts +++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts @@ -22,7 +22,7 @@ export const web3modal = new Web3Modal( '--w3m-font-feature-settings': 'normal', '--w3m-accent-color': 'var(--primary-interactive)', - '--w3m-accent-fill-color': 'var(--primary-content)', + '--w3m-accent-fill-color': '#F3F3F3', // grey-10 '--w3m-button-border-radius': '9999px', @@ -42,7 +42,7 @@ export const web3modal = new Web3Modal( '--w3m-text-big-bold-weight': '700', '--w3m-text-big-bold-line-height': '24px', - '--w3m-background-color': 'var(--neutral-background)', + '--w3m-background-color': 'var(--primary-brand)', '--w3m-overlay-background-color': 'var(--overlay-background)', '--w3m-background-border-radius': '20px', '--w3m-container-border-radius': '0', @@ -57,7 +57,7 @@ export const web3modal = new Web3Modal( '--w3m-color-bg-1': 'var(--primary-background)', '--w3m-color-bg-2': 'var(--neutral-background)', // '--w3m-color-bg-3': '', - // '--w3m-color-overlay': 'var(--neutral-background)', + '--w3m-color-overlay': 'var(--neutral-background)', }, themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark', }, diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css index 167d1b327bc..4291493a354 100644 --- a/packages/bridge-ui-v2/src/styles/base.css +++ b/packages/bridge-ui-v2/src/styles/base.css @@ -33,4 +33,9 @@ background-size: 700px, cover, cover; } } + + /* In light mode there is no background image */ + [data-theme='light'] body { + background-image: none; + } } diff --git a/packages/bridge-ui-v2/src/styles/override.css b/packages/bridge-ui-v2/src/styles/override.css index d35f042ad08..19f4eb70092 100644 --- a/packages/bridge-ui-v2/src/styles/override.css +++ b/packages/bridge-ui-v2/src/styles/override.css @@ -18,8 +18,7 @@ input[type='number'] { * in DaisyUI's drawer. Unfortunately cannot be done via variables */ .drawer-toggle:checked ~ .drawer-side > .drawer-overlay { - /* Primary background: '#0B101B' => grey-900 */ - background-color: hsl(221, 42%, 7%); + background-color: var(--primary-background); } /** diff --git a/packages/bridge-ui-v2/src/styles/utilities.css b/packages/bridge-ui-v2/src/styles/utilities.css index f45da5c551d..436407c77b2 100644 --- a/packages/bridge-ui-v2/src/styles/utilities.css +++ b/packages/bridge-ui-v2/src/styles/utilities.css @@ -21,8 +21,8 @@ @apply sticky top-0; } - .glassy-primary-background { - @apply bg-grey-900/10 backdrop-filter backdrop-blur-sm; + .glassy-background { + @apply backdrop-filter backdrop-blur-sm; } /* Flex shortcuts */ diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js index 33400cbca3d..4625c0926be 100644 --- a/packages/bridge-ui-v2/tailwind.config.js +++ b/packages/bridge-ui-v2/tailwind.config.js @@ -2,7 +2,7 @@ import daisyuiPlugin from 'daisyui'; /** @type {import('tailwindcss').Config} */ export default { - darkMode: ['class', '[data-theme]'], + darkMode: ['class', '[data-theme="dark"]'], content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: { @@ -302,7 +302,7 @@ export default { primary: '#C8047D', // pink-500, 'primary-focus': '#E81899', // pink-400 - 'primary-content': '#F3F3F3', // grey-10 + 'primary-content': '#191E28', // grey-800 secondary: '#E81899', // pink-400 // 'secondary-focus': '', @@ -310,7 +310,7 @@ export default { neutral: '#E7E7E7', // grey-50 'neutral-focus': '#CACBCE', // grey-100 - 'neutral-content': '#F3F3F3', // grey-10 + 'neutral-content': '#191E28', // grey-800 'base-100': '#FAFAFA', // grey-5 // 'base-200': '',