style updates

app/components/Agent.tsx

@@ -38,6 +38,7 @@ export default function Agent() {
           <AgentProfile currentLanguage={currentLanguage} />
           <AgentBalance />
           <AgentAssets />
+          <Footer />
         </div>
 
         <div className="flex w-full lg:w-2/3">
@@ -57,7 +58,9 @@ export default function Agent() {
           />
         </div>
       </div>
-      <Footer />
+      <div className="lg:hidden z-20">
+        <Footer />
+      </div>
     </div>
   );
 }

app/components/AgentProfile.tsx

@@ -98,16 +98,12 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
           </div>
         </div>
 
-        {/* TODO: update description */}
         <p
           className={`text-[#5788FA] text-base ${
             currentLanguage === 'th' ? notoSansThai.className : ''
           }`}
         >
-          Lorem Ipsum is simply dummy text of the printing and typesetting
-          industry. Lorem Ipsum has been the industrys standard dummy text ever
-          since the 1500s, when an unknown printer took a galley of type and
-          scrambled it to make a type specimen book.
+          {`I'm your onchain concierge`}
         </p>
       </div>
     </div>

app/components/ChatInput.tsx

@@ -56,7 +56,7 @@ export default function ChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className="mt-auto flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-4 pb-10 md:mt-0 lg:pb-2"
+      className="mt-auto flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-4 pb-2 md:mt-0"
     >
       <div className="flex flex-col gap-2">
         <div className="flex gap-2">

app/components/Footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="fixed bottom-4 left-4 z-30 text-sm text-zinc-400">
+    <div className="sm:text-sm text-xs flex p-4 mt-auto w-full z-30 text-sm text-zinc-400 bg-black md:border-[#5788FA]/50 md:border-t">
       Powered by{' '}
       <a
         href="https://onchainkit.xyz/"
@@ -11,7 +11,6 @@ export default function Footer() {
         OnchainKit
       </a>
       <span className="mx-2">·</span>
-      {/* TODO: Replace with a link to the template repo */}
       <a
         href="https://github.com/coinbase/onchain-agent-demo"
         target="_blank"

app/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { AGENT_NAME, notoSansThai } from '../constants';
-import ChatSvg from '../svg/ChatSvg';
+import StreamSvg from '../svg/StreamSvg';
 import WalletSvg from '../svg/WalletSvg';
 import { translations } from '../translations';
 import type { Language } from '../types';
@@ -66,7 +66,7 @@ export default function Navbar({
         </button>
         <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
         <button type="button" onClick={handleMobileChatClick}>
-          <ChatSvg />
+          <StreamSvg />
         </button>
       </div>
       <div className="flex w-full justify-between p-2">

app/globals.css

@@ -25,3 +25,14 @@ body {
     text-wrap: balance;
   }
 }
+
+@layer base {
+  :root .default-light,
+  .default-dark,
+  .base,
+  .cyberpunk,
+  .hacker {
+    --ock-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+  }
+}

app/svg/StreamSvg.tsx

@@ -0,0 +1,16 @@
+export default function StreamSvg() {
+  return (
+    <svg
+      width="1200pt"
+      height="1200pt"
+      version="1.1"
+      viewBox="0 0 1200 1200"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-6 w-6"
+      fill="currentColor"
+    >
+      <title>stream svg</title>
+      <path d="m802.78 409.22h-164.39v-108c30-10.781 50.391-32.391 50.391-57.609s-39.609-63.609-88.781-63.609c-49.219 0-88.781 28.781-88.781 63.609 0 34.781 20.391 46.781 50.391 57.609v108h-164.39c-84 0-152.39 68.391-152.39 152.39v202.78c0 140.39 114 254.39 254.39 254.39h202.78c140.39 0 254.39-114 254.39-254.39v-202.78c0-84-68.391-152.39-152.39-152.39zm-380.39 254.39v-50.391c0-27.609 22.781-50.391 50.391-50.391s50.391 22.781 50.391 50.391v50.391c0 27.609-22.781 50.391-50.391 50.391s-50.391-22.781-50.391-50.391zm304.82 202.78-102 25.219h-50.391l-102-25.219v-50.391h254.39zm50.391-202.78c0 27.609-22.781 50.391-50.391 50.391s-50.391-22.781-50.391-50.391v-50.391c0-27.609 22.781-50.391 50.391-50.391s50.391 22.781 50.391 50.391z" />
+    </svg>
+  );
+}

app/svg/WalletSvg.tsx

@@ -4,7 +4,7 @@ export default function WalletSvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="h-4 w-4"
+      className="h-5 w-5"
     >
       <title>wallet svg</title>
       <path d="M2.273 5.625A4.483 4.483 0 0 1 5.25 4.5h13.5c1.141 0 2.183.425 2.977 1.125A3 3 0 0 0 18.75 3H5.25a3 3 0 0 0-2.977 2.625ZM2.273 8.625A4.483 4.483 0 0 1 5.25 7.5h13.5c1.141 0 2.183.425 2.977 1.125A3 3 0 0 0 18.75 6H5.25a3 3 0 0 0-2.977 2.625ZM5.25 9a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h13.5a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3H15a.75.75 0 0 0-.75.75 2.25 2.25 0 0 1-4.5 0A.75.75 0 0 0 9 9H5.25Z" />