From c00c2dcd601e2ed3d2fac613c5ec56c311bc6df0 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sat, 24 Jun 2023 16:47:24 +0330
Subject: [PATCH] changes and improvements

---
 components/CollectionCard.tsx         | 69 +++++++++++++++------------
 components/LinkCard.tsx               |  8 ++--
 components/Modal/Link/LinkDetails.tsx |  8 ++--
 components/Modal/Link/index.tsx       | 11 ++++-
 components/Modal/index.tsx            |  2 +-
 components/ModalManagement.tsx        |  1 +
 pages/collections/[id].tsx            |  2 +-
 public/site.webmanifest               | 20 +++++++-
 store/modals.ts                       |  2 +
 styles/globals.css                    |  4 +-
 10 files changed, 81 insertions(+), 46 deletions(-)

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 7e685ce..21f1e46 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -87,44 +87,51 @@ export default function CollectionCard({ collection, className }: Props) {
       {expandDropdown ? (
         <Dropdown
           items={[
+            permissions === true
+              ? {
+                  name: "Edit Collection Info",
+                  onClick: () => {
+                    collection &&
+                      setModal({
+                        modal: "COLLECTION",
+                        state: true,
+                        method: "UPDATE",
+                        isOwner: permissions === true,
+                        active: collection,
+                      });
+                    setExpandDropdown(false);
+                  },
+                }
+              : undefined,
             {
-              name: "Edit Collection",
+              name: permissions === true ? "Share/Collaborate" : "View Team",
               onClick: () => {
-                setModal({
-                  modal: "COLLECTION",
-                  state: true,
-                  method: "UPDATE",
-                  isOwner: permissions === true,
-                  active: collection,
-                });
+                collection &&
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "UPDATE",
+                    isOwner: permissions === true,
+                    active: collection,
+                    defaultIndex: permissions === true ? 1 : 0,
+                  });
                 setExpandDropdown(false);
               },
             },
+
             {
-              name: "Share/Collaborate",
+              name:
+                permissions === true ? "Delete Collection" : "Leave Collection",
               onClick: () => {
-                setModal({
-                  modal: "COLLECTION",
-                  state: true,
-                  method: "UPDATE",
-                  isOwner: permissions === true,
-                  active: collection,
-                  defaultIndex: 1,
-                });
-                setExpandDropdown(false);
-              },
-            },
-            {
-              name: "Delete Collection",
-              onClick: () => {
-                setModal({
-                  modal: "COLLECTION",
-                  state: true,
-                  method: "UPDATE",
-                  isOwner: permissions === true,
-                  active: collection,
-                  defaultIndex: 2,
-                });
+                collection &&
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "UPDATE",
+                    isOwner: permissions === true,
+                    active: collection,
+                    defaultIndex: permissions === true ? 2 : 1,
+                  });
                 setExpandDropdown(false);
               },
             },
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index ed3e65f..40582b1 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -83,6 +83,7 @@ export default function LinkCard({ link, count, className }: Props) {
             modal: "LINK",
             state: true,
             method: "UPDATE",
+            isOwner: permissions === true,
             active: link,
           });
         }}
@@ -90,10 +91,10 @@ export default function LinkCard({ link, count, className }: Props) {
       >
         <Image
           src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-          width={70}
-          height={70}
+          width={64}
+          height={64}
           alt=""
-          className="blur-sm absolute bottom-5 right-5 opacity-60 group-hover:opacity-80 duration-100 select-none"
+          className="blur-sm absolute w-16 group-hover:scale-50 group-hover:blur-none group-hover:opacity-100 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none"
           draggable="false"
           onError={(e) => {
             const target = e.target as HTMLElement;
@@ -157,6 +158,7 @@ export default function LinkCard({ link, count, className }: Props) {
                       modal: "LINK",
                       state: true,
                       method: "UPDATE",
+                      isOwner: permissions === true,
                       active: link,
                       defaultIndex: 1,
                     });
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 2dc3f4c..20031b2 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -116,12 +116,12 @@ export default function LinkDetails({ link }: Props) {
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {!imageError && (
-        <div id="link-banner" className="link-banner h-40 -mx-5 -mt-5 relative">
+        <div id="link-banner" className="link-banner h-44 -mx-5 -mt-5 relative">
           <div id="link-banner-inner" className="link-banner-inner"></div>
         </div>
       )}
       <div
-        className={`relative flex gap-5 items-start ${!imageError && "-mt-16"}`}
+        className={`relative flex gap-5 items-start ${!imageError && "-mt-32"}`}
       >
         {!imageError && (
           <Image
@@ -167,7 +167,7 @@ export default function LinkDetails({ link }: Props) {
       <div className="flex gap-1 items-center flex-wrap">
         <Link
           href={`/collections/${link.collection.id}`}
-          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2"
+          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
         >
           <FontAwesomeIcon
             icon={faFolder}
@@ -182,7 +182,7 @@ export default function LinkDetails({ link }: Props) {
           </p>
         </Link>
         {link.tags.map((e, i) => (
-          <Link key={i} href={`/tags/${e.id}`}>
+          <Link key={i} href={`/tags/${e.id}`} className="z-10">
             <p
               title={e.name}
               className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 407480c..cd2be43 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -7,6 +7,7 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
+      isOwner?: boolean;
       activeLink?: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
       className?: string;
@@ -14,6 +15,7 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
+      isOwner: boolean;
       activeLink: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
       className?: string;
@@ -23,6 +25,7 @@ export default function CollectionModal({
   className,
   defaultIndex,
   toggleLinkModal,
+  isOwner,
   activeLink,
   method,
 }: Props) {
@@ -32,8 +35,12 @@ export default function CollectionModal({
         {method === "CREATE" && (
           <p className="text-xl text-sky-500 text-center">New Link</p>
         )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
-          {method === "UPDATE" && (
+        <Tab.List
+          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600 ${
+            isOwner ? "" : "pb-8"
+          }`}
+        >
+          {method === "UPDATE" && isOwner && (
             <>
               <Tab
                 className={({ selected }) =>
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index 5514045..8b17791 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -19,7 +19,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-2"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 z-20 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
diff --git a/components/ModalManagement.tsx b/components/ModalManagement.tsx
index b8953f8..16ff279 100644
--- a/components/ModalManagement.tsx
+++ b/components/ModalManagement.tsx
@@ -29,6 +29,7 @@ export default function ModalManagement() {
         <LinkModal
           toggleLinkModal={toggleModal}
           method={modal.method}
+          isOwner={modal.isOwner as boolean}
           defaultIndex={modal.defaultIndex}
           activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
         />
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 72b338a..7c6d688 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -197,7 +197,7 @@ export default function Index() {
                               method: "UPDATE",
                               isOwner: permissions === true,
                               active: activeCollection,
-                              defaultIndex: 1,
+                              defaultIndex: permissions === true ? 1 : 0,
                             });
                           setExpandDropdown(false);
                         },
diff --git a/public/site.webmanifest b/public/site.webmanifest
index 45dc8a2..fa99de7 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -1 +1,19 @@
-{"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"}
\ No newline at end of file
+{
+  "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"
+}
diff --git a/store/modals.ts b/store/modals.ts
index 68e3203..0af80cb 100644
--- a/store/modals.ts
+++ b/store/modals.ts
@@ -16,6 +16,7 @@ type Modal =
       modal: "LINK";
       state: boolean;
       method: "CREATE";
+      isOwner?: boolean;
       active?: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
     }
@@ -23,6 +24,7 @@ type Modal =
       modal: "LINK";
       state: boolean;
       method: "UPDATE";
+      isOwner: boolean;
       active: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
     }
diff --git a/styles/globals.css b/styles/globals.css
index 0a1b9b1..3cc5214 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -102,7 +102,7 @@
 /* For the Link banner */
 .link-banner {
   /* box-shadow: inset 0px 10px 20px 20px #ffffff; */
-  opacity: 30%;
+  opacity: 25%;
   z-index: 0;
 }
 .link-banner .link-banner-inner {
@@ -116,7 +116,6 @@
   -webkit-mask: linear-gradient(#fff, transparent);
   mask: linear-gradient(#fff, transparent);
 }
-
 .link-banner::after {
   content: "";
   position: absolute;
@@ -132,7 +131,6 @@
   width: 100%;
   height: 4rem;
 }
-
 .link-banner::before {
   content: "";
   position: absolute;