Merge pull request #210 from linkwarden/dev

UI improvements

components/CollectionCard.tsx

@@ -8,6 +8,7 @@ import ProfilePhoto from "./ProfilePhoto";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import useModalStore from "@/store/modals";
 import usePermissions from "@/hooks/usePermissions";
+import { useTheme } from "next-themes";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
@@ -17,6 +18,8 @@ type Props = {
 export default function CollectionCard({ collection, className }: Props) {
   const { setModal } = useModalStore();
 
+  const { theme } = useTheme();
+
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
     {
@@ -32,7 +35,12 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div
-      className={`border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
+      style={{
+        backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
+          theme === "dark" ? "#262626" : "#f3f4f6"
+        } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
+      }}
+      className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
     >
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}

components/Modal/Collection/TeamManagement.tsx

@@ -310,7 +310,7 @@ export default function TeamManagement({
                             <span
                               className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
                               } rounded p-1 select-none`}
                             >
@@ -355,7 +355,7 @@ export default function TeamManagement({
                             <span
                               className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
                               } rounded p-1 select-none`}
                             >
@@ -400,7 +400,7 @@ export default function TeamManagement({
                             <span
                               className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
                               } rounded p-1 select-none`}
                             >

components/Modal/Link/LinkDetails.tsx

@@ -29,7 +29,7 @@ type Props = {
 };
 
 export default function LinkDetails({ link, isOwnerOrMod }: Props) {
-  const { theme, setTheme } = useTheme();
+  const { theme } = useTheme();
 
   const [imageError, setImageError] = useState<boolean>(false);
   const formattedDate = new Date(link.createdAt as string).toLocaleString(

components/ProfilePhoto.tsx

@@ -43,7 +43,7 @@ export default function ProfilePhoto({
       src={src}
       height={112}
       width={112}
-      className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
+      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
     />
   );
 }

pages/collections/[id].tsx

@@ -19,12 +19,15 @@ import useModalStore from "@/store/modals";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
+import { useTheme } from "next-themes";
 
 export default function Index() {
   const { setModal } = useModalStore();
 
   const router = useRouter();
 
+  const { theme } = useTheme();
+
   const { links } = useLinkStore();
   const { collections } = useCollectionStore();
 
@@ -50,8 +53,17 @@ export default function Index() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div
-          <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
+          style={{
+            backgroundImage: `linear-gradient(-45deg, ${
+              activeCollection?.color
+            }30 10%, ${theme === "dark" ? "#262626" : "#f3f4f6"} 50%, ${
+              theme === "dark" ? "#262626" : "#f9fafb"
+            } 100%)`,
+          }}
+          className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
+        >
+          <div className="flex flex-col sm:flex-row gap-3 justify-between sm:items-start">
             {activeCollection && (
               <div className="flex gap-3 items-center">
                 <div className="flex gap-2">
@@ -84,15 +96,8 @@ export default function Index() {
                       defaultIndex: permissions === true ? 1 : 0,
                     })
                   }
-                  className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
+                  className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-center w-fit sm:mr-0 sm:ml-auto cursor-pointer"
                 >
-                  <div
-                    className={`bg-sky-700 p-2 leading-3 select-none group-hover:bg-sky-600 duration-100 text-white rounded-full text-xs ${
-                      activeCollection.members[0] && "mr-1"
-                    }`}
-                  >
-                    {permissions === true ? "Manage" : "View"} Team
-                  </div>
                   {activeCollection?.members
                     .sort((a, b) => (a.userId as number) - (b.userId as number))
                     .map((e, i) => {
@@ -100,7 +105,7 @@ export default function Index() {
                         <ProfilePhoto
                           key={i}
                           src={`/api/avatar/${e.userId}?${Date.now()}`}
-                          className="-mr-3 duration-100  border-[3px]"
+                          className="-mr-3 border-[3px]"
                         />
                       );
                     })
@@ -123,7 +128,7 @@ export default function Index() {
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
                   id="sort-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faSort}
@@ -144,7 +149,7 @@ export default function Index() {
                 <div
                   onClick={() => setExpandDropdown(!expandDropdown)}
                   id="expand-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faEllipsis}

pages/collections/index.tsx

@@ -15,8 +15,11 @@ import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
+import { useTheme } from "next-themes";
 
 export default function Collections() {
+  const { theme } = useTheme();
+
   const { collections } = useCollectionStore();
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
@@ -111,7 +114,7 @@ export default function Collections() {
           })}
 
           <div
-            className="p-5 self-stretch border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-sky-100 dark:border-neutral-700 min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={() => {
               setModal({
                 modal: "COLLECTION",

pages/subscribe.tsx

@@ -51,7 +51,7 @@ export default function Subscribe() {
         <div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
-            className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
+            className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${
               plan === Plan.monthly
                 ? "text-white bg-sky-700 dark:bg-sky-700"
                 : "hover:opacity-80"
@@ -62,7 +62,7 @@ export default function Subscribe() {
 
           <button
             onClick={() => setPlan(Plan.yearly)}
-            className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
+            className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${
               plan === Plan.yearly
                 ? "text-white bg-sky-700 dark:bg-sky-700"
                 : "hover:opacity-80"