feat: bridge

packages/bridge/src/App.less

@@ -7,7 +7,7 @@ body {
   --row-highlight: @background-color-base;
 }
 
-.App-logo {
+.app-logo {
   background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZDgzYWViIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTQwLjM2LDUwLjkxYzAuMDA3LTguMTc0LDMuODM2LTExLjUyNSw3LjA0OC0xMi44OThjNi41NTEtMi44MDEsMTYuNzksMC4xNDEsMjMuODA5LDYuODQyICBjMS4yNDYsMS4xODksMi4zNjEsMi4zMDksMy4zNjUsMy4zNjhjLTUuNjg0LTguMzcyLTE1LjAyNS0xNy41NjYtMjkuMDY0LTE4Ljg1OWMtNy43OTQtMC43MTYtMTMuNzk0LDIuNzk5LTE2LjAzMyw5LjQwOCAgYy0yLjY0OSw3LjgyMSwwLjM0MSwxOS4zMDUsMTEuMTgxLDI2LjEyMmM2LjE1MywzLjg2OSwxMi4zLDYuODY5LDE3LjM0MSw5LjA0NWMtMC41NTEtMC4zNTQtMS4xMDUtMC43MTYtMS42Ni0xLjA5MSAgQzQ1LjczMyw2NS42NjIsNDAuMzU0LDU4LjI4MSw0MC4zNiw1MC45MXoiPjwvcGF0aD48cGF0aCBkPSJNNjAuMDI3LDYzLjc2MWMtMC4wNzgtNC43MTUsMS44OTgtOC4yNSw1LjQyMi05LjY5OGM0LjEzOS0xLjcsOS40OS0wLjAwNCwxMy42MzMsNC4zMjMgIGMwLjY5MSwwLjcyMywxLjMwMywxLjQ1MywxLjg3NSwyLjE4NGMtMS42NzQtMy42OTktNC41MS03Ljk1OC0xMS4xMjEtMTQuMjY5Yy02LjM3MS02LjA4MS0xNS44NzktOC45MTItMjEuNjQyLTYuNDUgIGMtMy44MTIsMS42MjktNS44MjksNS40NTQtNS44MzQsMTEuMDYxYy0wLjAxLDExLjgxNSwxNi4zMTIsMjEuNjQ2LDI1LjA3MiwyNi4wNzJDNjMuNzc1LDczLjc0Niw2MC4xMTUsNjkuMTY4LDYwLjAyNyw2My43NjF6Ij48L3BhdGg+PHBhdGggZD0iTTI3LjU5MSwzOC4xM2MyLjU1Ni03LjU0NSw5LjMzMS0xMS41NjgsMTguMTExLTEwLjc1OGMxMS41MjksMS4wNjEsMjAuMDE1LDcuMTQ4LDI2LjAxMywxMy45MiAgQzYxLjUsMjYuMDU0LDQ4Ljk2MywyMC4zMzksNDguODE3LDIwLjI3NGMtMy4yOTYtMS42ODgtNi43OTctMi41MzEtMTAuNDU3LTIuNTMxYy0xMi43NzQsMC0yMy4xNjcsMTAuNTgtMjMuMTY3LDIzLjU4MyAgYzAsNy45NjEsNC4yMDEsMTUuNTIxLDExLjIzOCwyMC4yMjJjMy43ODksMi41MywxMS40ODgsNS44MjQsMjAuMDQ2LDkuMDM4Yy0yLjI1NC0xLjIxNS00LjU2NC0yLjU0Ny02Ljg3NS00ICBDMjcuODg1LDU5LjIxOSwyNC42OSw0Ni42OTQsMjcuNTkxLDM4LjEzeiI+PC9wYXRoPjxwYXRoIGQ9Ik03Ny42MzcsNTkuNzY5Yy0zLjU2OC0zLjcyOS04LjA1Ny01LjI0Mi0xMS40MjgtMy44NTVjLTIuNzIxLDEuMTE4LTQuMjQ2LDMuOTY3LTQuMTgyLDcuODE0ICBjMC4xNDgsOS4wMzUsMTEuMzEzLDE1LjMxOCwxMy41ODgsMTYuNTkyYzMuNDg5LDEuOTU0LDcuNjI1LDIuMDg3LDcuOTA0LDEuOTM4czAuMjc5LTAuMTQ5LDAuNTMxLTAuNjUxICBjMC42Ni0xLjMwOSwxLjA1My00LjI3NSwwLjM2MS04Ljk2NkM4My43NzcsNjkuNDg5LDgyLjA5Niw2NC40MjcsNzcuNjM3LDU5Ljc2OXoiPjwvcGF0aD48L3N2Zz4=");
   height: 32px;
   pointer-events: none;
@@ -28,9 +28,12 @@ body {
   }
 
   h2 {
+    margin: 0px;
+
     span {
       display: inline-block;
       font-size: 16px;
+      margin-bottom: 20px;
       background: linear-gradient(270deg, @solana-green 0%, #DC1FFF 101.97%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -46,40 +49,14 @@ body {
   line-height: 2px;
 }
 
-.footer {
-  background-color: black;
-  color: lightgray;
-  padding: 10px 10px;
-  max-height: 60px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .action-spinner {
   position: absolute;
   right: 5px;
 }
 
-.Banner {
-  min-height: 30px;
-  width: 100%;
-  background-color: #fff704;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  // z-index: 10;
-}
-
-.Banner-description {
-  color: black;
-  text-align: center;
-  display: flex;
-  align-self: center;
-  align-items: center;
-  height: 100%;
-}
 
 .App-Bar {
+  background-color: #181818;
   display: grid;
   grid-template-columns: 1fr 120px;
   -webkit-box-pack: justify;
@@ -398,8 +375,31 @@ em {
   font-weight: normal;
 }
 
+.bridge-card {
+  border-radius: 20px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
+  width: 450px;
+  margin: 40px auto 4px auto;
+  padding: 0px;
+
+  .ant-tabs-tab {
+    width: 50%;
+    margin: 0px;
+    justify-content: center;
+    border-radius: 20px 20px 0px 0px;
+  }
+
+  .ant-tabs-tab-active {
+    background-color: @background-color-light;
+  }
+
+  .ant-tabs-nav-list {
+    width: 100% !important;
+  }
+}
+
 @media only screen and (max-width: 600px) {
-  .exchange-card {
+  .bridge-card {
     width: 360px;
   }
 }

packages/bridge/src/components/AppBar/index.tsx

@@ -11,7 +11,7 @@ export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => {
   const { connected, wallet } = useWallet();
 
   const TopBar = (
-    <div>
+    <div className="App-Bar-right">
       {connected ? (
         <CurrentUserBadge />
       ) : (

packages/bridge/src/components/Layout/index.tsx

@@ -5,6 +5,7 @@ import { Link, useLocation } from 'react-router-dom';
 
 import { LABELS } from '../../constants';
 import { contexts } from '@oyster/common';
+import { AppBar } from '../AppBar';
 
 
 const { Header, Content } = Layout;
@@ -26,8 +27,9 @@ export const AppLayout = React.memo((props: any) => {
       <Layout
         title={LABELS.APP_TITLE}
       >
-        {location.pathname !== '/' && <Header className="header">
-          <div className="App-logo" />
+        {location.pathname !== '/' && <Header className="App-Bar">
+          <div className="app-title"><h2>WORMHOLE</h2></div>
+          <AppBar />
         </Header>}
         <Content style={{ padding: '0 50px' }}>
           {props.children}

packages/bridge/src/components/Transfer/index.tsx

@@ -49,7 +49,7 @@ export const Transfer = () => {
 
   return (
     <>
-    <div className="input-card">
+    <div className="exchange-card">
       INPUT
       <Button type="primary" className="swap-button">
         ⇅