final touch

2023-12-17 23:32:33 -05:00
parent 141ca8f60b
commit 1677e132f3
23 changed files with 130 additions and 125 deletions
@@ -109,7 +109,7 @@ export default function Index() {
          <div className="flex gap-3 items-start justify-between">
            <div className="flex items-center gap-2">
              <i
-                className="bi-folder2 text-3xl drop-shadow"
+                className="bi-folder-fill text-3xl drop-shadow"
                style={{ color: activeCollection?.color }}
              ></i>

@@ -124,10 +124,7 @@ export default function Index() {
                role="button"
                className="btn btn-ghost btn-sm btn-square text-neutral"
              >
-                <i
-                  className="bi-three-dots text-xl"
-                  title="More"
-                ></i>
+                <i className="bi-three-dots text-xl" title="More"></i>
              </div>
              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
                {permissions === true ? (
@@ -24,15 +24,17 @@ export default function Collections() {
  return (
    <MainLayout>
      <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-folder2"}
-          title={"Collections"}
-          description={"Collections you own"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-folder"}
+            title={"Collections"}
+            description={"Collections you own"}
+          />

-        <div className="flex gap-3 justify-end">
-          <div className="relative mt-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          <div className="flex gap-3 justify-end">
+            <div className="relative mt-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            </div>
          </div>
        </div>

@@ -48,14 +50,14 @@ export default function Collections() {
            onClick={() => setNewCollectionModal(true)}
          >
            <p className="group-hover:opacity-0 duration-100">New Collection</p>
-            <i className="bi-plus text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
+            <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
          </div>
        </div>

        {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
          <>
            <div className="flex items-center gap-3 my-5">
-              <i className="bi-folder2 text-3xl sm:text-2xl text-primary drop-shadow"></i>
+              <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>

              <div>
                <p className="text-3xl capitalize font-thin">
@@ -33,8 +33,8 @@ export default function Dashboard() {
      collections.reduce(
        (accumulator, collection) =>
          accumulator + (collection._count as any).links,
-        0,
-      ),
+        0
+      )
    );
  }, [collections]);

@@ -94,10 +94,13 @@ export default function Dashboard() {
  return (
    <MainLayout>
      <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"}/>
+        <PageHeader
+          icon={"bi-house "}
+          title={"Dashboard"}
+          description={"A brief overview of your data"}
+        />
        <div>
-          <div
-            className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
            <DashboardItem
              name={numberOfLinks === 1 ? "Link" : "Links"}
              value={numberOfLinks}
@@ -146,7 +149,7 @@ export default function Dashboard() {
                className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
              >
                {links.slice(0, showLinks).map((e, i) => (
-                  <LinkCard key={i} link={e} count={i}/>
+                  <LinkCard key={i} link={e} count={i} />
                ))}
              </div>
            </div>
@@ -170,7 +173,7 @@ export default function Dashboard() {
                  }}
                  className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
                >
-                  <i className="bi-plus text-xl duration-100"></i>
+                  <i className="bi-plus-lg text-xl duration-100"></i>
                  <span className="group-hover:opacity-0 text-right duration-100">
                    Add New Link
                  </span>
@@ -186,8 +189,7 @@ export default function Dashboard() {
                    <i className="bi-cloud-upload text-xl duration-100"></i>
                    <p>Import From</p>
                  </div>
-                  <ul
-                    className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                    <li>
                      <label
                        tabIndex={0}
@@ -260,7 +262,7 @@ export default function Dashboard() {
              >
                {links
                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => <LinkCard key={i} link={e} count={i}/>)
+                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                  .slice(0, showLinks)}
              </div>
            </div>
@@ -282,7 +284,7 @@ export default function Dashboard() {
        </div>
      </div>
      {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)}/>
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
      ) : undefined}
    </MainLayout>
  );
@@ -10,7 +10,6 @@ import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
 import ListView from "@/components/LinkViews/ListView";

-
 export default function Links() {
  const { links } = useLinkStore();

@@ -33,21 +32,23 @@ export default function Links() {
  return (
    <MainLayout>
      <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-link-45deg"}
-          title={"All Links"}
-          description={"Links from every Collections"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-link-45deg"}
+            title={"All Links"}
+            description={"Links from every Collections"}
+          />

-        <div className="mt-2 flex items-center justify-end gap-2">
-          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
        </div>

        {links[0] ? (
-          <LinkComponent links={links}/>
+          <LinkComponent links={links} />
        ) : (
-          <NoLinksFound text="You Haven't Created Any Links Yet"/>
+          <NoLinksFound text="You Haven't Created Any Links Yet" />
        )}
      </div>
    </MainLayout>
@@ -31,18 +31,20 @@ export default function PinnedLinks() {
  return (
    <MainLayout>
      <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-pin-angle"}
-          title={"Pinned Links"}
-          description={"Pinned Links from your Collections"}
-        />
-        <div className="mt-2 flex items-center justify-end gap-2">
-          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-pin-angle"}
+            title={"Pinned Links"}
+            description={"Pinned Links from your Collections"}
+          />
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
        </div>

        {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent links={links}/>
+          <LinkComponent links={links} />
        ) : (
          <div
            style={{ flex: "1 1 auto" }}
@@ -54,18 +54,21 @@ export default function Search() {
  return (
    <MainLayout>
      <div className="p-5 flex flex-col gap-5 w-full">
-        <PageHeader icon={'bi-search'} title={'Search Results'}/>
+        <div className="flex justify-between">
+          <PageHeader icon={"bi-search"} title={"Search Results"} />

-        <div className="flex gap-3 items-center justify-end">
-          <div className="flex gap-2 items-center mt-2">
-            <FilterSearchDropdown
-              searchFilter={searchFilter}
-              setSearchFilter={setSearchFilter}
-            />
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          <div className="flex gap-3 items-center justify-end">
+            <div className="flex gap-2 items-center mt-2">
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+            </div>
          </div>
        </div>
+
        {links[0] ? (
          <LinkComponent links={links} />
        ) : (
@@ -197,7 +197,7 @@ export default function Account() {
              <ProfilePhoto
                priority={true}
                src={user.image ? user.image : undefined}
-                dimensionClass="w-28 h-28"
+                large={true}
              />
              {user.image && (
                <div
@@ -209,9 +209,7 @@ export default function Account() {
                  }
                  className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
                >
-                  <i
-                    className="bi-x"
-                  ></i>
+                  <i className="bi-x"></i>
                </div>
              )}
              <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@@ -250,9 +248,7 @@ export default function Account() {
                  className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                  id="import-dropdown"
                >
-                  <i
-                    className="bi-cloud-upload text-xl duration-100"
-                  ></i>
+                  <i className="bi-cloud-upload text-xl duration-100"></i>
                  <p>Import From</p>
                </div>
                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -304,9 +300,7 @@ export default function Account() {
              <p className="mb-2">Download your data instantly.</p>
              <Link className="w-fit" href="/api/v1/migration">
                <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
-                  <i
-                    className="bi-cloud-download text-xl duration-100"
-                  ></i>
+                  <i className="bi-cloud-download text-xl duration-100"></i>
                  <p>Export Data</p>
                </div>
              </Link>
@@ -67,31 +67,27 @@ export default function Appearance() {
          <p className="mb-3">Select Theme</p>
          <div className="flex gap-3 w-full">
            <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
                localStorage.getItem("theme") === "dark"
                  ? "dark:outline-primary text-primary"
                  : "text-white"
              }`}
              onClick={() => updateSettings({ theme: "dark" })}
            >
-              <i
-                className="bi-moon text-6xl"
-              ></i>
+              <i className="bi-moon-fill text-6xl"></i>
              <p className="ml-2 text-2xl">Dark</p>

              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
            </div>
            <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
                localStorage.getItem("theme") === "light"
                  ? "outline-primary text-primary"
                  : "text-black"
              }`}
              onClick={() => updateSettings({ theme: "light" })}
            >
-              <i
-                className="bi-sun text-6xl"
-              ></i>
+              <i className="bi-sun-fill text-6xl"></i>
              <p className="ml-2 text-2xl">Light</p>
              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
            </div>
@@ -61,7 +61,7 @@ export default function Archive() {

      <div className="divider my-3"></div>

-      <p>Formats to Archive webpages:</p>
+      <p>Formats to Archive/Preserve webpages:</p>
      <div className="p-3">
        <Checkbox
          label="Screenshot"