xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

improved UI

This commit is contained in:
Daniel 2023-05-31 22:03:01 +03:30
parent facbf09604
commit 6ef8e8f870
15 changed files with 99 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/CollectionCard.tsx
View File

@ -44,11 +44,11 @@ export default function ({
}; };
return ( return (
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md shadow duration-100 hover:shadow-none group relative"> <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative">
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + collection.id} id={"expand-dropdown" + collection.id}
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}

6
components/LinkList.tsx
View File

@ -40,7 +40,7 @@ export default function ({ link, count }: Props) {
}; };
return ( return (
<div className="bg-gradient-to-tr from-gray-100 from-10% to-slate-200 via-20% shadow-sm p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item"> <div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl flex items-start relative gap-5 sm:gap-10 group/item">
{editModal ? ( {editModal ? (
<Modal toggleModal={toggleEditModal}> <Modal toggleModal={toggleEditModal}>
<LinkModal <LinkModal
@ -94,7 +94,7 @@ export default function ({ link, count }: Props) {
{link.tags.map((e, i) => ( {link.tags.map((e, i) => (
<Link key={i} href={`/tags/${e.id}`}> <Link key={i} href={`/tags/${e.id}`}>
<p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100"> <p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100">
# {e.name} {e.name}
</p> </p>
</Link> </Link>
))} ))}
@ -118,7 +118,7 @@ export default function ({ link, count }: Props) {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + link.id} id={"expand-dropdown" + link.id}
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white outline outline-sky-100 hover:outline-sky-500 outline-1 duration-100 p-1" className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}

19
components/Modal/Collection/CollectionInfo.tsx
View File

@ -4,6 +4,7 @@ import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import { CollectionIncludingMembers } from "@/types/global"; import { CollectionIncludingMembers } from "@/types/global";
import RequiredBadge from "../../RequiredBadge"; import RequiredBadge from "../../RequiredBadge";
import SubmitButton from "@/components/SubmitButton";
type Props = { type Props = {
toggleCollectionModal: Function; toggleCollectionModal: Function;
@ -72,18 +73,12 @@ export default function CollectionInfo({
</div> </div>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 mt-2"> <SubmitButton
<div onClick={submit}
className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400" label={method === "CREATE" ? "Add Collection" : "Edit Collection"}
onClick={submit} icon={method === "CREATE" ? faPlus : faPenToSquare}
> className="mx-auto mt-2"
<FontAwesomeIcon />
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="h-5"
/>
{method === "CREATE" ? "Add Collection" : "Edit Collection"}
</div>
</div>
</div> </div>
); );
} }

26
components/Modal/Collection/TeamManagement.tsx
View File

@ -12,6 +12,7 @@ import { useSession } from "next-auth/react";
import addMemberToCollection from "@/lib/client/addMemberToCollection"; import addMemberToCollection from "@/lib/client/addMemberToCollection";
import ImageWithFallback from "../../ImageWithFallback"; import ImageWithFallback from "../../ImageWithFallback";
import Checkbox from "../../Checkbox"; import Checkbox from "../../Checkbox";
import SubmitButton from "@/components/SubmitButton";
type Props = { type Props = {
toggleCollectionModal: Function; toggleCollectionModal: Function;
@ -73,7 +74,7 @@ export default function TeamManagement({
return ( return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80"> <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto"> <p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
Sharing & Collaboration Settings Sharing & Collaboration
</p> </p>
<p className="text-sm font-bold text-sky-300">Make Public</p> <p className="text-sm font-bold text-sky-300">Make Public</p>
@ -114,7 +115,7 @@ export default function TeamManagement({
<p className="text-sm font-bold text-sky-300">Member Management</p> <p className="text-sm font-bold text-sky-300">Member Management</p>
<div className="relative"> <div className="flex items-center gap-2">
<input <input
value={member.user.email} value={member.user.email}
onChange={(e) => { onChange={(e) => {
@ -134,7 +135,7 @@ export default function TeamManagement({
} }
type="text" type="text"
placeholder="Email" placeholder="Email"
className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
<div <div
@ -146,9 +147,9 @@ export default function TeamManagement({
setMemberState setMemberState
) )
} }
className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer" className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
> >
<FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" /> <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
</div> </div>
</div> </div>
{collection?.members[0]?.user ? ( {collection?.members[0]?.user ? (
@ -305,15 +306,12 @@ export default function TeamManagement({
</> </>
) : null} ) : null}
<div className="flex flex-col justify-center items-center gap-2 mt-2"> <SubmitButton
<div onClick={submit}
className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400" label="Edit Collection"
onClick={submit} icon={faPenToSquare}
> className="mx-auto mt-2"
<FontAwesomeIcon icon={faPenToSquare} className="h-5" /> />
Edit Collection
</div>
</div>
</div> </div>
); );
} }

52
components/Modal/LinkModal.tsx
View File

@ -5,11 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LinkIncludingCollectionAndTags } from "@/types/global"; import { LinkIncludingCollectionAndTags } from "@/types/global";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons"; import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons"; import { faPlus } from "@fortawesome/free-solid-svg-icons";
import RequiredBadge from "../RequiredBadge"; import RequiredBadge from "../RequiredBadge";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import SubmitButton from "../SubmitButton";
type Props = type Props =
| { | {
@ -47,7 +48,7 @@ export default function EditLink({
} }
); );
const { updateLink, removeLink, addLink } = useLinkStore(); const { updateLink, addLink } = useLinkStore();
const router = useRouter(); const router = useRouter();
@ -97,7 +98,7 @@ export default function EditLink({
if (method === "UPDATE") response = await updateLink(link); if (method === "UPDATE") response = await updateLink(link);
else if (method === "CREATE") response = await addLink(link); else if (method === "CREATE") response = await addLink(link);
toggleLinkModal(); response && toggleLinkModal();
}; };
return ( return (
@ -107,7 +108,7 @@ export default function EditLink({
</p> </p>
{method === "UPDATE" ? ( {method === "UPDATE" ? (
<p className="text-sky-700"> <p className="text-gray-500">
<b>{shortendURL}</b> | {link.title} <b>{shortendURL}</b> | {link.title}
</p> </p>
) : null} ) : null}
@ -176,43 +177,12 @@ export default function EditLink({
</div> </div>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 mt-2"> <SubmitButton
<div onClick={submit}
className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400" label={method === "CREATE" ? "Add Link" : "Edit Link"}
onClick={submit} icon={method === "CREATE" ? faPlus : faPenToSquare}
> className="mx-auto mt-2"
<FontAwesomeIcon />
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="h-5"
/>
{method === "CREATE" ? "Add Link" : "Edit Link"}
</div>
{method === "UPDATE" ? (
<>
<div className="flex items-center justify-center gap-2">
<hr className="w-16 border" />
<p className="text-gray-400 font-bold">OR</p>
<hr className="w-16 border" />
</div>
<div
onClick={() => {
removeLink(link);
toggleLinkModal();
}}
className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
>
<FontAwesomeIcon
icon={faTrashCan}
className="w-4 h-4 text-white"
/>
</div>
</>
) : null}
</div>
</div> </div>
); );
} }

16
components/Modal/UserSettings.tsx
View File

@ -9,6 +9,7 @@ import { resizeImage } from "@/lib/client/resizeImage";
import Modal from "."; import Modal from ".";
import ChangePassword from "./ChangePassword"; import ChangePassword from "./ChangePassword";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons"; import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "../SubmitButton";
type Props = { type Props = {
toggleSettingsModal: Function; toggleSettingsModal: Function;
@ -221,8 +222,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
</p> </p>
<p className="text-gray-500 text-sm mb-3"> <p className="text-gray-500 text-sm mb-3">
Please provide the Email addresses of the users you wish to grant Please provide the Email addresses of the users you wish to grant
visibility to your profile. Separate the addresses with a comma. visibility to your profile. Separate by comma. Users not included
Users not included will be unable to view your profile. will be unable to view your profile.
</p> </p>
<textarea <textarea
className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500" className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
@ -235,13 +236,12 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
</div> </div>
) : null} ) : null}
<div <SubmitButton
className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
onClick={submit} onClick={submit}
> label="Apply Settings"
<FontAwesomeIcon icon={faPenToSquare} className="h-5" /> icon={faPenToSquare}
Apply Settings className="mx-auto mt-2"
</div> />
{passwordFormModal ? ( {passwordFormModal ? (
<Modal toggleModal={togglePasswordFormModal}> <Modal toggleModal={togglePasswordFormModal}>

6
components/Modal/index.tsx
View File

@ -12,14 +12,14 @@ export default function ({ toggleModal, children }: Props) {
return ( return (
<div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30"> <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
<ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto"> <ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
<div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white"> <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
<div <div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>} onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-2"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronLeft} icon={faChevronLeft}
className="w-5 h-5 text-gray-500" className="w-4 h-4 text-gray-500"
/> />
</div> </div>
{children} {children}

15
components/Navbar.tsx
View File

@ -50,18 +50,23 @@ export default function () {
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16"> <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
<div <div
onClick={toggleSidebar} onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1" className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 rounded-md duration-100 hover:bg-slate-200"
> >
<FontAwesomeIcon icon={faBars} className="w-6 h-6" /> <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> </div>
<Search /> <Search />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div <div
onClick={toggleLinkModal} onClick={toggleLinkModal}
className="inline-flex gap-1 items-center font-semibold select-none cursor-pointer px-2 sm:px-3 py-2 rounded-md text-white bg-sky-500 hover:bg-sky-400 duration-100" className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 duration-100 group"
> >
<FontAwesomeIcon icon={faPlus} className="w-6 h-6 sm:w-5 sm:h-5" /> <FontAwesomeIcon
<span className="hidden sm:block">New Link</span> icon={faPlus}
className="w-5 h-5 sm:group-hover:ml-9 sm:absolute duration-100"
/>
<span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
New Link
</span>
</div> </div>
<div className="relative"> <div className="relative">

4
components/Search.tsx
View File

@ -35,7 +35,7 @@ export default function Search() {
> >
<label <label
htmlFor="search-box" htmlFor="search-box"
className="inline-flex w-fit absolute right-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600" className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600"
> >
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" /> <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label> </label>
@ -50,7 +50,7 @@ export default function Search() {
router.push("/search"); router.push("/search");
}} }}
autoFocus={searchBox} autoFocus={searchBox}
className="border border-sky-100 rounded-md pr-10 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-2" className="border border-sky-100 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none"
/> />
</div> </div>
); );

27
components/SubmitButton.tsx Normal file
View File

@ -0,0 +1,27 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
import { MouseEventHandler } from "react";
type Props = {
onClick: Function;
icon: IconDefinition;
label: string;
className?: string;
};
export default function SubmitButton({
onClick,
icon,
label,
className,
}: Props) {
return (
<div
className={`bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-xl select-none font-bold cursor-pointer duration-100 hover:bg-sky-400 w-fit ${className}`}
onClick={onClick as MouseEventHandler<HTMLDivElement>}
>
<FontAwesomeIcon icon={icon} className="h-5" />
{label}
</div>
);
}

6
pages/collections/[id].tsx
View File

@ -98,7 +98,7 @@ export default function () {
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5 w-full"> <div className="p-5 flex flex-col gap-5 w-full">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"> <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl 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 items-center sm:items-start"> <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<div className="flex gap-2"> <div className="flex gap-2">
@ -162,7 +162,7 @@ export default function () {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}
@ -183,7 +183,7 @@ export default function () {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}

6
pages/collections/index.tsx
View File

@ -90,7 +90,7 @@ export default function () {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}
@ -125,7 +125,7 @@ export default function () {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}
@ -193,7 +193,7 @@ export default function () {
})} })}
<div <div
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group" className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
onClick={toggleCollectionModal} onClick={toggleCollectionModal}
> >
<p className="text-sky-900 group-hover:opacity-0 duration-100"> <p className="text-sky-900 group-hover:opacity-0 duration-100">

2
pages/links.tsx
View File

@ -64,7 +64,7 @@ export default function Links() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

10
pages/search.tsx
View File

@ -54,14 +54,16 @@ export default function Links() {
setSortedLinks( setSortedLinks(
linksArray.sort( linksArray.sort(
(a, b) => (a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() new Date(b.createdAt as string).getTime() -
new Date(a.createdAt as string).getTime()
) )
); );
else if (sortBy === "Date (Oldest First)") else if (sortBy === "Date (Oldest First)")
setSortedLinks( setSortedLinks(
linksArray.sort( linksArray.sort(
(a, b) => (a, b) =>
new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() new Date(a.createdAt as string).getTime() -
new Date(b.createdAt as string).getTime()
) )
); );
}, [searchSettings, links, sortBy]); }, [searchSettings, links, sortBy]);
@ -80,7 +82,7 @@ export default function Links() {
<div <div
onClick={() => setFilterDropdown(!filterDropdown)} onClick={() => setFilterDropdown(!filterDropdown)}
id="filter-dropdown" id="filter-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faFilter} icon={faFilter}
@ -136,7 +138,7 @@ export default function Links() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

2
pages/tags/[id].tsx
View File

@ -83,7 +83,7 @@ export default function () {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1" className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}