egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

much better coloring

Browse Source
This commit is contained in:
Daniel
2023-08-14 23:25:25 -04:00
parent 7da89a35e2
commit 1701ba07d4
44 changed files with 331 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CollectionCard.tsx
+4 -4
View File
@@ -32,24 +32,24 @@ export default function CollectionCard({ collection, className }: Props) {
return (
<div
className={`bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
className={`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 group relative ${className}`}
>
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + collection.id}
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
id={"expand-dropdown" + collection.id}
className="w-5 h-5 text-gray-500 dark:text-white"
className="w-5 h-5 text-gray-500 dark:text-gray-300"
/>
</div>
<Link
href={`/collections/${collection.id}`}
className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
>
<p className="text-2xl font-bold capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
<p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
{collection.name}
</p>
<div className="flex justify-between items-center">
components/Dropdown.tsx
+2 -2
View File
@@ -25,12 +25,12 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
return (
<ClickAwayHandler
onClickOutside={onClickOutside}
className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-sky-900 rounded-md flex flex-col z-20`}
className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
>
{items.map((e, i) => {
const inner = e && (
<div className="cursor-pointer rounded-md">
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
<p className="text-black dark:text-white select-none">{e.name}</p>
</div>
</div>
components/FilterSearchDropdown.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export default function FilterSearchDropdown({
const target = e.target as HTMLInputElement;
if (target.id !== "filter-dropdown") setFilterDropdown(false);
}}
className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-40"
className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
>
<p className="mb-2 text-black dark:text-white text-center font-semibold">
Filter by
components/InputSelect/CollectionSelection.tsx
+2
View File
@@ -45,6 +45,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
return (
<Select
isClearable
className="react-select-container"
classNamePrefix="react-select"
placeholder="Default: Unnamed Collection"
onChange={onChange}
options={options}
components/InputSelect/TagSelection.tsx
+2
View File
@@ -28,6 +28,8 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
return (
<CreatableSelect
isClearable
className="react-select-container"
classNamePrefix="react-select"
onChange={onChange}
options={options}
styles={styles}
components/LinkCard.tsx
+7 -7
View File
@@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
return (
<div
className={`bg-gradient-to-tr from-slate-200 dark:from-sky-800 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
className={`bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
>
{(permissions === true ||
permissions?.canUpdate ||
@@ -114,7 +114,7 @@ export default function LinkCard({ link, count, className }: Props) {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + link.id}
className="text-gray-500 dark:text-white inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
@@ -156,10 +156,10 @@ export default function LinkCard({ link, count, className }: Props) {
<div className="flex justify-between gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full">
<div className="flex items-baseline gap-1">
<p className="text-sm text-black dark:text-white font-bold">
{count + 1}.
<p className="text-sm text-gray-500 dark:text-gray-300">
{count + 1}
</p>
<p className="text-lg text-black dark:text-white font-bold truncate capitalize w-full pr-8">
<p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
{link.name || link.description}
</p>
</div>
@@ -175,11 +175,11 @@ export default function LinkCard({ link, count, className }: Props) {
</p>
</div>
</div>
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-white">
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-gray-300">
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p>
</div>
<div className="flex items-center gap-1 text-gray-500 dark:text-white">
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>
components/Modal/Collection/CollectionInfo.tsx
+3 -3
View File
@@ -72,7 +72,7 @@ export default function CollectionInfo({
}
type="text"
placeholder="e.g. Example Collection"
className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-3 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
<div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32">
@@ -86,7 +86,7 @@ export default function CollectionInfo({
/>
</div>
<div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 duration-100"
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
}
@@ -105,7 +105,7 @@ export default function CollectionInfo({
<div className="w-full">
<p className="text-sm text-black dark:text-white mb-2">Description</p>
<textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-sky-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-3 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
placeholder="The purpose of this Collection..."
value={collection.description}
onChange={(e) =>
components/Modal/Collection/DeleteCollection.tsx
+5 -5
View File
@@ -83,7 +83,7 @@ export default function DeleteCollection({
<div className="flex flex-col gap-3">
<p className="text-black dark:text-white select-none text-center">
To confirm, type &quot;
<span className="font-bold text-black">{collection.name}</span>
<span className="font-bold">{collection.name}</span>
&quot; in the box below:
</p>
@@ -93,7 +93,7 @@ export default function DeleteCollection({
onChange={(e) => setInputField(e.target.value)}
type="text"
placeholder={`Type "${collection.name}" Here.`}
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 dark:bg-neutral-900 border-solid border outline-none duration-100"
/>
</div>
</>
@@ -107,9 +107,9 @@ export default function DeleteCollection({
className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
permissions === true
? inputField === collection.name
? "bg-red-500 hover:bg-red-400 cursor-pointer"
: "cursor-not-allowed bg-red-300"
: "bg-red-500 hover:bg-red-400 cursor-pointer"
? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
: "cursor-not-allowed bg-red-300 dark:bg-red-900"
: "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
}`}
onClick={submit}
>
components/Modal/Collection/TeamManagement.tsx
+18 -16
View File
@@ -148,7 +148,7 @@ export default function TeamManagement({
console.log(err);
}
}}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
>
{publicCollectionURL}
</div>
@@ -183,7 +183,7 @@ export default function TeamManagement({
}
type="text"
placeholder="Username (without the '@')"
className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-3 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
<div
@@ -215,7 +215,7 @@ export default function TeamManagement({
return (
<div
key={i}
className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
>
{permissions === true && (
<FontAwesomeIcon
@@ -244,7 +244,9 @@ export default function TeamManagement({
<p className="text-sm font-bold text-black dark:text-white">
{e.user.name}
</p>
<p className="text-black">@{e.user.username}</p>
<p className="text-gray-500 dark:text-gray-300">
@{e.user.username}
</p>
</div>
</div>
<div className="flex sm:block items-center gap-5 min-w-[10rem]">
@@ -307,11 +309,11 @@ export default function TeamManagement({
}}
/>
<span
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
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 duration-75"
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
: ""
} peer-checked:text-white rounded p-1 select-none`}
} rounded p-1 select-none`}
>
Create
</span>
@@ -352,11 +354,11 @@ export default function TeamManagement({
}}
/>
<span
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
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 duration-75"
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
: ""
} peer-checked:text-white rounded p-1 select-none`}
} rounded p-1 select-none`}
>
Update
</span>
@@ -397,11 +399,11 @@ export default function TeamManagement({
}}
/>
<span
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
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 duration-75"
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
: ""
} peer-checked:text-white rounded p-1 select-none`}
} rounded p-1 select-none`}
>
Delete
</span>
@@ -417,13 +419,13 @@ export default function TeamManagement({
)}
<div
className="relative border px-2 rounded-md border-sky-100 dark:border-sky-800 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
title={`'@${collectionOwner.username}' is the owner of this collection.`}
>
<div className="flex items-center gap-2">
<ProfilePhoto
src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
className="border-[3px] dark:border-sky-800"
className="border-[3px]"
/>
<div>
<div className="flex items-center gap-1">
@@ -435,7 +437,7 @@ export default function TeamManagement({
className="w-3 h-3 text-yellow-500"
/>
</div>
<p className="text-black dark:text-white">
<p className="text-gray-500 dark:text-gray-300">
@{collectionOwner.username}
</p>
</div>
components/Modal/Collection/index.tsx
+3 -3
View File
@@ -58,7 +58,7 @@ export default function CollectionModal({
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
}
>
Collection Info
@@ -68,7 +68,7 @@ export default function CollectionModal({
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
}
>
{isOwner ? "Share & Collaborate" : "View Team"}
@@ -77,7 +77,7 @@ export default function CollectionModal({
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
}
>
{isOwner ? "Delete Collection" : "Leave Collection"}
components/Modal/Link/AddOrEditLink.tsx
+6 -6
View File
@@ -115,10 +115,10 @@ export default function AddOrEditLink({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{method === "UPDATE" ? (
<p
className="text-gray-500 my-2 text-center truncate w-full"
className="text-gray-500 dark:text-gray-300 my-2 text-center truncate w-full"
title={link.url}
>
<Link href={link.url} target="_blank" className=" font-bold">
<Link href={link.url} target="_blank" className="font-bold">
{link.url}
</Link>
</p>
@@ -135,11 +135,11 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, url: e.target.value })}
type="text"
placeholder="e.g. http://example.com/"
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
) : null}
<hr className="dark:border-sky-800" />
<hr className="dark:border-neutral-700" />
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-black dark:text-white mb-2">Collection</p>
@@ -177,7 +177,7 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
@@ -191,7 +191,7 @@ export default function AddOrEditLink({
? "Will be auto generated if nothing is provided."
: ""
}
className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-sky-950"
className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-900"
/>
</div>
</div>
components/Modal/Link/LinkDetails.tsx
+29 -20
View File
@@ -20,12 +20,15 @@ import {
faFilePdf,
} from "@fortawesome/free-regular-svg-icons";
import isValidUrl from "@/lib/client/isValidUrl";
import { useTheme } from "next-themes";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
};
export default function LinkDetails({ link }: Props) {
const { theme, setTheme } = useTheme();
const [imageError, setImageError] = useState<boolean>(false);
const formattedDate = new Date(link.createdAt as string).toLocaleString(
"en-US",
@@ -71,6 +74,9 @@ export default function LinkDetails({ link }: Props) {
useEffect(() => {
const banner = document.getElementById("link-banner");
const bannerInner = document.getElementById("link-banner-inner");
const bannerOut = document.getElementById("link-banner-outside");
if (theme === "dark") bannerOut?.classList.toggle("banner-dark-mode");
if (colorPalette && banner && bannerInner) {
banner.style.background = `linear-gradient(to right, ${rgbToHex(
@@ -93,7 +99,7 @@ export default function LinkDetails({ link }: Props) {
colorPalette[3][2]
)})`;
}
}, [colorPalette]);
}, [colorPalette, theme]);
const handleDownload = (format: "png" | "pdf") => {
const path = `/api/archives/${link.collection.id}/${link.id}.${format}`;
@@ -115,7 +121,10 @@ export default function LinkDetails({ link }: Props) {
};
return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<div
id="link-banner-outside"
className="flex flex-col gap-3 sm:w-[35rem] w-80"
>
{!imageError && (
<div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
<div id="link-banner-inner" className="link-banner-inner"></div>
@@ -131,7 +140,7 @@ export default function LinkDetails({ link }: Props) {
height={42}
alt=""
id={"favicon-" + link.id}
className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-sky-950 aspect-square"
className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
draggable="false"
onLoad={(e) => {
try {
@@ -158,7 +167,7 @@ export default function LinkDetails({ link }: Props) {
href={link.url}
target="_blank"
rel="noreferrer"
className="text-sm text-gray-500 dark:text-white break-all hover:underline cursor-pointer w-fit"
className="text-sm text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit"
>
{url ? url.host : link.url}
</Link>
@@ -185,7 +194,7 @@ export default function LinkDetails({ link }: Props) {
<Link key={i} href={`/tags/${e.id}`} className="z-10">
<p
title={e.name}
className="px-2 py-1 bg-sky-200 text-black text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
>
{e.name}
</p>
@@ -194,19 +203,19 @@ export default function LinkDetails({ link }: Props) {
</div>
{link.description && (
<>
<div className="text-gray-500 dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
<div className="text-black dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
{link.description}
</div>
</>
)}
<div className="flex justify-between items-center">
<div className="flex items-center gap-1 text-gray-500 dark:text-white">
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
<FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
<p>Archived Formats:</p>
</div>
<div
className="flex items-center gap-1 text-gray-500 dark:text-white"
className="flex items-center gap-1 text-gray-500 dark:text-gray-300"
title={"Created at: " + formattedDate}
>
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -214,7 +223,7 @@ export default function LinkDetails({ link }: Props) {
</div>
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
<div className="flex gap-2 items-center">
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
@@ -223,32 +232,32 @@ export default function LinkDetails({ link }: Props) {
<p className="text-gray-500 dark:text-white">Screenshot</p>
</div>
<div className="flex text-black gap-1">
<div className="flex text-black dark:text-white gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.png`}
target="_blank"
rel="noreferrer"
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5"
className="w-5 h-5 text-sky-500 dark:text-sky-300"
/>
</Link>
<div
onClick={() => handleDownload("png")}
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer"
className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
/>
</div>
</div>
</div>
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
<div className="flex gap-2 items-center">
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
@@ -257,26 +266,26 @@ export default function LinkDetails({ link }: Props) {
<p className="text-gray-500 dark:text-white">PDF</p>
</div>
<div className="flex text-black gap-1">
<div className="flex text-black dark:text-white gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
target="_blank"
rel="noreferrer"
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5"
className="w-5 h-5 text-sky-500 dark:text-sky-300"
/>
</Link>
<div
onClick={() => handleDownload("pdf")}
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer"
className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
/>
</div>
</div>
components/Modal/Link/index.tsx
+4 -4
View File
@@ -47,8 +47,8 @@ export default function LinkModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
? "px-2 py-1 bg-sky-200 dark:bg-sky-600 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
}
>
Link Details
@@ -56,8 +56,8 @@ export default function LinkModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
? "px-2 py-1 bg-sky-200 dark:bg-sky-600 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
}
>
Edit Link
components/Modal/User/BillingPortal.tsx
+6 -3
View File
@@ -18,7 +18,7 @@ export default function PaymentPortal() {
return (
<div className="mx-auto sm:w-[35rem] w-80">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-md text-gray-500">
<p className="text-md text-gray-500 dark:text-gray-400">
To manage/cancel your subsciption, visit the billing portal.
</p>
@@ -30,10 +30,13 @@ export default function PaymentPortal() {
className="mx-auto mt-2"
/>
<p className="text-md text-gray-500">
<p className="text-md text-gray-500 dark:text-gray-400">
If you still need help or encountered any issues, feel free to reach
out to us at:{" "}
<a className="font-semibold" href="mailto:support@linkwarden.app">
<a
className="font-semibold underline"
href="mailto:support@linkwarden.app"
>
support@linkwarden.app
</a>
</p>
components/Modal/User/ChangePassword.tsx
+2 -2
View File
@@ -88,7 +88,7 @@ export default function ChangePassword({
onChange={(e) => setNewPassword1(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
<p className="text-sm text-black dark:text-white">
Confirm New Password
@@ -99,7 +99,7 @@ export default function ChangePassword({
onChange={(e) => setNewPassword2(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
<SubmitButton
components/Modal/User/PrivacySettings.tsx
+16 -10
View File
@@ -119,7 +119,9 @@ export default function PrivacySettings({
return (
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
<div>
<p className="text-sm text-black mb-2">Profile Visibility</p>
<p className="text-sm text-black dark:text-white mb-2">
Profile Visibility
</p>
<Checkbox
label="Make profile private"
@@ -128,19 +130,21 @@ export default function PrivacySettings({
onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
/>
<p className="text-gray-500 text-sm">
<p className="text-gray-500 dark:text-gray-300 text-sm">
This will limit who can find and add you to other Collections.
</p>
{user.isPrivate && (
<div>
<p className="text-sm text-black my-2">Whitelisted Users</p>
<p className="text-gray-500 text-sm mb-3">
<p className="text-sm text-black dark:text-white mt-2">
Whitelisted Users
</p>
<p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
Please provide the Username of the users you wish to grant
visibility to your profile. Separated by comma.
</p>
<textarea
className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox}
onChange={(e) => {
@@ -152,7 +156,9 @@ export default function PrivacySettings({
</div>
<div className="mt-5">
<p className="text-sm text-black mb-2">Import/Export Data</p>
<p className="text-sm text-black dark:text-white mb-2">
Import/Export Data
</p>
<div className="flex gap-2">
<div
@@ -162,7 +168,7 @@ export default function PrivacySettings({
>
<div
id="import-dropdown"
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
>
Import From
</div>
@@ -172,13 +178,13 @@ export default function PrivacySettings({
const target = e.target as HTMLInputElement;
if (target.id !== "import-dropdown") setImportDropdown(false);
}}
className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
>
<div className="cursor-pointer rounded-md">
<label
htmlFor="import-file"
title="JSON"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100 cursor-pointer"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer"
>
Linkwarden
<input
@@ -196,7 +202,7 @@ export default function PrivacySettings({
</div>
<Link className="w-fit" href="/api/data">
<div className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
<div className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
Export Data
</div>
</Link>
components/Modal/User/ProfileSettings.tsx
+3 -3
View File
@@ -129,7 +129,7 @@ export default function ProfileSettings({
<label
htmlFor="upload-photo"
title="PNG or JPG (Max: 3MB)"
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
>
Browse...
<input
@@ -154,7 +154,7 @@ export default function ProfileSettings({
type="text"
value={user.name}
onChange={(e) => setUser({ ...user, name: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
@@ -164,7 +164,7 @@ export default function ProfileSettings({
type="text"
value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
components/Modal/User/index.tsx
+5 -5
View File
@@ -32,7 +32,7 @@ export default function UserModal({
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-700 rounded-md duration-100 outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
}
>
Profile Settings
@@ -42,7 +42,7 @@ export default function UserModal({
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-600 rounded-md duration-100 outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
}
>
Privacy Settings
@@ -52,7 +52,7 @@ export default function UserModal({
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-600 rounded-md duration-100 outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
}
>
Password
@@ -62,8 +62,8 @@ export default function UserModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
}
>
Billing Portal
components/Modal/index.tsx
+2 -2
View File
@@ -16,10 +16,10 @@ export default function Modal({ toggleModal, className, children }: Props) {
onClickOutside={toggleModal}
className={`m-auto ${className}`}
>
<div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-sky-950">
<div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
<div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 z-20 p-2"
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
>
<FontAwesomeIcon
icon={faChevronLeft}
components/Navbar.tsx
+23 -7
View File
@@ -9,8 +9,8 @@ import { useRouter } from "next/router";
import Search from "@/components/Search";
import useAccountStore from "@/store/account";
import ProfilePhoto from "@/components/ProfilePhoto";
import ToggleDarkMode from "@/components/ToggleDarkMode";
import useModalStore from "@/store/modals";
import { useTheme } from "next-themes";
export default function Navbar() {
const { setModal } = useModalStore();
@@ -23,6 +23,16 @@ export default function Navbar() {
const router = useRouter();
const { theme, setTheme } = useTheme();
const handleToggle = () => {
if (theme === "dark") {
setTheme("light");
} else {
setTheme("dark");
}
};
window.addEventListener("resize", () => setSidebar(false));
useEffect(() => {
@@ -34,10 +44,10 @@ export default function Navbar() {
};
return (
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-sky-800 border-b h-16">
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-neutral-700 border-b h-16">
<div
onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-black rounded-md duration-100 hover:bg-slate-200"
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-black dark:text-white rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
>
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div>
@@ -51,7 +61,7 @@ export default function Navbar() {
method: "CREATE",
});
}}
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-black sm:text-white sm:bg-sky-700 sm:dark:bg-sky-400 sm:hover:bg-sky-600 duration-100 group"
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 dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-sky-500 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
>
<FontAwesomeIcon
icon={faPlus}
@@ -61,16 +71,15 @@ export default function Navbar() {
New Link
</span>
</div>
<ToggleDarkMode />
<div className="relative">
<div
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-sky-900 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-sky-950 cursor-pointer"
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown"
>
<ProfilePhoto
src={account.profilePic}
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px] dark:border-sky-800"
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
/>
<p
id="profile-dropdown"
@@ -93,6 +102,13 @@ export default function Navbar() {
setProfileDropdown(!profileDropdown);
},
},
{
name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
onClick: () => {
handleToggle();
setProfileDropdown(!profileDropdown);
},
},
{
name: "Logout",
onClick: () => {
components/NoLinksFound.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default function NoLinksFound() {
const { setModal } = useModalStore();
return (
<div className="border border-solid border-sky-100 dark:border-sky-800 w-full p-10 rounded-2xl">
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl">
<p className="text-center text-3xl text-black dark:text-white">
You haven&apos;t created any Links Here
</p>
components/ProfilePhoto.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ export default function ProfilePhoto({
return error || !src ? (
<div
className={`bg-sky-500 dark:bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
>
<FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
</div>
@@ -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 ${className}`}
className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
/>
);
}
components/PublicPage/LinkCard.tsx
+5 -3
View File
@@ -58,8 +58,10 @@ export default function LinkCard({ link, count }: Props) {
<div className="flex justify-between items-center gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between">
<div className="flex items-baseline gap-1">
<p className="text-sm text-black font-bold">{count + 1}.</p>
<p className="text-lg text-black font-bold">{link.name}</p>
<p className="text-xs text-gray-500">{count + 1}</p>
<p className="text-lg text-black">
{link.name || link.description}
</p>
</div>
<p className="text-gray-500 text-sm font-medium">
@@ -79,7 +81,7 @@ export default function LinkCard({ link, count }: Props) {
</div>
<div className="flex gap-2 items-center flex-wrap mt-2">
<p className="text-gray-500">{formattedDate}</p>
<div className="text-black font-bold flex items-center gap-1">
<div className="text-black flex items-center gap-1">
<p>{url ? url.host : link.url}</p>
</div>
</div>
components/RadioButton.tsx
+2 -2
View File
@@ -20,11 +20,11 @@ export default function RadioButton({ label, state, onClick }: Props) {
/>
<FontAwesomeIcon
icon={faCircleCheck}
className="w-5 h-5 text-black dark:text-white peer-checked:block hidden"
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
/>
<FontAwesomeIcon
icon={faCircle}
className="w-5 h-5 text-black dark:text-white peer-checked:hidden block"
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
/>
<span className="text-black dark:text-white rounded select-none">
{label}
components/Search.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export default function Search() {
router.push("/search/" + encodeURIComponent(searchQuery))
}
autoFocus={searchBox}
className="border border-sky-100 dark:border-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-300 dark:focus:border-sky-600 dark:hover:border-sky-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-sky-950"
className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none bg-inherit"
/>
</div>
);
components/Sidebar.tsx
+6 -6
View File
@@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
return (
<div
className={`bg-gray-100 dark:bg-sky-900 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-sky-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
>
<div className="flex justify-center gap-2 mt-2">
<Link
@@ -59,7 +59,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === "/dashboard"
? "bg-sky-200 dark:bg-sky-600"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
@@ -77,7 +77,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === "/links"
? "bg-sky-200 dark:bg-sky-600"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
@@ -95,7 +95,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === "/collections"
? "bg-sky-200 dark:bg-sky-600"
: "hover:bg-slate-200 hover:dark:bg-sky-800"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
@@ -144,7 +144,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === `/collections/${e.id}`
? "bg-sky-200 dark:bg-sky-700 "
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-sky-900"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<FontAwesomeIcon
@@ -204,7 +204,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === `/tags/${e.id}`
? "bg-sky-200 dark:bg-sky-700"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon
components/SortDropdown.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function SortDropdown({
const target = e.target as HTMLInputElement;
if (target.id !== "sort-dropdown") toggleSortDropdown();
}}
className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-48"
className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
>
<p className="mb-2 text-black dark:text-white text-center font-semibold">
Sort by
components/SubmitButton.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function SubmitButton({
className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
loading
? "bg-sky-600 cursor-auto"
: "bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 hover:dark:bg-sky-300 cursor-pointer"
: "bg-sky-700 hover:bg-sky-600 cursor-pointer"
} ${className}`}
onClick={() => {
if (!loading) onClick();