confirmed dark color
This commit is contained in:
Daniel
parent
5d016068c7
commit
1eb1467a02
|
|
@ -25,13 +25,15 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
|
|||
return (
|
||||
<ClickAwayHandler
|
||||
onClickOutside={onClickOutside}
|
||||
className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-blue-925 rounded-md flex flex-col z-20`}
|
||||
className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-sky-900 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 dark:text-sky-400 select-none">{e.name}</p>
|
||||
<p className="text-sky-900 dark:text-sky-400 select-none">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -72,11 +72,13 @@ export default function CollectionInfo({
|
|||
}
|
||||
type="text"
|
||||
placeholder="e.g. Example Collection"
|
||||
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"
|
||||
className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 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 dark:text-sky-400 mb-2">Icon Color</p>
|
||||
<p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">
|
||||
Icon Color
|
||||
</p>
|
||||
<div style={{ color: collection.color }}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
|
|
@ -101,9 +103,11 @@ 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-sky-700 dark:text-sky-400 mb-2">
|
||||
Description
|
||||
</p>
|
||||
<textarea
|
||||
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-blue-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
|
||||
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..."
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ 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 dark:border-sky-800 dark:bg-blue-950 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-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</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 dark:border-sky-800 dark:bg-blue-950 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-sky-950 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
|
||||
>
|
||||
{publicCollectionURL}
|
||||
</div>
|
||||
|
|
@ -183,7 +183,7 @@ export default function TeamManagement({
|
|||
}
|
||||
type="text"
|
||||
placeholder="Username (without the '@')"
|
||||
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"
|
||||
className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -135,14 +135,16 @@ export default function AddOrEditLink({
|
|||
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 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<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-sky-700 dark:text-sky-400 mb-2">
|
||||
Collection
|
||||
</p>
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
// defaultValue={{
|
||||
|
|
@ -177,12 +179,14 @@ export default function AddOrEditLink({
|
|||
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 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 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 dark:text-sky-400 mb-2">Description</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
|
||||
Description
|
||||
</p>
|
||||
<textarea
|
||||
value={link.description}
|
||||
onChange={(e) => setLink({ ...link, description: e.target.value })}
|
||||
|
|
@ -191,7 +195,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 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-blue-950"
|
||||
className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-sky-950"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -131,7 +131,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 dark:border-sky-800 bg-white dark:bg-blue-950 aspect-square"
|
||||
className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-sky-950 aspect-square"
|
||||
draggable="false"
|
||||
onLoad={(e) => {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -88,16 +88,18 @@ export default function ChangePassword({
|
|||
onChange={(e) => setNewPassword1(e.target.value)}
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
className="w-full 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"
|
||||
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">Confirm New Password</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-400">
|
||||
Confirm New Password
|
||||
</p>
|
||||
|
||||
<input
|
||||
value={newPassword2}
|
||||
onChange={(e) => setNewPassword2(e.target.value)}
|
||||
type="password"
|
||||
placeholder="••••••••••••••"
|
||||
className="w-full 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"
|
||||
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"
|
||||
/>
|
||||
|
||||
<SubmitButton
|
||||
|
|
|
|||
|
|
@ -102,7 +102,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 dark:text-sky-400 mb-2 text-center">Profile Photo</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-400 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}
|
||||
|
|
@ -145,22 +147,26 @@ 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">Display Name</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
|
||||
Display Name
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={user.name}
|
||||
onChange={(e) => setUser({ ...user, name: e.target.value })}
|
||||
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Username</p>
|
||||
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
|
||||
Username
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={user.username || ""}
|
||||
onChange={(e) => setUser({ ...user, username: e.target.value })}
|
||||
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
|
|||
onClickOutside={toggleModal}
|
||||
className={`m-auto ${className}`}
|
||||
>
|
||||
<div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-blue-950">
|
||||
<div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-sky-950">
|
||||
<div
|
||||
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
|
||||
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 z-20 p-2"
|
||||
|
|
|
|||
|
|
@ -64,17 +64,17 @@ export default function Navbar() {
|
|||
<ToggleDarkMode />
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-blue-950 cursor-pointer"
|
||||
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-sky-900 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-sky-950 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] dark:border-blue-800"
|
||||
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px] dark:border-sky-800"
|
||||
/>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default function Search() {
|
|||
router.push("/search/" + encodeURIComponent(searchQuery))
|
||||
}
|
||||
autoFocus={searchBox}
|
||||
className="border border-sky-100 dark:border-sky-800 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 dark:bg-blue-950"
|
||||
className="border border-sky-100 dark:border-sky-800 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 dark:bg-sky-950"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gray-100 dark:bg-blue-925 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-blue-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
|
||||
className={`bg-gray-100 dark:bg-sky-900 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-sky-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
|
||||
>
|
||||
<div className="flex justify-center gap-2 mt-2">
|
||||
<Link
|
||||
|
|
@ -59,16 +59,17 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
className={`${
|
||||
active === "/dashboard"
|
||||
? "bg-sky-200 dark:bg-sky-600"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
|
||||
} 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 dark:text-sky-100`}
|
||||
/>
|
||||
|
||||
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">Dashboard</p>
|
||||
|
||||
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
|
||||
Dashboard
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
|
|
@ -76,29 +77,32 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
className={`${
|
||||
active === "/links"
|
||||
? "bg-sky-200 dark:bg-sky-600"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
|
||||
} 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 dark:text-sky-100`}
|
||||
/>
|
||||
|
||||
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">Links</p>
|
||||
|
||||
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
|
||||
Links
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/collections"
|
||||
className={`${
|
||||
active === "/collections" ? "bg-sky-200 dark:bg-sky-600" : "hover:bg-slate-200 hover:dark:bg-sky-800"
|
||||
active === "/collections"
|
||||
? "bg-sky-200 dark:bg-sky-600"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800"
|
||||
} 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 dark:text-sky-100`}
|
||||
/>
|
||||
|
||||
|
||||
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
|
||||
Collections
|
||||
</p>
|
||||
|
|
@ -140,7 +144,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
className={`${
|
||||
active === `/collections/${e.id}`
|
||||
? "bg-sky-200 dark:bg-sky-700 "
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-blue-925"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-sky-900"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -200,7 +204,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
className={`${
|
||||
active === `/tags/${e.id}`
|
||||
? "bg-sky-200 dark:bg-sky-700"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
|
||||
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
|
|
|
|||
|
|
@ -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 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-blue-925 rounded-md p-2 z-20 w-48"
|
||||
className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-48"
|
||||
>
|
||||
<p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">Sort by</p>
|
||||
<p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">
|
||||
Sort by
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<RadioButton
|
||||
label="Date (Newest First)"
|
||||
|
|
|
|||
|
|
@ -164,6 +164,6 @@
|
|||
|
||||
@layer base {
|
||||
body {
|
||||
@apply dark:bg-blue-950 bg-white dark:text-white
|
||||
@apply dark:bg-sky-950 bg-white dark:text-white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,5 @@ module.exports = {
|
|||
// For the "layouts" directory
|
||||
"./layouts/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
blue: {
|
||||
925: "rgb(26, 47, 96)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue