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

confirmed dark color

This commit is contained in:
Daniel 2023-08-11 00:44:44 -04:00
parent 5d016068c7
commit 1eb1467a02
15 changed files with 66 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Dropdown.tsx
View File

@ -25,13 +25,15 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
return ( return (
<ClickAwayHandler <ClickAwayHandler
onClickOutside={onClickOutside} 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) => { {items.map((e, i) => {
const inner = e && ( const inner = e && (
<div className="cursor-pointer rounded-md"> <div className="cursor-pointer rounded-md">
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100"> <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>
</div> </div>
); );

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

@ -72,11 +72,13 @@ export default function CollectionInfo({
} }
type="text" type="text"
placeholder="e.g. Example Collection" 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="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32"> <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 }}> <div style={{ color: collection.color }}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faFolder} icon={faFolder}
@ -101,9 +103,11 @@ export default function CollectionInfo({
</div> </div>
<div className="w-full"> <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 <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..." placeholder="The purpose of this Collection..."
value={collection.description} value={collection.description}
onChange={(e) => onChange={(e) =>

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

@ -93,7 +93,7 @@ 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 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> </div>
</> </>

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

@ -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 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} {publicCollectionURL}
</div> </div>
@ -183,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 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 <div

14
components/Modal/Link/AddOrEditLink.tsx
View File

@ -135,14 +135,16 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, url: e.target.value })} onChange={(e) => setLink({ ...link, url: e.target.value })}
type="text" type="text"
placeholder="e.g. http://example.com/" 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> </div>
) : null} ) : null}
<hr className="dark:border-sky-800" /> <hr className="dark:border-sky-800" />
<div className="grid sm:grid-cols-2 gap-3"> <div className="grid sm:grid-cols-2 gap-3">
<div> <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 <CollectionSelection
onChange={setCollection} onChange={setCollection}
// defaultValue={{ // defaultValue={{
@ -177,12 +179,14 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, name: e.target.value })} onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text" type="text"
placeholder="e.g. Example Link" 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>
<div className="sm:col-span-2"> <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 <textarea
value={link.description} value={link.description}
onChange={(e) => setLink({ ...link, description: e.target.value })} onChange={(e) => setLink({ ...link, description: e.target.value })}
@ -191,7 +195,7 @@ export default function AddOrEditLink({
? "Will be auto generated if nothing is provided." ? "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>
</div> </div>

2
components/Modal/Link/LinkDetails.tsx
View File

@ -131,7 +131,7 @@ export default function LinkDetails({ link }: Props) {
height={42} height={42}
alt="" alt=""
id={"favicon-" + link.id} 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" draggable="false"
onLoad={(e) => { onLoad={(e) => {
try { try {

8
components/Modal/User/ChangePassword.tsx
View File

@ -88,16 +88,18 @@ export default function ChangePassword({
onChange={(e) => setNewPassword1(e.target.value)} onChange={(e) => setNewPassword1(e.target.value)}
type="password" type="password"
placeholder="••••••••••••••" 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 <input
value={newPassword2} value={newPassword2}
onChange={(e) => setNewPassword2(e.target.value)} onChange={(e) => setNewPassword2(e.target.value)}
type="password" type="password"
placeholder="••••••••••••••" 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 <SubmitButton

16
components/Modal/User/ProfileSettings.tsx
View File

@ -102,7 +102,9 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80"> <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="grid sm:grid-cols-2 gap-3 auto-rows-auto">
<div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3"> <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"> <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
<ProfilePhoto <ProfilePhoto
src={user.profilePic} src={user.profilePic}
@ -145,22 +147,26 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div> <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 <input
type="text" type="text"
value={user.name} value={user.name}
onChange={(e) => setUser({ ...user, name: e.target.value })} 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>
<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 <input
type="text" type="text"
value={user.username || ""} value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })} 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> </div>

2
components/Modal/index.tsx
View File

@ -16,7 +16,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
onClickOutside={toggleModal} onClickOutside={toggleModal}
className={`m-auto ${className}`} 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 <div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>} 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" 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"

6
components/Navbar.tsx
View File

@ -64,17 +64,17 @@ export default function Navbar() {
<ToggleDarkMode /> <ToggleDarkMode />
<div className="relative"> <div className="relative">
<div <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)} onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown" id="profile-dropdown"
> >
<ProfilePhoto <ProfilePhoto
src={account.profilePic} 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 <p
id="profile-dropdown" 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} {account.name}
</p> </p>

2
components/Search.tsx
View File

@ -44,7 +44,7 @@ export default function Search() {
router.push("/search/" + encodeURIComponent(searchQuery)) router.push("/search/" + encodeURIComponent(searchQuery))
} }
autoFocus={searchBox} 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> </div>
); );

26
components/Sidebar.tsx
View File

@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
return ( return (
<div <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"> <div className="flex justify-center gap-2 mt-2">
<Link <Link
@ -59,16 +59,17 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${ className={`${
active === "/dashboard" active === "/dashboard"
? "bg-sky-200 dark:bg-sky-600" ? "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`} } 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 <FontAwesomeIcon
icon={faChartSimple} icon={faChartSimple}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`} 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>
<Link <Link
@ -76,29 +77,32 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${ className={`${
active === "/links" active === "/links"
? "bg-sky-200 dark:bg-sky-600" ? "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`} } 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 <FontAwesomeIcon
icon={faLink} icon={faLink}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`} 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>
<Link <Link
href="/collections" href="/collections"
className={`${ 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`} } 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 <FontAwesomeIcon
icon={faFolder} icon={faFolder}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`} 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"> <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
Collections Collections
</p> </p>
@ -140,7 +144,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${ className={`${
active === `/collections/${e.id}` active === `/collections/${e.id}`
? "bg-sky-200 dark:bg-sky-700 " ? "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`} } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
> >
<FontAwesomeIcon <FontAwesomeIcon
@ -200,7 +204,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${ className={`${
active === `/tags/${e.id}` active === `/tags/${e.id}`
? "bg-sky-200 dark:bg-sky-700" ? "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`} } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
> >
<FontAwesomeIcon <FontAwesomeIcon

6
components/SortDropdown.tsx
View File

@ -21,9 +21,11 @@ export default function SortDropdown({
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
if (target.id !== "sort-dropdown") toggleSortDropdown(); 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"> <div className="flex flex-col gap-2">
<RadioButton <RadioButton
label="Date (Newest First)" label="Date (Newest First)"

2
styles/globals.css
View File

@ -164,6 +164,6 @@
@layer base { @layer base {
body { body {
@apply dark:bg-blue-950 bg-white dark:text-white @apply dark:bg-sky-950 bg-white dark:text-white;
} }
} }

9
tailwind.config.js
View File

@ -10,14 +10,5 @@ module.exports = {
// For the "layouts" directory // For the "layouts" directory
"./layouts/**/*.{js,ts,jsx,tsx}", "./layouts/**/*.{js,ts,jsx,tsx}",
], ],
theme: {
extend: {
colors: {
blue: {
925: "rgb(26, 47, 96)",
},
},
},
},
plugins: [], plugins: [],
}; };