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

removed extra classNames

This commit is contained in:
daniel31x13 2023-11-24 08:39:55 -05:00
parent 73954fe78e
commit 75d4fce8ec
42 changed files with 137 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/CollectionCard.tsx
View File

@ -66,7 +66,7 @@ export default function CollectionCard({ collection, className }: Props) {
href={`/collections/${collection.id}`} href={`/collections/${collection.id}`}
className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5" className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
> >
<p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5"> <p className="text-2xl capitalize break-words line-clamp-3 w-4/5">
{collection.name} {collection.name}
</p> </p>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
@ -90,7 +90,7 @@ export default function CollectionCard({ collection, className }: Props) {
) : null} ) : null}
</div> </div>
<div className="text-right w-40"> <div className="text-right w-40">
<div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center"> <div className="font-bold text-sm flex justify-end gap-1 items-center">
{collection.isPublic ? ( {collection.isPublic ? (
<FontAwesomeIcon <FontAwesomeIcon
icon={faGlobe} icon={faGlobe}

2
components/Dropdown.tsx
View File

@ -84,7 +84,7 @@ export default function Dropdown({
const inner = e && ( const inner = e && (
<div className="cursor-pointer rounded-md"> <div className="cursor-pointer rounded-md">
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 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> <p className="select-none">{e.name}</p>
</div> </div>
</div> </div>
); );

4
components/FilterSearchDropdown.tsx
View File

@ -27,9 +27,7 @@ export default function FilterSearchDropdown({
}} }}
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" 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"> <p className="mb-2 text-center font-semibold">Filter by</p>
Filter by
</p>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Checkbox <Checkbox
label="Name" label="Name"

8
components/LinkCard.tsx
View File

@ -188,7 +188,7 @@ export default function LinkCard({ link, count, className }: Props) {
<p className="text-sm text-gray-500 dark:text-gray-300"> <p className="text-sm text-gray-500 dark:text-gray-300">
{count + 1} {count + 1}
</p> </p>
<p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8"> <p className="text-lg truncate capitalize w-full pr-8">
{unescapeString(link.name || link.description)} {unescapeString(link.name || link.description)}
</p> </p>
</div> </div>
@ -204,9 +204,7 @@ export default function LinkCard({ link, count, className }: Props) {
className="w-4 h-4 mt-1 drop-shadow" className="w-4 h-4 mt-1 drop-shadow"
style={{ color: collection?.color }} style={{ color: collection?.color }}
/> />
<p className="text-black dark:text-white truncate capitalize w-full"> <p className="truncate capitalize w-full">{collection?.name}</p>
{collection?.name}
</p>
</Link> </Link>
{/* {link.tags[0] ? ( {/* {link.tags[0] ? (
@ -219,7 +217,7 @@ export default function LinkCard({ link, count, className }: Props) {
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
className="px-2 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]" className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
> >
{e.name} {e.name}
</Link> </Link>

6
components/LinkPreview.tsx
View File

@ -75,7 +75,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
<div className="flex flex-col justify-between w-full"> <div className="flex flex-col justify-between w-full">
<div className="flex items-baseline gap-1"> <div className="flex items-baseline gap-1">
<p className="text-sm text-gray-500 dark:text-gray-300">{1}</p> <p className="text-sm text-gray-500 dark:text-gray-300">{1}</p>
<p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8"> <p className="text-lg truncate capitalize w-full pr-8">
{unescapeString(link.name as string)} {unescapeString(link.name as string)}
</p> </p>
</div> </div>
@ -84,9 +84,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
icon={faFolder} icon={faFolder}
className="w-4 h-4 mt-1 drop-shadow text-sky-400" className="w-4 h-4 mt-1 drop-shadow text-sky-400"
/> />
<p className="text-black dark:text-white truncate capitalize w-full"> <p className="truncate capitalize w-full">Landing Pages ⚡️</p>
Landing Pages ⚡️
</p>
</div> </div>
<A <A
href={link.url as string} href={link.url as string}

12
components/LinkSidebar.tsx
View File

@ -76,9 +76,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
className="w-6 h-6 text-gray-500 dark:text-gray-300" className="w-6 h-6 text-gray-500 dark:text-gray-300"
/> />
<p className="text-black dark:text-white truncate w-full lg:hidden"> <p className="truncate w-full lg:hidden">Edit</p>
Edit
</p>
</div> </div>
) : undefined} ) : undefined}
@ -102,9 +100,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
className="w-6 h-6 text-gray-500 dark:text-gray-300" className="w-6 h-6 text-gray-500 dark:text-gray-300"
/> />
<p className="text-black dark:text-white truncate w-full lg:hidden"> <p className="truncate w-full lg:hidden">Preserved Formats</p>
Preserved Formats
</p>
</div> </div>
{link?.collection.ownerId === userId || {link?.collection.ownerId === userId ||
@ -127,9 +123,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
className="w-6 h-6 text-gray-500 dark:text-gray-300" className="w-6 h-6 text-gray-500 dark:text-gray-300"
/> />
<p className="text-black dark:text-white truncate w-full lg:hidden"> <p className="truncate w-full lg:hidden">Delete</p>
Delete
</p>
</div> </div>
) : undefined} ) : undefined}
</div> </div>

8
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 gap-3 sm:w-[35rem] w-80">
<div className="flex flex-col sm:flex-row gap-3"> <div className="flex flex-col sm:flex-row gap-3">
<div className="w-full"> <div className="w-full">
<p className="text-black dark:text-white mb-2">Name</p> <p className="mb-2">Name</p>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<TextInput <TextInput
value={collection.name} value={collection.name}
@ -71,7 +71,7 @@ export default function CollectionInfo({
/> />
<div className="color-picker flex justify-between"> <div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32"> <div className="flex flex-col justify-between items-center w-32">
<p className="w-full text-black dark:text-white mb-2">Color</p> <p className="w-full mb-2">Color</p>
<div style={{ color: collection.color }}> <div style={{ color: collection.color }}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faFolder} icon={faFolder}
@ -79,7 +79,7 @@ export default function CollectionInfo({
/> />
</div> </div>
<div <div
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" className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
onClick={() => onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" }) setCollection({ ...collection, color: "#0ea5e9" })
} }
@ -96,7 +96,7 @@ export default function CollectionInfo({
</div> </div>
<div className="w-full"> <div className="w-full">
<p className="text-black dark:text-white mb-2">Description</p> <p className="mb-2">Description</p>
<textarea <textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600" className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
placeholder="The purpose of this Collection..." placeholder="The purpose of this Collection..."

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

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

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

@ -102,7 +102,7 @@ export default function TeamManagement({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80"> <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{permissions === true && ( {permissions === true && (
<> <>
<p className="text-black dark:text-white">Make Public</p> <p>Make Public</p>
<Checkbox <Checkbox
label="Make this a public collection." label="Make this a public collection."
@ -120,9 +120,7 @@ export default function TeamManagement({
{collection.isPublic ? ( {collection.isPublic ? (
<div> <div>
<p className="text-black dark:text-white mb-2"> <p className="mb-2">Public Link (Click to copy)</p>
Public Link (Click to copy)
</p>
<div <div
onClick={() => { onClick={() => {
try { try {
@ -146,7 +144,7 @@ export default function TeamManagement({
{permissions === true && ( {permissions === true && (
<> <>
<p className="text-black dark:text-white">Member Management</p> <p>Member Management</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TextInput <TextInput
@ -219,9 +217,7 @@ export default function TeamManagement({
className="border-[3px]" className="border-[3px]"
/> />
<div> <div>
<p className="text-sm font-bold text-black dark:text-white"> <p className="text-sm font-bold">{e.user.name}</p>
{e.user.name}
</p>
<p className="text-gray-500 dark:text-gray-300"> <p className="text-gray-500 dark:text-gray-300">
@{e.user.username} @{e.user.username}
</p> </p>
@ -230,7 +226,7 @@ export default function TeamManagement({
<div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]"> <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
<div> <div>
<p <p
className={`font-bold text-sm text-black dark:text-white ${ className={`font-bold text-sm ${
permissions === true ? "" : "mb-2" permissions === true ? "" : "mb-2"
}`} }`}
> >
@ -287,7 +283,7 @@ export default function TeamManagement({
}} }}
/> />
<span <span
className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${ className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
permissions === true permissions === true
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100" ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
: "" : ""
@ -332,7 +328,7 @@ export default function TeamManagement({
}} }}
/> />
<span <span
className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${ className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
permissions === true permissions === true
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100" ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
: "" : ""
@ -377,7 +373,7 @@ export default function TeamManagement({
}} }}
/> />
<span <span
className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${ className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
permissions === true permissions === true
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100" ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
: "" : ""
@ -407,9 +403,7 @@ export default function TeamManagement({
/> />
<div> <div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<p className="text-sm font-bold text-black dark:text-white"> <p className="text-sm font-bold">{collectionOwner.name}</p>
{collectionOwner.name}
</p>
<FontAwesomeIcon <FontAwesomeIcon
icon={faCrown} icon={faCrown}
className="w-3 h-3 text-yellow-500" className="w-3 h-3 text-yellow-500"
@ -421,7 +415,7 @@ export default function TeamManagement({
</div> </div>
</div> </div>
<div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white"> <div className="flex flex-col justify-center min-w-[10rem]">
<p className={`font-bold text-sm`}>Permissions</p> <p className={`font-bold text-sm`}>Permissions</p>
<p>Full Access (Owner)</p> <p>Full Access (Owner)</p>
</div> </div>

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

@ -43,9 +43,7 @@ export default function ViewTeam({ collection }: Props) {
/> />
<div className="w-full"> <div className="w-full">
<div className="flex items-center gap-1 w-full justify-between"> <div className="flex items-center gap-1 w-full justify-between">
<p className="text-sm font-bold text-black dark:text-white"> <p className="text-sm font-bold">{collectionOwner.name}</p>
{collectionOwner.name}
</p>
<div className="flex text-xs gap-1 items-center"> <div className="flex text-xs gap-1 items-center">
<FontAwesomeIcon <FontAwesomeIcon
icon={faCrown} icon={faCrown}
@ -78,9 +76,7 @@ export default function ViewTeam({ collection }: Props) {
className="border-[3px]" className="border-[3px]"
/> />
<div> <div>
<p className="text-sm font-bold text-black dark:text-white"> <p className="text-sm font-bold">{e.user.name}</p>
{e.user.name}
</p>
<p className="text-gray-500 dark:text-gray-300"> <p className="text-gray-500 dark:text-gray-300">
@{e.user.username} @{e.user.username}
</p> </p>

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

@ -60,7 +60,7 @@ export default function CollectionModal({
</p> </p>
)} )}
{method !== "VIEW_TEAM" && ( {method !== "VIEW_TEAM" && (
<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.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">
{method === "UPDATE" && ( {method === "UPDATE" && (
<> <>
{isOwner && ( {isOwner && (

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

@ -151,7 +151,7 @@ export default function AddOrEditLink({
{method === "CREATE" ? ( {method === "CREATE" ? (
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3"> <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
<div className="sm:col-span-3 col-span-5"> <div className="sm:col-span-3 col-span-5">
<p className="text-black dark:text-white mb-2">Address (URL)</p> <p className="mb-2">Address (URL)</p>
<TextInput <TextInput
value={link.url} value={link.url}
onChange={(e) => setLink({ ...link, url: e.target.value })} onChange={(e) => setLink({ ...link, url: e.target.value })}
@ -159,7 +159,7 @@ export default function AddOrEditLink({
/> />
</div> </div>
<div className="sm:col-span-2 col-span-5"> <div className="sm:col-span-2 col-span-5">
<p className="text-black dark:text-white mb-2">Collection</p> <p className="mb-2">Collection</p>
{link.collection.name ? ( {link.collection.name ? (
<CollectionSelection <CollectionSelection
onChange={setCollection} onChange={setCollection}
@ -189,7 +189,7 @@ export default function AddOrEditLink({
{/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */} {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
<div className="grid sm:grid-cols-2 gap-3"> <div className="grid sm:grid-cols-2 gap-3">
<div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}> <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
<p className="text-black dark:text-white mb-2">Name</p> <p className="mb-2">Name</p>
<TextInput <TextInput
value={link.name} value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })} onChange={(e) => setLink({ ...link, name: e.target.value })}
@ -199,7 +199,7 @@ export default function AddOrEditLink({
{method === "UPDATE" ? ( {method === "UPDATE" ? (
<div> <div>
<p className="text-black dark:text-white mb-2">Collection</p> <p className="mb-2">Collection</p>
{link.collection.name ? ( {link.collection.name ? (
<CollectionSelection <CollectionSelection
onChange={setCollection} onChange={setCollection}
@ -220,7 +220,7 @@ export default function AddOrEditLink({
) : undefined} ) : undefined}
<div> <div>
<p className="text-black dark:text-white mb-2">Tags</p> <p className="mb-2">Tags</p>
<TagSelection <TagSelection
onChange={setTags} onChange={setTags}
defaultValue={link.tags.map((e) => { defaultValue={link.tags.map((e) => {
@ -230,7 +230,7 @@ export default function AddOrEditLink({
</div> </div>
<div className="sm:col-span-2"> <div className="sm:col-span-2">
<p className="text-black dark:text-white mb-2">Description</p> <p className="mb-2">Description</p>
<textarea <textarea
value={unescapeString(link.description) as string} value={unescapeString(link.description) as string}
onChange={(e) => onChange={(e) =>

8
components/Modal/Link/PreservedFormats.tsx
View File

@ -97,10 +97,10 @@ export default function PreservedFormats() {
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" /> <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div> </div>
<p className="text-black dark:text-white">Screenshot</p> <p>Screenshot</p>
</div> </div>
<div className="flex text-black dark:text-white gap-1"> <div className="flex gap-1">
<div <div
onClick={() => handleDownload(ArchivedFormat.screenshot)} onClick={() => handleDownload(ArchivedFormat.screenshot)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
@ -132,10 +132,10 @@ export default function PreservedFormats() {
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" /> <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div> </div>
<p className="text-black dark:text-white">PDF</p> <p>PDF</p>
</div> </div>
<div className="flex text-black dark:text-white gap-1"> <div className="flex gap-1">
<div <div
onClick={() => handleDownload(ArchivedFormat.pdf)} onClick={() => handleDownload(ArchivedFormat.pdf)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"

2
components/Navbar.tsx
View File

@ -93,7 +93,7 @@ export default function Navbar() {
/> />
<p <p
id="profile-dropdown" id="profile-dropdown"
className="text-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1" className="leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
> >
{account.name} {account.name}
</p> </p>

4
components/NoLinksFound.tsx
View File

@ -12,10 +12,10 @@ export default function NoLinksFound({ text }: Props) {
return ( return (
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"> <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl">
{text || "You haven't created any Links Here"} {text || "You haven't created any Links Here"}
</p> </p>
<div className="text-center text-black dark:text-white w-full mt-4"> <div className="text-center w-full mt-4">
<div <div
onClick={() => { onClick={() => {
setModal({ setModal({

2
components/PublicPage/PublicLinkCard.tsx
View File

@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) {
<Link <Link
href={"/public/collections/20?q=" + e.name} href={"/public/collections/20?q=" + e.name}
key={i} key={i}
className="px-2 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]" className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
> >
{e.name} {e.name}
</Link> </Link>

4
components/RadioButton.tsx
View File

@ -26,9 +26,7 @@ export default function RadioButton({ label, state, onClick }: Props) {
icon={faCircle} icon={faCircle}
className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block" className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
/> />
<span className="text-black dark:text-white rounded select-none"> <span className="rounded select-none">{label}</span>
{label}
</span>
</label> </label>
); );
} }

11
components/RequiredBadge.tsx
View File

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

40
components/SettingsSidebar.tsx
View File

@ -53,9 +53,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Account</p>
Account
</p>
</div> </div>
</Link> </Link>
@ -72,9 +70,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Appearance</p>
Appearance
</p>
</div> </div>
</Link> </Link>
@ -91,9 +87,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Archive</p>
Archive
</p>
</div> </div>
</Link> </Link>
@ -108,9 +102,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">API Keys</p>
API Keys
</p>
</div> </div>
</Link> </Link>
@ -127,9 +119,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Password</p>
Password
</p>
</div> </div>
</Link> </Link>
@ -147,9 +137,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Billing</p>
Billing
</p>
</div> </div>
</Link> </Link>
) : undefined} ) : undefined}
@ -172,9 +160,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Help</p>
Help
</p>
</div> </div>
</Link> </Link>
@ -187,9 +173,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">GitHub</p>
GitHub
</p>
</div> </div>
</Link> </Link>
@ -202,9 +186,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Twitter</p>
Twitter
</p>
</div> </div>
</Link> </Link>
@ -217,9 +199,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
className="w-6 h-6 text-sky-500 dark:text-sky-500" className="w-6 h-6 text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">Mastodon</p>
Mastodon
</p>
</div> </div>
</Link> </Link>
</div> </div>

24
components/Sidebar.tsx
View File

@ -67,9 +67,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faChartSimple} icon={faChartSimple}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500" className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full"> <p className="truncate w-full">Dashboard</p>
Dashboard
</p>
</div> </div>
</Link> </Link>
@ -83,9 +81,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faLink} icon={faLink}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500" className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full"> <p className="truncate w-full">All Links</p>
All Links
</p>
</div> </div>
</Link> </Link>
@ -99,9 +95,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faFolder} icon={faFolder}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500" className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full"> <p className="truncate w-full">All Collections</p>
All Collections
</p>
</div> </div>
</Link> </Link>
@ -115,9 +109,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faThumbTack} icon={faThumbTack}
className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500" className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
/> />
<p className="text-black dark:text-white truncate w-full"> <p className="truncate w-full">Pinned Links</p>
Pinned Links
</p>
</div> </div>
</Link> </Link>
</div> </div>
@ -165,9 +157,7 @@ export default function Sidebar({ className }: { className?: string }) {
className="w-6 h-6 drop-shadow" className="w-6 h-6 drop-shadow"
style={{ color: e.color }} style={{ color: e.color }}
/> />
<p className="text-black dark:text-white truncate w-full"> <p className="truncate w-full">{e.name}</p>
{e.name}
</p>
{e.isPublic ? ( {e.isPublic ? (
<FontAwesomeIcon <FontAwesomeIcon
@ -235,9 +225,7 @@ export default function Sidebar({ className }: { className?: string }) {
className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1" className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
/> />
<p className="text-black dark:text-white truncate w-full pr-7"> <p className="truncate w-full pr-7">{e.name}</p>
{e.name}
</p>
<div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs"> <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
{e._count?.links} {e._count?.links}
</div> </div>

4
components/SortDropdown.tsx
View File

@ -23,9 +23,7 @@ export default function SortDropdown({
}} }}
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-52" 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-52"
> >
<p className="mb-2 text-black dark:text-white text-center font-semibold"> <p className="mb-2 text-center font-semibold">Sort by</p>
Sort by
</p>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<RadioButton <RadioButton
label="Date (Newest First)" label="Date (Newest First)"

2
layouts/CenteredForm.tsx
View File

@ -42,7 +42,7 @@ export default function CenteredForm({ text, children }: Props) {
/> />
)} */} )} */}
{text ? ( {text ? (
<p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold text-black dark:text-white px-2 text-center"> <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center">
{text} {text}
</p> </p>
) : undefined} ) : undefined}

6
pages/choose-username.tsx
View File

@ -42,16 +42,14 @@ export default function ChooseUsername() {
<CenteredForm> <CenteredForm>
<form onSubmit={submitUsername}> <form onSubmit={submitUsername}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-3xl text-center text-black dark:text-white font-extralight"> <p className="text-3xl text-center font-extralight">
Choose a Username Choose a Username
</p> </p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" /> <hr className="border-1 border-sky-100 dark:border-neutral-700" />
<div> <div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Username</p>
Username
</p>
<TextInput <TextInput
autoFocus autoFocus

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

@ -69,7 +69,7 @@ export default function Index() {
style={{ color: activeCollection?.color }} style={{ color: activeCollection?.color }}
className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow" className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
/> />
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white w-full py-1 break-words hyphens-auto font-thin"> <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
{activeCollection?.name} {activeCollection?.name}
</p> </p>
</div> </div>
@ -120,7 +120,7 @@ export default function Index() {
) : null} ) : null}
</div> </div>
<div className="text-black dark:text-white flex justify-between items-end gap-5"> <div className="flex justify-between items-end gap-5">
<p>{activeCollection?.description}</p> <p>{activeCollection?.description}</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="relative"> <div className="relative">

16
pages/collections/index.tsx
View File

@ -40,13 +40,11 @@ export default function Collections() {
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow" className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<div> <div>
<p className="text-3xl capitalize text-black dark:text-white font-thin"> <p className="text-3xl capitalize font-thin">
Your Collections Your Collections
</p> </p>
<p className="text-black dark:text-white"> <p>Collections you own</p>
Collections you own
</p>
</div> </div>
</div> </div>
<div className="relative mt-2"> <div className="relative mt-2">
@ -128,9 +126,7 @@ export default function Collections() {
}); });
}} }}
> >
<p className="text-black dark:text-white group-hover:opacity-0 duration-100"> <p className="group-hover:opacity-0 duration-100">New Collection</p>
New Collection
</p>
<FontAwesomeIcon <FontAwesomeIcon
icon={faPlus} icon={faPlus}
className="w-8 h-8 text-sky-500 dark:text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100" className="w-8 h-8 text-sky-500 dark:text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
@ -146,13 +142,11 @@ export default function Collections() {
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow" className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<div> <div>
<p className="text-3xl capitalize text-black dark:text-white font-thin"> <p className="text-3xl capitalize font-thin">
Other Collections Other Collections
</p> </p>
<p className="text-black dark:text-white"> <p>Shared collections you&apos;re a member of</p>
Shared collections you&apos;re a member of
</p>
</div> </div>
</div> </div>

2
pages/confirmation.tsx
View File

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

36
pages/dashboard.tsx
View File

@ -113,13 +113,9 @@ export default function Dashboard() {
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow" className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<div> <div>
<p className="text-3xl capitalize text-black dark:text-white font-thin"> <p className="text-3xl capitalize font-thin">Dashboard</p>
Dashboard
</p>
<p className="text-black dark:text-white"> <p>A brief overview of your data</p>
A brief overview of your data
</p>
</div> </div>
</div> </div>
@ -157,19 +153,14 @@ export default function Dashboard() {
icon={faClockRotateLeft} icon={faClockRotateLeft}
className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow" className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<p className="text-2xl text-black dark:text-white"> <p className="text-2xl">Recently Added Links</p>
Recently Added Links
</p>
</div> </div>
<Link <Link
href="/links" href="/links"
className="text-black dark:text-white flex items-center gap-2 cursor-pointer" className="flex items-center gap-2 cursor-pointer"
> >
View All View All
<FontAwesomeIcon <FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
icon={faChevronRight}
className={`w-4 h-4 text-black dark:text-white`}
/>
</Link> </Link>
</div> </div>
@ -192,7 +183,7 @@ export default function Dashboard() {
style={{ flex: "1 1 auto" }} style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800" className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
> >
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl">
View Your Recently Added Links Here! View Your Recently Added Links Here!
</p> </p>
<p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2"> <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">
@ -200,7 +191,7 @@ export default function Dashboard() {
Collections you have access to. Collections you have access to.
</p> </p>
<div className="text-center text-black dark:text-white w-full mt-4 flex flex-wrap gap-4 justify-center"> <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
<div <div
onClick={() => { onClick={() => {
setModal({ setModal({
@ -245,7 +236,7 @@ export default function Dashboard() {
if (target.id !== "import-dropdown") if (target.id !== "import-dropdown")
setImportDropdown(false); setImportDropdown(false);
}} }}
className={`absolute text-black dark:text-white top-10 left-0 w-52 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`} className={`absolute top-10 left-0 w-52 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"> <div className="cursor-pointer rounded-md">
<label <label
@ -297,17 +288,14 @@ export default function Dashboard() {
icon={faThumbTack} icon={faThumbTack}
className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow" className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<p className="text-2xl text-black dark:text-white">Pinned Links</p> <p className="text-2xl">Pinned Links</p>
</div> </div>
<Link <Link
href="/links/pinned" href="/links/pinned"
className="text-black dark:text-white flex items-center gap-2 cursor-pointer" className="flex items-center gap-2 cursor-pointer"
> >
View All View All
<FontAwesomeIcon <FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
icon={faChevronRight}
className={`w-4 h-4 text-black dark:text-white`}
/>
</Link> </Link>
</div> </div>
@ -332,7 +320,7 @@ export default function Dashboard() {
style={{ flex: "1 1 auto" }} style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800" className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
> >
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl">
Pin Your Favorite Links Here! Pin Your Favorite Links Here!
</p> </p>
<p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2"> <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">

13
pages/forgot.tsx
View File

@ -44,14 +44,14 @@ export default function Forgot() {
<CenteredForm> <CenteredForm>
<form onSubmit={sendConfirmation}> <form onSubmit={sendConfirmation}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-3xl text-center text-black dark:text-white font-extralight"> <p className="text-3xl text-center font-extralight">
Password Recovery Password Recovery
</p> </p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" /> <hr className="border-1 border-sky-100 dark:border-neutral-700" />
<div> <div>
<p className="text-black dark:text-white"> <p>
Enter your email so we can send you a link to recover your Enter your email so we can send you a link to recover your
account. Make sure to change your password in the profile settings account. Make sure to change your password in the profile settings
afterwards. afterwards.
@ -61,9 +61,7 @@ export default function Forgot() {
</p> </p>
</div> </div>
<div> <div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Email</p>
Email
</p>
<TextInput <TextInput
autoFocus autoFocus
@ -82,10 +80,7 @@ export default function Forgot() {
loading={submitLoader} loading={submitLoader}
/> />
<div className="flex items-baseline gap-1 justify-center"> <div className="flex items-baseline gap-1 justify-center">
<Link <Link href={"/login"} className="block font-bold">
href={"/login"}
className="block text-black dark:text-white font-bold"
>
Go back Go back
</Link> </Link>
</div> </div>

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

@ -230,7 +230,7 @@ export default function Index() {
/> />
<p <p
title={link?.collection.name} title={link?.collection.name}
className="text-black dark:text-white text-lg truncate max-w-[12rem]" className="text-lg truncate max-w-[12rem]"
> >
{link?.collection.name} {link?.collection.name}
</p> </p>
@ -239,7 +239,7 @@ export default function Index() {
<Link key={i} href={`/tags/${e.id}`} className="z-10"> <Link key={i} href={`/tags/${e.id}`} className="z-10">
<p <p
title={e.name} title={e.name}
className="px-2 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]" className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
> >
{e.name} {e.name}
</p> </p>
@ -266,10 +266,10 @@ export default function Index() {
</p> </p>
) : ( ) : (
<> <>
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl">
There is no reader view for this webpage There is no reader view for this webpage
</p> </p>
<p className="text-center text-sm text-black dark:text-white"> <p className="text-center text-sm">
{link?.collection.ownerId === userId {link?.collection.ownerId === userId
? "You can update (refetch) the preserved formats by managing them below" ? "You can update (refetch) the preserved formats by managing them below"
: "The collections owners can refetch the preserved formats"} : "The collections owners can refetch the preserved formats"}

8
pages/links/index.tsx
View File

@ -27,13 +27,9 @@ export default function Links() {
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow" className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<div> <div>
<p className="text-3xl capitalize text-black dark:text-white font-thin"> <p className="text-3xl capitalize font-thin">All Links</p>
All Links
</p>
<p className="text-black dark:text-white"> <p>Links from every Collections</p>
Links from every Collections
</p>
</div> </div>
</div> </div>

10
pages/links/pinned.tsx
View File

@ -27,13 +27,9 @@ export default function PinnedLinks() {
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow" className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<div> <div>
<p className="text-3xl capitalize text-black dark:text-white font-thin"> <p className="text-3xl capitalize font-thin">Pinned Links</p>
Pinned Links
</p>
<p className="text-black dark:text-white"> <p>Pinned Links from your Collections</p>
Pinned Links from your Collections
</p>
</div> </div>
</div> </div>
@ -70,7 +66,7 @@ export default function PinnedLinks() {
style={{ flex: "1 1 auto" }} style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800" className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
> >
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl">
Pin Your Favorite Links Here! Pin Your Favorite Links Here!
</p> </p>
<p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2"> <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">

13
pages/login.tsx
View File

@ -64,14 +64,14 @@ export default function Login() {
<CenteredForm text="Sign in to your account"> <CenteredForm text="Sign in to your account">
<form onSubmit={loginUser}> <form onSubmit={loginUser}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<p className="text-3xl text-black dark:text-white text-center font-extralight"> <p className="text-3xl text-center font-extralight">
Enter your credentials Enter your credentials
</p> </p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" /> <hr className="border-1 border-sky-100 dark:border-neutral-700" />
<div> <div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">
Username Username
{emailEnabled ? " or Email" : undefined} {emailEnabled ? " or Email" : undefined}
</p> </p>
@ -86,9 +86,7 @@ export default function Login() {
</div> </div>
<div className="w-full"> <div className="w-full">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Password</p>
Password
</p>
<TextInput <TextInput
type="password" type="password"
@ -130,10 +128,7 @@ export default function Login() {
<p className="w-fit text-gray-500 dark:text-gray-400"> <p className="w-fit text-gray-500 dark:text-gray-400">
New here? New here?
</p> </p>
<Link <Link href={"/register"} className="block font-semibold">
href={"/register"}
className="block text-black dark:text-white font-semibold"
>
Sign Up Sign Up
</Link> </Link>
</div> </div>

8
pages/public/links/[id].tsx
View File

@ -230,7 +230,7 @@ export default function Index() {
/> />
<p <p
title={link?.collection?.name} title={link?.collection?.name}
className="text-black dark:text-white text-lg truncate max-w-[12rem]" className="text-lg truncate max-w-[12rem]"
> >
{link?.collection?.name} {link?.collection?.name}
</p> </p>
@ -239,7 +239,7 @@ export default function Index() {
<Link key={i} href={`/tags/${e.id}`} className="z-10"> <Link key={i} href={`/tags/${e.id}`} className="z-10">
<p <p
title={e.name} title={e.name}
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]" className="px-2 py-1 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
> >
{e.name} {e.name}
</p> </p>
@ -266,10 +266,10 @@ export default function Index() {
</p> </p>
) : ( ) : (
<> <>
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl">
There is no reader view for this webpage There is no reader view for this webpage
</p> </p>
<p className="text-center text-sm text-black dark:text-white"> <p className="text-center text-sm">
{link?.collection?.ownerId === userId {link?.collection?.ownerId === userId
? "You can update (refetch) the preserved formats by managing them below" ? "You can update (refetch) the preserved formats by managing them below"
: "The collections owners can refetch the preserved formats"} : "The collections owners can refetch the preserved formats"}

25
pages/register.tsx
View File

@ -113,16 +113,14 @@ export default function Register() {
) : ( ) : (
<form onSubmit={registerUser}> <form onSubmit={registerUser}>
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"> <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<p className="text-3xl text-black dark:text-white text-center font-extralight"> <p className="text-3xl text-center font-extralight">
Enter your details Enter your details
</p> </p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" /> <hr className="border-1 border-sky-100 dark:border-neutral-700" />
<div> <div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Display Name</p>
Display Name
</p>
<TextInput <TextInput
autoFocus={true} autoFocus={true}
@ -135,9 +133,7 @@ export default function Register() {
{emailEnabled ? undefined : ( {emailEnabled ? undefined : (
<div> <div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Username</p>
Username
</p>
<TextInput <TextInput
placeholder="john" placeholder="john"
@ -152,9 +148,7 @@ export default function Register() {
{emailEnabled ? ( {emailEnabled ? (
<div> <div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Email</p>
Email
</p>
<TextInput <TextInput
type="email" type="email"
@ -167,9 +161,7 @@ export default function Register() {
) : undefined} ) : undefined}
<div className="w-full"> <div className="w-full">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">Password</p>
Password
</p>
<TextInput <TextInput
type="password" type="password"
@ -181,7 +173,7 @@ export default function Register() {
</div> </div>
<div className="w-full"> <div className="w-full">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1"> <p className="text-sm w-fit font-semibold mb-1">
Confirm Password Confirm Password
</p> </p>
@ -238,10 +230,7 @@ export default function Register() {
<p className="w-fit text-gray-500 dark:text-gray-400"> <p className="w-fit text-gray-500 dark:text-gray-400">
Already have an account? Already have an account?
</p> </p>
<Link <Link href={"/login"} className="block font-bold">
href={"/login"}
className="block text-black dark:text-white font-bold"
>
Login Login
</Link> </Link>
</div> </div>

4
pages/search.tsx
View File

@ -47,7 +47,7 @@ export default function Search() {
icon={faSearch} icon={faSearch}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow" className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
/> />
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-thin"> <p className="sm:text-4xl text-3xl capitalize font-thin">
Search Results Search Results
</p> </p>
</div> </div>
@ -106,7 +106,7 @@ export default function Search() {
})} })}
</div> </div>
) : ( ) : (
<p className="text-black dark:text-white"> <p>
Nothing found.{" "} Nothing found.{" "}
<span className="font-bold text-xl" title="Shruggie"> <span className="font-bold text-xl" title="Shruggie">
¯\_(ツ)_/¯ ¯\_(ツ)_/¯

26
pages/settings/account.tsx
View File

@ -159,14 +159,14 @@ export default function Account() {
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto"> <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div> <div>
<p className="text-black dark:text-white mb-2">Display Name</p> <p className="mb-2">Display Name</p>
<TextInput <TextInput
value={user.name || ""} value={user.name || ""}
onChange={(e) => setUser({ ...user, name: e.target.value })} onChange={(e) => setUser({ ...user, name: e.target.value })}
/> />
</div> </div>
<div> <div>
<p className="text-black dark:text-white mb-2">Username</p> <p className="mb-2">Username</p>
<TextInput <TextInput
value={user.username || ""} value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })} onChange={(e) => setUser({ ...user, username: e.target.value })}
@ -175,7 +175,7 @@ export default function Account() {
{emailEnabled ? ( {emailEnabled ? (
<div> <div>
<p className="text-black dark:text-white mb-2">Email</p> <p className="mb-2">Email</p>
{user.email !== account.email && {user.email !== account.email &&
process.env.NEXT_PUBLIC_STRIPE === "true" ? ( process.env.NEXT_PUBLIC_STRIPE === "true" ? (
<p className="text-gray-500 dark:text-gray-400 mb-2 text-sm"> <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
@ -191,9 +191,7 @@ export default function Account() {
</div> </div>
<div className="sm:row-span-2 sm:justify-self-center mx-auto my-3"> <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
<p className="text-black dark:text-white mb-2 text-center"> <p className="mb-2 text-center">Profile Photo</p>
Profile Photo
</p>
<div className="w-28 h-28 flex items-center justify-center rounded-full relative"> <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
<ProfilePhoto <ProfilePhoto
priority={true} priority={true}
@ -232,7 +230,7 @@ export default function Account() {
<div> <div>
<div className="flex items-center gap-2 w-full rounded-md h-8"> <div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin"> <p className="truncate w-full pr-7 text-3xl font-thin">
Import & Export Import & Export
</p> </p>
</div> </div>
@ -241,9 +239,7 @@ export default function Account() {
<div className="flex gap-3 flex-col"> <div className="flex gap-3 flex-col">
<div> <div>
<p className="text-black dark:text-white mb-2"> <p className="mb-2">Import your data from other platforms.</p>
Import your data from other platforms.
</p>
<div <div
onClick={() => setImportDropdown(true)} onClick={() => setImportDropdown(true)}
className="w-fit relative" className="w-fit relative"
@ -306,9 +302,7 @@ export default function Account() {
</div> </div>
<div> <div>
<p className="text-black dark:text-white mb-2"> <p className="mb-2">Download your data instantly.</p>
Download your data instantly.
</p>
<Link className="w-fit" href="/api/v1/migration"> <Link className="w-fit" href="/api/v1/migration">
<div className="border w-fit 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"> <div className="border w-fit 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 Export Data
@ -320,7 +314,7 @@ export default function Account() {
<div> <div>
<div className="flex items-center gap-2 w-full rounded-md h-8"> <div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin"> <p className="truncate w-full pr-7 text-3xl font-thin">
Profile Visibility Profile Visibility
</p> </p>
</div> </div>
@ -339,9 +333,7 @@ export default function Account() {
{user.isPrivate && ( {user.isPrivate && (
<div className="pl-5"> <div className="pl-5">
<p className="text-black dark:text-white mt-2"> <p className="mt-2">Whitelisted Users</p>
Whitelisted Users
</p>
<p className="text-gray-500 dark:text-gray-300 text-sm mb-3"> <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
Please provide the Username of the users you wish to grant Please provide the Username of the users you wish to grant
visibility to your profile. Separated by comma. visibility to your profile. Separated by comma.

4
pages/settings/appearance.tsx
View File

@ -105,9 +105,7 @@ export default function Appearance() {
<div> <div>
<div className="flex items-center gap-2 w-full rounded-md h-8"> <div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin"> <p className="truncate w-full pr-7 text-3xl font-thin">Link Card</p>
Link Card
</p>
</div> </div>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<Checkbox <Checkbox

4
pages/settings/billing.tsx
View File

@ -16,7 +16,7 @@ export default function Billing() {
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<div className="w-full mx-auto flex flex-col gap-3 justify-between"> <div className="w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-md text-black dark:text-white"> <p className="text-md">
To manage/cancel your subscription, visit the{" "} To manage/cancel your subscription, visit the{" "}
<a <a
href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL} href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
@ -27,7 +27,7 @@ export default function Billing() {
. .
</p> </p>
<p className="text-md text-black dark:text-white"> <p className="text-md">
If you still need help or encountered any issues, feel free to reach If you still need help or encountered any issues, feel free to reach
out to us at:{" "} out to us at:{" "}
<a <a

6
pages/settings/delete.tsx
View File

@ -80,9 +80,7 @@ export default function Password() {
{process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? ( {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
<div> <div>
<p className="mb-2 text-black dark:text-white"> <p className="mb-2">Confirm Your Password</p>
Confirm Your Password
</p>
<TextInput <TextInput
value={password} value={password}
@ -120,7 +118,7 @@ export default function Password() {
</select> </select>
</label> </label>
<div> <div>
<p className="text-sm mb-2 text-black dark:text-white"> <p className="text-sm mb-2">
More information (the more details, the more helpful it&apos;d More information (the more details, the more helpful it&apos;d
be) be)
</p> </p>

4
pages/settings/password.tsx
View File

@ -54,7 +54,7 @@ export default function Password() {
should be at least 8 characters. should be at least 8 characters.
</p> </p>
<div className="w-full flex flex-col gap-2 justify-between"> <div className="w-full flex flex-col gap-2 justify-between">
<p className="text-black dark:text-white">New Password</p> <p>New Password</p>
<TextInput <TextInput
value={newPassword} value={newPassword}
@ -63,7 +63,7 @@ export default function Password() {
type="password" type="password"
/> />
<p className="text-black dark:text-white">Confirm New Password</p> <p>Confirm New Password</p>
<TextInput <TextInput
value={newPassword2} value={newPassword2}

4
pages/subscribe.tsx
View File

@ -50,7 +50,7 @@ export default function Subscribe() {
<div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative"> <div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
<button <button
onClick={() => setPlan(Plan.monthly)} onClick={() => setPlan(Plan.monthly)}
className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${ className={`w-full duration-100 text-sm rounded-lg p-1 ${
plan === Plan.monthly plan === Plan.monthly
? "text-white bg-sky-700 dark:bg-sky-700" ? "text-white bg-sky-700 dark:bg-sky-700"
: "hover:opacity-80" : "hover:opacity-80"
@ -61,7 +61,7 @@ export default function Subscribe() {
<button <button
onClick={() => setPlan(Plan.yearly)} onClick={() => setPlan(Plan.yearly)}
className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${ className={`w-full duration-100 text-sm rounded-lg p-1 ${
plan === Plan.yearly plan === Plan.yearly
? "text-white bg-sky-700 dark:bg-sky-700" ? "text-white bg-sky-700 dark:bg-sky-700"
: "hover:opacity-80" : "hover:opacity-80"

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

@ -115,7 +115,7 @@ export default function Index() {
<input <input
type="text" type="text"
autoFocus autoFocus
className="sm:text-4xl text-3xl capitalize text-black dark:text-white bg-transparent h-10 w-3/4 outline-none border-b border-b-sky-100 dark:border-b-neutral-700" className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-sky-100 dark:border-b-neutral-700"
value={newTagName} value={newTagName}
onChange={(e) => setNewTagName(e.target.value)} onChange={(e) => setNewTagName(e.target.value)}
/> />
@ -145,7 +145,7 @@ export default function Index() {
</> </>
) : ( ) : (
<> <>
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white"> <p className="sm:text-4xl text-3xl capitalize">
{activeTag?.name} {activeTag?.name}
</p> </p>
<div className="relative"> <div className="relative">