From d89e446275ba2381d536d5b057302be2a49d4e9f Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Fri, 1 Sep 2023 15:14:06 +0200
Subject: [PATCH 1/2] drop-shadow and background adjustents

---
 packages/bridge-ui-v2/.gitignore              |  7 +++
 .../Activities/StatusInfoDialog.svelte        | 57 +++++++++----------
 .../Bridge/ProcessingFee/ProcessingFee.svelte |  4 +-
 .../src/components/Bridge/Recipient.svelte    |  4 +-
 .../TokenDropdown/DialogView.svelte           |  2 +-
 .../TokenDropdown/DropdownView.svelte         |  2 +-
 .../bridge-ui-v2/src/styles/components.css    | 31 +++++++++-
 packages/bridge-ui-v2/src/styles/override.css | 18 ++++++
 .../bridge-ui-v2/src/styles/utilities.css     |  8 +++
 9 files changed, 93 insertions(+), 40 deletions(-)

diff --git a/packages/bridge-ui-v2/.gitignore b/packages/bridge-ui-v2/.gitignore
index 6635cf55427..178c296b661 100644
--- a/packages/bridge-ui-v2/.gitignore
+++ b/packages/bridge-ui-v2/.gitignore
@@ -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/*
\ No newline at end of file
diff --git a/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte
index 5164ecde8f7..969734705ad 100644
--- a/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte
@@ -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) => {
@@ -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>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
index 207745fdd10..5b5295cbf64 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -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>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index d8d9c16dca4..9623913a1a7 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -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>
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
index 06e5a42c6d8..d3182840bcb 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -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 -->
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
index b9cc7b3bfb9..3e0594fc65d 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte
@@ -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',
   );
 
diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
index a26170b8611..775d17cfb48 100644
--- a/packages/bridge-ui-v2/src/styles/components.css
+++ b/packages/bridge-ui-v2/src/styles/components.css
@@ -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;
 
@@ -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);
     }
   }
 
@@ -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 */
 }
diff --git a/packages/bridge-ui-v2/src/styles/override.css b/packages/bridge-ui-v2/src/styles/override.css
index 19f4eb70092..885709ea3b3 100644
--- a/packages/bridge-ui-v2/src/styles/override.css
+++ b/packages/bridge-ui-v2/src/styles/override.css
@@ -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;
+}
diff --git a/packages/bridge-ui-v2/src/styles/utilities.css b/packages/bridge-ui-v2/src/styles/utilities.css
index 436407c77b2..c867aa49bca 100644
--- a/packages/bridge-ui-v2/src/styles/utilities.css
+++ b/packages/bridge-ui-v2/src/styles/utilities.css
@@ -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);
+  }
 }

From 9a66b43a2668f856d836e7ec1b4343a939b833e4 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Fri, 1 Sep 2023 15:57:02 +0200
Subject: [PATCH 2/2] fix switchchain modal style

---
 .../components/SwitchChainModal/SwitchChainModal.svelte  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte b/packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte
index d12eb5e9a36..58413c9726c 100644
--- a/packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte
+++ b/packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte
@@ -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"
@@ -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} />