created navbar element, designed the website better. Added colours

SyedMSawaid · Oct 26, 2024 · cd8262b · cd8262b
1 parent 42ad1d4
commit cd8262b
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 105 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body class="bg-amber-50">
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,84 +1,20 @@
-import { LucideDownload, LucideSettings, LucideTrash } from "lucide-react";
 import { useRecoilState } from "recoil";
-import { applicationState, chatState } from "./atoms/state";
-import { Button, ChatOptions } from "./components";
+import { applicationState } from "./atoms/state";
+import { ChatOptions } from "./components";
 import { ChatPage } from "./pages";
-import jsPDF from "jspdf";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { useState } from "react";
+import { Navbar } from "./components/Navbar";
 
 function App() {
-  const [appState, setAppState] = useRecoilState(applicationState);
-  const [, setChats] = useRecoilState(chatState);
-  const [openDialog, setOpenDialog] = useState(false);
-
-  const downloadChat = () => {
-    const doc = new jsPDF({
-      orientation: "portrait",
-      unit: "mm",
-      format: [210, 297],
-    });
-
-    doc.html(`<div>Hi</div>`, {
-      async callback(doc) {
-        doc.save("pdf_name");
-      },
-    });
-  };
-
-  const cleanChat = () => {
-    setChats({ chats: [] });
-    setOpenDialog(false);
-  };
+  const [appState] = useRecoilState(applicationState);
 
   return (
     <div className="flex flex-col items-center h-screen">
-      <div className="container flex flex-col grow">
-        <header>
-          <div className="flex justify-between">
-            <div className="flex gap-x-4">
-              <h1>Mukalma</h1>
-              <p>Talk to yourself</p>
-            </div>
-            <div className="flex gap-x-4">
-              <LucideDownload onClick={downloadChat} />
-
-              <Dialog open={openDialog} onOpenChange={setOpenDialog}>
-                <DialogTrigger>
-                  <LucideTrash />
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Are you absolutely sure?</DialogTitle>
-                    <DialogDescription>
-                      This action cannot be undone. This will permanently delete
-                      your account and remove your data from our servers.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <DialogFooter>
-                    <Button onClick={cleanChat}>Confirm</Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-
-              <LucideSettings
-                onClick={() =>
-                  setAppState((prev) => ({ ...prev, isChatScreen: false }))
-                }
-              />
-            </div>
-          </div>
-        </header>
+      <header className="sticky top-0 flex items-center justify-center w-full shadow-md grow bg-amber-100">
+        <Navbar />
+      </header>
 
-        <main className="flex grow">
+      <div className="flex flex-col grow">
+        <main className="flex  grow">
           {!appState.isChatScreen ? <ChatOptions /> : <ChatPage />}
         </main>
 

diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
@@ -39,8 +39,9 @@ export const MessageBox = () => {
     }
   };
   return (
-    <div className="flex flex-row bg-white h-9 gap-x-2 s">
+    <div className="flex flex-row gap-x-2 s">
       <Textarea
+        className="bg-white"
         value={message}
         onChange={(e) => setMessage(e.target.value)}
         onKeyDown={onKeyDown}

diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx
@@ -10,8 +10,10 @@ export const MessageBubble = ({ chat, side }: Props) => {
   return (
     <div
       className={cn(
-        "border border-black p-6 rounded-md w-3/5",
-        side === "LEFT" ? "self-start text-left" : "self-end text-right"
+        "border border-black px-4 py-4 rounded-xl w-3/5",
+        side === "LEFT"
+          ? "self-start text- bg-white"
+          : "self-end text-right bg-gray-200"
       )}
     >
       <div className="">

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -0,0 +1,76 @@
+import { applicationState, chatState } from "@/atoms/state";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import jsPDF from "jspdf";
+import { LucideDownload, LucideSettings, LucideTrash } from "lucide-react";
+import { useState } from "react";
+import { useRecoilState } from "recoil";
+import { Button } from "./ui/button";
+
+export const Navbar = () => {
+  const [, setAppState] = useRecoilState(applicationState);
+  const [, setChats] = useRecoilState(chatState);
+  const [openDialog, setOpenDialog] = useState(false);
+
+  const downloadChat = () => {
+    const doc = new jsPDF({
+      orientation: "portrait",
+      unit: "mm",
+      format: [210, 297],
+    });
+
+    doc.html(`<div>Hi</div>`, {
+      async callback(doc) {
+        doc.save("pdf_name");
+      },
+    });
+  };
+
+  const cleanChat = () => {
+    setChats({ chats: [] });
+    setOpenDialog(false);
+  };
+
+  return (
+    <div className="container flex justify-between">
+      <div className="flex gap-x-4">
+        <h1>Mukalma</h1>
+        <p>Talk to yourself</p>
+      </div>
+      <div className="flex gap-x-4">
+        <LucideDownload onClick={downloadChat} />
+
+        <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+          <DialogTrigger>
+            <LucideTrash />
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Are you absolutely sure?</DialogTitle>
+              <DialogDescription>
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button onClick={cleanChat}>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <LucideSettings
+          onClick={() =>
+            setAppState((prev) => ({ ...prev, isChatScreen: false }))
+          }
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -4,3 +4,4 @@ export * from "./ui/textarea";
 export * from "./ChatOptions";
 export * from "./MessageBubble";
 export * from "./MessageBox";
+export * from "./Navbar";
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -27,7 +28,7 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --radius: 0.5rem;
   }
   .dark {
     --background: 0 0% 3.9%;
@@ -53,7 +54,7 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+    --chart-5: 340 75% 55%;
   }
 }
 @layer base {
@@ -64,3 +65,14 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
@@ -17,23 +17,21 @@ export const ChatPage = () => {
   }, [chats]);
 
   return (
-    <div className="grow">
-      <div className="">Chat Page</div>
-
-      <div className="flex flex-col grow">
-        <ScrollArea className="grow">
-          <div className="flex flex-col pb-20 gap-y-2" ref={container}>
-            {chats.chats.map((chat) => (
-              <MessageBubble
-                key={chat.id}
-                chat={chat}
-                side={chat.player == 1 ? "LEFT" : "RIGHT"}
-              />
-            ))}
-          </div>
-        </ScrollArea>
+    <div className="flex flex-col items-center grow gap-y-1">
+      <ScrollArea className="h-[570px] w-[700px]">
+        <div className="flex flex-col gap-y-2" ref={container}>
+          {chats.chats.map((chat) => (
+            <MessageBubble
+              key={chat.id}
+              chat={chat}
+              side={chat.player == 1 ? "LEFT" : "RIGHT"}
+            />
+          ))}
+        </div>
+      </ScrollArea>
 
-        <div className="sticky bottom-0 py-8">
+      <div className="sticky bottom-0 py-4 flex justify-center items-center w-[840px] border-2 border-amber-200 bg-amber-100 px-10 rounded-lg mb-4">
+        <div className="w-[700px]">
           <MessageBox />
         </div>
       </div>