fix(bridge-ui-v2): complying with design

packages/bridge-ui-v2/src/components/Card/Card.svelte

@@ -2,14 +2,12 @@
   import { classNames } from '$libs/util/classNames';
 
   const styles = `
-      md:card 
-      w-full 
-      md:rounded-xl 
-      md:border 
-      md:border-neutral-background
-      md:bg-gradient-to-r from-glass-gradient-from to-glass-gradient-to 
-      backdrop-blur-sm
-      md:bg-gray-800/30`;
+    w-full 
+    md:card 
+    md:rounded-xl 
+    md:border 
+    md:border-divider-border
+    md:glassy-gradient-card`;
 
   export let title: string;
   export let text = '';
@@ -18,7 +16,7 @@
 </script>
 
 <div class={classes}>
-  <div class="card-body body-regular p-0 md:p-[50px] gap-0">
+  <div class="card-body body-regular p-4 md:p-[50px] gap-0">
     <h2 class="card-title title-screen-bold">{title}</h2>
     {#if text}
       <p>{text}</p>

packages/bridge-ui-v2/src/components/Header/Header.svelte

@@ -10,8 +10,6 @@
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
 </script>
 
-<!-- <DesktopOrLarger bind:is={isDesktopOrLarger} /> -->
-
 <header
   class="
     sticky-top
@@ -27,13 +25,11 @@
     md:px-10
     md:py-7
  ">
-  <LogoWithText width={150} height={50} class="md:hidden" />
+  <LogoWithText width={77} height={21} class="md:hidden" />
 
-  <div class="flex justify-end md:f-between-center w-full">
+  <div class="flex justify-end w-full">
     {#if isBridgePage}
-      <BridgeTabs class="hidden md:flex" />
-    {:else}
-      <div></div>
+      <BridgeTabs class="hidden md:flex md:flex-1" />
     {/if}
 
     <ConnectButton connected={$account?.isConnected} />

packages/bridge-ui-v2/src/components/Page/Page.svelte

@@ -1,3 +1,3 @@
-<div class="f-center w-full px-4 md:px-10 py-[50px] md:py-[60px]">
+<div class="f-center w-full px-0 md:px-10 py-[50px] md:py-[60px]">
   <slot />
 </div>

packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte

@@ -47,7 +47,7 @@
       Slow transitions can be pretty annoying after a while.
       Let's reduce it to 100ms for a better experience.
     -->
-    <div class="w-h-full !duration-100">
+    <div class="w-h-full bg-primary-background !duration-100">
       <header class="flex justify-end py-[20px] px-4 md:hidden">
         <button on:click={closeDrawer} class="h-9">
           <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
@@ -106,3 +106,26 @@
     </div>
   </div>
 </div>
+
+<style>
+  .drawer-content {
+    /* No grid background by default */
+    background-image: url(/bg/spotlights.svg), linear-gradient(180deg, rgb(11 16 27 / 70%) 0%, rgb(11 16 27 / 0%) 100%);
+    background-size: cover, cover;
+    background-blend-mode: lighten, multiply;
+    background-attachment: fixed;
+  }
+
+  @media (min-width: 768px) {
+    .drawer-content {
+      /* Desktop of larger screens (md) have grid */
+      /* TODO: Ask Jane if we have the right svgs here */
+      background-image:
+        url(/bg/grid.svg),
+        url(/bg/spotlights.svg),
+        /* grey-900/70 => grey-900/0 */ linear-gradient(180deg, rgb(11 16 27 / 70%) 0%, rgb(11 16 27 / 0%) 100%);
+      background-size: 840px, cover, cover;
+      background-blend-mode: color-dodge, lighten, multiply;
+    }
+  }
+</style>

packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte

@@ -46,7 +46,7 @@
     aria-haspopup="listbox"
     aria-controls={id}
     aria-expanded={menuOpen}
-    class="f-between-center w-full px-6 py-[14px] input-box"
+    class="f-between-center w-full px-6 py-[14px] input-box bg-neutral-background"
     on:click={openMenu}
     on:focus={openMenu}>
     <div class="space-x-2">

packages/bridge-ui-v2/src/styles/base.css

@@ -17,9 +17,5 @@
   html,
   body {
     height: 100%;
-    background-image: url(/bg/grid.svg), url(/bg/spotlights.svg), linear-gradient(270deg, #1f1f1f 0%, #000000 100%);
-    background-size: 840px, cover, cover;
-    background-blend-mode: color-dodge, lighten, multiply;
-    background-attachment: fixed;
   }
 }

packages/bridge-ui-v2/src/styles/components.css

@@ -75,7 +75,7 @@
 
       /* border */
       /* border-primary-border  */
-      shadow-[0_0_0_1px_#5d636f] 
+      /* shadow-[0_0_0_1px_#5d636f]  */
 
       /* hover:border-2 */
       /* hover:border-primary-border-hover */
@@ -122,5 +122,12 @@
     @apply modal-backdrop bg-overlay-background rounded-xl;
   }
 
+  .glassy-gradient-card {
+    /* Trying to be consistent with design */
+    /* grey-500/10 => grey-800/20 */
+    background: linear-gradient(226deg, rgba(93, 99, 111, 0.1) 1.26%, rgba(25, 30, 40, 0.2) 100%);
+    backdrop-filter: blur(10px);
+  }
+
   /* TODO: add more components here */
 }

packages/bridge-ui-v2/tailwind.config.js

@@ -164,9 +164,6 @@ export default {
         'overlay-background': 'var(--overlay-background)',
 
         'divider-border': 'var(--divider-border)',
-
-        'glass-gradient-from': 'var(--glass-gradient-from)',
-        'glass-gradient-to': 'var(--glass-gradient-to)',
       },
     },
   },
@@ -227,9 +224,6 @@ export default {
 
           '--divider-border': '#444A55', // grey-600
 
-          '--glass-gradient-from': 'rgba(93, 99, 111, 0.10)',
-          '--glass-gradient-to': 'rgba(25, 30, 40, 0.20)',
-
           // ================================ //
 
           primary: '#C8047D', // pink-500,