changes and improvements

components/Modal/User/ChangePassword.tsx

@@ -80,16 +80,16 @@ export default function ChangePassword({
           value={newPassword}
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
-          placeholder="*****************"
+          placeholder="***********"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
-        <p className="text-sm text-sky-500">Re-enter New Password</p>
+        <p className="text-sm text-sky-500">Confirm New Password</p>
 
         <input
           value={newPassword2}
           onChange={(e) => setNewPassword2(e.target.value)}
           type="password"
-          placeholder="*****************"
+          placeholder="***********"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 

components/Sidebar.tsx

@@ -2,7 +2,6 @@ import useCollectionStore from "@/store/collections";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faFolder,
-  faBox,
   faHashtag,
   faChartSimple,
   faChevronDown,
@@ -13,6 +12,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
+import Image from "next/image";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -53,55 +53,50 @@ export default function Sidebar({ className }: { className?: string }) {
     <div
       className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
     >
-      <p className="p-2 text-sky-500 font-bold text-2xl my-2 leading-4">
+      <div className="flex justify-center gap-2 mt-2">
-        Linkwarden
+        <Link
-      </p>
+          href="/dashboard"
-
+          className={`${
-      <div className="flex flex-col gap-1">
+            active === "/dashboard"
-        <Link href="/dashboard">
+              ? "bg-sky-200"
-          <div
+              : "hover:bg-slate-200 bg-gray-100"
-            className={`${
+          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1`}
-              active === "/dashboard"
+        >
-                ? "bg-sky-200"
+          <FontAwesomeIcon
-                : "hover:bg-slate-200 bg-gray-100"
+            icon={faChartSimple}
-            } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
+            className={`w-8 h-8 drop-shadow text-sky-500`}
-          >
+          />
-            <FontAwesomeIcon
+          <p className="text-sky-600 text-xs font-semibold">Dashboard</p>
-              icon={faChartSimple}
-              className={`w-6 h-6 drop-shadow text-sky-500`}
-            />
-            <p className="text-sky-600">Dashboard</p>
-          </div>
         </Link>
 
-        <Link href="/links">
+        <Link
-          <div
+          href="/links"
-            className={`${
+          className={`${
-              active === "/links"
+            active === "/links"
-                ? "bg-sky-200"
+              ? "bg-sky-200"
-                : "hover:bg-slate-200 bg-gray-100"
+              : "hover:bg-slate-200 bg-gray-100"
-            } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
+          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-          >
+        >
-            <FontAwesomeIcon
+          <FontAwesomeIcon
-              icon={faLink}
+            icon={faLink}
-              className={`w-6 h-6 drop-shadow text-sky-500`}
+            className={`w-8 h-8 drop-shadow text-sky-500`}
-            />
+          />
-            <p className="text-sky-600">All Links</p>
+          <p className="text-sky-600 text-xs font-semibold">All Links</p>
-          </div>
         </Link>
 
-        <Link href="/collections">
+        <Link
-          <div
+          href="/collections"
-            className={`${
+          className={`${
-              active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
+            active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
-            } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
+          } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-          >
+        >
-            <FontAwesomeIcon
+          <FontAwesomeIcon
-              icon={faBox}
+            icon={faFolder}
-              className={`w-6 h-6 drop-shadow text-sky-500`}
+            className={`w-8 h-8 drop-shadow text-sky-500`}
-            />
+          />
-            <p className="text-sky-600">All Collections</p>
+          <p className="text-sky-600 text-xs font-semibold">
-          </div>
+            <span className="hidden xl:inline-block">All</span> Collections
+          </p>
         </Link>
       </div>
 

lib/client/addMemberToCollection.ts

@@ -19,7 +19,7 @@ const addMemberToCollection = async (
     // member can't be empty
     memberUsername.trim() !== "" &&
     // member can't be the owner
-    memberUsername.trim() !== ownerUsername
+    memberUsername.trim().toLowerCase() !== ownerUsername.toLowerCase()
   ) {
     // Lookup, get data/err, list ...
     const user = await getPublicUserDataByUsername(
@@ -40,7 +40,7 @@ const addMemberToCollection = async (
       });
     }
   } else if (checkIfMemberAlreadyExists) toast.error("User already exists.");
-  else if (memberUsername.trim() === ownerUsername)
+  else if (memberUsername.trim().toLowerCase() === ownerUsername.toLowerCase())
     toast.error("You are already the collection owner.");
 };
 

pages/collections/index.tsx

@@ -1,7 +1,7 @@
 import useCollectionStore from "@/store/collections";
 import {
-  faBox,
   faEllipsis,
+  faFolder,
   faPlus,
   faSort,
 } from "@fortawesome/free-solid-svg-icons";
@@ -36,7 +36,7 @@ export default function Collections() {
           <div className="flex gap-3 items-end">
             <div className="flex gap-2">
               <FontAwesomeIcon
-                icon={faBox}
+                icon={faFolder}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">

pages/login.tsx

@@ -73,11 +73,20 @@ export default function Login() {
 
         <input
           type="password"
-          placeholder="*****************"
+          placeholder="***********"
           value={form.password}
           onChange={(e) => setForm({ ...form, password: e.target.value })}
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
+        {EmailProvider && (
+          <Link
+            href={"/forgot"}
+            className="w-fit ml-auto text-gray-500 font-semibold"
+          >
+            Forgot Password?
+          </Link>
+        )}
+
         <SubmitButton
           onClick={loginUser}
           label="Login"
@@ -91,14 +100,6 @@ export default function Login() {
           Sign Up
         </Link>
       </div>
-      {EmailProvider && (
-        <div className="flex items-baseline gap-1 justify-center mb-3">
-          <p className="w-fit text-gray-500">Forgot your password?</p>
-          <Link href={"/forgot"} className="block text-sky-500 font-bold">
-            Send login link
-          </Link>
-        </div>
-      )}
     </>
   );
 }

pages/public/collections/[id].tsx

@@ -63,9 +63,9 @@ export default function PublicCollections() {
         })}
       </div>
 
-      <p className="text-center font-bold text-gray-500">
+      {/* <p className="text-center font-bold text-gray-500">
         List created with <span className="text-sky-500">Linkwarden.</span>
-      </p>
+      </p> */}
     </div>
   ) : (
     <></>

pages/register.tsx

@@ -139,41 +139,50 @@ export default function Register() {
           </>
         ) : undefined}
 
-        <p className="text-sm text-sky-500 w-fit font-semibold">Password</p>
+        <div className="flex item-center gap-5">
+          <div>
+            <p className="text-sm text-sky-500 w-fit font-semibold mb-3">
+              Password
+            </p>
 
-        <input
+            <input
-          type="password"
+              type="password"
-          placeholder="*****************"
+              placeholder="***********"
-          value={form.password}
+              value={form.password}
-          onChange={(e) => setForm({ ...form, password: e.target.value })}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+              className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
+            />
+          </div>
 
-        <p className="text-sm text-sky-500 w-fit font-semibold">
+          <div>
-          Re-enter Password
+            <p className="text-sm text-sky-500 w-fit font-semibold mb-3">
-        </p>
+              Confirm Password
+            </p>
 
-        <input
+            <input
-          type="password"
+              type="password"
-          placeholder="*****************"
+              placeholder="***********"
-          value={form.passwordConfirmation}
+              value={form.passwordConfirmation}
-          onChange={(e) =>
+              onChange={(e) =>
-            setForm({ ...form, passwordConfirmation: e.target.value })
+                setForm({ ...form, passwordConfirmation: e.target.value })
-          }
+              }
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+              className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
+            />
+          </div>
+        </div>
         <SubmitButton
           onClick={registerUser}
           label="Sign Up"
           className="mt-2 w-full text-center"
           loading={submitLoader}
         />
-      </div>
+
-      <div className="flex items-baseline gap-1 justify-center my-3">
+        <div className="flex items-baseline gap-1 justify-center">
-        <p className="w-fit text-gray-500">Already have an account?</p>
+          <p className="w-fit text-gray-500">Already have an account?</p>
-        <Link href={"/login"} className="block w-min text-sky-500 font-bold">
+          <Link href={"/login"} className="block w-min text-sky-500 font-bold">
-          Login
+            Login
-        </Link>
+          </Link>
+        </div>
       </div>
     </>
   );

public/site.webmanifest

@@ -1,19 +1 @@
-{
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
-  "name": "",
-  "short_name": "",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}