changes and improvements

This commit is contained in:
Daniel 2023-07-13 18:19:49 -04:00
parent 7be3b37b21
commit 0912614e41
15 changed files with 96 additions and 109 deletions

View File

@ -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"
/>

View File

@ -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">
Linkwarden
</p>
<div className="flex flex-col gap-1">
<Link href="/dashboard">
<div
className={`${
active === "/dashboard"
? "bg-sky-200"
: "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`}
>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-6 h-6 drop-shadow text-sky-500`}
/>
<p className="text-sky-600">Dashboard</p>
</div>
<div className="flex justify-center gap-2 mt-2">
<Link
href="/dashboard"
className={`${
active === "/dashboard"
? "bg-sky-200"
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1`}
>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-8 h-8 drop-shadow text-sky-500`}
/>
<p className="text-sky-600 text-xs font-semibold">Dashboard</p>
</Link>
<Link href="/links">
<div
className={`${
active === "/links"
? "bg-sky-200"
: "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`}
>
<FontAwesomeIcon
icon={faLink}
className={`w-6 h-6 drop-shadow text-sky-500`}
/>
<p className="text-sky-600">All Links</p>
</div>
<Link
href="/links"
className={`${
active === "/links"
? "bg-sky-200"
: "hover:bg-slate-200 bg-gray-100"
} 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
icon={faLink}
className={`w-8 h-8 drop-shadow text-sky-500`}
/>
<p className="text-sky-600 text-xs font-semibold">All Links</p>
</Link>
<Link href="/collections">
<div
className={`${
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`}
>
<FontAwesomeIcon
icon={faBox}
className={`w-6 h-6 drop-shadow text-sky-500`}
/>
<p className="text-sky-600">All Collections</p>
</div>
<Link
href="/collections"
className={`${
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 justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
icon={faFolder}
className={`w-8 h-8 drop-shadow text-sky-500`}
/>
<p className="text-sky-600 text-xs font-semibold">
<span className="hidden xl:inline-block">All</span> Collections
</p>
</Link>
</div>

View File

@ -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.");
};

View File

@ -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">

View File

@ -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>
)}
</>
);
}

View File

@ -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>
) : (
<></>

View File

@ -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
type="password"
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"
/>
<input
type="password"
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"
/>
</div>
<p className="text-sm text-sky-500 w-fit font-semibold">
Re-enter Password
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-3">
Confirm Password
</p>
<input
type="password"
placeholder="*****************"
value={form.passwordConfirmation}
onChange={(e) =>
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"
/>
<input
type="password"
placeholder="***********"
value={form.passwordConfirmation}
onChange={(e) =>
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"
/>
</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">
<p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block w-min text-sky-500 font-bold">
Login
</Link>
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block w-min text-sky-500 font-bold">
Login
</Link>
</div>
</div>
</>
);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 645 B

After

Width:  |  Height:  |  Size: 650 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 190 KiB

View File

@ -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"}