finished working on dark mode
This commit is contained in:
Gisbi
parent
93ebc09faf
commit
cff3b97ab7
|
|
@ -50,7 +50,7 @@ export default function DeleteCollection({
|
|||
<p className="text-red-500 font-bold text-center">Warning!</p>
|
||||
|
||||
<div className="max-h-[20rem] overflow-y-auto">
|
||||
<div className="text-gray-500">
|
||||
<div className="text-gray-500 dark:text-sky-500">
|
||||
<p>
|
||||
Please note that deleting the collection will permanently remove
|
||||
all its contents, including the following:
|
||||
|
|
@ -81,7 +81,7 @@ export default function DeleteCollection({
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-sky-900 select-none text-center">
|
||||
<p className="text-sky-900 dark:text-sky-300 select-none text-center">
|
||||
To confirm, type "
|
||||
<span className="font-bold text-sky-700">{collection.name}</span>
|
||||
" in the box below:
|
||||
|
|
@ -93,12 +93,12 @@ export default function DeleteCollection({
|
|||
onChange={(e) => setInputField(e.target.value)}
|
||||
type="text"
|
||||
placeholder={`Type "${collection.name}" Here.`}
|
||||
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-gray-500">
|
||||
<p className="text-gray-500 dark:text-sky-500">
|
||||
Click the button below to leave the current collection:
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ export default function TeamManagement({
|
|||
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
|
||||
{permissions === true && (
|
||||
<>
|
||||
<p className="text-sm text-sky-700">Make Public</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-300">Make Public</p>
|
||||
|
||||
<Checkbox
|
||||
label="Make this a public collection."
|
||||
|
|
@ -127,7 +127,7 @@ export default function TeamManagement({
|
|||
}
|
||||
/>
|
||||
|
||||
<p className="text-gray-500 text-sm">
|
||||
<p className="text-gray-500 dark:text-sky-500 text-sm">
|
||||
This will let <b>Anyone</b> to view this collection.
|
||||
</p>
|
||||
</>
|
||||
|
|
@ -135,7 +135,7 @@ export default function TeamManagement({
|
|||
|
||||
{collection.isPublic ? (
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 mb-2">
|
||||
<p className="text-sm text-sky-700 dark:text-sky-300 mb-2">
|
||||
Public Link (Click to copy)
|
||||
</p>
|
||||
<div
|
||||
|
|
@ -148,7 +148,7 @@ export default function TeamManagement({
|
|||
console.log(err);
|
||||
}
|
||||
}}
|
||||
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
|
||||
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
|
||||
>
|
||||
{publicCollectionURL}
|
||||
</div>
|
||||
|
|
@ -159,7 +159,9 @@ export default function TeamManagement({
|
|||
|
||||
{permissions === true && (
|
||||
<>
|
||||
<p className="text-sm text-sky-700">Member Management</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-300">
|
||||
Member Management
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
|
|
@ -181,7 +183,7 @@ export default function TeamManagement({
|
|||
}
|
||||
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"
|
||||
className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
|
||||
<div
|
||||
|
|
@ -193,7 +195,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 dark:bg-sky-400 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
|
||||
</div>
|
||||
|
|
@ -203,7 +205,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-sky-500 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">
|
||||
|
|
@ -218,7 +220,7 @@ export default function TeamManagement({
|
|||
{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-sky-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
|
||||
title="Remove Member"
|
||||
onClick={() => {
|
||||
const updatedMembers = collection.members.filter(
|
||||
|
|
@ -239,7 +241,7 @@ export default function TeamManagement({
|
|||
className="border-[3px]"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-700">
|
||||
<p className="text-sm font-bold text-sky-700 dark:text-sky-300">
|
||||
{e.user.name}
|
||||
</p>
|
||||
<p className="text-sky-900">@{e.user.username}</p>
|
||||
|
|
@ -248,14 +250,14 @@ export default function TeamManagement({
|
|||
<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-sky-700 dark:text-sky-300 ${
|
||||
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-sky-500 mb-2">
|
||||
(Click to toggle.)
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -265,7 +267,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-sky-500">
|
||||
Has no permissions.
|
||||
</p>
|
||||
) : (
|
||||
|
|
@ -305,7 +307,7 @@ export default function TeamManagement({
|
|||
}}
|
||||
/>
|
||||
<span
|
||||
className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
|
||||
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
|
||||
permissions === true
|
||||
? "hover:bg-slate-200 duration-75"
|
||||
: ""
|
||||
|
|
@ -350,7 +352,7 @@ export default function TeamManagement({
|
|||
}}
|
||||
/>
|
||||
<span
|
||||
className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
|
||||
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
|
||||
permissions === true
|
||||
? "hover:bg-slate-200 duration-75"
|
||||
: ""
|
||||
|
|
@ -395,7 +397,7 @@ export default function TeamManagement({
|
|||
}}
|
||||
/>
|
||||
<span
|
||||
className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
|
||||
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
|
||||
permissions === true
|
||||
? "hover:bg-slate-200 duration-75"
|
||||
: ""
|
||||
|
|
@ -415,17 +417,17 @@ 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-sky-800 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
|
||||
title={`'@${collectionOwner.username}' is the owner of this collection.`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ProfilePhoto
|
||||
src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
|
||||
className="border-[3px]"
|
||||
className="border-[3px] dark:border-sky-800"
|
||||
/>
|
||||
<div>
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="text-sm font-bold text-sky-700">
|
||||
<p className="text-sm font-bold text-sky-700 dark:text-sky-400">
|
||||
{collectionOwner.name}
|
||||
</p>
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -433,13 +435,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-sky-900 dark:text-sky-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-sky-700 dark:text-sky-400">
|
||||
<p className={`font-bold text-sm`}>Permissions</p>
|
||||
<p>Full Access (Owner)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,8 +55,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-sky-900 duration-100 rounded-md outline-none"
|
||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
|
||||
}
|
||||
>
|
||||
Collection Info
|
||||
|
|
@ -65,8 +65,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-sky-900 duration-100 rounded-md outline-none"
|
||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
|
||||
}
|
||||
>
|
||||
{isOwner ? "Share & Collaborate" : "View Team"}
|
||||
|
|
@ -74,8 +74,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-sky-900 duration-100 rounded-md outline-none"
|
||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
|
||||
}
|
||||
>
|
||||
{isOwner ? "Delete Collection" : "Leave Collection"}
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue