changes and improvements

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);
               },
             },

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,
                     });

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

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 }) =>

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}

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}
         />

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);
                         },

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"}
+{
+  "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"
+}

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;
     }

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;