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

many coloring changes and improvements

This commit is contained in:
Daniel 2023-08-11 01:11:02 -04:00
parent 1eb1467a02
commit 7da89a35e2
37 changed files with 189 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Checkbox.tsx
View File

@ -11,9 +11,7 @@ type Props = {
export default function Checkbox({ label, state, className, onClick }: Props) {
return (
<label
className={`cursor-pointer flex items-center gap-2 text-sky-700 ${className}`}
>
<label className={`cursor-pointer flex items-center gap-2 ${className}`}>
<input
type="checkbox"
checked={state}
@ -22,13 +20,15 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
/>
<FontAwesomeIcon
icon={faSquareCheck}
className="w-5 h-5 text-sky-700 peer-checked:block hidden"
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
/>
<FontAwesomeIcon
icon={faSquare}
className="w-5 h-5 text-sky-700 peer-checked:hidden block"
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
/>
<span className="text-sky-900 rounded select-none">{label}</span>
<span className="text-black dark:text-white rounded select-none">
{label}
</span>
</label>
);
}

13
components/CollectionCard.tsx
View File

@ -42,14 +42,14 @@ export default function CollectionCard({ collection, className }: Props) {
<FontAwesomeIcon
icon={faEllipsis}
id={"expand-dropdown" + collection.id}
className="w-5 h-5 text-gray-500 dark:text-sky-500"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</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-sky-700 dark:text-sky-300 break-words line-clamp-3 w-4/5">
<p className="text-2xl font-bold capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
{collection.name}
</p>
<div className="flex justify-between items-center">
@ -73,11 +73,14 @@ export default function CollectionCard({ collection, className }: Props) {
) : null}
</div>
<div className="text-right w-40">
<div className="text-sky-700 dark:text-sky-400 font-bold text-sm flex justify-end gap-1 items-center">
<FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500 dark:text-sky-300" />
<div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
<FontAwesomeIcon
icon={faLink}
className="w-5 h-5 text-black dark:text-white"
/>
{collection._count && collection._count.links}
</div>
<div className="flex items-center justify-end gap-1 text-gray-600 dark:text-sky-500">
<div className="flex items-center justify-end gap-1 text-gray-600 dark:text-white">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p className="font-bold text-xs">{formattedDate}</p>
</div>

4
components/Dropdown.tsx
View File

@ -31,9 +31,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
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">
<p className="text-sky-900 dark:text-sky-400 select-none">
{e.name}
</p>
<p className="text-black dark:text-white select-none">{e.name}</p>
</div>
</div>
);

6
components/FilterSearchDropdown.tsx
View File

@ -20,9 +20,11 @@ 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 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
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"
>
<p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
<p className="mb-2 text-black dark:text-white text-center font-semibold">
Filter by
</p>
<div className="flex flex-col gap-2">
<Checkbox
label="Name"

14
components/LinkCard.tsx
View File

@ -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-sky-400 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-white inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
@ -156,8 +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-sky-500 dark:text-sky-200 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-700 dark:text-sky-200 font-bold truncate capitalize w-full pr-8">
<p className="text-sm text-black dark:text-white font-bold">
{count + 1}.
</p>
<p className="text-lg text-black dark:text-white font-bold truncate capitalize w-full pr-8">
{link.name || link.description}
</p>
</div>
@ -168,16 +170,16 @@ export default function LinkCard({ link, count, className }: Props) {
className="w-4 h-4 mt-1 drop-shadow"
style={{ color: collection?.color }}
/>
<p className="text-sky-900 dark:text-sky-300 truncate capitalize">
<p className="text-black dark:text-white truncate capitalize">
{collection?.name}
</p>
</div>
</div>
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-sky-500">
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-white">
<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-sky-500">
<div className="flex items-center gap-1 text-gray-500 dark:text-white">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>

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

@ -60,7 +60,7 @@ export default function CollectionInfo({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<div className="flex flex-col sm:flex-row gap-3">
<div className="w-full">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
<p className="text-sm text-black dark:text-white mb-2">
Name
<RequiredBadge />
</p>
@ -76,7 +76,7 @@ export default function CollectionInfo({
/>
<div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32">
<p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">
<p className="text-sm w-full text-black dark:text-white mb-2">
Icon Color
</p>
<div style={{ color: collection.color }}>
@ -86,7 +86,7 @@ export default function CollectionInfo({
/>
</div>
<div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 dark:text-sky-400 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 duration-100"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
}
@ -103,9 +103,7 @@ export default function CollectionInfo({
</div>
<div className="w-full">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Description
</p>
<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"
placeholder="The purpose of this Collection..."

8
components/Modal/Collection/DeleteCollection.tsx
View File

@ -50,7 +50,7 @@ export default function DeleteCollection({
<p className="text-red-500 font-bold text-center">Warning!</p>
<div className="max-h-[20rem] overflow-y-auto">
<div className="text-gray-500 dark:text-sky-500">
<div className="text-gray-500 dark:text-white">
<p>
Please note that deleting the collection will permanently remove
all its contents, including the following:
@ -81,9 +81,9 @@ export default function DeleteCollection({
</div>
<div className="flex flex-col gap-3">
<p className="text-sky-900 dark:text-sky-300 select-none text-center">
<p className="text-black dark:text-white select-none text-center">
To confirm, type &quot;
<span className="font-bold text-sky-700">{collection.name}</span>
<span className="font-bold text-black">{collection.name}</span>
&quot; in the box below:
</p>
@ -98,7 +98,7 @@ export default function DeleteCollection({
</div>
</>
) : (
<p className="text-gray-500 dark:text-sky-500">
<p className="text-gray-500 dark:text-white">
Click the button below to leave the current collection:
</p>
)}

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

@ -117,7 +117,7 @@ export default function TeamManagement({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{permissions === true && (
<>
<p className="text-sm text-sky-700 dark:text-sky-300">Make Public</p>
<p className="text-sm text-black dark:text-white">Make Public</p>
<Checkbox
label="Make this a public collection."
@ -127,7 +127,7 @@ export default function TeamManagement({
}
/>
<p className="text-gray-500 dark:text-sky-500 text-sm">
<p className="text-gray-500 dark:text-white text-sm">
This will let <b>Anyone</b> to view this collection.
</p>
</>
@ -135,7 +135,7 @@ export default function TeamManagement({
{collection.isPublic ? (
<div>
<p className="text-sm text-sky-700 dark:text-sky-300 mb-2">
<p className="text-sm text-black dark:text-white mb-2">
Public Link (Click to copy)
</p>
<div
@ -159,7 +159,7 @@ export default function TeamManagement({
{permissions === true && (
<>
<p className="text-sm text-sky-700 dark:text-sky-300">
<p className="text-sm text-black dark:text-white">
Member Management
</p>
@ -205,7 +205,7 @@ export default function TeamManagement({
{collection?.members[0]?.user && (
<>
<p className="text-center text-gray-500 dark:text-sky-500 text-xs sm:text-sm">
<p className="text-center text-gray-500 dark:text-white text-xs sm:text-sm">
(All Members have <b>Read</b> access to this collection.)
</p>
<div className="flex flex-col gap-3 rounded-md">
@ -220,7 +220,7 @@ export default function TeamManagement({
{permissions === true && (
<FontAwesomeIcon
icon={faClose}
className="absolute right-2 top-2 text-gray-500 dark:text-sky-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
className="absolute right-2 top-2 text-gray-500 dark:text-white h-4 hover:text-red-500 duration-100 cursor-pointer"
title="Remove Member"
onClick={() => {
const updatedMembers = collection.members.filter(
@ -241,23 +241,23 @@ export default function TeamManagement({
className="border-[3px]"
/>
<div>
<p className="text-sm font-bold text-sky-700 dark:text-sky-300">
<p className="text-sm font-bold text-black dark:text-white">
{e.user.name}
</p>
<p className="text-sky-900">@{e.user.username}</p>
<p className="text-black">@{e.user.username}</p>
</div>
</div>
<div className="flex sm:block items-center gap-5 min-w-[10rem]">
<div>
<p
className={`font-bold text-sm text-sky-700 dark:text-sky-300 ${
className={`font-bold text-sm text-black dark:text-white ${
permissions === true ? "" : "mb-2"
}`}
>
Permissions
</p>
{permissions === true && (
<p className="text-xs text-gray-500 dark:text-sky-500 mb-2">
<p className="text-xs text-gray-500 dark:text-white mb-2">
(Click to toggle.)
</p>
)}
@ -267,7 +267,7 @@ export default function TeamManagement({
!e.canCreate &&
!e.canUpdate &&
!e.canDelete ? (
<p className="text-sm text-gray-500 dark:text-sky-500">
<p className="text-sm text-gray-500 dark:text-white">
Has no permissions.
</p>
) : (
@ -307,7 +307,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@ -352,7 +352,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@ -397,7 +397,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@ -427,7 +427,7 @@ export default function TeamManagement({
/>
<div>
<div className="flex items-center gap-1">
<p className="text-sm font-bold text-sky-700 dark:text-sky-400">
<p className="text-sm font-bold text-black dark:text-white">
{collectionOwner.name}
</p>
<FontAwesomeIcon
@ -435,13 +435,13 @@ export default function TeamManagement({
className="w-3 h-3 text-yellow-500"
/>
</div>
<p className="text-sky-900 dark:text-sky-300">
<p className="text-black dark:text-white">
@{collectionOwner.username}
</p>
</div>
</div>
<div className="flex flex-col justify-center min-w-[10rem] text-sky-700 dark:text-sky-400">
<div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white">
<p className={`font-bold text-sm`}>Permissions</p>
<p>Full Access (Owner)</p>
</div>

18
components/Modal/Collection/index.tsx
View File

@ -46,17 +46,19 @@ export default function CollectionModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-700 dark:text-sky-400 text-center">New Collection</p>
<p className="text-xl text-black dark:text-white text-center">
New Collection
</p>
)}
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-400">
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
{method === "UPDATE" && (
<>
{isOwner && (
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
? "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"
}
>
Collection Info
@ -65,8 +67,8 @@ export default function CollectionModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
? "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"
}
>
{isOwner ? "Share & Collaborate" : "View Team"}
@ -74,8 +76,8 @@ export default function CollectionModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
? "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"
}
>
{isOwner ? "Delete Collection" : "Leave Collection"}

14
components/Modal/Link/AddOrEditLink.tsx
View File

@ -126,7 +126,7 @@ export default function AddOrEditLink({
{method === "CREATE" ? (
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2 font-bold">
<p className="text-sm text-black dark:text-white mb-2 font-bold">
Address (URL)
<RequiredBadge />
</p>
@ -142,9 +142,7 @@ export default function AddOrEditLink({
<hr className="dark:border-sky-800" />
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Collection
</p>
<p className="text-sm text-black dark:text-white mb-2">Collection</p>
<CollectionSelection
onChange={setCollection}
// defaultValue={{
@ -163,7 +161,7 @@ export default function AddOrEditLink({
</div>
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Tags</p>
<p className="text-sm text-black dark:text-white mb-2">Tags</p>
<TagSelection
onChange={setTags}
defaultValue={link.tags.map((e) => {
@ -173,7 +171,7 @@ export default function AddOrEditLink({
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Name</p>
<p className="text-sm text-black dark:text-white mb-2">Name</p>
<input
value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })}
@ -184,9 +182,7 @@ export default function AddOrEditLink({
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Description
</p>
<p className="text-sm text-black dark:text-white mb-2">Description</p>
<textarea
value={link.description}
onChange={(e) => setLink({ ...link, description: e.target.value })}

22
components/Modal/Link/LinkDetails.tsx
View File

@ -151,14 +151,14 @@ export default function LinkDetails({ link }: Props) {
/>
)}
<div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
<p className="text-2xl text-sky-700 dark:text-sky-300 capitalize break-words hyphens-auto">
<p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
{link.name}
</p>
<Link
href={link.url}
target="_blank"
rel="noreferrer"
className="text-sm text-gray-500 dark:text-sky-400 break-all hover:underline cursor-pointer w-fit"
className="text-sm text-gray-500 dark:text-white break-all hover:underline cursor-pointer w-fit"
>
{url ? url.host : link.url}
</Link>
@ -176,7 +176,7 @@ export default function LinkDetails({ link }: Props) {
/>
<p
title={collection?.name}
className="text-sky-900 dark:text-sky-500 text-lg truncate max-w-[12rem]"
className="text-black dark:text-white text-lg truncate max-w-[12rem]"
>
{collection?.name}
</p>
@ -185,7 +185,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-sky-700 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 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
>
{e.name}
</p>
@ -194,19 +194,19 @@ export default function LinkDetails({ link }: Props) {
</div>
{link.description && (
<>
<div className="text-gray-500 dark:text-sky-400 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
<div className="text-gray-500 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-sky-400">
<div className="flex items-center gap-1 text-gray-500 dark:text-white">
<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-sky-400"
className="flex items-center gap-1 text-gray-500 dark:text-white"
title={"Created at: " + formattedDate}
>
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@ -220,10 +220,10 @@ export default function LinkDetails({ link }: Props) {
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div>
<p className="text-gray-500 dark:text-sky-400">Screenshot</p>
<p className="text-gray-500 dark:text-white">Screenshot</p>
</div>
<div className="flex text-sky-400 gap-1">
<div className="flex text-black gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.png`}
target="_blank"
@ -254,10 +254,10 @@ export default function LinkDetails({ link }: Props) {
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div>
<p className="text-gray-500 dark:text-sky-400">PDF</p>
<p className="text-gray-500 dark:text-white">PDF</p>
</div>
<div className="flex text-sky-500 gap-1">
<div className="flex text-black gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
target="_blank"

6
components/Modal/Link/index.tsx
View File

@ -33,10 +33,12 @@ export default function LinkModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-700 dark:text-sky-300 text-center">New Link</p>
<p className="text-xl text-black dark:text-white text-center">
New Link
</p>
)}
<Tab.List
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300 ${
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white ${
isOwnerOrMod ? "" : "pb-8"
}`}
>

4
components/Modal/User/ChangePassword.tsx
View File

@ -81,7 +81,7 @@ export default function ChangePassword({
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-sm text-sky-700 dark:text-sky-400">New Password</p>
<p className="text-sm text-black dark:text-white">New Password</p>
<input
value={newPassword}
@ -90,7 +90,7 @@ export default function ChangePassword({
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"
/>
<p className="text-sm text-sky-700 dark:text-sky-400">
<p className="text-sm text-black dark:text-white">
Confirm New Password
</p>

10
components/Modal/User/PrivacySettings.tsx
View File

@ -119,7 +119,7 @@ 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-sky-700 mb-2">Profile Visibility</p>
<p className="text-sm text-black mb-2">Profile Visibility</p>
<Checkbox
label="Make profile private"
@ -134,7 +134,7 @@ export default function PrivacySettings({
{user.isPrivate && (
<div>
<p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
<p className="text-sm text-black my-2">Whitelisted Users</p>
<p className="text-gray-500 text-sm mb-3">
Please provide the Username of the users you wish to grant
visibility to your profile. Separated by comma.
@ -152,7 +152,7 @@ export default function PrivacySettings({
</div>
<div className="mt-5">
<p className="text-sm text-sky-700 mb-2">Import/Export Data</p>
<p className="text-sm text-black mb-2">Import/Export Data</p>
<div className="flex gap-2">
<div
@ -162,7 +162,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-sky-900 duration-100 hover:border-sky-700"
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"
>
Import From
</div>
@ -196,7 +196,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-sky-900 duration-100 hover:border-sky-700">
<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">
Export Data
</div>
</Link>

16
components/Modal/User/ProfileSettings.tsx
View File

@ -102,7 +102,7 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
<div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2 text-center">
<p className="text-sm text-black dark:text-white mb-2 text-center">
Profile Photo
</p>
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
@ -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-sky-900 duration-100 hover:border-sky-700"
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"
>
Browse...
<input
@ -147,7 +147,7 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3">
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
<p className="text-sm text-black dark:text-white mb-2">
Display Name
</p>
<input
@ -159,9 +159,7 @@ export default function ProfileSettings({
</div>
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Username
</p>
<p className="text-sm text-black dark:text-white mb-2">Username</p>
<input
type="text"
value={user.username || ""}
@ -172,7 +170,7 @@ export default function ProfileSettings({
{emailEnabled ? (
<div>
<p className="text-sm text-sky-700 mb-2">Email</p>
<p className="text-sm text-black mb-2">Email</p>
<input
type="text"
value={user.email || ""}
@ -192,10 +190,10 @@ export default function ProfileSettings({
{/* <hr /> TODO: Export functionality
<p className="text-sky-700">Data Settings</p>
<p className="text-black">Data Settings</p>
<div className="w-fit">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
Export Data
</div>
</div> */}

8
components/Modal/User/index.tsx
View File

@ -27,11 +27,11 @@ export default function UserModal({
return (
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300">
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md outline-none"
? "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"
}
>
@ -41,7 +41,7 @@ export default function UserModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md outline-none"
? "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"
}
>
@ -51,7 +51,7 @@ export default function UserModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md outline-none"
? "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"
}
>

4
components/Navbar.tsx
View File

@ -37,7 +37,7 @@ export default function Navbar() {
<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
onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-sky-700 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 rounded-md duration-100 hover:bg-slate-200"
>
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div>
@ -51,7 +51,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-sky-700 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 text-black sm:text-white sm:bg-sky-700 sm:dark:bg-sky-400 sm:hover:bg-sky-600 duration-100 group"
>
<FontAwesomeIcon
icon={faPlus}

4
components/NoLinksFound.tsx
View File

@ -8,11 +8,11 @@ export default function NoLinksFound() {
return (
<div className="border border-solid border-sky-100 dark:border-sky-800 w-full p-10 rounded-2xl">
<p className="text-center text-3xl text-sky-700 dark:text-white">
<p className="text-center text-3xl text-black dark:text-white">
You haven&apos;t created any Links Here
</p>
<br />
<div className="text-center text-sky-900 dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
<div className="text-center text-black dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
<p>Start by creating a</p>{" "}
<div
onClick={() => {

8
components/PublicPage/LinkCard.tsx
View File

@ -58,8 +58,8 @@ 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-sky-500 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-700 font-bold">{link.name}</p>
<p className="text-sm text-black font-bold">{count + 1}.</p>
<p className="text-lg text-black font-bold">{link.name}</p>
</div>
<p className="text-gray-500 text-sm font-medium">
@ -70,7 +70,7 @@ export default function LinkCard({ link, count }: Props) {
{link.tags.map((e, i) => (
<p
key={i}
className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
className="px-2 py-1 bg-sky-200 text-black text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
>
{e.name}
</p>
@ -79,7 +79,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-sky-500 font-bold flex items-center gap-1">
<div className="text-black font-bold flex items-center gap-1">
<p>{url ? url.host : link.url}</p>
</div>
</div>

8
components/RadioButton.tsx
View File

@ -20,13 +20,15 @@ export default function RadioButton({ label, state, onClick }: Props) {
/>
<FontAwesomeIcon
icon={faCircleCheck}
className="w-5 h-5 text-sky-700 dark:text-sky-300 peer-checked:block hidden"
className="w-5 h-5 text-black dark:text-white peer-checked:block hidden"
/>
<FontAwesomeIcon
icon={faCircle}
className="w-5 h-5 text-sky-700 dark:text-sky-300 peer-checked:hidden block"
className="w-5 h-5 text-black dark:text-white peer-checked:hidden block"
/>
<span className="text-sky-900 dark:text-sky-300 rounded select-none">{label}</span>
<span className="text-black dark:text-white rounded select-none">
{label}
</span>
</label>
);
}

5
components/RequiredBadge.tsx
View File

@ -1,6 +1,9 @@
export default function RequiredBadge() {
return (
<span title="Required Field" className="text-sky-700 dark:text-sky-400 cursor-help">
<span
title="Required Field"
className="text-black dark:text-white cursor-help"
>
{" "}
*
</span>

4
components/Search.tsx
View File

@ -24,7 +24,7 @@ export default function Search() {
>
<label
htmlFor="search-box"
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300 group-hover:text-sky-700"
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label>
@ -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-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none dark:bg-sky-950"
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"
/>
</div>
);

24
components/Sidebar.tsx
View File

@ -64,7 +64,7 @@ export default function Sidebar({ className }: { className?: string }) {
>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
/>
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
@ -82,10 +82,10 @@ export default function Sidebar({ className }: { className?: string }) {
>
<FontAwesomeIcon
icon={faLink}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
/>
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
Links
</p>
</Link>
@ -100,10 +100,10 @@ export default function Sidebar({ className }: { className?: string }) {
>
<FontAwesomeIcon
icon={faFolder}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
/>
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
Collections
</p>
</Link>
@ -114,7 +114,7 @@ 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-gray-500 dark:text-sky-500 mt-5"
className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
>
<p>Collections</p>
@ -153,7 +153,7 @@ export default function Sidebar({ className }: { className?: string }) {
style={{ color: e.color }}
/>
<p className="text-sky-700 dark:text-sky-200 truncate w-full pr-7">
<p className="text-black dark:text-white truncate w-full pr-7">
{e.name}
</p>
</div>
@ -164,7 +164,7 @@ export default function Sidebar({ className }: { className?: string }) {
<div
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<p className="text-gray-500 dark:text-sky-500 text-xs font-semibold truncate w-full pr-7">
<p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
You Have No Collections...
</p>
</div>
@ -177,7 +177,7 @@ 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-gray-500 dark:text-sky-500 mt-5"
className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
>
<p>Tags</p>
<FontAwesomeIcon
@ -209,10 +209,10 @@ export default function Sidebar({ className }: { className?: string }) {
>
<FontAwesomeIcon
icon={faHashtag}
className="w-4 h-4 text-sky-500 mt-1"
className="w-4 h-4 text-sky-500 dark:text-sky-300 mt-1"
/>
<p className="text-sky-700 dark:text-sky-300 truncate w-full pr-7">
<p className="text-black dark:text-white truncate w-full pr-7">
{e.name}
</p>
</div>
@ -223,7 +223,7 @@ export default function Sidebar({ className }: { className?: string }) {
<div
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<p className="text-gray-500 dark:text-sky-500 text-xs font-semibold truncate w-full pr-7">
<p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
You Have No Tags...
</p>
</div>

2
components/SortDropdown.tsx
View File

@ -23,7 +23,7 @@ export default function SortDropdown({
}}
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"
>
<p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">
<p className="mb-2 text-black dark:text-white text-center font-semibold">
Sort by
</p>
<div className="flex flex-col gap-2">

2
layouts/CenteredForm.tsx
View File

@ -23,7 +23,7 @@ export default function CenteredForm({ text, children }: Props) {
</p>
) : undefined}
{children}
<p className="text-center text-xs text-gray-500 dark:text-sky-500">
<p className="text-center text-xs text-gray-500 dark:text-white">
© {new Date().getFullYear()} Linkwarden. All rights reserved.
</p>
</div>

2
pages/choose-username.tsx
View File

@ -45,7 +45,7 @@ export default function Subscribe() {
</p>
<div>
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
<p className="text-sm text-black w-fit font-semibold mb-1">
Username
</p>

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

@ -60,7 +60,7 @@ export default function Index() {
style={{ color: activeCollection?.color }}
className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold w-full py-1 break-words hyphens-auto">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold w-full py-1 break-words hyphens-auto">
{activeCollection?.name}
</p>
</div>
@ -116,7 +116,7 @@ export default function Index() {
) : null}
</div>
<div className="text-gray-600 dark:text-sky-400 flex justify-between items-end gap-5">
<div className="text-gray-600 dark:text-white flex justify-between items-end gap-5">
<p>{activeCollection?.description}</p>
<div className="flex items-center gap-2">
<div className="relative">
@ -128,7 +128,7 @@ export default function Index() {
<FontAwesomeIcon
icon={faSort}
id="sort-dropdown"
className="w-5 h-5 text-gray-500 dark:text-sky-400"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>
@ -150,7 +150,7 @@ export default function Index() {
icon={faEllipsis}
id="expand-dropdown"
title="More"
className="w-5 h-5 text-gray-500 dark:text-sky-400"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>
{expandDropdown ? (

8
pages/collections/index.tsx
View File

@ -39,7 +39,7 @@ export default function Collections() {
icon={faFolder}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
All Collections
</p>
</div>
@ -52,7 +52,7 @@ export default function Collections() {
<FontAwesomeIcon
icon={faEllipsis}
id="expand-dropdown"
className="w-5 h-5 text-gray-500 dark:text-sky-500"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>
@ -91,7 +91,7 @@ export default function Collections() {
<FontAwesomeIcon
icon={faSort}
id="sort-dropdown"
className="w-5 h-5 text-gray-500 dark:text-sky-500"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>
@ -120,7 +120,7 @@ export default function Collections() {
});
}}
>
<p className="text-sky-900 dark:text-sky-400 group-hover:opacity-0 duration-100">
<p className="text-black dark:text-white group-hover:opacity-0 duration-100">
New Collection
</p>
<FontAwesomeIcon

2
pages/confirmation.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
export default function EmailConfirmaion() {
return (
<CenteredForm>
<div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-sky-800">
<div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-black">
<p className="text-center text-xl font-bold mb-2 text-black">
Please check your Email
</p>

42
pages/dashboard.tsx
View File

@ -85,7 +85,7 @@ export default function Dashboard() {
icon={faChartSimple}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
Dashboard
</p>
</div>
@ -95,24 +95,28 @@ export default function Dashboard() {
<div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{numberOfLinks}</p>
<p className="text-sky-900 dark:text-sky-500 text-xl">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{numberOfLinks}
</p>
<p className="text-black dark:text-white text-xl">
{numberOfLinks === 1 ? "Link" : "Links"}
</p>
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-700 dark:text-sky-300">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{collections.length}
</p>
<p className="text-sky-900 dark:text-sky-500 text-xl">
<p className="text-black dark:text-white text-xl">
{collections.length === 1 ? "Collection" : "Collections"}
</p>
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{tags.length}</p>
<p className="text-sky-900 dark:text-sky-500 text-xl">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{tags.length}
</p>
<p className="text-black dark:text-white text-xl">
{tags.length === 1 ? "Tag" : "Tags"}
</p>
</div>
@ -131,13 +135,13 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-700 text-xl">Pinned Links</p>
<p className="text-black text-xl">Pinned Links</p>
<div className="text-sky-700 flex items-center gap-2">
<div className="text-black flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
className={`w-4 h-4 text-black ${
linkPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@ -164,10 +168,10 @@ export default function Dashboard() {
</Disclosure>
) : (
<div className="border border-solid border-sky-100 dark:border-sky-800 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
<p className="text-center text-2xl text-sky-700 dark:text-sky-300">
<p className="text-center text-2xl text-black dark:text-white">
No Pinned Links
</p>
<p className="text-center text-sky-900 dark:text-sky-500 text-sm">
<p className="text-center text-black dark:text-white text-sm">
You can Pin Links by clicking on the three dots on each Link and
clicking &quot;Pin to Dashboard.&quot;
</p>
@ -182,13 +186,13 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-700 text-xl">Pinned Collections</p>
<p className="text-black text-xl">Pinned Collections</p>
<div className="text-sky-700 flex items-center gap-2">
<div className="text-black flex items-center gap-2">
{collectionPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
className={`w-4 h-4 text-black ${
collectionPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@ -219,13 +223,13 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-700 text-xl">Pinned Tags</p>
<p className="text-black text-xl">Pinned Tags</p>
<div className="text-sky-700 flex items-center gap-2">
<div className="text-black flex items-center gap-2">
{tagPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
className={`w-4 h-4 text-black ${
tagPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@ -244,7 +248,7 @@ export default function Dashboard() {
<Link
href={`/tags/${e.id}`}
key={i}
className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-black"
>
{e.name}
</Link>

4
pages/forgot.tsx
View File

@ -53,7 +53,7 @@ export default function Forgot() {
</p>
</div>
<div>
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
<p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
<input
type="text"
@ -71,7 +71,7 @@ export default function Forgot() {
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<Link href={"/login"} className="block text-sky-700 font-bold">
<Link href={"/login"} className="block text-black font-bold">
Go back
</Link>
</div>

2
pages/links.tsx
View File

@ -26,7 +26,7 @@ export default function Links() {
icon={faLink}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
All Links
</p>
</div>

11
pages/login.tsx
View File

@ -53,7 +53,7 @@ export default function Login() {
</p>
<div>
<p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Username
{emailEnabled ? "/Email" : undefined}
</p>
@ -68,7 +68,7 @@ export default function Login() {
</div>
<div>
<p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Password
</p>
@ -95,8 +95,11 @@ export default function Login() {
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500 dark:text-sky-300">New here?</p>
<Link href={"/register"} className="block text-sky-700 dark:text-sky-500 font-bold">
<p className="w-fit text-gray-500 dark:text-white">New here?</p>
<Link
href={"/register"}
className="block text-black dark:text-white font-bold"
>
Sign Up
</Link>
</div>

4
pages/public/collections/[id].tsx
View File

@ -45,7 +45,7 @@ export default function PublicCollections() {
<div
className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
>
<p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
<p className="text-5xl text-black font-bold mb-5 capitalize">
{data.name}
</p>
@ -64,7 +64,7 @@ export default function PublicCollections() {
</div>
{/* <p className="text-center font-bold text-gray-500">
List created with <span className="text-sky-700">Linkwarden.</span>
List created with <span className="text-black">Linkwarden.</span>
</p> */}
</div>
) : (

14
pages/register.tsx
View File

@ -103,7 +103,7 @@ export default function Register() {
Enter your details
</p>
<div>
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
<p className="text-sm text-black w-fit font-semibold mb-1">
Display Name
</p>
@ -118,7 +118,7 @@ export default function Register() {
{emailEnabled ? undefined : (
<div>
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
<p className="text-sm text-black w-fit font-semibold mb-1">
Username
</p>
@ -134,9 +134,7 @@ export default function Register() {
{emailEnabled ? (
<div>
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Email
</p>
<p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
<input
type="email"
@ -149,7 +147,7 @@ export default function Register() {
) : undefined}
<div className="w-full">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
<p className="text-sm text-black w-fit font-semibold mb-1">
Password
</p>
@ -163,7 +161,7 @@ export default function Register() {
</div>
<div className="w-full">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
<p className="text-sm text-black w-fit font-semibold mb-1">
Confirm Password
</p>
@ -215,7 +213,7 @@ export default function Register() {
/>
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block text-sky-700 font-bold">
<Link href={"/login"} className="block text-black font-bold">
Login
</Link>
</div>

8
pages/search/[query].tsx
View File

@ -40,9 +40,9 @@ export default function Links() {
<div className="flex gap-2">
<FontAwesomeIcon
icon={faSearch}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
Search Results
</p>
</div>
@ -99,9 +99,9 @@ export default function Links() {
return <LinkCard key={i} link={e} count={i} />;
})
) : (
<p className="text-sky-900">
<p className="text-black dark:text-white">
Nothing found.{" "}
<span className="text-sky-700 font-bold text-xl" title="Shruggie">
<span className="font-bold text-xl" title="Shruggie">
¯\_(ツ)_/¯
</span>
</p>

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

@ -38,7 +38,7 @@ export default function Index() {
icon={faHashtag}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-500 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
{activeTag?.name}
</p>
</div>