[ui] Styling the bookmarks page

1 files changed, 9 insertions, 6 deletions

diff --git a/web/app/bookmarks/components/AddLink.tsx b/web/app/bookmarks/components/AddLink.tsx
index 54cf9137..fab4db8b 100644
--- a/web/app/bookmarks/components/AddLink.tsx
+++ b/web/app/bookmarks/components/AddLink.tsx
@@ -1,6 +1,9 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import APIClient from "@/lib/api";
+import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -11,6 +14,7 @@ export default function AddLink() {
   const bookmarkLink = async () => {
     const [_resp, error] = await APIClient.bookmarkLink(link);
     if (error) {
+      // TODO: Proper error handling
       alert(error.message);
       return;
     }
@@ -18,8 +22,8 @@ export default function AddLink() {
   };
 
   return (
-    <div className="p-4">
-      <input
+    <div className="py-4 container flex w-full items-center space-x-2">
+      <Input
         type="text"
         placeholder="Link"
         value={link}
@@ -30,11 +34,10 @@ export default function AddLink() {
             setLink("");
           }
         }}
-        className="w-10/12 px-4 py-2 border rounded-md focus:outline-none focus:border-blue-300"
       />
-      <button className="w-2/12 px-1 py-2" onClick={bookmarkLink}>
-        Submit
-      </button>
+      <Button onClick={bookmarkLink}>
+        <Plus />
+      </Button>
     </div>
   );
 }