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

many coloring changes and improvements

Browse Source
This commit is contained in:
Daniel
2023-08-11 01:11:02 -04:00
parent 1eb1467a02
commit 7da89a35e2
37 changed files with 189 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modal/Collection/CollectionInfo.tsx
+4 -6
View File
@@ -60,7 +60,7 @@ 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 dark:text-sky-400 mb-2">
<p className="text-sm text-black dark:text-white mb-2">
Name
<RequiredBadge />
</p>
@@ -76,7 +76,7 @@ export default function CollectionInfo({
/>
<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 dark:text-sky-400 mb-2">
<p className="text-sm w-full text-black dark:text-white mb-2">
Icon Color
</p>
<div style={{ color: collection.color }}>
@@ -86,7 +86,7 @@ export default function CollectionInfo({
/>
</div>
<div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 dark:text-sky-400 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 duration-100"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
}
@@ -103,9 +103,7 @@ export default function CollectionInfo({
</div>
<div className="w-full">
<p className="text-sm text-sky-700 dark:text-sky-400 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 dark:bg-sky-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
placeholder="The purpose of this Collection..."
components/Modal/Collection/DeleteCollection.tsx
+4 -4
View File
@@ -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 dark:text-sky-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,9 +81,9 @@ export default function DeleteCollection({
</div>
<div className="flex flex-col gap-3">
<p className="text-sky-900 dark:text-sky-300 select-none text-center">
<p className="text-black dark:text-white select-none text-center">
To confirm, type &quot;
<span className="font-bold text-sky-700">{collection.name}</span>
<span className="font-bold text-black">{collection.name}</span>
&quot; in the box below:
</p>
@@ -98,7 +98,7 @@ export default function DeleteCollection({
</div>
</>
) : (
<p className="text-gray-500 dark:text-sky-500">
<p className="text-gray-500 dark:text-white">
Click the button below to leave the current collection:
</p>
)}
components/Modal/Collection/TeamManagement.tsx
+17 -17
View File
@@ -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 dark:text-sky-300">Make Public</p>
<p className="text-sm text-black dark:text-white">Make Public</p>
<Checkbox
label="Make this a public collection."
@@ -127,7 +127,7 @@ export default function TeamManagement({
}
/>
<p className="text-gray-500 dark:text-sky-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 +135,7 @@ export default function TeamManagement({
{collection.isPublic ? (
<div>
<p className="text-sm text-sky-700 dark:text-sky-300 mb-2">
<p className="text-sm text-black dark:text-white mb-2">
Public Link (Click to copy)
</p>
<div
@@ -159,7 +159,7 @@ export default function TeamManagement({
{permissions === true && (
<>
<p className="text-sm text-sky-700 dark:text-sky-300">
<p className="text-sm text-black dark:text-white">
Member Management
</p>
@@ -205,7 +205,7 @@ export default function TeamManagement({
{collection?.members[0]?.user && (
<>
<p className="text-center text-gray-500 dark:text-sky-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">
@@ -220,7 +220,7 @@ export default function TeamManagement({
{permissions === true && (
<FontAwesomeIcon
icon={faClose}
className="absolute right-2 top-2 text-gray-500 dark:text-sky-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(
@@ -241,23 +241,23 @@ export default function TeamManagement({
className="border-[3px]"
/>
<div>
<p className="text-sm font-bold text-sky-700 dark:text-sky-300">
<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-black">@{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 dark:text-sky-300 ${
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 dark:text-sky-500 mb-2">
<p className="text-xs text-gray-500 dark:text-white mb-2">
(Click to toggle.)
</p>
)}
@@ -267,7 +267,7 @@ export default function TeamManagement({
!e.canCreate &&
!e.canUpdate &&
!e.canDelete ? (
<p className="text-sm text-gray-500 dark:text-sky-500">
<p className="text-sm text-gray-500 dark:text-white">
Has no permissions.
</p>
) : (
@@ -307,7 +307,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@@ -352,7 +352,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@@ -397,7 +397,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@@ -427,7 +427,7 @@ export default function TeamManagement({
/>
<div>
<div className="flex items-center gap-1">
<p className="text-sm font-bold text-sky-700 dark:text-sky-400">
<p className="text-sm font-bold text-black dark:text-white">
{collectionOwner.name}
</p>
<FontAwesomeIcon
@@ -435,13 +435,13 @@ export default function TeamManagement({
className="w-3 h-3 text-yellow-500"
/>
</div>
<p className="text-sky-900 dark:text-sky-300">
<p className="text-black dark:text-white">
@{collectionOwner.username}
</p>
</div>
</div>
<div className="flex flex-col justify-center min-w-[10rem] text-sky-700 dark:text-sky-400">
<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>
components/Modal/Collection/index.tsx
+10 -8
View File
@@ -46,17 +46,19 @@ export default function CollectionModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-700 dark:text-sky-400 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 dark:text-sky-400">
<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 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"
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
}
>
Collection Info
@@ -65,8 +67,8 @@ export default function CollectionModal({
<Tab
className={({ selected }) =>
selected
? "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"
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
}
>
{isOwner ? "Share & Collaborate" : "View Team"}
@@ -74,8 +76,8 @@ export default function CollectionModal({
<Tab
className={({ selected }) =>
selected
? "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"
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
}
>
{isOwner ? "Delete Collection" : "Leave Collection"}
components/Modal/Link/AddOrEditLink.tsx
+5 -9
View File
@@ -126,7 +126,7 @@ export default function AddOrEditLink({
{method === "CREATE" ? (
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2 font-bold">
<p className="text-sm text-black dark:text-white mb-2 font-bold">
Address (URL)
<RequiredBadge />
</p>
@@ -142,9 +142,7 @@ export default function AddOrEditLink({
<hr className="dark:border-sky-800" />
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Collection
</p>
<p className="text-sm text-black dark:text-white mb-2">Collection</p>
<CollectionSelection
onChange={setCollection}
// defaultValue={{
@@ -163,7 +161,7 @@ export default function AddOrEditLink({
</div>
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 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) => {
@@ -173,7 +171,7 @@ export default function AddOrEditLink({
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Name</p>
<p className="text-sm text-black dark:text-white mb-2">Name</p>
<input
value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })}
@@ -184,9 +182,7 @@ export default function AddOrEditLink({
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 dark:text-sky-400 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 })}
components/Modal/Link/LinkDetails.tsx
+11 -11
View File
@@ -151,14 +151,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 dark:text-sky-300 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 dark:text-sky-400 break-all hover:underline cursor-pointer w-fit"
className="text-sm text-gray-500 dark:text-white break-all hover:underline cursor-pointer w-fit"
>
{url ? url.host : link.url}
</Link>
@@ -176,7 +176,7 @@ export default function LinkDetails({ link }: Props) {
/>
<p
title={collection?.name}
className="text-sky-900 dark:text-sky-500 text-lg truncate max-w-[12rem]"
className="text-black dark:text-white text-lg truncate max-w-[12rem]"
>
{collection?.name}
</p>
@@ -185,7 +185,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 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
>
{e.name}
</p>
@@ -194,19 +194,19 @@ export default function LinkDetails({ link }: Props) {
</div>
{link.description && (
<>
<div className="text-gray-500 dark:text-sky-400 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
<div className="text-gray-500 dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
{link.description}
</div>
</>
)}
<div className="flex justify-between items-center">
<div className="flex items-center gap-1 text-gray-500 dark:text-sky-400">
<div className="flex items-center gap-1 text-gray-500 dark:text-white">
<FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
<p>Archived Formats:</p>
</div>
<div
className="flex items-center gap-1 text-gray-500 dark:text-sky-400"
className="flex items-center gap-1 text-gray-500 dark:text-white"
title={"Created at: " + formattedDate}
>
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -220,10 +220,10 @@ export default function LinkDetails({ link }: Props) {
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div>
<p className="text-gray-500 dark:text-sky-400">Screenshot</p>
<p className="text-gray-500 dark:text-white">Screenshot</p>
</div>
<div className="flex text-sky-400 gap-1">
<div className="flex text-black gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.png`}
target="_blank"
@@ -254,10 +254,10 @@ export default function LinkDetails({ link }: Props) {
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div>
<p className="text-gray-500 dark:text-sky-400">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 gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
target="_blank"
components/Modal/Link/index.tsx
+4 -2
View File
@@ -33,10 +33,12 @@ export default function LinkModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-700 dark:text-sky-300 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 dark:text-sky-300 ${
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"
}`}
>
components/Modal/User/ChangePassword.tsx
+2 -2
View File
@@ -81,7 +81,7 @@ 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 dark:text-sky-400">New Password</p>
<p className="text-sm text-black dark:text-white">New Password</p>
<input
value={newPassword}
@@ -90,7 +90,7 @@ export default function ChangePassword({
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
/>
<p className="text-sm text-sky-700 dark:text-sky-400">
<p className="text-sm text-black dark:text-white">
Confirm New Password
</p>
components/Modal/User/PrivacySettings.tsx
+5 -5
View File
@@ -119,7 +119,7 @@ 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 mb-2">Profile Visibility</p>
<Checkbox
label="Make profile private"
@@ -134,7 +134,7 @@ export default function PrivacySettings({
{user.isPrivate && (
<div>
<p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
<p className="text-sm text-black my-2">Whitelisted Users</p>
<p className="text-gray-500 text-sm mb-3">
Please provide the Username of the users you wish to grant
visibility to your profile. Separated by comma.
@@ -152,7 +152,7 @@ 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 mb-2">Import/Export Data</p>
<div className="flex gap-2">
<div
@@ -162,7 +162,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 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
>
Import From
</div>
@@ -196,7 +196,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 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
Export Data
</div>
</Link>
components/Modal/User/ProfileSettings.tsx
+7 -9
View File
@@ -102,7 +102,7 @@ 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 dark:text-sky-400 mb-2 text-center">
<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">
@@ -129,7 +129,7 @@ export default function ProfileSettings({
<label
htmlFor="upload-photo"
title="PNG or JPG (Max: 3MB)"
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
>
Browse...
<input
@@ -147,7 +147,7 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3">
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
<p className="text-sm text-black dark:text-white mb-2">
Display Name
</p>
<input
@@ -159,9 +159,7 @@ export default function ProfileSettings({
</div>
<div>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Username
</p>
<p className="text-sm text-black dark:text-white mb-2">Username</p>
<input
type="text"
value={user.username || ""}
@@ -172,7 +170,7 @@ export default function ProfileSettings({
{emailEnabled ? (
<div>
<p className="text-sm text-sky-700 mb-2">Email</p>
<p className="text-sm text-black mb-2">Email</p>
<input
type="text"
value={user.email || ""}
@@ -192,10 +190,10 @@ export default function ProfileSettings({
{/* <hr /> TODO: Export functionality
<p className="text-sky-700">Data Settings</p>
<p className="text-black">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">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
Export Data
</div>
</div> */}
components/Modal/User/index.tsx
+4 -4
View File
@@ -27,11 +27,11 @@ 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 dark:text-sky-300">
<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 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md 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-sky-700 rounded-md duration-100 outline-none"
}
>
@@ -41,7 +41,7 @@ export default function UserModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md 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-sky-600 rounded-md duration-100 outline-none"
}
>
@@ -51,7 +51,7 @@ export default function UserModal({
<Tab
className={({ selected }) =>
selected
? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md 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-sky-600 rounded-md duration-100 outline-none"
}
>