From ae87b5698e18f93f67fd290e81222ffa3599d045 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 22:08:52 +0800 Subject: [PATCH 1/6] add bootstrap-icons package --- package.json | 1 + pages/_app.tsx | 1 + yarn.lock | 5 +++++ 3 files changed, 7 insertions(+) diff --git a/package.json b/package.json index 211f90e..10cb9b3 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@types/react-dom": "18.2.7", "axios": "^1.5.1", "bcrypt": "^5.1.0", + "bootstrap-icons": "^1.11.2", "colorthief": "^2.4.0", "crypto-js": "^4.2.0", "csstype": "^3.1.2", diff --git a/pages/_app.tsx b/pages/_app.tsx index eea08e4..17bc258 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,6 @@ import React from "react"; import "@/styles/globals.css"; +import 'bootstrap-icons/font/bootstrap-icons.css'; import { SessionProvider } from "next-auth/react"; import type { AppProps } from "next/app"; import Head from "next/head"; diff --git a/yarn.lock b/yarn.lock index 03b95c3..705ecd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1979,6 +1979,11 @@ bl@^4.0.3: inherits "^2.0.4" readable-stream "^3.4.0" +bootstrap-icons@^1.11.2: + version "1.11.2" + resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.2.tgz#e1c75daec154e25958db04c4eb3cbda6041e7118" + integrity sha512-TgdiPv+IM9tgDb+dsxrnGIyocsk85d2M7T0qIgkvPedZeoZfyeG/j+yiAE4uHCEayKef2RP05ahQ0/e9Sv75Wg== + bowser@^2.11.0: version "2.11.0" resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" From d52afd66f33feea4c7bac1f09b4484a5e2f30505 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 22:16:25 +0800 Subject: [PATCH 2/6] update sidebar icons --- components/Sidebar.tsx | 82 ++++++++++++++---------------------------- 1 file changed, 27 insertions(+), 55 deletions(-) diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 6f5693d..abb2077 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -1,14 +1,4 @@ import useCollectionStore from "@/store/collections"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faFolder, - faHashtag, - faChartSimple, - faChevronDown, - faLink, - faGlobe, - faThumbTack, -} from "@fortawesome/free-solid-svg-icons"; import useTagStore from "@/store/tags"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -25,7 +15,7 @@ export default function Sidebar({ className }: { className?: string }) { () => { const storedValue = localStorage.getItem("collectionDisclosure"); return storedValue ? storedValue === "true" : true; - } + }, ); const { collections } = useCollectionStore(); @@ -42,7 +32,7 @@ export default function Sidebar({ className }: { className?: string }) { useEffect(() => { localStorage.setItem( "collectionDisclosure", - collectionDisclosure ? "true" : "false" + collectionDisclosure ? "true" : "false", ); }, [collectionDisclosure]); @@ -52,21 +42,19 @@ export default function Sidebar({ className }: { className?: string }) { return ( @@ -123,16 +102,14 @@ export default function Sidebar({ className }: { className?: string }) { onClick={() => { setCollectionDisclosure(!collectionDisclosure); }} - className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" + className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" > -

Collections

- - Collections

+ + > - + >

{e.name}

{e.isPublic ? ( - + > ) : undefined}
{e._count?.links} @@ -194,13 +169,14 @@ export default function Sidebar({ className }: { className?: string }) { onClick={() => { setTagDisclosure(!tagDisclosure); }} - className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" + className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" > -

Tags

- +

Tags

+ - - +

{e.name}

{e._count?.links} From 9119402dac04ccd72b18437ee9cd97b3b4df44a3 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 22:46:29 +0800 Subject: [PATCH 3/6] update navbar icons --- components/Navbar.tsx | 19 +++++++++---------- components/ProfilePhoto.tsx | 7 +------ components/SearchBar.tsx | 10 ++++------ components/ToggleDarkMode.tsx | 29 +++-------------------------- 4 files changed, 17 insertions(+), 48 deletions(-) diff --git a/components/Navbar.tsx b/components/Navbar.tsx index c346752..5e9d27b 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,6 +1,4 @@ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { signOut } from "next-auth/react"; -import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; import ClickAwayHandler from "@/components/ClickAwayHandler"; import Sidebar from "@/components/Sidebar"; @@ -52,16 +50,16 @@ export default function Navbar() { const [uploadFileModal, setUploadFileModal] = useState(false); return ( -
+
- +
- +
@@ -70,11 +68,12 @@ export default function Navbar() { role="button" className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2" > - - + + + + + +
    diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx index b6a8d4c..42a858d 100644 --- a/components/ProfilePhoto.tsx +++ b/components/ProfilePhoto.tsx @@ -1,6 +1,4 @@ import React, { useEffect, useState } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faUser } from "@fortawesome/free-solid-svg-icons"; import Image from "next/image"; type Props = { @@ -39,10 +37,7 @@ export default function ProfilePhoto({ {name ? ( {name.slice(0, 1)} ) : ( - + )}
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx index 3aed4a4..99d1497 100644 --- a/components/SearchBar.tsx +++ b/components/SearchBar.tsx @@ -1,5 +1,3 @@ -import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { toast } from "react-hot-toast"; @@ -23,9 +21,9 @@ export default function SearchBar({ placeholder }: Props) {
{ - if (e.target.checked) { - setTheme("dark"); - } else { - setTheme("light"); - } + setTheme(e.target.checked ? "dark" : "light"); }; useEffect(() => { @@ -36,27 +32,8 @@ export default function ToggleDarkMode({ className }: Props) { className="theme-controller" checked={localStorage.getItem("theme") === "light" ? false : true} /> - - {/* sun icon */} - - - - - - {/* moon icon */} - - - + +
); From 04ede17bfd72664f3f32db92b7f0c6d1e9ccb735 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 23:11:35 +0800 Subject: [PATCH 4/6] update homepage icons --- components/DashboardItem.tsx | 27 +++++++------ pages/dashboard.tsx | 73 ++++++++++++------------------------ 2 files changed, 36 insertions(+), 64 deletions(-) diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx index 70ffd55..4ad8682 100644 --- a/components/DashboardItem.tsx +++ b/components/DashboardItem.tsx @@ -1,21 +1,20 @@ -import { IconProp } from "@fortawesome/fontawesome-svg-core"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - -type Props = { +export default function dashboardItem({ + name, + value, + icon, +}: { name: string; value: number; - icon: IconProp; -}; - -export default function dashboardItem({ name, value, icon }: Props) { + icon: string; +}) { return ( -
-
- +
+
+
-
-

{name}

-

{value}

+
+

{name}

+

{value}

); diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 0cd4bde..d12381b 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -1,24 +1,12 @@ -import useCollectionStore from "@/store/collections"; -import { - faChartSimple, - faChevronRight, - faClockRotateLeft, - faFileImport, - faFolder, - faHashtag, - faLink, - faThumbTack, -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; +import useCollectionStore from "@/store/collections"; import useTagStore from "@/store/tags"; +import MainLayout from "@/layouts/MainLayout"; import LinkCard from "@/components/LinkCard"; import { useEffect, useState } from "react"; import useLinks from "@/hooks/useLinks"; import Link from "next/link"; import useWindowDimensions from "@/hooks/useWindowDimensions"; -import { faPlus } from "@fortawesome/free-solid-svg-icons"; import React from "react"; import useModalStore from "@/store/modals"; import { toast } from "react-hot-toast"; @@ -44,8 +32,8 @@ export default function Dashboard() { collections.reduce( (accumulator, collection) => accumulator + (collection._count as any).links, - 0 - ) + 0, + ), ); }, [collections]); @@ -106,10 +94,7 @@ export default function Dashboard() {
- +

Dashboard

@@ -122,7 +107,7 @@ export default function Dashboard() {
@@ -130,7 +115,7 @@ export default function Dashboard() {
@@ -138,25 +123,22 @@ export default function Dashboard() {
- -

Recently Added Links

+ +

Recent

View All - +
@@ -164,7 +146,7 @@ export default function Dashboard() { style={{ flex: "0 1 auto" }} className="flex flex-col 2xl:flex-row items-start 2xl:gap-2" > - {links[0] ? ( + {false && links[0] ? (
{ setNewLinkModal(true); }} - className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group" + className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white" > - - - Create New Link + + + Add New Link
@@ -207,13 +186,10 @@ export default function Dashboard() {
- +

Import From

    @@ -266,18 +242,15 @@ export default function Dashboard() {
    - -

    Pinned Links

    + +

    Pinned

    View All - +
    From d97676128067cea9a33d77a9bbdee81aecb0f855 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 23:15:56 +0800 Subject: [PATCH 5/6] add page header component --- components/PageHeader.tsx | 23 +++++++++++++++++++++++ pages/dashboard.tsx | 10 ++-------- 2 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 components/PageHeader.tsx diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx new file mode 100644 index 0000000..b169feb --- /dev/null +++ b/components/PageHeader.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export default function PageHeader({ + title, + description, + icon, +}: { + title: string; + description: string; + icon: string; +}) { + return ( +
    + +
    +

    {title}

    +

    {description}

    +
    +
    + ); +} diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index d12381b..0297941 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -13,6 +13,7 @@ import { toast } from "react-hot-toast"; import { MigrationFormat, MigrationRequest } from "@/types/global"; import DashboardItem from "@/components/DashboardItem"; import NewLinkModal from "@/components/ModalContent/NewLinkModal"; +import PageHeader from "@/components/PageHeader"; export default function Dashboard() { const { collections } = useCollectionStore(); @@ -93,14 +94,7 @@ export default function Dashboard() { return (
    -
    - -
    -

    Dashboard

    - -

    A brief overview of your data

    -
    -
    +
    From ef33f2c94819b0d1388d3327c5fd3f921134c361 Mon Sep 17 00:00:00 2001 From: Yee Jia Wei Date: Sat, 16 Dec 2023 23:33:33 +0800 Subject: [PATCH 6/6] update link, collection header icons --- pages/collections/index.tsx | 42 ++++++++++--------------------------- pages/links/index.tsx | 24 ++++++++------------- pages/links/pinned.tsx | 24 +++++++-------------- 3 files changed, 28 insertions(+), 62 deletions(-) diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index 477d92d..05891fe 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -1,10 +1,4 @@ import useCollectionStore from "@/store/collections"; -import { - faEllipsis, - faFolder, - faPlus, -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import CollectionCard from "@/components/CollectionCard"; import { useState } from "react"; import MainLayout from "@/layouts/MainLayout"; @@ -13,6 +7,7 @@ import SortDropdown from "@/components/SortDropdown"; import { Sort } from "@/types/global"; import useSort from "@/hooks/useSort"; import NewCollectionModal from "@/components/ModalContent/NewCollectionModal"; +import PageHeader from "@/components/PageHeader"; export default function Collections() { const { collections } = useCollectionStore(); @@ -28,24 +23,14 @@ export default function Collections() { return ( -
    -
    -
    -
    - -
    -

    - Your Collections -

    - -

    Collections you own

    -
    -
    -
    +
    + +
    @@ -63,20 +48,15 @@ export default function Collections() { onClick={() => setNewCollectionModal(true)} >

    New Collection

    - +
    {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? ( <>
    - + +

    Other Collections diff --git a/pages/links/index.tsx b/pages/links/index.tsx index 6364e40..dfade81 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -5,9 +5,8 @@ import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; import { Sort } from "@/types/global"; -import { faLink } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useState } from "react"; +import React, { useState } from "react"; +import PageHeader from "@/components/PageHeader"; export default function Links() { const { links } = useLinkStore(); @@ -19,23 +18,18 @@ export default function Links() { return (

    -
    -
    - -
    -

    All Links

    - -

    Links from every Collections

    -
    -
    + +
    + {links[0] ? (
    {links.map((e, i) => { diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx index ac52af2..a4a70f8 100644 --- a/pages/links/pinned.tsx +++ b/pages/links/pinned.tsx @@ -4,9 +4,8 @@ import useLinks from "@/hooks/useLinks"; import MainLayout from "@/layouts/MainLayout"; import useLinkStore from "@/store/links"; import { Sort } from "@/types/global"; -import { faThumbTack } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useState } from "react"; +import React, { useState } from "react"; +import PageHeader from "@/components/PageHeader"; export default function PinnedLinks() { const { links } = useLinkStore(); @@ -18,19 +17,12 @@ export default function PinnedLinks() { return (
    -
    -
    - -
    -

    Pinned Links

    - -

    Pinned Links from your Collections

    -
    -
    - + +