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

finished working on dark mode

This commit is contained in:
Gisbi 2023-08-07 11:44:09 +02:00
parent 93ebc09faf
commit cff3b97ab7
3 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,7 @@ export default function DeleteCollection({
<p className="text-red-500 font-bold text-center">Warning!</p> <p className="text-red-500 font-bold text-center">Warning!</p>
<div className="max-h-[20rem] overflow-y-auto"> <div className="max-h-[20rem] overflow-y-auto">
<div className="text-gray-500"> <div className="text-gray-500 dark:text-sky-500">
<p> <p>
Please note that deleting the collection will permanently remove Please note that deleting the collection will permanently remove
all its contents, including the following: all its contents, including the following:
@ -81,7 +81,7 @@ export default function DeleteCollection({
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<p className="text-sky-900 select-none text-center"> <p className="text-sky-900 dark:text-sky-300 select-none text-center">
To confirm, type &quot; To confirm, type &quot;
<span className="font-bold text-sky-700">{collection.name}</span> <span className="font-bold text-sky-700">{collection.name}</span>
&quot; in the box below: &quot; in the box below:
@ -93,12 +93,12 @@ export default function DeleteCollection({
onChange={(e) => setInputField(e.target.value)} onChange={(e) => setInputField(e.target.value)}
type="text" type="text"
placeholder={`Type "${collection.name}" Here.`} placeholder={`Type "${collection.name}" Here.`}
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-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> </div>
</> </>
) : ( ) : (
<p className="text-gray-500"> <p className="text-gray-500 dark:text-sky-500">
Click the button below to leave the current collection: Click the button below to leave the current collection:
</p> </p>
)} )}

50
components/Modal/Collection/TeamManagement.tsx
View File

@ -117,7 +117,7 @@ export default function TeamManagement({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80"> <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{permissions === true && ( {permissions === true && (
<> <>
<p className="text-sm text-sky-700">Make Public</p> <p className="text-sm text-sky-700 dark:text-sky-300">Make Public</p>
<Checkbox <Checkbox
label="Make this a public collection." 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. This will let <b>Anyone</b> to view this collection.
</p> </p>
</> </>
@ -135,7 +135,7 @@ export default function TeamManagement({
{collection.isPublic ? ( {collection.isPublic ? (
<div> <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) Public Link (Click to copy)
</p> </p>
<div <div
@ -148,7 +148,7 @@ export default function TeamManagement({
console.log(err); console.log(err);
} }
}} }}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-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} {publicCollectionURL}
</div> </div>
@ -159,7 +159,9 @@ export default function TeamManagement({
{permissions === true && ( {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"> <div className="flex items-center gap-2">
<input <input
@ -181,7 +183,7 @@ export default function TeamManagement({
} }
type="text" type="text"
placeholder="Username (without the '@')" placeholder="Username (without the '@')"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-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 <div
@ -193,7 +195,7 @@ export default function TeamManagement({
setMemberState 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" /> <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
</div> </div>
@ -203,7 +205,7 @@ export default function TeamManagement({
{collection?.members[0]?.user && ( {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.) (All Members have <b>Read</b> access to this collection.)
</p> </p>
<div className="flex flex-col gap-3 rounded-md"> <div className="flex flex-col gap-3 rounded-md">
@ -218,7 +220,7 @@ export default function TeamManagement({
{permissions === true && ( {permissions === true && (
<FontAwesomeIcon <FontAwesomeIcon
icon={faClose} 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" title="Remove Member"
onClick={() => { onClick={() => {
const updatedMembers = collection.members.filter( const updatedMembers = collection.members.filter(
@ -239,7 +241,7 @@ export default function TeamManagement({
className="border-[3px]" className="border-[3px]"
/> />
<div> <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} {e.user.name}
</p> </p>
<p className="text-sky-900">@{e.user.username}</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 className="flex sm:block items-center gap-5 min-w-[10rem]">
<div> <div>
<p <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 === true ? "" : "mb-2"
}`} }`}
> >
Permissions Permissions
</p> </p>
{permissions === true && ( {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.) (Click to toggle.)
</p> </p>
)} )}
@ -265,7 +267,7 @@ export default function TeamManagement({
!e.canCreate && !e.canCreate &&
!e.canUpdate && !e.canUpdate &&
!e.canDelete ? ( !e.canDelete ? (
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500 dark:text-sky-500">
Has no permissions. Has no permissions.
</p> </p>
) : ( ) : (
@ -305,7 +307,7 @@ export default function TeamManagement({
}} }}
/> />
<span <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 permissions === true
? "hover:bg-slate-200 duration-75" ? "hover:bg-slate-200 duration-75"
: "" : ""
@ -350,7 +352,7 @@ export default function TeamManagement({
}} }}
/> />
<span <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 permissions === true
? "hover:bg-slate-200 duration-75" ? "hover:bg-slate-200 duration-75"
: "" : ""
@ -395,7 +397,7 @@ export default function TeamManagement({
}} }}
/> />
<span <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 permissions === true
? "hover:bg-slate-200 duration-75" ? "hover:bg-slate-200 duration-75"
: "" : ""
@ -415,17 +417,17 @@ export default function TeamManagement({
)} )}
<div <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.`} title={`'@${collectionOwner.username}' is the owner of this collection.`}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ProfilePhoto <ProfilePhoto
src={`/api/avatar/${collection.ownerId}?${Date.now()}`} src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
className="border-[3px]" className="border-[3px] dark:border-sky-800"
/> />
<div> <div>
<div className="flex items-center gap-1"> <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} {collectionOwner.name}
</p> </p>
<FontAwesomeIcon <FontAwesomeIcon
@ -433,13 +435,15 @@ export default function TeamManagement({
className="w-3 h-3 text-yellow-500" className="w-3 h-3 text-yellow-500"
/> />
</div> </div>
<p className="text-sky-900">@{collectionOwner.username}</p> <p className="text-sky-900 dark:text-sky-300">
@{collectionOwner.username}
</p>
</div> </div>
</div> </div>
<div className="flex flex-col justify-center min-w-[10rem]"> <div className="flex flex-col justify-center min-w-[10rem] text-sky-700 dark:text-sky-400">
<p className={`font-bold text-sm text-sky-700`}>Permissions</p> <p className={`font-bold text-sm`}>Permissions</p>
<p className="text-sky-700">Full Access (Owner)</p> <p>Full Access (Owner)</p>
</div> </div>
</div> </div>

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

@ -55,8 +55,8 @@ export default function CollectionModal({
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
selected selected
? "px-2 py-1 bg-sky-200 duration-100 rounded-md 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 rounded-md duration-100 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 Collection Info
@ -65,8 +65,8 @@ export default function CollectionModal({
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
selected selected
? "px-2 py-1 bg-sky-200 duration-100 rounded-md 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 rounded-md duration-100 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"} {isOwner ? "Share & Collaborate" : "View Team"}
@ -74,8 +74,8 @@ export default function CollectionModal({
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
selected selected
? "px-2 py-1 bg-sky-200 duration-100 rounded-md 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 rounded-md duration-100 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"} {isOwner ? "Delete Collection" : "Leave Collection"}