Daniel
GitHub
commit
b0e92c6253
|
|
@ -1,5 +1,5 @@
|
|||
<div align="center">
|
||||
<img src="./assets/icon.png" width="100px" />
|
||||
<img src="./assets/logo.png" width="100px" />
|
||||
<h1>Linkwarden</h1>
|
||||
|
||||
<a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat-square" alt="Discord"></a>
|
||||
|
|
|
|||
BIN
assets/icon.png
BIN
assets/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -11,9 +11,7 @@ type Props = {
|
|||
|
||||
export default function Checkbox({ label, state, className, onClick }: Props) {
|
||||
return (
|
||||
<label
|
||||
className={`cursor-pointer flex items-center gap-2 text-sky-700 ${className}`}
|
||||
>
|
||||
<label className={`cursor-pointer flex items-center gap-2 ${className}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={state}
|
||||
|
|
@ -22,13 +20,15 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
|
|||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faSquareCheck}
|
||||
className="w-5 h-5 text-sky-700 peer-checked:block hidden"
|
||||
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faSquare}
|
||||
className="w-5 h-5 text-sky-700 peer-checked:hidden block"
|
||||
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
|
||||
/>
|
||||
<span className="text-sky-900 rounded select-none">{label}</span>
|
||||
<span className="text-black dark:text-white rounded select-none">
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,24 +32,24 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
|
||||
className={`bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id={"expand-dropdown" + collection.id}
|
||||
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
id={"expand-dropdown" + collection.id}
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
href={`/collections/${collection.id}`}
|
||||
className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
|
||||
>
|
||||
<p className="text-2xl font-bold capitalize text-sky-700 break-words line-clamp-3 w-4/5">
|
||||
<p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
|
||||
{collection.name}
|
||||
</p>
|
||||
<div className="flex justify-between items-center">
|
||||
|
|
@ -73,11 +73,14 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
) : null}
|
||||
</div>
|
||||
<div className="text-right w-40">
|
||||
<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-500" />
|
||||
<div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faLink}
|
||||
className="w-5 h-5 text-black dark:text-white"
|
||||
/>
|
||||
{collection._count && collection._count.links}
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-1 text-gray-600">
|
||||
<div className="flex items-center justify-end gap-1 text-gray-600 dark:text-white">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p className="font-bold text-xs">{formattedDate}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
|
|||
return (
|
||||
<ClickAwayHandler
|
||||
onClickOutside={onClickOutside}
|
||||
className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
|
||||
className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
|
||||
>
|
||||
{items.map((e, i) => {
|
||||
const inner = e && (
|
||||
<div className="cursor-pointer rounded-md">
|
||||
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
|
||||
<p className="text-sky-900 select-none">{e.name}</p>
|
||||
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
|
||||
<p className="text-black dark:text-white select-none">{e.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -20,9 +20,11 @@ export default function FilterSearchDropdown({
|
|||
const target = e.target as HTMLInputElement;
|
||||
if (target.id !== "filter-dropdown") setFilterDropdown(false);
|
||||
}}
|
||||
className="absolute top-8 right-0 border border-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
|
||||
className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
|
||||
>
|
||||
<p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
|
||||
<p className="mb-2 text-black dark:text-white text-center font-semibold">
|
||||
Filter by
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Checkbox
|
||||
label="Name"
|
||||
|
|
|
|||
|
|
@ -45,6 +45,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
|
|||
return (
|
||||
<Select
|
||||
isClearable
|
||||
className="react-select-container"
|
||||
classNamePrefix="react-select"
|
||||
placeholder="Default: Unnamed Collection"
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
|
|||
return (
|
||||
<CreatableSelect
|
||||
isClearable
|
||||
className="react-select-container"
|
||||
classNamePrefix="react-select"
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
styles={styles}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
|
||||
className={`bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
|
||||
>
|
||||
{(permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
|
|
@ -114,7 +114,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id={"expand-dropdown" + link.id}
|
||||
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
|
||||
className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
|
|
@ -156,8 +156,10 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
<div className="flex justify-between gap-5 w-full h-full z-0">
|
||||
<div className="flex flex-col justify-between w-full">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
|
||||
<p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300">
|
||||
{count + 1}
|
||||
</p>
|
||||
<p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
|
||||
{link.name || link.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -168,16 +170,16 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
className="w-4 h-4 mt-1 drop-shadow"
|
||||
style={{ color: collection?.color }}
|
||||
/>
|
||||
<p className="text-sky-900 truncate capitalize">
|
||||
<p className="text-black dark:text-white truncate capitalize">
|
||||
{collection?.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 w-full pr-20 text-gray-500">
|
||||
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-gray-300">
|
||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import SubmitButton from "@/components/SubmitButton";
|
|||
import { HexColorPicker } from "react-colorful";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
type Props = {
|
||||
toggleCollectionModal: Function;
|
||||
|
|
@ -60,23 +61,23 @@ export default function CollectionInfo({
|
|||
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="w-full">
|
||||
<p className="text-sm text-sky-700 mb-2">
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<input
|
||||
<TextInput
|
||||
value={collection.name}
|
||||
placeholder="e.g. Example Collection"
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
type="text"
|
||||
placeholder="e.g. Example Collection"
|
||||
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="flex flex-col justify-between items-center w-32">
|
||||
<p className="text-sm w-full text-sky-700 mb-2">Icon Color</p>
|
||||
<p className="text-sm w-full text-black dark:text-white mb-2">
|
||||
Icon Color
|
||||
</p>
|
||||
<div style={{ color: collection.color }}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
|
|
@ -84,7 +85,7 @@ export default function CollectionInfo({
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 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" })
|
||||
}
|
||||
|
|
@ -101,9 +102,9 @@ export default function CollectionInfo({
|
|||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm text-sky-700 mb-2">Description</p>
|
||||
<p className="text-sm text-black dark:text-white mb-2">Description</p>
|
||||
<textarea
|
||||
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-700"
|
||||
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white 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..."
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import useCollectionStore from "@/store/collections";
|
|||
import { useRouter } from "next/router";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
type Props = {
|
||||
toggleDeleteCollectionModal: Function;
|
||||
|
|
@ -50,7 +51,7 @@ export default function DeleteCollection({
|
|||
<p className="text-red-500 font-bold text-center">Warning!</p>
|
||||
|
||||
<div className="max-h-[20rem] overflow-y-auto">
|
||||
<div className="text-gray-500">
|
||||
<div className="text-gray-500 dark:text-white">
|
||||
<p>
|
||||
Please note that deleting the collection will permanently remove
|
||||
all its contents, including the following:
|
||||
|
|
@ -81,24 +82,23 @@ export default function DeleteCollection({
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-sky-900 select-none text-center">
|
||||
<p className="text-black dark:text-white select-none text-center">
|
||||
To confirm, type "
|
||||
<span className="font-bold text-sky-700">{collection.name}</span>
|
||||
<span className="font-bold">{collection.name}</span>
|
||||
" in the box below:
|
||||
</p>
|
||||
|
||||
<input
|
||||
autoFocus
|
||||
<TextInput
|
||||
autoFocus={true}
|
||||
value={inputField}
|
||||
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 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
className="w-3/4 mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-gray-500">
|
||||
<p className="text-gray-500 dark:text-white">
|
||||
Click the button below to leave the current collection:
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import ProfilePhoto from "@/components/ProfilePhoto";
|
|||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { toast } from "react-hot-toast";
|
||||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
type Props = {
|
||||
toggleCollectionModal: Function;
|
||||
|
|
@ -117,7 +118,7 @@ export default function TeamManagement({
|
|||
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
|
||||
{permissions === true && (
|
||||
<>
|
||||
<p className="text-sm text-sky-700">Make Public</p>
|
||||
<p className="text-sm text-black dark:text-white">Make Public</p>
|
||||
|
||||
<Checkbox
|
||||
label="Make this a public collection."
|
||||
|
|
@ -127,7 +128,7 @@ export default function TeamManagement({
|
|||
}
|
||||
/>
|
||||
|
||||
<p className="text-gray-500 text-sm">
|
||||
<p className="text-gray-500 dark:text-white text-sm">
|
||||
This will let <b>Anyone</b> to view this collection.
|
||||
</p>
|
||||
</>
|
||||
|
|
@ -135,7 +136,7 @@ export default function TeamManagement({
|
|||
|
||||
{collection.isPublic ? (
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Public Link (Click to copy)
|
||||
</p>
|
||||
<div
|
||||
|
|
@ -148,7 +149,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 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-2 dark:bg-neutral-950 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>
|
||||
|
|
@ -159,11 +160,14 @@ export default function TeamManagement({
|
|||
|
||||
{permissions === true && (
|
||||
<>
|
||||
<p className="text-sm text-sky-700">Member Management</p>
|
||||
<p className="text-sm text-black dark:text-white">
|
||||
Member Management
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
<TextInput
|
||||
value={member.user.username || ""}
|
||||
placeholder="Username (without the '@')"
|
||||
onChange={(e) => {
|
||||
setMember({
|
||||
...member,
|
||||
|
|
@ -179,9 +183,6 @@ export default function TeamManagement({
|
|||
setMemberState
|
||||
)
|
||||
}
|
||||
type="text"
|
||||
placeholder="Username (without the '@')"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
|
||||
<div
|
||||
|
|
@ -193,7 +194,7 @@ export default function TeamManagement({
|
|||
setMemberState
|
||||
)
|
||||
}
|
||||
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"
|
||||
className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
|
||||
</div>
|
||||
|
|
@ -203,7 +204,7 @@ export default function TeamManagement({
|
|||
|
||||
{collection?.members[0]?.user && (
|
||||
<>
|
||||
<p className="text-center text-gray-500 text-xs sm:text-sm">
|
||||
<p className="text-center text-gray-500 dark:text-white text-xs sm:text-sm">
|
||||
(All Members have <b>Read</b> access to this collection.)
|
||||
</p>
|
||||
<div className="flex flex-col gap-3 rounded-md">
|
||||
|
|
@ -213,12 +214,12 @@ 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
|
||||
icon={faClose}
|
||||
className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
|
||||
className="absolute right-2 top-2 text-gray-500 dark:text-white h-4 hover:text-red-500 duration-100 cursor-pointer"
|
||||
title="Remove Member"
|
||||
onClick={() => {
|
||||
const updatedMembers = collection.members.filter(
|
||||
|
|
@ -239,23 +240,25 @@ export default function TeamManagement({
|
|||
className="border-[3px]"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-700">
|
||||
<p className="text-sm font-bold text-black dark:text-white">
|
||||
{e.user.name}
|
||||
</p>
|
||||
<p className="text-sky-900">@{e.user.username}</p>
|
||||
<p className="text-gray-500 dark:text-gray-300">
|
||||
@{e.user.username}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex sm:block items-center gap-5 min-w-[10rem]">
|
||||
<div>
|
||||
<p
|
||||
className={`font-bold text-sm text-sky-700 ${
|
||||
className={`font-bold text-sm text-black dark:text-white ${
|
||||
permissions === true ? "" : "mb-2"
|
||||
}`}
|
||||
>
|
||||
Permissions
|
||||
</p>
|
||||
{permissions === true && (
|
||||
<p className="text-xs text-gray-500 mb-2">
|
||||
<p className="text-xs text-gray-500 dark:text-white mb-2">
|
||||
(Click to toggle.)
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -265,7 +268,7 @@ export default function TeamManagement({
|
|||
!e.canCreate &&
|
||||
!e.canUpdate &&
|
||||
!e.canDelete ? (
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-gray-500 dark:text-white">
|
||||
Has no permissions.
|
||||
</p>
|
||||
) : (
|
||||
|
|
@ -305,11 +308,11 @@ export default function TeamManagement({
|
|||
}}
|
||||
/>
|
||||
<span
|
||||
className={`text-sky-900 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>
|
||||
|
|
@ -350,11 +353,11 @@ export default function TeamManagement({
|
|||
}}
|
||||
/>
|
||||
<span
|
||||
className={`text-sky-900 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>
|
||||
|
|
@ -395,11 +398,11 @@ export default function TeamManagement({
|
|||
}}
|
||||
/>
|
||||
<span
|
||||
className={`text-sky-900 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>
|
||||
|
|
@ -415,7 +418,7 @@ export default function TeamManagement({
|
|||
)}
|
||||
|
||||
<div
|
||||
className="relative border px-2 rounded-md border-sky-100 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">
|
||||
|
|
@ -425,7 +428,7 @@ export default function TeamManagement({
|
|||
/>
|
||||
<div>
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="text-sm font-bold text-sky-700">
|
||||
<p className="text-sm font-bold text-black dark:text-white">
|
||||
{collectionOwner.name}
|
||||
</p>
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -433,13 +436,15 @@ export default function TeamManagement({
|
|||
className="w-3 h-3 text-yellow-500"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sky-900">@{collectionOwner.username}</p>
|
||||
<p className="text-gray-500 dark:text-gray-300">
|
||||
@{collectionOwner.username}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center min-w-[10rem]">
|
||||
<p className={`font-bold text-sm text-sky-700`}>Permissions</p>
|
||||
<p className="text-sky-700">Full Access (Owner)</p>
|
||||
<div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white">
|
||||
<p className={`font-bold text-sm`}>Permissions</p>
|
||||
<p>Full Access (Owner)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,17 +46,19 @@ export default function CollectionModal({
|
|||
<div className={className}>
|
||||
<Tab.Group defaultIndex={defaultIndex}>
|
||||
{method === "CREATE" && (
|
||||
<p className="text-xl text-sky-700 text-center">New Collection</p>
|
||||
<p className="text-xl text-black dark:text-white text-center">
|
||||
New Collection
|
||||
</p>
|
||||
)}
|
||||
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
|
||||
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
|
||||
{method === "UPDATE" && (
|
||||
<>
|
||||
{isOwner && (
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
selected
|
||||
? "px-2 py-1 bg-sky-200 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 dark:text-white duration-100 rounded-md 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
|
||||
|
|
@ -65,8 +67,8 @@ export default function CollectionModal({
|
|||
<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 dark:text-white duration-100 rounded-md 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"}
|
||||
|
|
@ -74,8 +76,8 @@ export default function CollectionModal({
|
|||
<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 dark:text-white duration-100 rounded-md 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"}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { useRouter } from "next/router";
|
|||
import SubmitButton from "../../SubmitButton";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Link from "next/link";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
type Props =
|
||||
| {
|
||||
|
|
@ -115,10 +116,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>
|
||||
|
|
@ -126,23 +127,21 @@ export default function AddOrEditLink({
|
|||
|
||||
{method === "CREATE" ? (
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2 font-bold">
|
||||
<p className="text-sm text-black dark:text-white mb-2 font-bold">
|
||||
Address (URL)
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
<TextInput
|
||||
value={link.url}
|
||||
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 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<hr />
|
||||
<hr className="dark:border-neutral-700" />
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">Collection</p>
|
||||
<p className="text-sm text-black dark:text-white mb-2">Collection</p>
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
// defaultValue={{
|
||||
|
|
@ -161,7 +160,7 @@ export default function AddOrEditLink({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">Tags</p>
|
||||
<p className="text-sm text-black dark:text-white mb-2">Tags</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
|
|
@ -171,18 +170,16 @@ export default function AddOrEditLink({
|
|||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="text-sm text-sky-700 mb-2">Name</p>
|
||||
<input
|
||||
<p className="text-sm text-black dark:text-white mb-2">Name</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
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 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="text-sm text-sky-700 mb-2">Description</p>
|
||||
<p className="text-sm text-black dark:text-white mb-2">Description</p>
|
||||
<textarea
|
||||
value={link.description}
|
||||
onChange={(e) => setLink({ ...link, description: e.target.value })}
|
||||
|
|
@ -191,7 +188,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 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
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-950"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 bg-white 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 {
|
||||
|
|
@ -151,14 +160,14 @@ export default function LinkDetails({ link }: Props) {
|
|||
/>
|
||||
)}
|
||||
<div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
|
||||
<p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
|
||||
<p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
|
||||
{link.name}
|
||||
</p>
|
||||
<Link
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-sm text-gray-500 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>
|
||||
|
|
@ -176,7 +185,7 @@ export default function LinkDetails({ link }: Props) {
|
|||
/>
|
||||
<p
|
||||
title={collection?.name}
|
||||
className="text-sky-900 text-lg truncate max-w-[12rem]"
|
||||
className="text-black dark:text-white text-lg truncate max-w-[12rem]"
|
||||
>
|
||||
{collection?.name}
|
||||
</p>
|
||||
|
|
@ -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-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
|
||||
className="px-2 py-1 bg-sky-200 text-black 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 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">
|
||||
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
|
||||
<FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
|
||||
<p className=" text-gray-500">Archived Formats:</p>
|
||||
<p>Archived Formats:</p>
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-1 text-gray-500"
|
||||
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,69 +223,69 @@ 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 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 p-2 rounded-md">
|
||||
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
|
||||
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<p className="text-gray-500">Screenshot</p>
|
||||
<p className="text-gray-500 dark:text-white">Screenshot</p>
|
||||
</div>
|
||||
|
||||
<div className="flex text-sky-500 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 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 p-2 rounded-md">
|
||||
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
|
||||
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<p className="text-gray-500">PDF</p>
|
||||
<p className="text-gray-500 dark:text-white">PDF</p>
|
||||
</div>
|
||||
|
||||
<div className="flex text-sky-500 gap-1">
|
||||
<div className="flex text-black 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>
|
||||
|
|
|
|||
|
|
@ -33,10 +33,12 @@ export default function LinkModal({
|
|||
<div className={className}>
|
||||
<Tab.Group defaultIndex={defaultIndex}>
|
||||
{method === "CREATE" && (
|
||||
<p className="text-xl text-sky-700 text-center">New Link</p>
|
||||
<p className="text-xl text-black dark:text-white text-center">
|
||||
New Link
|
||||
</p>
|
||||
)}
|
||||
<Tab.List
|
||||
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 ${
|
||||
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white ${
|
||||
isOwnerOrMod ? "" : "pb-8"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -45,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
|
||||
|
|
@ -54,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
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ 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">
|
||||
<div className=" w-full mx-auto flex flex-col gap-3 justify-between">
|
||||
<p className="text-md text-black dark:text-white">
|
||||
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-black dark:text-white">
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { signOut, useSession } from "next-auth/react";
|
|||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
type Props = {
|
||||
togglePasswordFormModal: Function;
|
||||
|
|
@ -80,24 +81,25 @@ export default function ChangePassword({
|
|||
|
||||
return (
|
||||
<div className="mx-auto sm:w-[35rem] w-80">
|
||||
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
|
||||
<p className="text-sm text-sky-700">New Password</p>
|
||||
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-2 justify-between">
|
||||
<p className="text-sm text-black dark:text-white">New Password</p>
|
||||
|
||||
<input
|
||||
<TextInput
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword1(e.target.value)}
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
type="password"
|
||||
/>
|
||||
<p className="text-sm text-sky-700">Confirm New Password</p>
|
||||
|
||||
<input
|
||||
<p className="text-sm text-black dark:text-white">
|
||||
Confirm New Password
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
value={newPassword2}
|
||||
onChange={(e) => setNewPassword2(e.target.value)}
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<SubmitButton
|
||||
|
|
|
|||
|
|
@ -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-sky-700 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-sky-700 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-950 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-sky-700 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-sky-900 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-sky-900 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>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
|||
import SubmitButton from "../../SubmitButton";
|
||||
import ProfilePhoto from "../../ProfilePhoto";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
type Props = {
|
||||
toggleSettingsModal: Function;
|
||||
|
|
@ -102,7 +103,9 @@ export default function ProfileSettings({
|
|||
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
|
||||
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
|
||||
<div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
|
||||
<p className="text-sm text-sky-700 mb-2 text-center">Profile Photo</p>
|
||||
<p className="text-sm text-black dark:text-white mb-2 text-center">
|
||||
Profile Photo
|
||||
</p>
|
||||
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
|
||||
<ProfilePhoto
|
||||
src={user.profilePic}
|
||||
|
|
@ -127,7 +130,7 @@ export default function ProfileSettings({
|
|||
<label
|
||||
htmlFor="upload-photo"
|
||||
title="PNG or JPG (Max: 3MB)"
|
||||
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
|
||||
className="border border-slate-200 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
|
||||
|
|
@ -145,33 +148,29 @@ export default function ProfileSettings({
|
|||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">Display Name</p>
|
||||
<input
|
||||
type="text"
|
||||
value={user.name}
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Display Name
|
||||
</p>
|
||||
<TextInput
|
||||
value={user.name || ""}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">Username</p>
|
||||
<input
|
||||
type="text"
|
||||
<p className="text-sm text-black dark:text-white mb-2">Username</p>
|
||||
<TextInput
|
||||
value={user.username || ""}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">Email</p>
|
||||
<input
|
||||
type="text"
|
||||
<p className="text-sm text-black dark:text-white mb-2">Email</p>
|
||||
<TextInput
|
||||
value={user.email || ""}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
|
@ -184,15 +183,6 @@ export default function ProfileSettings({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* <hr /> TODO: Export functionality
|
||||
|
||||
<p className="text-sky-700">Data Settings</p>
|
||||
|
||||
<div className="w-fit">
|
||||
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
|
||||
Export Data
|
||||
</div>
|
||||
</div> */}
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
|
|
|
|||
|
|
@ -27,12 +27,12 @@ export default function UserModal({
|
|||
return (
|
||||
<div className={className}>
|
||||
<Tab.Group defaultIndex={defaultIndex}>
|
||||
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
|
||||
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
selected
|
||||
? "px-2 py-1 bg-sky-200 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 dark:text-white 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"
|
||||
}
|
||||
>
|
||||
Profile Settings
|
||||
|
|
@ -41,8 +41,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 dark:text-white 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"
|
||||
}
|
||||
>
|
||||
Privacy Settings
|
||||
|
|
@ -51,8 +51,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 dark:text-white 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"
|
||||
}
|
||||
>
|
||||
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
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
|
|||
onClickOutside={toggleModal}
|
||||
className={`m-auto ${className}`}
|
||||
>
|
||||
<div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
|
||||
<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 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}
|
||||
className="w-4 h-4 text-gray-500"
|
||||
className="w-4 h-4 text-gray-500 dark:text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import Search from "@/components/Search";
|
|||
import useAccountStore from "@/store/account";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import useModalStore from "@/store/modals";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
export default function Navbar() {
|
||||
const { setModal } = useModalStore();
|
||||
|
|
@ -22,6 +23,16 @@ export default function Navbar() {
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
const handleToggle = () => {
|
||||
if (theme === "dark") {
|
||||
setTheme("light");
|
||||
} else {
|
||||
setTheme("dark");
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("resize", () => setSidebar(false));
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -33,10 +44,10 @@ export default function Navbar() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
|
||||
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-neutral-700 border-b h-16">
|
||||
<div
|
||||
onClick={toggleSidebar}
|
||||
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-sky-700 rounded-md duration-100 hover:bg-slate-200"
|
||||
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-black dark:text-white rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
|
||||
>
|
||||
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
|
||||
</div>
|
||||
|
|
@ -50,7 +61,7 @@ export default function Navbar() {
|
|||
method: "CREATE",
|
||||
});
|
||||
}}
|
||||
className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-700 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
|
||||
className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-sky-500 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlus}
|
||||
|
|
@ -60,20 +71,19 @@ export default function Navbar() {
|
|||
New Link
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
|
||||
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
|
||||
onClick={() => setProfileDropdown(!profileDropdown)}
|
||||
id="profile-dropdown"
|
||||
>
|
||||
<ProfilePhoto
|
||||
src={account.profilePic}
|
||||
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
|
||||
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
|
||||
/>
|
||||
<p
|
||||
id="profile-dropdown"
|
||||
className="font-bold text-sky-700 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
|
||||
className="font-bold text-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
|
||||
>
|
||||
{account.name}
|
||||
</p>
|
||||
|
|
@ -92,6 +102,13 @@ export default function Navbar() {
|
|||
setProfileDropdown(!profileDropdown);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
|
||||
onClick: () => {
|
||||
handleToggle();
|
||||
setProfileDropdown(!profileDropdown);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Logout",
|
||||
onClick: () => {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ export default function NoLinksFound() {
|
|||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
|
||||
<p className="text-center text-3xl text-sky-700">
|
||||
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl">
|
||||
<p className="text-center text-3xl text-black dark:text-white">
|
||||
You haven't created any Links Here
|
||||
</p>
|
||||
<br />
|
||||
<div className="text-center text-sky-900 text-sm flex items-baseline justify-center gap-1 w-full">
|
||||
<div className="text-center text-black dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
|
||||
<p>Start by creating a</p>{" "}
|
||||
<div
|
||||
onClick={() => {
|
||||
|
|
@ -22,7 +22,7 @@ export default function NoLinksFound() {
|
|||
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-700 hover:bg-sky-600 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 dark:bg-sky-400 hover:bg-sky-600 duration-100 group"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlus}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default function ProfilePhoto({
|
|||
|
||||
return error || !src ? (
|
||||
<div
|
||||
className={`bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
|
||||
className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
|
||||
>
|
||||
<FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
|
||||
</div>
|
||||
|
|
@ -43,7 +43,7 @@ export default function ProfilePhoto({
|
|||
src={src}
|
||||
height={112}
|
||||
width={112}
|
||||
className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 ${className}`}
|
||||
className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,8 +58,10 @@ export default function LinkCard({ link, count }: Props) {
|
|||
<div className="flex justify-between items-center gap-5 w-full h-full z-0">
|
||||
<div className="flex flex-col justify-between">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
|
||||
<p className="text-lg text-sky-700 font-bold">{link.name}</p>
|
||||
<p className="text-xs text-gray-500">{count + 1}</p>
|
||||
<p className="text-lg text-black">
|
||||
{link.name || link.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-500 text-sm font-medium">
|
||||
|
|
@ -70,7 +72,7 @@ export default function LinkCard({ link, count }: Props) {
|
|||
{link.tags.map((e, i) => (
|
||||
<p
|
||||
key={i}
|
||||
className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
|
||||
className="px-2 py-1 bg-sky-200 text-black text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
|
||||
>
|
||||
{e.name}
|
||||
</p>
|
||||
|
|
@ -79,7 +81,7 @@ export default function LinkCard({ link, count }: Props) {
|
|||
</div>
|
||||
<div className="flex gap-2 items-center flex-wrap mt-2">
|
||||
<p className="text-gray-500">{formattedDate}</p>
|
||||
<div className="text-sky-500 font-bold flex items-center gap-1">
|
||||
<div className="text-black flex items-center gap-1">
|
||||
<p>{url ? url.host : link.url}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,13 +20,15 @@ export default function RadioButton({ label, state, onClick }: Props) {
|
|||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleCheck}
|
||||
className="w-5 h-5 text-sky-700 peer-checked:block hidden"
|
||||
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="w-5 h-5 text-sky-700 peer-checked:hidden block"
|
||||
className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
|
||||
/>
|
||||
<span className="text-sky-900 rounded select-none">{label}</span>
|
||||
<span className="text-black dark:text-white rounded select-none">
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
export default function RequiredBadge() {
|
||||
return (
|
||||
<span title="Required Field" className="text-sky-700 cursor-help">
|
||||
<span
|
||||
title="Required Field"
|
||||
className="text-black dark:text-white cursor-help"
|
||||
>
|
||||
{" "}
|
||||
*
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function Search() {
|
|||
>
|
||||
<label
|
||||
htmlFor="search-box"
|
||||
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-700"
|
||||
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300"
|
||||
>
|
||||
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
|
||||
</label>
|
||||
|
|
@ -44,7 +44,7 @@ export default function Search() {
|
|||
router.push("/search/" + encodeURIComponent(searchQuery))
|
||||
}
|
||||
autoFocus={searchBox}
|
||||
className="border border-sky-100 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"
|
||||
className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -51,22 +51,23 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gray-100 h-full w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
|
||||
className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
|
||||
>
|
||||
<div className="flex justify-center gap-2 mt-2">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className={`${
|
||||
active === "/dashboard"
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
? "bg-sky-200 dark:bg-sky-600"
|
||||
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faChartSimple}
|
||||
className={`w-8 h-8 drop-shadow text-sky-500`}
|
||||
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
|
||||
/>
|
||||
<p className="text-sky-700 text-xs xl:text-sm font-semibold">
|
||||
|
||||
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
|
||||
Dashboard
|
||||
</p>
|
||||
</Link>
|
||||
|
|
@ -75,28 +76,34 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
href="/links"
|
||||
className={`${
|
||||
active === "/links"
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
? "bg-sky-200 dark:bg-sky-600"
|
||||
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faLink}
|
||||
className={`w-8 h-8 drop-shadow text-sky-500`}
|
||||
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
|
||||
/>
|
||||
<p className="text-sky-700 text-xs xl:text-sm font-semibold">Links</p>
|
||||
|
||||
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
|
||||
Links
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/collections"
|
||||
className={`${
|
||||
active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
|
||||
active === "/collections"
|
||||
? "bg-sky-200 dark:bg-sky-600"
|
||||
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className={`w-8 h-8 drop-shadow text-sky-500`}
|
||||
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
|
||||
/>
|
||||
<p className="text-sky-700 text-xs xl:text-sm font-semibold">
|
||||
|
||||
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
|
||||
Collections
|
||||
</p>
|
||||
</Link>
|
||||
|
|
@ -107,7 +114,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
onClick={() => {
|
||||
setCollectionDisclosure(!collectionDisclosure);
|
||||
}}
|
||||
className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
|
||||
className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
|
||||
>
|
||||
<p>Collections</p>
|
||||
|
||||
|
|
@ -136,8 +143,8 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
<div
|
||||
className={`${
|
||||
active === `/collections/${e.id}`
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
? "bg-sky-200 dark:bg-sky-700 "
|
||||
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -146,7 +153,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
style={{ color: e.color }}
|
||||
/>
|
||||
|
||||
<p className="text-sky-700 truncate w-full pr-7">
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -157,7 +164,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
<div
|
||||
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
|
||||
<p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
|
||||
You Have No Collections...
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -170,7 +177,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
onClick={() => {
|
||||
setTagDisclosure(!tagDisclosure);
|
||||
}}
|
||||
className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
|
||||
className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
|
||||
>
|
||||
<p>Tags</p>
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -196,16 +203,16 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
<div
|
||||
className={`${
|
||||
active === `/tags/${e.id}`
|
||||
? "bg-sky-200"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
? "bg-sky-200 dark:bg-sky-700"
|
||||
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faHashtag}
|
||||
className="w-4 h-4 text-sky-500 mt-1"
|
||||
className="w-4 h-4 text-sky-500 dark:text-sky-300 mt-1"
|
||||
/>
|
||||
|
||||
<p className="text-sky-700 truncate w-full pr-7">
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -216,7 +223,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
<div
|
||||
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
|
||||
<p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
|
||||
You Have No Tags...
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@ export default function SortDropdown({
|
|||
const target = e.target as HTMLInputElement;
|
||||
if (target.id !== "sort-dropdown") toggleSortDropdown();
|
||||
}}
|
||||
className="absolute top-8 right-0 border border-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-20 w-48"
|
||||
className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
|
||||
>
|
||||
<p className="mb-2 text-sky-900 text-center font-semibold">Sort by</p>
|
||||
<p className="mb-2 text-black dark:text-white text-center font-semibold">
|
||||
Sort by
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<RadioButton
|
||||
label="Date (Newest First)"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { ChangeEventHandler, KeyboardEventHandler } from "react";
|
||||
|
||||
type Props = {
|
||||
autoFocus?: boolean;
|
||||
value?: string;
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
onChange: ChangeEventHandler<HTMLInputElement>;
|
||||
onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function TextInput({
|
||||
autoFocus,
|
||||
value,
|
||||
type,
|
||||
placeholder,
|
||||
onChange,
|
||||
onKeyDown,
|
||||
className,
|
||||
}: Props) {
|
||||
return (
|
||||
<input
|
||||
autoFocus={autoFocus}
|
||||
type={type ? type : "text"}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onKeyDown={onKeyDown}
|
||||
className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100 ${className}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { useTheme } from "next-themes";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export default function ToggleDarkMode() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
const handleToggle = () => {
|
||||
if (theme === "dark") {
|
||||
setTheme("light");
|
||||
} else {
|
||||
setTheme("dark");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex gap-1 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<div className="shadow bg-sky-700 dark:bg-sky-400 flex items-center justify-center rounded-full text-white w-10 h-10 duration-100">
|
||||
<FontAwesomeIcon
|
||||
icon={theme === "dark" ? faSun : faMoon}
|
||||
className="w-1/2 h-1/2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
import { useTheme } from "next-themes";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -7,24 +9,39 @@ interface Props {
|
|||
}
|
||||
|
||||
export default function CenteredForm({ text, children }: Props) {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-2">
|
||||
<div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
|
||||
<div className="m-auto flex flex-col gap-2">
|
||||
<Image
|
||||
src="/linkwarden.png"
|
||||
width={518}
|
||||
height={145}
|
||||
alt="Linkwarden"
|
||||
className="h-12 w-fit mx-auto"
|
||||
/>
|
||||
{theme === "light" ? (
|
||||
<Image
|
||||
src="/linkwarden.png"
|
||||
width={518}
|
||||
height={145}
|
||||
alt="Linkwarden"
|
||||
className="h-12 w-fit mx-auto"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src="/linkwarden_darkmode.png"
|
||||
width={518}
|
||||
height={145}
|
||||
alt="Linkwarden"
|
||||
className="h-12 w-fit mx-auto"
|
||||
/>
|
||||
)}
|
||||
{text ? (
|
||||
<p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black px-2 text-center">
|
||||
<p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black dark:text-white px-2 text-center">
|
||||
{text}
|
||||
</p>
|
||||
) : undefined}
|
||||
{children}
|
||||
<p className="text-center text-xs text-gray-500">
|
||||
© {new Date().getFullYear()} Linkwarden. All rights reserved.
|
||||
<p className="text-center text-xs text-gray-500 mb-5 dark:text-gray-400">
|
||||
© {new Date().getFullYear()}{" "}
|
||||
<Link href="https://linkwarden.app" className="font-semibold">
|
||||
Linkwarden
|
||||
</Link>
|
||||
. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
"eslint-config-next": "13.4.9",
|
||||
"next": "13.4.12",
|
||||
"next-auth": "^4.22.1",
|
||||
"next-themes": "^0.2.1",
|
||||
"nodemailer": "^6.9.3",
|
||||
"playwright": "^1.35.1",
|
||||
"react": "18.2.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import "@/styles/globals.css";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import type { AppProps } from "next/app";
|
||||
|
|
@ -6,6 +6,7 @@ import Head from "next/head";
|
|||
import AuthRedirect from "@/layouts/AuthRedirect";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import { Session } from "next-auth";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
export default function App({
|
||||
Component,
|
||||
|
|
@ -13,6 +14,13 @@ export default function App({
|
|||
}: AppProps<{
|
||||
session: Session;
|
||||
}>) {
|
||||
const defaultTheme: "light" | "dark" = "dark";
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem("theme"))
|
||||
localStorage.setItem("theme", defaultTheme);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SessionProvider session={pageProps.session}>
|
||||
<Head>
|
||||
|
|
@ -37,13 +45,18 @@ export default function App({
|
|||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
</Head>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
toastOptions={{ className: "border border-sky-100" }}
|
||||
/>
|
||||
<AuthRedirect>
|
||||
<Component {...pageProps} />
|
||||
<ThemeProvider attribute="class">
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
toastOptions={{
|
||||
className:
|
||||
"border border-sky-100 dark:dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||
}}
|
||||
/>
|
||||
<Component {...pageProps} />
|
||||
</ThemeProvider>
|
||||
</AuthRedirect>
|
||||
</SessionProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { useSession } from "next-auth/react";
|
|||
import { useRouter } from "next/router";
|
||||
import useAccountStore from "@/store/account";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
export default function Subscribe() {
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
|
@ -39,28 +40,29 @@ export default function Subscribe() {
|
|||
|
||||
return (
|
||||
<CenteredForm>
|
||||
<div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-center text-black font-bold">
|
||||
<div className="p-4 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-center text-black dark:text-white font-bold">
|
||||
Choose a Username (Last step)
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Username
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
<TextInput
|
||||
placeholder="john"
|
||||
value={inputedUsername}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-md text-gray-500 mt-1">
|
||||
<p className="text-md text-gray-500 dark:text-gray-400 mt-1">
|
||||
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>{" "}
|
||||
in case of any issues.
|
||||
|
|
@ -76,7 +78,7 @@ export default function Subscribe() {
|
|||
|
||||
<div
|
||||
onClick={() => signOut()}
|
||||
className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
|
||||
className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
|
||||
>
|
||||
Sign Out
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default function Index() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full">
|
||||
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
|
||||
<div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
|
||||
{activeCollection && (
|
||||
<div className="flex gap-3 items-center">
|
||||
|
|
@ -60,7 +60,7 @@ export default function Index() {
|
|||
style={{ color: activeCollection?.color }}
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
|
||||
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white w-full py-1 break-words hyphens-auto">
|
||||
{activeCollection?.name}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -116,19 +116,19 @@ export default function Index() {
|
|||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="text-gray-600 flex justify-between items-end gap-5">
|
||||
<div className="text-black dark:text-white flex justify-between items-end gap-5">
|
||||
<p>{activeCollection?.description}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<div
|
||||
onClick={() => setSortDropdown(!sortDropdown)}
|
||||
id="sort-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faSort}
|
||||
id="sort-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -144,13 +144,13 @@ export default function Index() {
|
|||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id="expand-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
id="expand-dropdown"
|
||||
title="More"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
{expandDropdown ? (
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@ export default function Collections() {
|
|||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
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 dark:text-sky-300 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
|
||||
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
|
||||
All Collections
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -47,12 +47,12 @@ export default function Collections() {
|
|||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id="expand-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsis}
|
||||
id="expand-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -86,12 +86,12 @@ export default function Collections() {
|
|||
<div
|
||||
onClick={() => setSortDropdown(!sortDropdown)}
|
||||
id="sort-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faSort}
|
||||
id="sort-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ export default function Collections() {
|
|||
})}
|
||||
|
||||
<div
|
||||
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
|
||||
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
|
||||
onClick={() => {
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
|
|
@ -120,12 +120,12 @@ export default function Collections() {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<p className="text-sky-900 group-hover:opacity-0 duration-100">
|
||||
<p className="text-black dark:text-white group-hover:opacity-0 duration-100">
|
||||
New Collection
|
||||
</p>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlus}
|
||||
className="w-8 h-8 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-300 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@ import React from "react";
|
|||
export default function EmailConfirmaion() {
|
||||
return (
|
||||
<CenteredForm>
|
||||
<div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-sky-800">
|
||||
<p className="text-center text-xl font-bold mb-2 text-black">
|
||||
<div className="p-4 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 text-black dark:text-white dark:bg-neutral-800">
|
||||
<p className="text-center text-xl font-bold mb-2">
|
||||
Please check your Email
|
||||
</p>
|
||||
<p>A sign in link has been sent to your email address.</p>
|
||||
<p>You can safely close this page.</p>
|
||||
|
||||
<hr className="my-5" />
|
||||
<hr className="my-5 dark:border-neutral-700" />
|
||||
|
||||
<p className="text-sm text-gray-500 ">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
If you didn't receive anything, go to the{" "}
|
||||
<Link href="/forgot" className="font-bold">
|
||||
<Link href="/forgot" className="font-bold underline">
|
||||
Password Recovery
|
||||
</Link>{" "}
|
||||
page and enter your Email to resend the sign in link.
|
||||
|
|
|
|||
|
|
@ -83,9 +83,9 @@ export default function Dashboard() {
|
|||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
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 dark:text-sky-300 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
|
||||
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
|
||||
Dashboard
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -95,24 +95,28 @@ export default function Dashboard() {
|
|||
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="font-bold text-6xl text-sky-700">{numberOfLinks}</p>
|
||||
<p className="text-sky-900 text-xl">
|
||||
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
|
||||
{numberOfLinks}
|
||||
</p>
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
{numberOfLinks === 1 ? "Link" : "Links"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="font-bold text-6xl text-sky-700">
|
||||
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
|
||||
{collections.length}
|
||||
</p>
|
||||
<p className="text-sky-900 text-xl">
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
{collections.length === 1 ? "Collection" : "Collections"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="font-bold text-6xl text-sky-700">{tags.length}</p>
|
||||
<p className="text-sky-900 text-xl">
|
||||
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
|
||||
{tags.length}
|
||||
</p>
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
{tags.length === 1 ? "Tag" : "Tags"}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -129,15 +133,17 @@ export default function Dashboard() {
|
|||
onClick={() => {
|
||||
setLinkPinDisclosure(!linkPinDisclosure);
|
||||
}}
|
||||
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 dark:bg-neutral-700 duration-100 py-2 px-4 rounded-full"
|
||||
>
|
||||
<p className="text-sky-700 text-xl">Pinned Links</p>
|
||||
<p className="text-black dark:text-white text-xl">
|
||||
Pinned Links
|
||||
</p>
|
||||
|
||||
<div className="text-sky-700 flex items-center gap-2">
|
||||
<div className="text-black dark:text-white flex items-center gap-2">
|
||||
{linkPinDisclosure ? "Hide" : "Show"}
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className={`w-4 h-4 text-sky-300 ${
|
||||
className={`w-4 h-4 text-black dark:text-white ${
|
||||
linkPinDisclosure ? "rotate-reverse" : "rotate"
|
||||
}`}
|
||||
/>
|
||||
|
|
@ -163,11 +169,11 @@ export default function Dashboard() {
|
|||
</div>
|
||||
</Disclosure>
|
||||
) : (
|
||||
<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-700">
|
||||
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
|
||||
<p className="text-center text-2xl text-black dark:text-white">
|
||||
No Pinned Links
|
||||
</p>
|
||||
<p className="text-center text-sky-900 text-sm">
|
||||
<p className="text-center text-black dark:text-white text-sm">
|
||||
You can Pin Links by clicking on the three dots on each Link and
|
||||
clicking "Pin to Dashboard."
|
||||
</p>
|
||||
|
|
@ -182,13 +188,13 @@ export default function Dashboard() {
|
|||
}}
|
||||
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
|
||||
>
|
||||
<p className="text-sky-700 text-xl">Pinned Collections</p>
|
||||
<p className="text-black text-xl">Pinned Collections</p>
|
||||
|
||||
<div className="text-sky-700 flex items-center gap-2">
|
||||
<div className="text-black flex items-center gap-2">
|
||||
{collectionPinDisclosure ? "Hide" : "Show"}
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className={`w-4 h-4 text-sky-300 ${
|
||||
className={`w-4 h-4 text-black ${
|
||||
collectionPinDisclosure ? "rotate-reverse" : "rotate"
|
||||
}`}
|
||||
/>
|
||||
|
|
@ -219,13 +225,13 @@ export default function Dashboard() {
|
|||
}}
|
||||
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
|
||||
>
|
||||
<p className="text-sky-700 text-xl">Pinned Tags</p>
|
||||
<p className="text-black text-xl">Pinned Tags</p>
|
||||
|
||||
<div className="text-sky-700 flex items-center gap-2">
|
||||
<div className="text-black flex items-center gap-2">
|
||||
{tagPinDisclosure ? "Hide" : "Show"}
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className={`w-4 h-4 text-sky-300 ${
|
||||
className={`w-4 h-4 text-black ${
|
||||
tagPinDisclosure ? "rotate-reverse" : "rotate"
|
||||
}`}
|
||||
/>
|
||||
|
|
@ -244,7 +250,7 @@ export default function Dashboard() {
|
|||
<Link
|
||||
href={`/tags/${e.id}`}
|
||||
key={i}
|
||||
className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
|
||||
className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-black"
|
||||
>
|
||||
{e.name}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import SubmitButton from "@/components/SubmitButton";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { signIn } from "next-auth/react";
|
||||
import Image from "next/image";
|
||||
|
|
@ -40,27 +41,30 @@ export default function Forgot() {
|
|||
|
||||
return (
|
||||
<CenteredForm>
|
||||
<div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-black font-bold">Password Recovery</p>
|
||||
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-center text-black dark:text-white font-bold">
|
||||
Password Recovery
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-md text-black">
|
||||
<p className="text-md text-black dark:text-white">
|
||||
Enter your Email so we can send you a link to recover your account.
|
||||
Make sure to change your password in the profile settings
|
||||
afterwards.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
You wont get logged in if you haven't created an account yet.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Email
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
<TextInput
|
||||
type="email"
|
||||
placeholder="johnny@example.com"
|
||||
value={form.email}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -71,7 +75,10 @@ export default function Forgot() {
|
|||
loading={submitLoader}
|
||||
/>
|
||||
<div className="flex items-baseline gap-1 justify-center">
|
||||
<Link href={"/login"} className="block text-sky-700 font-bold">
|
||||
<Link
|
||||
href={"/login"}
|
||||
className="block text-black dark:text-white font-bold"
|
||||
>
|
||||
Go back
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export default function Links() {
|
|||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
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 dark:text-sky-300 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
|
||||
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
|
||||
All Links
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -35,12 +35,12 @@ export default function Links() {
|
|||
<div
|
||||
onClick={() => setSortDropdown(!sortDropdown)}
|
||||
id="sort-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faSort}
|
||||
id="sort-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import SubmitButton from "@/components/SubmitButton";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { signIn } from "next-auth/react";
|
||||
import Image from "next/image";
|
||||
|
|
@ -47,41 +48,41 @@ export default function Login() {
|
|||
|
||||
return (
|
||||
<CenteredForm text="Sign in to your account">
|
||||
<div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-black text-center font-bold">
|
||||
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
|
||||
<p className="text-2xl text-black dark:text-white text-center font-bold">
|
||||
Enter your credentials
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Username
|
||||
{emailEnabled ? "/Email" : undefined}
|
||||
{emailEnabled ? " or Email" : undefined}
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
<TextInput
|
||||
placeholder="johnny"
|
||||
value={form.username}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Password
|
||||
</p>
|
||||
|
||||
<input
|
||||
<TextInput
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
value={form.password}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
{emailEnabled && (
|
||||
<div className="w-fit ml-auto mt-1">
|
||||
<Link href={"/forgot"} className="text-gray-500 font-semibold">
|
||||
<Link
|
||||
href={"/forgot"}
|
||||
className="text-gray-500 dark:text-gray-400 font-semibold"
|
||||
>
|
||||
Forgot Password?
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -95,8 +96,11 @@ export default function Login() {
|
|||
loading={submitLoader}
|
||||
/>
|
||||
<div className="flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-gray-500">New here?</p>
|
||||
<Link href={"/register"} className="block text-sky-700 font-bold">
|
||||
<p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
|
||||
<Link
|
||||
href={"/register"}
|
||||
className="block text-black dark:text-white font-semibold"
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,9 +45,7 @@ export default function PublicCollections() {
|
|||
<div
|
||||
className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
|
||||
>
|
||||
<p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
|
||||
{data.name}
|
||||
</p>
|
||||
<p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
|
||||
|
||||
{data.description && (
|
||||
<>
|
||||
|
|
@ -64,7 +62,7 @@ export default function PublicCollections() {
|
|||
</div>
|
||||
|
||||
{/* <p className="text-center font-bold text-gray-500">
|
||||
List created with <span className="text-sky-700">Linkwarden.</span>
|
||||
List created with <span className="text-black">Linkwarden.</span>
|
||||
</p> */}
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import SubmitButton from "@/components/SubmitButton";
|
|||
import { signIn } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
|
|
@ -98,107 +99,103 @@ export default function Register() {
|
|||
: "Create a new account"
|
||||
}
|
||||
>
|
||||
<div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-black text-center font-bold">
|
||||
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
|
||||
<p className="text-2xl text-black dark:text-white text-center font-bold">
|
||||
Enter your details
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Display Name
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
<TextInput
|
||||
placeholder="Johnny"
|
||||
value={form.name}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{emailEnabled ? undefined : (
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Username
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
<TextInput
|
||||
placeholder="john"
|
||||
value={form.username}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Email
|
||||
</p>
|
||||
|
||||
<input
|
||||
<TextInput
|
||||
type="email"
|
||||
placeholder="johnny@example.com"
|
||||
value={form.email}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Password
|
||||
</p>
|
||||
|
||||
<input
|
||||
<TextInput
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
value={form.password}
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Confirm Password
|
||||
</p>
|
||||
|
||||
<input
|
||||
<TextInput
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
value={form.passwordConfirmation}
|
||||
onChange={(e) =>
|
||||
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-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
By signing up, you agree to our{" "}
|
||||
<Link href="https://linkwarden.app/tos" className="font-semibold">
|
||||
<Link
|
||||
href="https://linkwarden.app/tos"
|
||||
className="font-semibold underline"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link
|
||||
href="https://linkwarden.app/privacy-policy"
|
||||
className="font-semibold"
|
||||
className="font-semibold underline"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Need help?{" "}
|
||||
<Link
|
||||
href="mailto:support@linkwarden.app"
|
||||
className="font-semibold"
|
||||
className="font-semibold underline"
|
||||
>
|
||||
Get in touch
|
||||
</Link>
|
||||
|
|
@ -214,8 +211,13 @@ export default function Register() {
|
|||
loading={submitLoader}
|
||||
/>
|
||||
<div className="flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-gray-500">Already have an account?</p>
|
||||
<Link href={"/login"} className="block text-sky-700 font-bold">
|
||||
<p className="w-fit text-gray-500 dark:text-gray-400">
|
||||
Already have an account?
|
||||
</p>
|
||||
<Link
|
||||
href={"/login"}
|
||||
className="block text-black dark:text-white font-bold"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ export default function Links() {
|
|||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faSearch}
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
|
||||
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
|
||||
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
|
||||
Search Results
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -53,12 +53,12 @@ export default function Links() {
|
|||
<div
|
||||
onClick={() => setFilterDropdown(!filterDropdown)}
|
||||
id="filter-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFilter}
|
||||
id="filter-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -75,12 +75,12 @@ export default function Links() {
|
|||
<div
|
||||
onClick={() => setSortDropdown(!sortDropdown)}
|
||||
id="sort-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faSort}
|
||||
id="sort-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -99,9 +99,9 @@ export default function Links() {
|
|||
return <LinkCard key={i} link={e} count={i} />;
|
||||
})
|
||||
) : (
|
||||
<p className="text-sky-900">
|
||||
<p className="text-black dark:text-white">
|
||||
Nothing found.{" "}
|
||||
<span className="text-sky-700 font-bold text-xl" title="Shruggie">
|
||||
<span className="font-bold text-xl" title="Shruggie">
|
||||
¯\_(ツ)_/¯
|
||||
</span>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,11 @@ export default function Subscribe() {
|
|||
<CenteredForm
|
||||
text={`${
|
||||
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
|
||||
}-Day free trial, then $
|
||||
${process.env.NEXT_PUBLIC_PRICING}/month afterwards`}
|
||||
}-Day free trial, then $${
|
||||
process.env.NEXT_PUBLIC_PRICING
|
||||
}/month afterwards`}
|
||||
>
|
||||
<div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
|
||||
<div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] dark:border-neutral-700 w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
|
||||
<p className="text-2xl text-center font-bold">
|
||||
Subscribe to Linkwarden!
|
||||
</p>
|
||||
|
|
@ -56,7 +57,7 @@ export default function Subscribe() {
|
|||
|
||||
<div
|
||||
onClick={() => signOut()}
|
||||
className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
|
||||
className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
|
||||
>
|
||||
Sign Out
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ export default function Index() {
|
|||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
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 dark:text-sky-300"
|
||||
/>
|
||||
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
|
||||
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
|
||||
{activeTag?.name}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -48,12 +48,12 @@ export default function Index() {
|
|||
<div
|
||||
onClick={() => setSortDropdown(!sortDropdown)}
|
||||
id="sort-dropdown"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
|
||||
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faSort}
|
||||
id="sort-dropdown"
|
||||
className="w-5 h-5 text-gray-500"
|
||||
className="w-5 h-5 text-gray-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 671 B After Width: | Height: | Size: 651 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -136,11 +136,6 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 1) 90%
|
||||
);
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
|
|
@ -151,11 +146,69 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
/* For light mode */
|
||||
.link-banner::after {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 1) 90%
|
||||
);
|
||||
}
|
||||
.link-banner::before {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 1) 90%
|
||||
);
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
.banner-dark-mode .link-banner::after {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
#171717 90%
|
||||
);
|
||||
}
|
||||
.banner-dark-mode .link-banner::before {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgba(255, 255, 255, 0),
|
||||
#171717 90%
|
||||
);
|
||||
}
|
||||
|
||||
/* Theme */
|
||||
@layer base {
|
||||
body {
|
||||
@apply dark:bg-neutral-900 bg-white dark:text-white;
|
||||
}
|
||||
}
|
||||
|
||||
/* react-select */
|
||||
@layer components {
|
||||
.react-select-container .react-select__control {
|
||||
@apply dark:bg-neutral-950 dark:border-neutral-700 dark:hover:border-neutral-500;
|
||||
}
|
||||
|
||||
.react-select-container {
|
||||
@apply dark:border-neutral-700;
|
||||
}
|
||||
|
||||
.react-select-container .react-select__menu {
|
||||
@apply dark:bg-neutral-900 dark:border-neutral-700 border;
|
||||
}
|
||||
|
||||
.react-select-container .react-select__option {
|
||||
@apply dark:hover:bg-neutral-800;
|
||||
}
|
||||
|
||||
.react-select-container .react-select__input-container,
|
||||
.react-select-container .react-select__single-value {
|
||||
@apply dark:text-white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./app/**/*.{js,ts,jsx,tsx}",
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
|
|
@ -9,8 +10,5 @@ module.exports = {
|
|||
// For the "layouts" directory
|
||||
"./layouts/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3558,6 +3558,11 @@ next-auth@^4.22.1:
|
|||
preact-render-to-string "^5.1.19"
|
||||
uuid "^8.3.2"
|
||||
|
||||
next-themes@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
|
||||
integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
|
||||
|
||||
next@13.4.12:
|
||||
version "13.4.12"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue