finished working on dark mode
This commit is contained in:
Gisbi
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user