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

taikoxyz · Sep 8, 2023 · 91c6284 · 91c6284 · vercel · Sep 8, 2023
1 parent f16d45d
commit 91c6284
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 184 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
@@ -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';
@@ -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[] = [];
 

diff --git a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
@@ -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();
   }
 
@@ -25,7 +24,7 @@
     });
   }
 
-  function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
+  function onNetworkChange() {
     updateDestOptions();
   }
 </script>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -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>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -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>

diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
@@ -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
@@ -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',
 
@@ -60,6 +71,8 @@
     // since we're showing some important information.
     loading ? 'btn-disabled !text-primary-content' : null,
 
+    disabled ? borderClasses : '',
+
     $$props.class,
   );
 
@@ -69,7 +82,7 @@
   }
 </script>
 
-<button {...$$restProps} class={classes} on:click>
+<button {...$$restProps} {disabled} class={classes} on:click>
   {#if loading}
     <Spinner />
   {/if}

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -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';
@@ -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">
@@ -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}>