Merge pull request #56 from dwhiffing/feature/top-navigation

Moved bottom buttons to a Top nav
magiclabs · Sep 13, 2024 · ef0e4aa · ef0e4aa
2 parents a98efd8 + e2fac99
commit ef0e4aa
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 51 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -26,59 +26,63 @@ export default function Page() {
   } = useMagic();
 
   return (
-    <div className="flex flex-1">
+    <div className="flex flex-col h-screen">
       {isLoading ? (
-        <div className="flex-1 h-screen items-center flex justify-center">
+        <div className="flex-1 items-center flex justify-center">
           <LoadingIcon className="text-black" />
         </div>
       ) : isLoggedIn ? (
         <>
-          {/* Comment to hide side nav */}
-          {process.env.NODE_ENV === "development" && (
-            <div className="hidden w-96 flex-col border-r bg-card p-4 sm:flex">
-              <div className="grid gap-2 p-2 text-foreground">
-                <div className="px-2 text-xs font-medium text-muted-foreground">
-                  Uploaded Contracts
-                </div>
-
-                <ScrollArea className="max-h-[calc(100vh-7rem)]">
-                  <div className="grid gap-2">
-                    {contracts.map((contract) => (
-                      <ContractItem
-                        key={contract.key}
-                        contract={contract}
-                        onEdit={() => setEditContractKey(contract.key)}
-                      />
-                    ))}
+          <div className="flex flex-1 overflow-hidden">
+            {/* Comment to hide side nav */}
+            {process.env.NODE_ENV === "development" && (
+              <div className="hidden w-96 flex-col border-r bg-card p-4 sm:flex">
+                <div className="grid gap-2 p-2 text-foreground">
+                  <div className="px-2 text-xs font-medium text-muted-foreground">
+                    Uploaded Contracts
                   </div>
-                </ScrollArea>
-                <Button onClick={() => setIsUploadModalOpen(true)}>
-                  Upload Contract
-                </Button>
+
+                  <ScrollArea className="max-h-[calc(100vh-11rem)]">
+                    <div className="grid gap-2">
+                      {contracts.map((contract) => (
+                        <ContractItem
+                          key={contract.key}
+                          contract={contract}
+                          onEdit={() => setEditContractKey(contract.key)}
+                        />
+                      ))}
+                    </div>
+                  </ScrollArea>
+                  <Button onClick={() => setIsUploadModalOpen(true)}>
+                    Upload Contract
+                  </Button>
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Remove div with id=temp if enabling side nav */}
-          <div id="temp" className="w-full py-3 flex flex-col gap-2">
-            <div className="flex flex-1 flex-col">
-              <ChatWindow titleText="Magic Chat Prototype" />
+            {/* Remove div with id=temp if enabling side nav */}
+            <div id="temp" className="flex-1 overflow-hidden flex flex-col">
+              {/* Top Navigation */}
+              <nav className="bg-background text-primary p-4 flex justify-between items-center">
+                <h1 className="text-xl font-bold">Magic Chat Prototype</h1>
+                <div className="flex gap-4 items-center">
+                  {teeWalletAddress && (
+                    <p className="opacity-50 hidden md:block text-sm">
+                      TEE Wallet: {teeWalletAddress}
+                    </p>
+                  )}
+                  <Button onClick={() => magic?.wallet.showUI()}>
+                    Show Wallet
+                  </Button>
+                  <ConfirmAlert
+                    onConfirm={handleLogout}
+                    button={<Button>Logout</Button>}
+                    description="Are you sure you want to logout?"
+                  />
+                </div>
+              </nav>
 
-              <div className="flex gap-4 justify-end items-center px-6 mr-56">
-                {teeWalletAddress && (
-                  <p className="opacity-50 hidden md:block text-sm">
-                    TEE Wallet: {teeWalletAddress}
-                  </p>
-                )}
-                <Button onClick={() => magic?.wallet.showUI()}>
-                  Show Wallet
-                </Button>
-                <ConfirmAlert
-                  onConfirm={handleLogout}
-                  button={<Button>Logout</Button>}
-                  description="Are you sure you want to logout?"
-                />
-              </div>
+              <ChatWindow titleText="Magic Chat Prototype" />
             </div>
           </div>
 
@@ -93,7 +97,7 @@ export default function Page() {
           />
         </>
       ) : (
-        <div className="flex-1 h-screen items-center flex justify-center">
+        <div className="flex-1 items-center flex justify-center">
           <Button onClick={handleLogin}>Login</Button>
         </div>
       )}

diff --git a/components/ChatSettings.tsx b/components/ChatSettings.tsx
@@ -32,7 +32,7 @@ export function ChatSettings(props: IChatSettingProps) {
   };
 
   return (
-    <div className="max-w-80 min-w-80 border-l p-4 overflow-y-auto">
+    <div className="w-80 border-l p-4 overflow-y-auto">
       <h3 className="font-semibold mb-4">Settings</h3>
       <div className="space-y-4">
         <div>

diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
@@ -93,11 +93,8 @@ export function ChatWindow(props: { titleText?: string }) {
   };
 
   return (
-    <div className="flex">
+    <div className="flex border-t">
       <Card className="flex grow flex-col h-[calc(100vh-6rem)] border-none shadow-none">
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>{titleText}</CardTitle>
-        </CardHeader>
         <CardContent className="flex-grow overflow-hidden p-0">
           <div className="flex h-full">
             <div ref={chatContainerRef} className="flex-1 p-4 overflow-y-auto">
@@ -111,7 +108,7 @@ export function ChatWindow(props: { titleText?: string }) {
             </div>
           </div>
         </CardContent>
-        <CardFooter>
+        <CardFooter className="pb-0">
           <form
             onSubmit={sendMessage}
             className="w-full relative overflow-hidden rounded-lg border bg-background"