Skip to content

Commit

Permalink
feat(bridge-ui-v2): light theme (#14524)
Browse files Browse the repository at this point in the history
  • Loading branch information
jscriptcoder committed Aug 18, 2023
1 parent d3439f3 commit 4fe5ccd
Show file tree
Hide file tree
Showing 18 changed files with 139 additions and 93 deletions.
8 changes: 5 additions & 3 deletions packages/bridge-ui-v2/src/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.theme === 'dark' ||
(localStorage.getItem('theme') && localStorage.theme.toLocaleLowerCase() === 'dark') ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
</script>
</head>
Expand Down
87 changes: 40 additions & 47 deletions packages/bridge-ui-v2/src/components/Activities/Activities.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -119,54 +119,47 @@

<div class="flex flex-col justify-center w-full">
<Card title={$t('activities.title')} text={$t('activities.description')}>
<ChainSelector class="py-[35px] " label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
<div class="flex flex-col" style={`min-height: calc(${transactionsToShow.length} * 80px);`}>
{#if isDesktopOrLarger}
<div class="h-sep" />
<div class="text-white flex">
<div class="w-1/5 py-2">{$t('activities.header.from')}</div>
<div class="w-1/5 py-2">{$t('activities.header.to')}</div>
<div class="w-1/5 py-2">{$t('activities.header.amount')}</div>
<div class="w-1/5 py-2 flex flex-row">
{$t('activities.header.status')}
<StatusInfoDialog />
<div class="space-y-[35px]">
<ChainSelector label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
<div class="flex flex-col" style={`min-height: calc(${transactionsToShow.length} * 80px);`}>
{#if isDesktopOrLarger}
<div class="h-sep" />
<div class="text-primary-content flex">
<div class="w-1/5 py-2">{$t('activities.header.from')}</div>
<div class="w-1/5 py-2">{$t('activities.header.to')}</div>
<div class="w-1/5 py-2">{$t('activities.header.amount')}</div>
<div class="w-1/5 py-2 flex flex-row">
{$t('activities.header.status')}
<StatusInfoDialog />
</div>
<div class="w-1/5 py-2">{$t('activities.header.explorer')}</div>
</div>
<div class="w-1/5 py-2">{$t('activities.header.explorer')}</div>
</div>
<div class="h-sep" />
{/if}

{#if renderLoading}
<div class="flex items-center justify-center text-white h-[80px]">
<Spinner /> <span class="pl-3">{$t('common.loading')}...</span>
</div>
{/if}

{#if renderTransactions}
<div
class="flex flex-col items-center"
style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
{#each transactionsToShow as item (item.hash)}
<Transaction {item} on:click={isDesktopOrLarger ? undefined : () => openDetails(item)} />
<div class="h-sep" />
{/each}
</div>
{/if}

{#if renderNoTransactions}
<div class="flex items-center justify-center text-white h-[80px]">
<span class="pl-3">{$t('activities.no_transactions')}</span>
</div>
{/if}

<!-- TODO: we don't have this in the design -->
<!-- {#if !$account?.isConnected}
<div class="flex items-center justify-center text-white h-[80px]">
<Button type="primary" on:click={onWalletConnect} class="px-[28px] py-[14px] ">
<span class="body-bold">{$t('wallet.connect')}</span>
</Button>
</div>
{/if} -->
<div class="h-sep" />
{/if}

{#if renderLoading}
<div class="flex items-center justify-center text-primary-content h-[80px]">
<Spinner /> <span class="pl-3">{$t('common.loading')}...</span>
</div>
{/if}

{#if renderTransactions}
<div
class="flex flex-col items-center"
style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
{#each transactionsToShow as item (item.hash)}
<Transaction {item} on:click={isDesktopOrLarger ? undefined : () => openDetails(item)} />
<div class="h-sep" />
{/each}
</div>
{/if}

{#if renderNoTransactions}
<div class="flex items-center justify-center text-primary-content h-[80px]">
<span class="pl-3">{$t('activities.no_transactions')}</span>
</div>
{/if}
</div>
</div>
</Card>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
<div class="w-1/5 py-2 flex flex-row">
<ChainSymbolName chainId={item.srcChainId} />
Expand All @@ -47,7 +47,7 @@
{item.symbol}
</div>
{:else}
<div class="flex text-white h-[80px] w-full">
<div class="flex text-primary-content h-[80px] w-full">
<div class="flex-col">
<div class="flex">
<ChainSymbolName chainId={item.srcChainId} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}
Expand All @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/Card/Card.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]',
);
Expand Down
6 changes: 4 additions & 2 deletions packages/bridge-ui-v2/src/components/Header/Header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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
">
<LogoWithText width={77} height={21} class="md:hidden" />
<LogoWithText width={77} height={21} class="md:hidden" textFillClass={'fill-primary-content'} />

<div class="flex justify-end w-full">
{#if isBridgePage}
Expand Down
43 changes: 35 additions & 8 deletions packages/bridge-ui-v2/src/components/Icon/Icon.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
| 'arrow-top-right'
| 'up-down'
| 'check'
| 'trash';
| 'trash'
| 'adjustments';
</script>

<script lang="ts">
Expand Down Expand Up @@ -173,18 +174,44 @@
clip-rule="evenodd"
d="M2.23966 6.7996C2.5432 7.08145 3.01775 7.06387 3.2996 6.76034L5.25 4.6599L5.25 13.25C5.25 13.6642 5.58579 14 6 14C6.41422 14 6.75 13.6642 6.75 13.25V4.6599L8.70041 6.76034C8.98226 7.06387 9.45681 7.08145 9.76034 6.79959C10.0639 6.51774 10.0815 6.04319 9.7996 5.73966L6.5496 2.23966C6.40769 2.08684 6.20855 2 6 2C5.79145 2 5.59232 2.08684 5.45041 2.23966L2.20041 5.73966C1.91856 6.04319 1.93613 6.51774 2.23966 6.7996ZM10.2397 13.2004C9.93613 13.4823 9.91856 13.9568 10.2004 14.2603L13.4504 17.7603C13.5923 17.9132 13.7915 18 14 18C14.2086 18 14.4077 17.9132 14.5496 17.7603L17.7996 14.2603C18.0815 13.9568 18.0639 13.4823 17.7603 13.2004C17.4568 12.9186 16.9823 12.9361 16.7004 13.2397L14.75 15.3401V6.75C14.75 6.33579 14.4142 6 14 6C13.5858 6 13.25 6.33579 13.25 6.75V15.3401L11.2996 13.2397C11.0177 12.9361 10.5432 12.9186 10.2397 13.2004Z" />
{:else if type === 'check'}
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" />
</svg>
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" />
{:else if type === 'trash'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Z" />
{:else if type === 'adjustments'}
<path
class={fillClass}
d="M10 3.75C10 2.64543 9.10457 1.75 8 1.75C6.89543 1.75 6 2.64543 6 3.75C6 4.85457 6.89543 5.75 8 5.75C9.10457 5.75 10 4.85457 10 3.75Z" />
<path
class={fillClass}
d="M17.25 4.5C17.6642 4.5 18 4.16421 18 3.75C18 3.33579 17.6642 3 17.25 3L11.75 3C11.3358 3 11 3.33579 11 3.75C11 4.16421 11.3358 4.5 11.75 4.5L17.25 4.5Z" />
<path
class={fillClass}
d="M5 3.75C5 4.16421 4.66421 4.5 4.25 4.5H2.75C2.33579 4.5 2 4.16421 2 3.75C2 3.33579 2.33579 3 2.75 3L4.25 3C4.66421 3 5 3.33579 5 3.75Z" />
<path
class={fillClass}
d="M4.25 17C4.66421 17 5 16.6642 5 16.25C5 15.8358 4.66421 15.5 4.25 15.5H2.75C2.33579 15.5 2 15.8358 2 16.25C2 16.6642 2.33579 17 2.75 17H4.25Z" />
<path
class={fillClass}
d="M17.25 17C17.6642 17 18 16.6642 18 16.25C18 15.8358 17.6642 15.5 17.25 15.5H11.75C11.3358 15.5 11 15.8358 11 16.25C11 16.6642 11.3358 17 11.75 17H17.25Z" />
<path
class={fillClass}
d="M9 10C9 10.4142 8.66421 10.75 8.25 10.75H2.75C2.33579 10.75 2 10.4142 2 10C2 9.58579 2.33579 9.25 2.75 9.25L8.25 9.25C8.66421 9.25 9 9.58579 9 10Z" />
<path
class={fillClass}
d="M17.25 10.75C17.6642 10.75 18 10.4142 18 10C18 9.58579 17.6642 9.25 17.25 9.25H15.75C15.3358 9.25 15 9.58579 15 10C15 10.4142 15.3358 10.75 15.75 10.75H17.25Z" />
<path
class={fillClass}
d="M14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10Z" />
<path
class={fillClass}
d="M10 16.25C10 15.1454 9.10457 14.25 8 14.25C6.89543 14.25 6 15.1454 6 16.25C6 17.3546 6.89543 18.25 8 18.25C9.10457 18.25 10 17.3546 10 16.25Z" />
{/if}
</svg>
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
export let external = false;
$: activeClass = active
? 'body-bold bg-primary-interactive hover:bg-primary-interactive-hover'
? 'body-bold bg-primary-interactive text-grey-10 hover:!bg-primary-interactive hover:!text-grey-10'
: 'body-regular hover:bg-secondary-interactive-hover';
$: classes = classNames('p-3 rounded-full flex justify-start content-center', activeClass, $$props.class);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
// Default for dark mode
export let logoFillClass = 'fill-pink-500';
export let logoFillClass = 'fill-pink-400';
export let textFillClass = 'fill-grey-5';
export let width = 125;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
--toastContainerBottom: auto;
--toastContainerTop: 77px;
--toastContainerLeft: calc(50vw - 160px);
--toastBoxShadow: none;
--toastWidth: 320px;
/*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
</script>

<script lang="ts">
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { page } from '$app/stores';
Expand All @@ -11,12 +12,9 @@
import { LogoWithText } from '$components/Logo';
import { PUBLIC_GUIDE_URL, PUBLIC_L2_EXPLORER_URL } from '$env/static/public';
let darkTheme: boolean;
let drawerToggleElem: HTMLInputElement;
$: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
$: isFaucetPage = $page.route.id === '/faucet';
$: isActivitiesPage = $page.route.id === '/activities';
function closeDrawer() {
drawerToggleElem.checked = false;
}
Expand All @@ -30,6 +28,24 @@
function getIconFillClass(active: boolean) {
return active ? 'fill-white' : 'fill-primary-icon';
}
function switchTheme(dark: boolean) {
if (typeof darkTheme === 'undefined') return;
const theme = dark ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
$: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
$: isFaucetPage = $page.route.id === '/faucet';
$: isActivitiesPage = $page.route.id === '/activities';
$: switchTheme(darkTheme);
onMount(() => {
darkTheme = localStorage.getItem('theme')?.toLocaleLowerCase() === 'dark';
});
</script>

<div class="drawer md:drawer-open">
Expand Down Expand Up @@ -64,7 +80,7 @@
md:w-[226px]
">
<a href="/" class="hidden md:inline-block">
<LogoWithText />
<LogoWithText textFillClass="fill-primary-content" />
</a>

<div role="button" tabindex="0" on:click={closeDrawer} on:keydown={onMenuKeydown}>
Expand All @@ -87,7 +103,7 @@
<span>{$t('nav.activities')}</span>
</LinkButton>
</li>
<li>
<li class="border-t border-t-divider-border pt-2">
<LinkButton href={PUBLIC_L2_EXPLORER_URL} external>
<Icon type="explorer" />
<span>{$t('nav.explorer')}</span>
Expand All @@ -99,6 +115,13 @@
<span>{$t('nav.guide')}</span>
</LinkButton>
</li>
<li>
<label>
<Icon type="adjustments" />
<span>{$t('nav.theme')}</span>
<input type="checkbox" class="toggle" bind:checked={darkTheme} />
</label>
</li>
</ul>
</div>
</aside>
Expand Down
1 change: 1 addition & 0 deletions packages/bridge-ui-v2/src/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"faucet": "Faucet",
"activities": "Activities",
"explorer": "Explorer",
"theme": "Theme",
"guide": "Guide",
"nft": "NFT",
"token": "Token"
Expand Down

1 comment on commit 4fe5ccd

@vercel
Copy link

@vercel vercel bot commented on 4fe5ccd Aug 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bridge-ui-v2 – ./packages/bridge-ui-v2

taiko-mono-bridge-ui-v2.vercel.app
bridge-ui-v2-taikoxyz.vercel.app
bridge-ui-v2-git-main-taikoxyz.vercel.app

Please sign in to comment.