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

much better coloring

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