Merge pull request #9 from fakepixels/tina-frontend-edits-1022

Tina latest frontend edits
base-org · Oct 23, 2024 · 6368f80 · 6368f80
2 parents 49e79b2 + 2eeaeed
commit 6368f80
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 57 deletions.
diff --git a/frontend/app/components/CustomSwap.tsx b/frontend/app/components/CustomSwap.tsx
@@ -110,12 +110,12 @@ export default function CustomSwap() {
   }, []);
 
   return (
-    <div className="flex flex-col items-center w-2/4 border p-5">
+    <div className="flex flex-col items-center w-2/4 p-5 border border-slate-200 rounded-lg">
       <div className="w-full mb-3 text-xl">
-        <h1>Bridge Eth</h1>
+        <h1>Bridge ETH</h1>
       </div>
       <div className="w-full">
-        <div className="w-full flex flex-col gap-1">
+        <div className="w-full flex flex-col gap-4">
           <Card
             title="Arbitrum Sepolia"
             bal={arbBal}
@@ -137,7 +137,7 @@ export default function CustomSwap() {
             contracts={contracts}
             onStatus={handleOnStatus}
           >
-            <TransactionButton />
+            <TransactionButton text="Bridge" />
             <TransactionStatus>
               <TransactionStatusLabel />
               <TransactionStatusAction />

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -26,65 +26,63 @@ export default function App() {
 
   return (
     <div className="flex flex-col min-h-screen bg-background font-sans">
-      <header className="pt-4 pr-4">
-        <div className="flex justify-end">
-          <div className="wallet-container">
+      <header className="pt-4 pr-4 w-full flex justify-end">
+        <div className="wallet-container">
+          <Wallet>
+            <ConnectWallet>
+              <Avatar className="h-6 w-6" />
+              <Name className="text-white" />
+            </ConnectWallet>
+            <WalletDropdown>
+              <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+                <Avatar />
+                <Name />
+                <Address />
+                <EthBalance />
+              </Identity>
+              <WalletDropdownLink
+                icon="wallet"
+                href="https://keys.coinbase.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Wallet
+              </WalletDropdownLink>
+              <WalletDropdownDisconnect />
+            </WalletDropdown>
+          </Wallet>
+        </div>
+      </header>
+
+      <main className="flex-grow flex flex-col items-center justify-center w-full px-4">
+        <div className="text-center mb-8">
+          <h1 className="font-sans font-semibold text-xl">RIP-7755 Demo</h1>
+        </div>
+        <div className="w-full max-w-4xl flex justify-center">
+          {address ? (
+            <CustomSwap />
+          ) : (
             <Wallet>
               <ConnectWallet>
-                <ConnectWalletText>Sign up / log in</ConnectWalletText>
                 <Avatar className="h-6 w-6" />
-                <Name className="text-white" />
+                <Name />
               </ConnectWallet>
-              <WalletDropdown>
-                <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
-                  <Avatar />
-                  <Name />
-                  <Address />
-                  <EthBalance />
-                </Identity>
-                <WalletDropdownLink
-                  icon="wallet"
-                  href="https://keys.coinbase.com"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Wallet
-                </WalletDropdownLink>
-                <WalletDropdownDisconnect />
-              </WalletDropdown>
             </Wallet>
-          </div>
-        </div>
-      </header>
-
-      <main className="flex-grow flex justify-center">
-        <div className="max-w-4xl w-full p-4">
-          <div className="w-1/3 mx-auto mb-6">
-            <ImageSvg />
-          </div>
-          <div className="flex justify-center mb-6">
-            <a target="_blank" rel="_template" href="https://onchainkit.xyz">
-              {" "}
-              <OnchainkitSvg className="text-white" />
-            </a>
-          </div>
-          <div className="flex justify-center text-4xl p-4">
-            <h1>RIP-7755 Demo</h1>
-          </div>
-          <div className="flex justify-center">
-            {address ? (
-              <CustomSwap />
-            ) : (
-              <Wallet>
-                <ConnectWallet>
-                  <Avatar className="h-6 w-6" />
-                  <Name />
-                </ConnectWallet>
-              </Wallet>
-            )}
-          </div>
+          )}
         </div>
       </main>
+
+      <footer className="flex justify-center items-center p-8 w-full">
+        <p className="text-white mr-1">Powered by</p>
+        <a
+          target="_blank"
+          rel="_template"
+          href="https://onchainkit.xyz"
+          className="flex items-center"
+        >
+          <OnchainkitSvg className="text-white" />
+        </a>
+      </footer>
     </div>
   );
 }
diff --git a/frontend/app/svg/OnchainKit.tsx b/frontend/app/svg/OnchainKit.tsx
@@ -2,7 +2,7 @@ export default function OnchainkitSvg({ className = '' }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="400"
+      width="100"
       height="80"
       viewBox="0 0 155 26"
       fill="none"