From 6ef8e8f870a6745bc3e46f357b71ab41309e0261 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 31 May 2023 22:03:01 +0330 Subject: [PATCH] improved UI --- components/CollectionCard.tsx | 4 +- components/LinkList.tsx | 6 +-- .../Modal/Collection/CollectionInfo.tsx | 19 +++---- .../Modal/Collection/TeamManagement.tsx | 26 +++++----- components/Modal/LinkModal.tsx | 52 ++++--------------- components/Modal/UserSettings.tsx | 16 +++--- components/Modal/index.tsx | 6 +-- components/Navbar.tsx | 15 ++++-- components/Search.tsx | 4 +- components/SubmitButton.tsx | 27 ++++++++++ pages/collections/[id].tsx | 6 +-- pages/collections/index.tsx | 6 +-- pages/links.tsx | 2 +- pages/search.tsx | 10 ++-- pages/tags/[id].tsx | 2 +- 15 files changed, 99 insertions(+), 102 deletions(-) create mode 100644 components/SubmitButton.tsx diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index b9c2c4b..9abd8a2 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -44,11 +44,11 @@ export default function ({ }; return ( -
+
setExpandDropdown(!expandDropdown)} id={"expand-dropdown" + collection.id} - className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" + className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1" > +
{editModal ? ( (

- # {e.name} + {e.name}

))} @@ -118,7 +118,7 @@ export default function ({ link, count }: Props) {
setExpandDropdown(!expandDropdown)} id={"expand-dropdown" + link.id} - className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white outline outline-sky-100 hover:outline-sky-500 outline-1 duration-100 p-1" + className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1" >
-
-
- - {method === "CREATE" ? "Add Collection" : "Edit Collection"} -
-
+
); } diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx index 75ef93f..6db720b 100644 --- a/components/Modal/Collection/TeamManagement.tsx +++ b/components/Modal/Collection/TeamManagement.tsx @@ -12,6 +12,7 @@ import { useSession } from "next-auth/react"; import addMemberToCollection from "@/lib/client/addMemberToCollection"; import ImageWithFallback from "../../ImageWithFallback"; import Checkbox from "../../Checkbox"; +import SubmitButton from "@/components/SubmitButton"; type Props = { toggleCollectionModal: Function; @@ -73,7 +74,7 @@ export default function TeamManagement({ return (

- Sharing & Collaboration Settings + Sharing & Collaboration

Make Public

@@ -114,7 +115,7 @@ export default function TeamManagement({

Member Management

-
+
{ @@ -134,7 +135,7 @@ export default function TeamManagement({ } type="text" placeholder="Email" - className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" + className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" />
- +
{collection?.members[0]?.user ? ( @@ -305,15 +306,12 @@ export default function TeamManagement({ ) : null} -
-
- - Edit Collection -
-
+
); } diff --git a/components/Modal/LinkModal.tsx b/components/Modal/LinkModal.tsx index 3dbb12b..36e83b9 100644 --- a/components/Modal/LinkModal.tsx +++ b/components/Modal/LinkModal.tsx @@ -5,11 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { LinkIncludingCollectionAndTags } from "@/types/global"; import { faPenToSquare } from "@fortawesome/free-regular-svg-icons"; import useLinkStore from "@/store/links"; -import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import RequiredBadge from "../RequiredBadge"; import { useSession } from "next-auth/react"; import useCollectionStore from "@/store/collections"; import { useRouter } from "next/router"; +import SubmitButton from "../SubmitButton"; type Props = | { @@ -47,7 +48,7 @@ export default function EditLink({ } ); - const { updateLink, removeLink, addLink } = useLinkStore(); + const { updateLink, addLink } = useLinkStore(); const router = useRouter(); @@ -97,7 +98,7 @@ export default function EditLink({ if (method === "UPDATE") response = await updateLink(link); else if (method === "CREATE") response = await addLink(link); - toggleLinkModal(); + response && toggleLinkModal(); }; return ( @@ -107,7 +108,7 @@ export default function EditLink({

{method === "UPDATE" ? ( -

+

{shortendURL} | {link.title}

) : null} @@ -176,43 +177,12 @@ export default function EditLink({
-
-
- - {method === "CREATE" ? "Add Link" : "Edit Link"} -
- - {method === "UPDATE" ? ( - <> -
-
- -

OR

- -
-
- -
{ - removeLink(link); - toggleLinkModal(); - }} - className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2" - > - -
- - ) : null} -
+
); } diff --git a/components/Modal/UserSettings.tsx b/components/Modal/UserSettings.tsx index c7a2dc9..13e576e 100644 --- a/components/Modal/UserSettings.tsx +++ b/components/Modal/UserSettings.tsx @@ -9,6 +9,7 @@ import { resizeImage } from "@/lib/client/resizeImage"; import Modal from "."; import ChangePassword from "./ChangePassword"; import { faPenToSquare } from "@fortawesome/free-regular-svg-icons"; +import SubmitButton from "../SubmitButton"; type Props = { toggleSettingsModal: Function; @@ -221,8 +222,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {

Please provide the Email addresses of the users you wish to grant - visibility to your profile. Separate the addresses with a comma. - Users not included will be unable to view your profile. + visibility to your profile. Separate by comma. Users not included + will be unable to view your profile.