ui improvements

pages/collections/[id].tsx

@@ -12,8 +12,8 @@ export default function () {
 
   return (
     // ml-80
-    <div className="p-5">
-      <p className="text-center mb-5 text-gray-500 font-bold text-sm">
+    <div className="p-2">
+      <p className="text-right mb-2 text-gray-500 font-bold text-sm">
         {linksByCollection.length || 0} Links Found
       </p>
       {linksByCollection.map((e, i) => {

pages/collections/index.tsx

@@ -11,7 +11,7 @@ export default function () {
 
   return (
     // ml-80
-    <div className="flex flex-wrap p-5">
+    <div className="flex flex-wrap p-2 gap-2">
       {collections.map((e, i) => {
         return <CollectionCard key={i} collection={e} />;
       })}

pages/login.tsx

@@ -42,17 +42,17 @@ export default function () {
         placeholder="Email"
         value={form.email}
         onChange={(e) => setForm({ ...form, email: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <input
         type="text"
         placeholder="Password"
         value={form.password}
         onChange={(e) => setForm({ ...form, password: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <div
-        className="mx-auto bg-black w-min p-3 m-5 text-white rounded cursor-pointer"
+        className="mx-auto bg-black w-min p-3 m-5 text-white rounded-md cursor-pointer"
         onClick={loginUser}
       >
         Login

pages/register.tsx

@@ -57,24 +57,24 @@ export default function () {
         placeholder="Name"
         value={form.name}
         onChange={(e) => setForm({ ...form, name: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <input
         type="text"
         placeholder="Email"
         value={form.email}
         onChange={(e) => setForm({ ...form, email: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <input
         type="text"
         placeholder="Password"
         value={form.password}
         onChange={(e) => setForm({ ...form, password: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <div
-        className="mx-auto bg-black w-min p-3 m-5 text-white rounded cursor-pointer"
+        className="mx-auto bg-black w-min p-3 m-5 text-white rounded-md cursor-pointer"
         onClick={registerUser}
       >
         Register