Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(bridge-ui-v2): styling adjustments for dialogs #14666

Merged
merged 8 commits into from
Sep 8, 2023
Merged

feat(bridge-ui-v2): styling adjustments for dialogs #14666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bf23791
disabled buttons now have a border
KorbinianK Sep 7, 2023
408d75f
fix mobile token dropdown
KorbinianK Sep 7, 2023
aad9343
remove duplicate css, fix border color
KorbinianK Sep 7, 2023
9d122a5
mobile token dropdown width
KorbinianK Sep 7, 2023
a0667f5
recipient and processing fee dialogs
KorbinianK Sep 7, 2023
c420bfe
override functionality for border buttons
KorbinianK Sep 7, 2023
141675e
linting
KorbinianK Sep 7, 2023
923e031
linting
KorbinianK Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/bridge-ui-v2/src/components/Activities/Activities.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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