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

improved contrast ratio

This commit is contained in:
Daniel 2023-07-22 17:49:09 -04:00
parent 43364b571a
commit 8eff4d23a7
34 changed files with 138 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Checkbox.tsx
View File

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

10
components/CollectionCard.tsx
View File

@ -49,11 +49,11 @@ 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 font-bold capitalize text-sky-500 break-words line-clamp-3 w-4/5"> <p className="text-2xl font-bold capitalize text-sky-700 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">
<div className="text-sky-400 flex items-center w-full"> <div className="flex items-center w-full">
{collection.members {collection.members
.sort((a, b) => (a.userId as number) - (b.userId as number)) .sort((a, b) => (a.userId as number) - (b.userId as number))
.map((e, i) => { .map((e, i) => {
@ -67,14 +67,14 @@ export default function CollectionCard({ collection, className }: Props) {
}) })
.slice(0, 4)} .slice(0, 4)}
{collection.members.length - 4 > 0 ? ( {collection.members.length - 4 > 0 ? (
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3"> <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-700 border-sky-100 -mr-3">
+{collection.members.length - 4} +{collection.members.length - 4}
</div> </div>
) : null} ) : null}
</div> </div>
<div className="text-right w-40"> <div className="text-right w-40">
<div className="text-sky-500 font-bold text-sm flex justify-end gap-1 items-center"> <div className="text-sky-700 font-bold text-sm flex justify-end gap-1 items-center">
<FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-600" /> <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500" />
{collection._count && collection._count.links} {collection._count && collection._count.links}
</div> </div>
<div className="flex items-center justify-end gap-1 text-gray-600"> <div className="flex items-center justify-end gap-1 text-gray-600">

4
components/LinkCard.tsx
View File

@ -142,8 +142,8 @@ export default function LinkCard({ link, count, className }: Props) {
<div className="flex justify-between gap-5 w-full h-full z-0"> <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 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-sky-400 font-bold">{count + 1}.</p> <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-500 font-bold truncate capitalize w-full pr-8"> <p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
{link.name} {link.name}
</p> </p>
</div> </div>

12
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-sm text-sky-500 mb-2"> <p className="text-sm text-sky-700 mb-2">
Name Name
<RequiredBadge /> <RequiredBadge />
</p> </p>
@ -72,11 +72,11 @@ export default function CollectionInfo({
} }
type="text" type="text"
placeholder="e.g. Example Collection" placeholder="e.g. Example Collection"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
<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="text-sm w-full text-sky-500 mb-2">Icon Color</p> <p className="text-sm w-full text-sky-700 mb-2">Icon Color</p>
<div style={{ color: collection.color }}> <div style={{ color: collection.color }}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faFolder} icon={faFolder}
@ -84,7 +84,7 @@ export default function CollectionInfo({
/> />
</div> </div>
<div <div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-500 hover:bg-slate-200 duration-100" className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 hover:bg-slate-200 duration-100"
onClick={() => onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" }) setCollection({ ...collection, color: "#0ea5e9" })
} }
@ -101,9 +101,9 @@ export default function CollectionInfo({
</div> </div>
<div className="w-full"> <div className="w-full">
<p className="text-sm text-sky-500 mb-2">Description</p> <p className="text-sm text-sky-700 mb-2">Description</p>
<textarea <textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500" className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-700"
placeholder="The purpose of this Collection..." placeholder="The purpose of this Collection..."
value={collection.description} value={collection.description}
onChange={(e) => onChange={(e) =>

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

@ -83,7 +83,7 @@ export default function DeleteCollection({
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<p className="text-sky-900 select-none text-center"> <p className="text-sky-900 select-none text-center">
To confirm, type &quot; To confirm, type &quot;
<span className="font-bold text-sky-500">{collection.name}</span> <span className="font-bold text-sky-700">{collection.name}</span>
&quot; in the box below: &quot; in the box below:
</p> </p>
@ -93,7 +93,7 @@ export default function DeleteCollection({
onChange={(e) => setInputField(e.target.value)} onChange={(e) => setInputField(e.target.value)}
type="text" type="text"
placeholder={`Type "${collection.name}" Here.`} placeholder={`Type "${collection.name}" Here.`}
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
</> </>

24
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"> <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{permissions === true && ( {permissions === true && (
<> <>
<p className="text-sm text-sky-500">Make Public</p> <p className="text-sm text-sky-700">Make Public</p>
<Checkbox <Checkbox
label="Make this a public collection." label="Make this a public collection."
@ -135,7 +135,7 @@ export default function TeamManagement({
{collection.isPublic ? ( {collection.isPublic ? (
<div> <div>
<p className="text-sm text-sky-500 mb-2"> <p className="text-sm text-sky-700 mb-2">
Public Link (Click to copy) Public Link (Click to copy)
</p> </p>
<div <div
@ -148,7 +148,7 @@ export default function TeamManagement({
console.log(err); console.log(err);
} }
}} }}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-500 duration-100 cursor-text" className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
> >
{publicCollectionURL} {publicCollectionURL}
</div> </div>
@ -159,7 +159,7 @@ export default function TeamManagement({
{permissions === true && ( {permissions === true && (
<> <>
<p className="text-sm text-sky-500">Member Management</p> <p className="text-sm text-sky-700">Member Management</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
@ -181,7 +181,7 @@ export default function TeamManagement({
} }
type="text" type="text"
placeholder="Username (without the '@')" placeholder="Username (without the '@')"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
<div <div
@ -193,7 +193,7 @@ export default function TeamManagement({
setMemberState setMemberState
) )
} }
className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer" className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
> >
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" /> <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
</div> </div>
@ -239,7 +239,7 @@ export default function TeamManagement({
className="border-[3px]" className="border-[3px]"
/> />
<div> <div>
<p className="text-sm font-bold text-sky-500"> <p className="text-sm font-bold text-sky-700">
{e.user.name} {e.user.name}
</p> </p>
<p className="text-sky-900">@{e.user.username}</p> <p className="text-sky-900">@{e.user.username}</p>
@ -248,7 +248,7 @@ export default function TeamManagement({
<div className="flex sm:block items-center gap-5 min-w-[10rem]"> <div className="flex sm:block items-center gap-5 min-w-[10rem]">
<div> <div>
<p <p
className={`font-bold text-sm text-sky-500 ${ className={`font-bold text-sm text-sky-700 ${
permissions === true ? "" : "mb-2" permissions === true ? "" : "mb-2"
}`} }`}
> >
@ -305,7 +305,7 @@ export default function TeamManagement({
}} }}
/> />
<span <span
className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${ className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
permissions === true permissions === true
? "hover:bg-slate-200 duration-75" ? "hover:bg-slate-200 duration-75"
: "" : ""
@ -350,7 +350,7 @@ export default function TeamManagement({
}} }}
/> />
<span <span
className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${ className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
permissions === true permissions === true
? "hover:bg-slate-200 duration-75" ? "hover:bg-slate-200 duration-75"
: "" : ""
@ -395,7 +395,7 @@ export default function TeamManagement({
}} }}
/> />
<span <span
className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${ className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
permissions === true permissions === true
? "hover:bg-slate-200 duration-75" ? "hover:bg-slate-200 duration-75"
: "" : ""
@ -425,7 +425,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-sky-500"> <p className="text-sm font-bold text-sky-700">
{collectionOwner.name} {collectionOwner.name}
</p> </p>
<FontAwesomeIcon <FontAwesomeIcon

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

@ -46,9 +46,9 @@ export default function CollectionModal({
<div className={className}> <div className={className}>
<Tab.Group defaultIndex={defaultIndex}> <Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && ( {method === "CREATE" && (
<p className="text-xl text-sky-500 text-center">New Collection</p> <p className="text-xl text-sky-700 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-600"> <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">
{method === "UPDATE" && ( {method === "UPDATE" && (
<> <>
{isOwner && ( {isOwner && (

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

@ -125,7 +125,7 @@ export default function AddOrEditLink({
<div className="grid sm:grid-cols-2 gap-3"> <div className="grid sm:grid-cols-2 gap-3">
<div> <div>
<p className="text-sm text-sky-500 mb-2"> <p className="text-sm text-sky-700 mb-2">
Name Name
<RequiredBadge /> <RequiredBadge />
</p> </p>
@ -134,13 +134,13 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, name: e.target.value })} onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text" type="text"
placeholder="e.g. Example Link" placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
{method === "CREATE" ? ( {method === "CREATE" ? (
<div> <div>
<p className="text-sm text-sky-500 mb-2"> <p className="text-sm text-sky-700 mb-2">
URL URL
<RequiredBadge /> <RequiredBadge />
</p> </p>
@ -149,13 +149,13 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, url: e.target.value })} onChange={(e) => setLink({ ...link, url: e.target.value })}
type="text" type="text"
placeholder="e.g. http://example.com/" placeholder="e.g. http://example.com/"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
) : null} ) : null}
<div> <div>
<p className="text-sm text-sky-500 mb-2">Collection</p> <p className="text-sm text-sky-700 mb-2">Collection</p>
<CollectionSelection <CollectionSelection
onChange={setCollection} onChange={setCollection}
// defaultValue={{ // defaultValue={{
@ -174,7 +174,7 @@ export default function AddOrEditLink({
</div> </div>
<div className={method === "UPDATE" ? "sm:col-span-2" : ""}> <div className={method === "UPDATE" ? "sm:col-span-2" : ""}>
<p className="text-sm text-sky-500 mb-2">Tags</p> <p className="text-sm text-sky-700 mb-2">Tags</p>
<TagSelection <TagSelection
onChange={setTags} onChange={setTags}
defaultValue={link.tags.map((e) => { defaultValue={link.tags.map((e) => {
@ -183,7 +183,7 @@ export default function AddOrEditLink({
/> />
</div> </div>
<div className="sm:col-span-2"> <div className="sm:col-span-2">
<p className="text-sm text-sky-500 mb-2">Description</p> <p className="text-sm text-sky-700 mb-2">Description</p>
<textarea <textarea
value={link.description} value={link.description}
onChange={(e) => setLink({ ...link, description: e.target.value })} onChange={(e) => setLink({ ...link, description: e.target.value })}
@ -192,7 +192,7 @@ export default function AddOrEditLink({
? "Will be auto generated if nothing is provided." ? "Will be auto generated if nothing is provided."
: "" : ""
} }
className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
</div> </div>

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

@ -151,7 +151,7 @@ export default function LinkDetails({ link }: Props) {
/> />
)} )}
<div className="flex flex-col gap- justify-end drop-shadow"> <div className="flex flex-col gap- justify-end drop-shadow">
<p className="text-2xl text-sky-500 capitalize break-words hyphens-auto"> <p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
{link.name} {link.name}
</p> </p>
<Link <Link
@ -223,12 +223,12 @@ export default function LinkDetails({ link }: Props) {
<p className="text-gray-500">Screenshot</p> <p className="text-gray-500">Screenshot</p>
</div> </div>
<div className="flex text-sky-600 gap-1"> <div className="flex text-sky-500 gap-1">
<Link <Link
href={`/api/archives/${link.collectionId}/${link.id}.png`} href={`/api/archives/${link.collectionId}/${link.id}.png`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md" className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
@ -238,7 +238,7 @@ export default function LinkDetails({ link }: Props) {
<div <div
onClick={() => handleDownload("png")} onClick={() => handleDownload("png")}
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md" className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faCloudArrowDown} icon={faCloudArrowDown}
@ -257,12 +257,12 @@ export default function LinkDetails({ link }: Props) {
<p className="text-gray-500">PDF</p> <p className="text-gray-500">PDF</p>
</div> </div>
<div className="flex text-sky-600 gap-1"> <div className="flex text-sky-500 gap-1">
<Link <Link
href={`/api/archives/${link.collectionId}/${link.id}.pdf`} href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md" className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
@ -272,7 +272,7 @@ export default function LinkDetails({ link }: Props) {
<div <div
onClick={() => handleDownload("pdf")} onClick={() => handleDownload("pdf")}
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md" className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faCloudArrowDown} icon={faCloudArrowDown}

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

@ -33,10 +33,10 @@ export default function LinkModal({
<div className={className}> <div className={className}>
<Tab.Group defaultIndex={defaultIndex}> <Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && ( {method === "CREATE" && (
<p className="text-xl text-sky-500 text-center">New Link</p> <p className="text-xl text-sky-700 text-center">New Link</p>
)} )}
<Tab.List <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-600 ${ 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 ${
isOwnerOrMod ? "" : "pb-8" isOwnerOrMod ? "" : "pb-8"
}`} }`}
> >

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

@ -81,23 +81,23 @@ export default function ChangePassword({
return ( return (
<div className="mx-auto sm:w-[35rem] w-80"> <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"> <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-sm text-sky-500">New Password</p> <p className="text-sm text-sky-700">New Password</p>
<input <input
value={newPassword} value={newPassword}
onChange={(e) => setNewPassword1(e.target.value)} onChange={(e) => setNewPassword1(e.target.value)}
type="password" type="password"
placeholder="••••••••••••••" placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
<p className="text-sm text-sky-500">Confirm New Password</p> <p className="text-sm text-sky-700">Confirm New Password</p>
<input <input
value={newPassword2} value={newPassword2}
onChange={(e) => setNewPassword2(e.target.value)} onChange={(e) => setNewPassword2(e.target.value)}
type="password" type="password"
placeholder="••••••••••••••" placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
<SubmitButton <SubmitButton

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

@ -83,7 +83,7 @@ export default function PrivacySettings({
return ( return (
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80"> <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
<div> <div>
<p className="text-sm text-sky-500 mb-2">Profile Visibility</p> <p className="text-sm text-sky-700 mb-2">Profile Visibility</p>
<Checkbox <Checkbox
label="Make profile private" label="Make profile private"
@ -98,13 +98,13 @@ export default function PrivacySettings({
{user.isPrivate && ( {user.isPrivate && (
<div> <div>
<p className="text-sm text-sky-500 my-2">Whitelisted Users</p> <p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
<p className="text-gray-500 text-sm mb-3"> <p className="text-gray-500 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.
</p> </p>
<textarea <textarea
className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500" className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
placeholder="Your profile is hidden from everyone right now..." placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox} value={whitelistedUsersTextbox}
onChange={(e) => { onChange={(e) => {

20
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="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="grid sm:grid-cols-2 gap-3 auto-rows-auto">
<div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3"> <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
<p className="text-sm text-sky-500 mb-2 text-center">Profile Photo</p> <p className="text-sm text-sky-700 mb-2 text-center">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
src={user.profilePic} src={user.profilePic}
@ -127,7 +127,7 @@ export default function ProfileSettings({
<label <label
htmlFor="upload-photo" htmlFor="upload-photo"
title="PNG or JPG (Max: 3MB)" 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-500" 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"
> >
Browse... Browse...
<input <input
@ -145,33 +145,33 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div> <div>
<p className="text-sm text-sky-500 mb-2">Display Name</p> <p className="text-sm text-sky-700 mb-2">Display Name</p>
<input <input
type="text" type="text"
value={user.name} value={user.name}
onChange={(e) => setUser({ ...user, name: e.target.value })} onChange={(e) => setUser({ ...user, name: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
<div> <div>
<p className="text-sm text-sky-500 mb-2">Username</p> <p className="text-sm text-sky-700 mb-2">Username</p>
<input <input
type="text" type="text"
value={user.username || ""} value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })} onChange={(e) => setUser({ ...user, username: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
{emailEnabled ? ( {emailEnabled ? (
<div> <div>
<p className="text-sm text-sky-500 mb-2">Email</p> <p className="text-sm text-sky-700 mb-2">Email</p>
<input <input
type="text" type="text"
value={user.email || ""} value={user.email || ""}
onChange={(e) => setUser({ ...user, email: e.target.value })} onChange={(e) => setUser({ ...user, email: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
) : undefined} ) : undefined}
@ -186,10 +186,10 @@ export default function ProfileSettings({
{/* <hr /> TODO: Export functionality {/* <hr /> TODO: Export functionality
<p className="text-sky-600">Data Settings</p> <p className="text-sky-700">Data Settings</p>
<div className="w-fit"> <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-500"> <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">
Export Data Export Data
</div> </div>
</div> */} </div> */}

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

@ -27,7 +27,7 @@ export default function UserModal({
return ( return (
<div className={className}> <div className={className}>
<Tab.Group defaultIndex={defaultIndex}> <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-600"> <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">
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
selected selected

6
components/Navbar.tsx
View File

@ -36,7 +36,7 @@ export default function Navbar() {
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16"> <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
<div <div
onClick={toggleSidebar} onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 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-sky-700 rounded-md duration-100 hover:bg-slate-200"
> >
<FontAwesomeIcon icon={faBars} className="w-5 h-5" /> <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> </div>
@ -50,7 +50,7 @@ export default function Navbar() {
method: "CREATE", 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-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 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-sky-700 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faPlus} icon={faPlus}
@ -73,7 +73,7 @@ export default function Navbar() {
/> />
<p <p
id="profile-dropdown" id="profile-dropdown"
className="font-bold text-sky-500 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1" className="font-bold text-sky-700 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

@ -8,7 +8,7 @@ export default function NoLinksFound() {
return ( return (
<div className="border border-solid border-sky-100 w-full p-10 rounded-2xl"> <div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
<p className="text-center text-3xl text-sky-500"> <p className="text-center text-3xl text-sky-700">
You haven&apos;t created any Links Here You haven&apos;t created any Links Here
</p> </p>
<br /> <br />
@ -22,7 +22,7 @@ export default function NoLinksFound() {
method: "CREATE", method: "CREATE",
}); });
}} }}
className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-500 hover:bg-sky-400 duration-100 group" className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faPlus} icon={faPlus}

6
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 justify-between items-center gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<div className="flex items-baseline gap-1"> <div className="flex items-baseline gap-1">
<p className="text-sm text-sky-400 font-bold">{count + 1}.</p> <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-500 font-bold">{link.name}</p> <p className="text-lg text-sky-700 font-bold">{link.name}</p>
</div> </div>
<p className="text-gray-500 text-sm font-medium"> <p className="text-gray-500 text-sm font-medium">
@ -79,7 +79,7 @@ export default function LinkCard({ link, count }: Props) {
</div> </div>
<div className="flex gap-2 items-center flex-wrap mt-2"> <div className="flex gap-2 items-center flex-wrap mt-2">
<p className="text-gray-500">{formattedDate}</p> <p className="text-gray-500">{formattedDate}</p>
<div className="text-sky-400 font-bold flex items-center gap-1"> <div className="text-sky-500 font-bold flex items-center gap-1">
<p>{url ? url.host : link.url}</p> <p>{url ? url.host : link.url}</p>
</div> </div>
</div> </div>

4
components/RadioButton.tsx
View File

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

2
components/RequiredBadge.tsx
View File

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

4
components/Search.tsx
View File

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

10
components/Sidebar.tsx
View File

@ -66,7 +66,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faChartSimple} icon={faChartSimple}
className={`w-8 h-8 drop-shadow text-sky-500`} className={`w-8 h-8 drop-shadow text-sky-500`}
/> />
<p className="text-sky-500 text-xs font-semibold">Dashboard</p> <p className="text-sky-700 text-xs font-semibold">Dashboard</p>
</Link> </Link>
<Link <Link
@ -81,7 +81,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faLink} icon={faLink}
className={`w-8 h-8 drop-shadow text-sky-500`} className={`w-8 h-8 drop-shadow text-sky-500`}
/> />
<p className="text-sky-500 text-xs font-semibold"> <p className="text-sky-700 text-xs font-semibold">
<span className="hidden xl:inline-block">All</span> Links <span className="hidden xl:inline-block">All</span> Links
</p> </p>
</Link> </Link>
@ -96,7 +96,7 @@ export default function Sidebar({ className }: { className?: string }) {
icon={faFolder} icon={faFolder}
className={`w-8 h-8 drop-shadow text-sky-500`} className={`w-8 h-8 drop-shadow text-sky-500`}
/> />
<p className="text-sky-500 text-xs font-semibold"> <p className="text-sky-700 text-xs font-semibold">
<span className="hidden xl:inline-block">All</span> Collections <span className="hidden xl:inline-block">All</span> Collections
</p> </p>
</Link> </Link>
@ -146,7 +146,7 @@ export default function Sidebar({ className }: { className?: string }) {
style={{ color: e.color }} style={{ color: e.color }}
/> />
<p className="text-sky-500 truncate w-full pr-7"> <p className="text-sky-700 truncate w-full pr-7">
{e.name} {e.name}
</p> </p>
</div> </div>
@ -205,7 +205,7 @@ export default function Sidebar({ className }: { className?: string }) {
className="w-4 h-4 text-sky-500 mt-1" className="w-4 h-4 text-sky-500 mt-1"
/> />
<p className="text-sky-500 truncate w-full pr-7"> <p className="text-sky-700 truncate w-full pr-7">
{e.name} {e.name}
</p> </p>
</div> </div>

4
components/SubmitButton.tsx
View File

@ -20,8 +20,8 @@ export default function SubmitButton({
<div <div
className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${ className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
loading loading
? "bg-sky-400 cursor-auto" ? "bg-sky-600 cursor-auto"
: "bg-sky-500 hover:bg-sky-400 cursor-pointer" : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
} ${className}`} } ${className}`}
onClick={() => { onClick={() => {
if (!loading) onClick(); if (!loading) onClick();

6
pages/choose-username.tsx
View File

@ -50,12 +50,12 @@ export default function Subscribe() {
className="h-12 w-fit mx-auto mt-10" className="h-12 w-fit mx-auto mt-10"
/> />
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold"> <p className="text-xl text-sky-700 w-fit font-bold">
Choose a Username (Last step) Choose a Username (Last step)
</p> </p>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Username Username
</p> </p>
@ -64,7 +64,7 @@ export default function Subscribe() {
placeholder="john" placeholder="john"
value={inputedUsername} value={inputedUsername}
onChange={(e) => setInputedUsername(e.target.value)} onChange={(e) => setInputedUsername(e.target.value)}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
<div> <div>

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

@ -60,7 +60,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-sky-500 font-bold w-full py-1 break-words hyphens-auto"> <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
{activeCollection?.name} {activeCollection?.name}
</p> </p>
</div> </div>
@ -69,7 +69,7 @@ export default function Index() {
{activeCollection ? ( {activeCollection ? (
<div <div
className={`text-sky-400 min-w-[15rem] ${ className={`min-w-[15rem] ${
activeCollection.members[0] && "mr-3" activeCollection.members[0] && "mr-3"
}`} }`}
> >
@ -87,7 +87,7 @@ export default function Index() {
className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer" className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
> >
<div <div
className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${ className={`bg-sky-700 p-2 leading-3 select-none group-hover:bg-sky-600 duration-100 text-white rounded-full text-xs ${
activeCollection.members[0] && "mr-1" activeCollection.members[0] && "mr-1"
}`} }`}
> >
@ -107,7 +107,7 @@ export default function Index() {
.slice(0, 4)} .slice(0, 4)}
{activeCollection?.members.length && {activeCollection?.members.length &&
activeCollection.members.length - 4 > 0 ? ( activeCollection.members.length - 4 > 0 ? (
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3"> <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-700 border-sky-100 -mr-3">
+{activeCollection?.members?.length - 4} +{activeCollection?.members?.length - 4}
</div> </div>
) : null} ) : null}
@ -116,7 +116,7 @@ export default function Index() {
) : null} ) : null}
</div> </div>
<div className="text-gray-500 flex justify-between items-end gap-5"> <div className="text-gray-600 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">

2
pages/collections/index.tsx
View File

@ -39,7 +39,7 @@ export default function Collections() {
icon={faFolder} icon={faFolder}
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 drop-shadow"
/> />
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold"> <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
All Collections All Collections
</p> </p>
</div> </div>

22
pages/dashboard.tsx
View File

@ -85,7 +85,7 @@ export default function Dashboard() {
icon={faChartSimple} icon={faChartSimple}
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 drop-shadow"
/> />
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold"> <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
Dashboard Dashboard
</p> </p>
</div> </div>
@ -95,14 +95,14 @@ export default function Dashboard() {
<div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10"> <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-500">{numberOfLinks}</p> <p className="font-bold text-6xl text-sky-700">{numberOfLinks}</p>
<p className="text-sky-900 text-xl"> <p className="text-sky-900 text-xl">
{numberOfLinks === 1 ? "Link" : "Links"} {numberOfLinks === 1 ? "Link" : "Links"}
</p> </p>
</div> </div>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-500"> <p className="font-bold text-6xl text-sky-700">
{collections.length} {collections.length}
</p> </p>
<p className="text-sky-900 text-xl"> <p className="text-sky-900 text-xl">
@ -111,7 +111,7 @@ export default function Dashboard() {
</div> </div>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-500">{tags.length}</p> <p className="font-bold text-6xl text-sky-700">{tags.length}</p>
<p className="text-sky-900 text-xl"> <p className="text-sky-900 text-xl">
{tags.length === 1 ? "Tag" : "Tags"} {tags.length === 1 ? "Tag" : "Tags"}
</p> </p>
@ -131,9 +131,9 @@ export default function Dashboard() {
}} }}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full" className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
> >
<p className="text-sky-600 text-xl">Pinned Links</p> <p className="text-sky-700 text-xl">Pinned Links</p>
<div className="text-sky-600 flex items-center gap-2"> <div className="text-sky-700 flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"} {linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronDown} icon={faChevronDown}
@ -164,7 +164,7 @@ export default function Dashboard() {
</Disclosure> </Disclosure>
) : ( ) : (
<div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl"> <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
<p className="text-center text-2xl text-sky-500"> <p className="text-center text-2xl text-sky-700">
No Pinned Links No Pinned Links
</p> </p>
<p className="text-center text-sky-900 text-sm"> <p className="text-center text-sky-900 text-sm">
@ -182,9 +182,9 @@ export default function Dashboard() {
}} }}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full" className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
> >
<p className="text-sky-600 text-xl">Pinned Collections</p> <p className="text-sky-700 text-xl">Pinned Collections</p>
<div className="text-sky-600 flex items-center gap-2"> <div className="text-sky-700 flex items-center gap-2">
{collectionPinDisclosure ? "Hide" : "Show"} {collectionPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronDown} icon={faChevronDown}
@ -219,9 +219,9 @@ export default function Dashboard() {
}} }}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full" className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
> >
<p className="text-sky-600 text-xl">Pinned Tags</p> <p className="text-sky-700 text-xl">Pinned Tags</p>
<div className="text-sky-600 flex items-center gap-2"> <div className="text-sky-700 flex items-center gap-2">
{tagPinDisclosure ? "Hide" : "Show"} {tagPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronDown} icon={faChevronDown}

8
pages/forgot.tsx
View File

@ -47,7 +47,7 @@ export default function Forgot() {
className="h-12 w-fit mx-auto mt-10" className="h-12 w-fit mx-auto mt-10"
/> />
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold">Fogot Password?</p> <p className="text-xl text-sky-700 w-fit font-bold">Fogot Password?</p>
<p className="text-md text-gray-500 mt-1"> <p className="text-md text-gray-500 mt-1">
Enter your Email so we can send you a link to recover your account. Enter your Email so we can send you a link to recover your account.
</p> </p>
@ -55,14 +55,14 @@ export default function Forgot() {
Make sure to change your password in the profile settings afterwards. Make sure to change your password in the profile settings afterwards.
</p> </p>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
<input <input
type="text" type="text"
placeholder="johnny@example.com" placeholder="johnny@example.com"
value={form.email} value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
@ -73,7 +73,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 href={"/login"} className="block text-sky-500 font-bold"> <Link href={"/login"} className="block text-sky-700 font-bold">
Go back Go back
</Link> </Link>
</div> </div>

2
pages/links.tsx
View File

@ -26,7 +26,7 @@ export default function Links() {
icon={faLink} icon={faLink}
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 drop-shadow"
/> />
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold"> <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
All Links All Links
</p> </p>
</div> </div>

14
pages/login.tsx
View File

@ -53,15 +53,15 @@ export default function Login() {
alt="Linkwarden" alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10" className="h-12 w-fit mx-auto mt-10"
/> />
<p className="text-xl font-semibold text-sky-500 px-2 text-center"> <p className="text-xl font-semibold text-sky-700 px-2 text-center">
Sign in to your account Sign in to your account
</p> </p>
<div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold"> <p className="text-xl text-sky-700 w-fit font-bold">
Enter your credentials Enter your credentials
</p> </p>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Username Username
{emailEnabled ? "/Email" : undefined} {emailEnabled ? "/Email" : undefined}
</p> </p>
@ -71,12 +71,12 @@ export default function Login() {
placeholder="johnny" placeholder="johnny"
value={form.username} value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })} onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Password Password
</p> </p>
@ -85,7 +85,7 @@ export default function Login() {
placeholder="••••••••••••••" placeholder="••••••••••••••"
value={form.password} value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
{emailEnabled && ( {emailEnabled && (
<div className="w-fit ml-auto mt-1"> <div className="w-fit ml-auto mt-1">
@ -104,7 +104,7 @@ export default function Login() {
/> />
<div className="flex items-baseline gap-1 justify-center"> <div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">New here?</p> <p className="w-fit text-gray-500">New here?</p>
<Link href={"/register"} className="block text-sky-500 font-bold"> <Link href={"/register"} className="block text-sky-700 font-bold">
Sign Up Sign Up
</Link> </Link>
</div> </div>

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

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

26
pages/register.tsx
View File

@ -97,7 +97,7 @@ export default function Register() {
alt="Linkwarden" alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10" className="h-12 w-fit mx-auto mt-10"
/> />
<p className="text-center px-2 text-xl font-semibold text-sky-500"> <p className="text-center px-2 text-xl font-semibold text-sky-700">
{process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
? `Start using our premium services with a ${ ? `Start using our premium services with a ${
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14 process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
@ -105,11 +105,11 @@ export default function Register() {
: "Create a new account"} : "Create a new account"}
</p> </p>
<div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold"> <p className="text-xl text-sky-700 w-fit font-bold">
Enter your details Enter your details
</p> </p>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Display Name Display Name
</p> </p>
@ -118,13 +118,13 @@ export default function Register() {
placeholder="Johnny" placeholder="Johnny"
value={form.name} value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
{emailEnabled ? undefined : ( {emailEnabled ? undefined : (
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Username Username
</p> </p>
@ -133,14 +133,14 @@ export default function Register() {
placeholder="john" placeholder="john"
value={form.username} value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })} onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
)} )}
{emailEnabled ? ( {emailEnabled ? (
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Email Email
</p> </p>
@ -149,14 +149,14 @@ export default function Register() {
placeholder="johnny@example.com" placeholder="johnny@example.com"
value={form.email} value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
) : undefined} ) : undefined}
<div className="flex item-center gap-2"> <div className="flex item-center gap-2">
<div className="w-full"> <div className="w-full">
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Password Password
</p> </p>
@ -165,12 +165,12 @@ export default function Register() {
placeholder="••••••••••••••" placeholder="••••••••••••••"
value={form.password} value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Confirm Password Confirm Password
</p> </p>
@ -181,7 +181,7 @@ export default function Register() {
onChange={(e) => onChange={(e) =>
setForm({ ...form, passwordConfirmation: e.target.value }) setForm({ ...form, passwordConfirmation: e.target.value })
} }
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/> />
</div> </div>
</div> </div>
@ -193,7 +193,7 @@ export default function Register() {
/> />
<div className="flex items-baseline gap-1 justify-center"> <div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">Already have an account?</p> <p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block text-sky-500 font-bold"> <Link href={"/login"} className="block text-sky-700 font-bold">
Login Login
</Link> </Link>
</div> </div>

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

@ -42,7 +42,7 @@ export default function Links() {
icon={faSearch} 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 drop-shadow"
/> />
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold"> <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
Search Results Search Results
</p> </p>
</div> </div>
@ -101,7 +101,7 @@ export default function Links() {
) : ( ) : (
<p className="text-sky-900"> <p className="text-sky-900">
Nothing found.{" "} Nothing found.{" "}
<span className="text-sky-500 font-bold text-xl" title="Shruggie"> <span className="text-sky-700 font-bold text-xl" title="Shruggie">
¯\_(ツ)_/¯ ¯\_(ツ)_/¯
</span> </span>
</p> </p>

2
pages/subscribe.tsx
View File

@ -33,7 +33,7 @@ export default function Subscribe() {
alt="Linkwarden" alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10" className="h-12 w-fit mx-auto mt-10"
/> />
<p className="text-xl font-semibold text-sky-500 text-center px-2"> <p className="text-xl font-semibold text-sky-700 text-center px-2">
{process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then
${process.env.NEXT_PUBLIC_PRICING}/month afterwards ${process.env.NEXT_PUBLIC_PRICING}/month afterwards
</p> </p>

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

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