Skip to content

Commit

Permalink
feat(bridge-ui-v2): styling adjustments for dialogs (#14666)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KorbinianK
KorbinianK authored Sep 8, 2023
1 parent f16d45d commit 91c6284
Show file tree
Hide file tree
Showing 9 changed files with 198 additions and 184 deletions.
3 changes: 1 addition & 2 deletions packages/bridge-ui-v2/src/components/Activities/Activities.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import type { Address } from 'viem';
import { Card } from '$components/Card';
import { ChainSelector } from '$components/ChainSelector';
import { DesktopOrLarger } from '$components/DesktopOrLarger';
import { warningToast } from '$components/NotificationToast';
import OnAccount from '$components/OnAccount/OnAccount.svelte';
import { Paginator } from '$components/Paginator';
import { Spinner } from '$components/Spinner';
Expand All @@ -18,7 +18,6 @@
import MobileDetailsDialog from './MobileDetailsDialog.svelte';
import StatusInfoDialog from './StatusInfoDialog.svelte';
import Transaction from './Transaction.svelte';
import { warningToast } from '$components/NotificationToast';
let transactions: BridgeTransaction[] = [];
Expand Down
11 changes: 5 additions & 6 deletions packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
<script lang="ts">
import { destNetwork, destOptions } from '$components/Bridge/state';
import SwitchChainsButton from '$components/Bridge/SwitchChainsButton.svelte';
import { ChainSelector } from '$components/ChainSelector';
import { OnNetwork } from '$components/OnNetwork';
import { hasBridge } from '$libs/bridge/bridges';
import { chains } from '$libs/chain';
import { type Network, network } from '$stores/network';
import { ChainSelector } from '$components/ChainSelector';
import { network } from '$stores/network';
function handleSourceChange(event: CustomEvent<number>): void {
function handleSourceChange(): void {
updateDestOptions();
}
function handleDestChange(event: CustomEvent<number>): void {
function handleDestChange(): void {
updateDestOptions();
}
Expand All @@ -25,7 +24,7 @@
});
}
function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
function onNetworkChange() {
updateDestOptions();
}
</script>
Expand Down
180 changes: 93 additions & 87 deletions packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,105 +142,111 @@
<Icon type="x-close" fillClass="fill-primary-icon" size={24} />
</button>

<h3 class="title-body-bold mb-7">{$t('processing_fee.title')}</h3>

<p class="body-regular text-secondary-content mb-3">{$t('processing_fee.description')}</p>

<ul class="space-y-7">
<!-- RECOMMENDED -->
<li class="f-between-center">
<div class="f-col">
<label for="input-recommended" class="body-bold">
{$t('processing_fee.recommended.label')}
</label>
<span class="body-small-regular text-secondary-content">
<!-- TODO: think about the UI for this part. Talk to Jane -->
{#if calculatingRecommendedAmount}
<LoadingText mask="0.0001" /> ETH
{:else if errorCalculatingRecommendedAmount}
{$t('processing_fee.recommended.error')}
{:else}
{formatEther(recommendedAmount)} ETH
{/if}
</span>
</div>
<input
id="input-recommended"
class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
type="radio"
value={ProcessingFeeMethod.RECOMMENDED}
name="processingFeeMethod"
bind:group={selectedFeeMethod} />
</li>

<!-- NONE -->
<li class="space-y-2">
<div class="f-between-center">
<div class="w-full">
<h3 class="title-body-bold mb-7">{$t('processing_fee.title')}</h3>

<p class="body-regular text-secondary-content mb-3">{$t('processing_fee.description')}</p>

<ul class="space-y-7">
<!-- RECOMMENDED -->
<li class="f-between-center">
<div class="f-col">
<label for="input-none" class="body-bold">
{$t('processing_fee.none.label')}
<label for="input-recommended" class="body-bold">
{$t('processing_fee.recommended.label')}
</label>
<span class="body-small-regular text-secondary-content">
{$t('processing_fee.none.text')}
<!-- TODO: think about the UI for this part. Talk to Jane -->
{#if calculatingRecommendedAmount}
<LoadingText mask="0.0001" /> ETH
{:else if errorCalculatingRecommendedAmount}
{$t('processing_fee.recommended.error')}
{:else}
{formatEther(recommendedAmount)} ETH
{/if}
</span>
</div>
<input
id="input-none"
id="input-recommended"
class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
type="radio"
disabled={!hasEnoughEth}
value={ProcessingFeeMethod.NONE}
value={ProcessingFeeMethod.RECOMMENDED}
name="processingFeeMethod"
bind:group={selectedFeeMethod} />
</div>
</li>

<!-- NONE -->
<li class="space-y-2">
<div class="f-between-center">
<div class="f-col">
<label for="input-none" class="body-bold">
{$t('processing_fee.none.label')}
</label>
<span class="body-small-regular text-secondary-content">
{$t('processing_fee.none.text')}
</span>
</div>
<input
id="input-none"
class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
type="radio"
disabled={!hasEnoughEth}
value={ProcessingFeeMethod.NONE}
name="processingFeeMethod"
bind:group={selectedFeeMethod} />
</div>

{#if !hasEnoughEth}
<FlatAlert type="error" message={$t('processing_fee.none.warning')} />
{/if}
</li>

{#if !hasEnoughEth}
<FlatAlert type="error" message={$t('processing_fee.none.warning')} />
<!-- CUSTOM -->
<li class="f-between-center">
<div class="f-col">
<label for="input-custom" class="body-bold">
{$t('processing_fee.custom.label')}
</label>
<span class="body-small-regular text-secondary-content">
{$t('processing_fee.custom.text')}
</span>
</div>
<input
id="input-custom"
class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
type="radio"
value={ProcessingFeeMethod.CUSTOM}
name="processingFeeMethod"
bind:group={selectedFeeMethod} />
</li>
</ul>
<div class="relative f-items-center my-[20px]">
{#if selectedFeeMethod === ProcessingFeeMethod.CUSTOM}
<InputBox
type="number"
min="0"
placeholder="0.01"
disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
class="w-full input-box p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
on:input={inputProcessFee}
bind:this={inputBox} />
<span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
{/if}
</li>

<!-- CUSTOM -->
<li class="f-between-center">
<div class="f-col">
<label for="input-custom" class="body-bold">
{$t('processing_fee.custom.label')}
</label>
<span class="body-small-regular text-secondary-content">
{$t('processing_fee.custom.text')}
</span>
</div>
<input
id="input-custom"
class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
type="radio"
value={ProcessingFeeMethod.CUSTOM}
name="processingFeeMethod"
bind:group={selectedFeeMethod} />
</li>
</ul>
<div class="relative f-items-center my-[20px]">
{#if selectedFeeMethod === ProcessingFeeMethod.CUSTOM}
<InputBox
type="number"
min="0"
placeholder="0.01"
disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
class="w-full input-box p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
on:input={inputProcessFee}
bind:this={inputBox} />
<span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
{/if}
</div>
<div class="grid grid-cols-2 gap-[20px]">
<Button
on:click={cancelModal}
type="neutral"
class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
<span class="body-bold">{$t('common.cancel')}</span>
</Button>
<Button type="primary" class="px-[28px] py-[10px] rounded-full w-auto" on:click={closeModal}>
<span class="body-bold">{$t('common.confirm')}</span>
</Button>
</div>
<div class="grid grid-cols-2 gap-[20px]">
<Button
on:click={cancelModal}
type="neutral"
class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
<span class="body-bold">{$t('common.cancel')}</span>
</Button>
<Button
type="primary"
class="px-[28px] py-[10px] rounded-full w-auto border-primary-brand"
hasBorder={true}
on:click={closeModal}>
<span class="body-bold">{$t('common.confirm')}</span>
</Button>
</div>
</div>
</div>
</dialog>
Expand Down
53 changes: 28 additions & 25 deletions packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,31 +92,34 @@
<Icon type="x-close" fillClass="fill-primary-icon" size={24} />
</button>

<h3 class="title-body-bold mb-7">{$t('recipient.title')}</h3>

<p class="body-regular text-secondary-content mb-3">{$t('recipient.description')}</p>

<div class="relative my-[20px]">
<AddressInput
bind:this={addressInput}
bind:ethereumAddress={ethereumAddressBinding}
on:addressvalidation={onAddressValidation} />
</div>

<div class="grid grid-cols-2 gap-[20px]">
<Button
on:click={cancelModal}
type="neutral"
class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
<span class="body-bold">{$t('common.cancel')}</span>
</Button>
<Button
type="primary"
disabled={invalidAddress || !ethereumAddressBinding}
class="px-[28px] py-[10px] rounded-full w-auto"
on:click={closeModal}>
<span class="body-bold">{$t('common.confirm')}</span>
</Button>
<div class="w-full">
<h3 class="title-body-bold mb-7">{$t('recipient.title')}</h3>

<p class="body-regular text-secondary-content mb-3">{$t('recipient.description')}</p>

<div class="relative my-[20px]">
<AddressInput
bind:this={addressInput}
bind:ethereumAddress={ethereumAddressBinding}
on:addressvalidation={onAddressValidation} />
</div>

<div class="grid grid-cols-2 gap-[20px]">
<Button
on:click={cancelModal}
type="neutral"
class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
<span class="body-bold">{$t('common.cancel')}</span>
</Button>
<Button
type="primary"
disabled={invalidAddress || !ethereumAddressBinding}
class="px-[28px] py-[10px] rounded-full w-auto"
on:click={closeModal}
hasBorder={true}>
<span class="body-bold">{$t('common.confirm')}</span>
</Button>
</div>
</div>
</div>
</dialog>
Expand Down
17 changes: 15 additions & 2 deletions packages/bridge-ui-v2/src/components/Button/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,17 @@
export let outline = false;
export let block = false;
export let wide = false;
export let disabled = false;
export let hasBorder = false;
let borderClasses: string = '';
if (hasBorder) {
borderClasses = 'border-1 border-primary-border';
} else {
borderClasses = 'border-0';
}
// Remember, with Tailwind's classes you cannot use string interpolation: `btn-${type}`.
// The whole class name must appear in the code in order for Tailwind compiler to know
Expand All @@ -45,7 +56,7 @@
};
$: classes = classNames(
'btn h-auto min-h-fit border-0',
'btn h-auto min-h-fit ',
type === 'primary' ? 'body-bold' : 'body-regular',
Expand All @@ -60,6 +71,8 @@
// since we're showing some important information.
loading ? 'btn-disabled !text-primary-content' : null,
disabled ? borderClasses : '',
$$props.class,
);
Expand All @@ -69,7 +82,7 @@
}
</script>

<button {...$$restProps} class={classes} on:click>
<button {...$$restProps} {disabled} class={classes} on:click>
{#if loading}
<Spinner />
{/if}
Expand Down
5 changes: 3 additions & 2 deletions packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import type { Address } from 'viem';
import { formatUnits } from 'viem';
import { Alert, FlatAlert } from '$components/Alert';
import { FlatAlert } from '$components/Alert';
import AddressInput from '$components/Bridge/AddressInput.svelte';
import { Button } from '$components/Button';
import { Icon } from '$components/Icon';
Expand Down Expand Up @@ -169,7 +169,7 @@
<h3 class="title-body-bold mb-7">{$t('token_dropdown.custom_token.title')}</h3>

<p class="body-regular text-secondary-content mb-3">{$t('token_dropdown.custom_token.description')}</p>
<div class="mt-4 mb-2">
<div class="mt-4 mb-2 w-full">
<AddressInput bind:ethereumAddress={tokenAddress} on:addressvalidation={onAddressValidation} />
{#if tokenDetails}
<div class="w-full flex items-center justify-between">
Expand All @@ -192,6 +192,7 @@
{:else}
<Button
type="primary"
hasBorder={true}
class="px-[28px] py-[14px] rounded-full flex-1 w-full"
{disabled}
on:click={addCustomErc20Token}>
Expand Down
Loading

2 comments on commit 91c6284

@vercel
Copy link

@vercel vercel bot commented on 91c6284 Sep 8, 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-internal – ./packages/bridge-ui-v2

bridge-ui-v2-internal-git-main-taikoxyz.vercel.app
bridge-ui-v2-internal.vercel.app
bridge-ui-v2-internal-taikoxyz.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91c6284 Sep 8, 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-git-main-taikoxyz.vercel.app
bridge-ui-v2-taikoxyz.vercel.app

Please sign in to comment.