Skip to content

Commit

Permalink
feat(bridge-ui-v2): Style adjustments for dialogs (#14632)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KorbinianK
KorbinianK authored Sep 2, 2023
1 parent 2367c89 commit 148d6aa
Show file tree
Hide file tree
Showing 10 changed files with 98 additions and 44 deletions.
7 changes: 7 additions & 0 deletions packages/bridge-ui-v2/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,10 @@ node_modules
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

# Bridge config files
/config/*
!/config/sample/
!/config/schemas/

src/generated/*
57 changes: 26 additions & 31 deletions packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
const openModal = () => (modalOpen = true);
const classes = {
headline: 'font-bold mt-[20px]',
headline: 'text-center text-base font-bold leading-[24px] tracking-[0.08px] pb-[5px]',
};
const closeModalIfClickedOutside = (e: MouseEvent) => {
Expand All @@ -39,42 +39,37 @@

<svelte:window on:keydown={closeModalIfKeyDown} />

<dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
<dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
<div
class="modal-box relative px-6 py-[35px] md:py-[20px] bg-primary-base-background text-primary-base-content text-center">
<button class="absolute right-6 top-[35px] md:top-[20px]" on:click={closeModal}>
<Icon type="x-close" fillClass="fill-secondary-icon" size={24} />
</button>
<h3 class="title-body-bold mb-[20px]">{$t('activities.status.dialog.title')}</h3>

<p>{$t('activities.status.dialog.description')}</p>
<h4 class={classes.headline}>{$t('activities.status.initiated.name')}</h4>
<p>
class="modal-box
bg-neutral-background text-primary-content text-center max-w-[565px]">
<div class="w-full flex justify-end">
<button class="right-6" on:click={closeModal}>
<Icon type="x-close" fillClass="fill-primary-content" size={24} />
</button>
</div>
<div class="w-full">
<h1 class="title-body-bold">{$t('activities.status.dialog.title')}</h1>
</div>
<div class="inline-flex flex-col space-y-9 px-[37px]">
<br />
{$t('activities.status.dialog.description')}
<h4 class={classes.headline}>{$t('activities.status.initiated.name')}</h4>
{$t('activities.status.initiated.description')}
</p>
<h4 class={classes.headline}>{$t('activities.status.claim.name')}</h4>
<p>
<h4 class={classes.headline}>{$t('activities.status.claim.name')}</h4>
{$t('activities.status.claim.description')}
</p>
<h4 class={classes.headline}>{$t('activities.status.claimed.name')}</h4>
<p>
<h4 class={classes.headline}>{$t('activities.status.claimed.name')}</h4>
{$t('activities.status.claimed.description')}
</p>
<h4 class={classes.headline}>{$t('activities.status.retry.name')}</h4>
<p>
<h4 class={classes.headline}>{$t('activities.status.retry.name')}</h4>
{$t('activities.status.retry.description')}
</p>
<h4 class={classes.headline}>{$t('activities.status.release.name')}</h4>
<p>
<h4 class={classes.headline}>{$t('activities.status.release.name')}</h4>
{$t('activities.status.release.description')}
</p>
<h4 class={classes.headline}>{$t('activities.status.failed.name')}</h4>
<p>
<h4 class={classes.headline}>{$t('activities.status.failed.name')}</h4>
{$t('activities.status.failed.description')}
</p>
</div>
</div>

<!-- We catch key events aboe -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div role="button" tabindex="0" class="overlay-backdrop" on:click={closeModalIfClickedOutside} />
<!-- We catch key events aboe -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div role="button" tabindex="0" class="overlay-backdrop" on:click={closeModalIfClickedOutside} />
</div>
</dialog>
4 changes: 2 additions & 2 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 @@ -119,8 +119,8 @@
<div class="flex space-x-2">
<span class="body-small-bold text-primary-content">{$t('processing_fee.title')}</span>
<Tooltip>
<div>{$t('processing_fee.tooltip_title')}</div>
<div>{$t('processing_fee.tooltip')}</div>
<h2>{$t('processing_fee.tooltip_title')}</h2>
{$t('processing_fee.tooltip')}
</Tooltip>
</div>
<button class="link" on:click={openModal} on:focus={openModal}>{$t('common.edit')}</button>
Expand Down
4 changes: 2 additions & 2 deletions packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@
<div class="flex space-x-2">
<span class="body-small-bold text-primary-content">{$t('recipient.title')}</span>
<Tooltip>
<div>{$t('recipient.tooltip_title')}</div>
<div>{$t('recipient.tooltip')}</div>
<h2>{$t('recipient.tooltip_title')}</h2>
{$t('recipient.tooltip')}
</Tooltip>
</div>
<button class="link" on:click={openModal} on:focus={openModal}>{$t('common.edit')}</button>
Expand Down
9 changes: 5 additions & 4 deletions packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
</script>

<dialog class="modal modal-bottom md:modal-middle" class:modal-open={$switchChainModal}>
<div class="modal-box relative px-6 py-[35px] md:py-[35px] bg-primary-base-background text-primary-base-content">
<div
class="modal-box relative px-6 py-[35px] md:py-[35px] bg-neutral-background text-primary-content box-shadow-small">
{#if switchingNetwork}
<LoadingMask
class="bg-grey-0/60"
Expand All @@ -58,16 +59,16 @@
</button>
<h3 class="title-body-bold mb-[30px]">{$t('switch_modal.title')}</h3>
<p class="body-regular mb-[20px]">{$t('switch_modal.description')}</p>
<ul role="menu" class="">
<ul role="menu" class=" w-full">
{#each chains as chain (chain.id)}
<li
role="menuitem"
tabindex="0"
class="p-4 rounded-[10px] hover:bg-grey-10 hover:cursor-pointer"
class="p-4 rounded-[10px] hover:bg-primary-background hover:cursor-pointer w-full"
on:click={() => selectChain(chain)}
on:keydown={getChainKeydownHandler(chain)}>
<!-- TODO: agree on hover:bg color -->
<div class="f-row f-items-center justify-between">
<div class="f-row f-items-center justify-between w-full">
<div class="f-items-center space-x-4">
<i role="img" aria-label={chain.name}>
<svelte:component this={chainToIconMap[chain.id]} size={32} />
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

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

<ul role="listbox" class="menu p-0 bg-neutral-background">
<ul role="listbox" class="menu p-0 bg-neutral-background box-shadow-small">
{#each tokens as token (token.symbol)}
{@const selected = token === value}
<!-- svelte-ignore a11y-click-events-have-key-events -->
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
let addArc20ModalOpen = false;
$: menuClasses = classNames(
'menu absolute right-0 w-[265px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10',
'menu absolute right-0 w-[265px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10 box-shadow-small',
menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
);
Expand Down
31 changes: 28 additions & 3 deletions packages/bridge-ui-v2/src/styles/components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,9 @@
@apply rounded-[10px]
w-[283px]
p-[24px]
bg-primary-base-background
text-primary-base-content;
bg-neutral-background
text-primary-content
box-shadow-small;

letter-spacing: 0.14px;

Expand All @@ -126,7 +127,7 @@
border-width: 9px;
border-color: transparent transparent transparent;
border-style: solid;
border-top: 9px solid white;
border-top: 9px solid var(--neutral-background);
}
}

Expand Down Expand Up @@ -179,5 +180,29 @@
input {
border: 1px solid var(--border-dark-primary, #5d636f);
}

h1 {
color: var(--primary-content);
text-align: center;
/* Title Section/Bold */
font-family: Public Sans;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 123.077% */
letter-spacing: -0.39px;
}

h2 {
color: var(--primary-content);
font-family: Public Sans;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 133.333% */
letter-spacing: 0.09px;
margin-bottom: 8px;
}

/* TODO: add more components here */
}
18 changes: 18 additions & 0 deletions packages/bridge-ui-v2/src/styles/override.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,21 @@ input[type='number'] {
--tw-text-opacity: 1;
@apply text-tertiary-content;
}

.title-body-bold {
color: var(--primary-content);
text-align: center;
font-family: Public Sans;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.39px;
}

.modal-box {
display: inline-flex;
padding: 25px 24px 45px 24px;
flex-direction: column;
align-items: center;
}
8 changes: 8 additions & 0 deletions packages/bridge-ui-v2/src/styles/utilities.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,12 @@
.f-col {
@apply flex flex-col;
}

.box-shadow-small {
box-shadow: 0px 10px 48px 0px rgba(5, 9, 18, 0.3);
}

.box-shadow-large {
box-shadow: 0px 20px 66px 0px rgba(5, 9, 18, 0.48);
}
}

1 comment on commit 148d6aa

@vercel
Copy link

@vercel vercel bot commented on 148d6aa Sep 2, 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

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

Please sign in to comment.