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

changed classNames

This commit is contained in:
daniel31x13 2023-11-26 05:17:08 -05:00
parent 0a398d1fd9
commit b51b08b0f4
42 changed files with 107 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/AnnouncementBar.tsx
View File

@ -9,7 +9,7 @@ type Props = {
export default function AnnouncementBar({ toggleAnnouncementBar }: Props) { export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
return ( return (
<div className="fixed w-full z-20 dark:bg-neutral-900 bg-white"> <div className="fixed w-full z-20 bg-base-200">
<div className="w-full h-10 rainbow flex items-center justify-center"> <div className="w-full h-10 rainbow flex items-center justify-center">
<div className="w-fit font-semibold"> <div className="w-fit font-semibold">
🎉️{" "} 🎉️{" "}

11
components/CollectionCard.tsx
View File

@ -47,19 +47,22 @@ export default function CollectionCard({ collection, className }: Props) {
settings.theme === "dark" ? "#262626" : "#f3f4f6" settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`, } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
}} }}
className={`border border-solid border-neutral self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${ className={`border border-solid border-neutral-content self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
className || "" className || ""
}`} }`}
> >
<div <div
onClick={(e) => setExpandDropdown({ x: e.clientX, y: e.clientY })} onClick={(e) => {
setExpandDropdown({ x: e.clientX, y: e.clientY });
}}
id={"expand-dropdown" + collection.id} id={"expand-dropdown" + collection.id}
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}
title="More"
className="w-5 h-5"
id={"expand-dropdown" + collection.id} id={"expand-dropdown" + collection.id}
className="w-5 h-5 text-neutral"
/> />
</div> </div>
<Link <Link

2
components/Dropdown.tsx
View File

@ -83,7 +83,7 @@ export default function Dropdown({
{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 dark:hover:bg-neutral-700 duration-100"> <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
<p className="select-none">{e.name}</p> <p className="select-none">{e.name}</p>
</div> </div>
</div> </div>

2
components/FilterSearchDropdown.tsx
View File

@ -25,7 +25,7 @@ export default function FilterSearchDropdown({
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
if (target.id !== "filter-dropdown") setFilterDropdown(false); if (target.id !== "filter-dropdown") setFilterDropdown(false);
}} }}
className="absolute top-8 right-0 border border-neutral shadow-md bg-base-200 rounded-md p-2 z-20 w-40" className="absolute top-8 right-0 border border-neutral-content shadow-md bg-base-200 rounded-md p-2 z-20 w-40"
> >
<p className="mb-2 text-center font-semibold">Filter by</p> <p className="mb-2 text-center font-semibold">Filter by</p>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">

6
components/LinkCard.tsx
View File

@ -138,7 +138,7 @@ export default function LinkCard({ link, count, className }: Props) {
return ( return (
<> <>
<div <div
className={`h-fit border border-solid border-neutral-content bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${ className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
className || "" className || ""
}`} }`}
> >
@ -150,7 +150,7 @@ export default function LinkCard({ link, count, className }: Props) {
setExpandDropdown({ x: e.clientX, y: e.clientY }); setExpandDropdown({ x: e.clientX, y: e.clientY });
}} }}
id={"expand-dropdown" + link.id} id={"expand-dropdown" + link.id}
className="text-neutral-content dark:text-gray-300 inline-flex rounded-md cursor-pointer btn btn-ghost btn-sm btn-square dark:hover:bg-neutral-700 absolute right-4 top-4 z-10 duration-100" className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}
@ -221,7 +221,7 @@ export default function LinkCard({ link, count, className }: Props) {
</Link> </Link>
))} ))}
</div> </div>
<div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-slate-100 dark:to-neutral-800 to-35%"></div> <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent dark:to-base-200 to-35%"></div>
</div> </div>
) : undefined} */} ) : undefined} */}

2
components/LinkPreview.tsx
View File

@ -49,7 +49,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
return ( return (
<> <>
<div <div
className={`h-fit border border-solid border-neutral-content bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${ className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
className || "" className || ""
}`} }`}
> >

2
components/LinkSidebar.tsx
View File

@ -47,7 +47,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
return ( return (
<div <div
className={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-neutral-content dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${ className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
className || "" className || ""
}`} }`}
> >

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

@ -79,7 +79,7 @@ export default function CollectionInfo({
/> />
</div> </div>
<div <div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100" className="btn btn-ghost btn-xs"
onClick={() => onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" }) setCollection({ ...collection, color: "#0ea5e9" })
} }
@ -98,7 +98,7 @@ export default function CollectionInfo({
<div className="w-full"> <div className="w-full">
<p className="mb-2">Description</p> <p className="mb-2">Description</p>
<textarea <textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600" className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
placeholder="The purpose of this Collection..." placeholder="The purpose of this Collection..."
value={collection.description} value={collection.description}
onChange={(e) => onChange={(e) =>

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

@ -241,7 +241,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-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950" className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
/> />
</div> </div>
</div> </div>
@ -253,7 +253,7 @@ export default function AddOrEditLink({
onClick={() => setOptionsExpanded(!optionsExpanded)} onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`${ className={`${
method === "UPDATE" ? "hidden" : "" method === "UPDATE" ? "hidden" : ""
} rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 flex items-center px-2 w-fit text-sm`} } rounded-md cursor-pointer btn btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
> >
<p>{optionsExpanded ? "Hide" : "More"} Options</p> <p>{optionsExpanded ? "Hide" : "More"} Options</p>
</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-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900"> <div className="slide-up relative border-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-base-100">
<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-neutral-700 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-neutral-700 duration-100 z-20 p-2"

6
components/Navbar.tsx
View File

@ -50,10 +50,10 @@ export default function Navbar() {
}; };
return ( return (
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content dark:border-b-neutral-700 border-b h-16"> <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b h-16">
<div <div
onClick={toggleSidebar} onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700" className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-neutral-content"
> >
<FontAwesomeIcon icon={faBars} className="w-5 h-5" /> <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> </div>
@ -82,7 +82,7 @@ export default function Navbar() {
<div className="relative"> <div className="relative">
<div <div
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer" className="flex gap-1 group sm:hover:bg-neutral-content sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
onClick={() => setProfileDropdown(!profileDropdown)} onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown" id="profile-dropdown"
> >

2
components/PublicPage/PublicLinkCard.tsx
View File

@ -28,7 +28,7 @@ export default function LinkCard({ link, count }: Props) {
}); });
return ( return (
<div className="border border-solid border-neutral-content bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item"> <div className="border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item">
<div className="flex justify-between items-end gap-5 w-full h-full z-0"> <div className="flex justify-between items-end gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full"> <div className="flex flex-col justify-between w-full">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">

2
components/PublicPage/PublicSearchBar.tsx
View File

@ -52,7 +52,7 @@ export default function PublicSearchBar({ placeHolder }: Props) {
); );
} }
}} }}
className="border text-sm border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800" className="border text-sm border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
/> />
</div> </div>
); );

2
components/SearchBar.tsx
View File

@ -36,7 +36,7 @@ export default function SearchBar() {
e.key === "Enter" && e.key === "Enter" &&
router.push("/search?q=" + encodeURIComponent(searchQuery)) router.push("/search?q=" + encodeURIComponent(searchQuery))
} }
className="border border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800" className="border border-neutral-content bg-base-200 focus:border-primary rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
/> />
</div> </div>
); );

4
components/SettingsSidebar.tsx
View File

@ -35,7 +35,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
return ( return (
<div <div
className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-neutral-content dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${ className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
className || "" className || ""
}`} }`}
> >
@ -138,7 +138,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<Link <Link
href={`https://github.com/linkwarden/linkwarden/releases`} href={`https://github.com/linkwarden/linkwarden/releases`}
target="_blank" target="_blank"
className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100" className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
> >
Linkwarden {LINKWARDEN_VERSION} Linkwarden {LINKWARDEN_VERSION}
</Link> </Link>

2
components/Sidebar.tsx
View File

@ -52,7 +52,7 @@ export default function Sidebar({ className }: { className?: string }) {
return ( return (
<div <div
className={`bg-base-200 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-neutral-content dark:border-r-neutral-700 px-2 z-20 ${ className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content px-2 z-20 ${
className || "" className || ""
}`} }`}
> >

2
components/TextInput.tsx
View File

@ -27,7 +27,7 @@ export default function TextInput({
value={value} value={value}
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
className={`w-full rounded-md p-2 border-neutral-content bg-gray-100 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${ className={`w-full rounded-md p-2 border-neutral-content border-solid border outline-none focus:border-primary duration-100 ${
className || "" className || ""
}`} }`}
/> />

5
hooks/useInitialData.tsx
View File

@ -3,6 +3,7 @@ import { useEffect } from "react";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import useTagStore from "@/store/tags"; import useTagStore from "@/store/tags";
import useAccountStore from "@/store/account"; import useAccountStore from "@/store/account";
import useLocalSettingsStore from "@/store/localSettings";
export default function useInitialData() { export default function useInitialData() {
const { status, data } = useSession(); const { status, data } = useSession();
@ -10,10 +11,12 @@ export default function useInitialData() {
const { setTags } = useTagStore(); const { setTags } = useTagStore();
// const { setLinks } = useLinkStore(); // const { setLinks } = useLinkStore();
const { account, setAccount } = useAccountStore(); const { account, setAccount } = useAccountStore();
const { setSettings } = useLocalSettingsStore();
// Get account info
useEffect(() => { useEffect(() => {
setSettings();
if (status === "authenticated") { if (status === "authenticated") {
// Get account info
setAccount(data?.user.id as number); setAccount(data?.user.id as number);
} }
}, [status, data]); }, [status, data]);

24
layouts/CenteredForm.tsx
View File

@ -1,7 +1,7 @@
import useLocalSettingsStore from "@/store/localSettings"; import useLocalSettingsStore from "@/store/localSettings";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import React, { ReactNode } from "react"; import React, { ReactNode, useEffect } from "react";
interface Props { interface Props {
text?: string; text?: string;
@ -10,10 +10,11 @@ interface Props {
export default function CenteredForm({ text, children }: Props) { export default function CenteredForm({ text, children }: Props) {
const { settings } = useLocalSettingsStore(); const { settings } = useLocalSettingsStore();
return ( return (
<div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5"> <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
<div className="m-auto flex flex-col gap-2 w-full"> <div className="m-auto flex flex-col gap-2 w-full">
{true ? ( {settings.theme ? (
<Image <Image
src={`/linkwarden_${ src={`/linkwarden_${
settings.theme === "dark" ? "dark" : "light" settings.theme === "dark" ? "dark" : "light"
@ -24,30 +25,13 @@ export default function CenteredForm({ text, children }: Props) {
className="h-12 w-fit mx-auto" className="h-12 w-fit mx-auto"
/> />
) : undefined} ) : undefined}
{/* {settings.theme === "dark" ? (
<Image
src="/linkwarden_dark.png"
width={640}
height={136}
alt="Linkwarden"
className="h-12 w-fit mx-auto"
/>
) : (
<Image
src="/linkwarden_light.png"
width={640}
height={136}
alt="Linkwarden"
className="h-12 w-fit mx-auto"
/>
)} */}
{text ? ( {text ? (
<p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center"> <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center">
{text} {text}
</p> </p>
) : undefined} ) : undefined}
{children} {children}
<p className="text-center text-xs text-gray-500 mb-5 dark:text-gray-400"> <p className="text-center text-xs text-neutral mb-5">
© {new Date().getFullYear()}{" "} © {new Date().getFullYear()}{" "}
<Link href="https://linkwarden.app" className="font-semibold"> <Link href="https://linkwarden.app" className="font-semibold">
Linkwarden Linkwarden

2
layouts/LinkLayout.tsx
View File

@ -86,7 +86,7 @@ export default function LinkLayout({ children }: Props) {
<div className="flex gap-3 mb-5 duration-100 items-center justify-between"> <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
{/* <div {/* <div
onClick={toggleSidebar} onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700" className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
> >
<FontAwesomeIcon icon={faBars} className="w-5 h-5" /> <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> */} </div> */}

4
layouts/SettingsLayout.tsx
View File

@ -53,14 +53,14 @@ export default function SettingsLayout({ children }: Props) {
<div className="gap-2 inline-flex mr-3"> <div className="gap-2 inline-flex mr-3">
<div <div
onClick={toggleSidebar} onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700" className="text-neutral btn btn-square btn-ghost"
> >
<FontAwesomeIcon icon={faBars} className="w-5 h-5" /> <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> </div>
<Link <Link
href="/dashboard" href="/dashboard"
className="inline-flex w-fit gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700" className="text-neutral btn btn-square btn-ghost"
> >
<FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" /> <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
</Link> </Link>

11
pages/_app.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React from "react";
import "@/styles/globals.css"; import "@/styles/globals.css";
import { SessionProvider } from "next-auth/react"; import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
@ -6,7 +6,6 @@ import Head from "next/head";
import AuthRedirect from "@/layouts/AuthRedirect"; import AuthRedirect from "@/layouts/AuthRedirect";
import { Toaster } from "react-hot-toast"; import { Toaster } from "react-hot-toast";
import { Session } from "next-auth"; import { Session } from "next-auth";
import useLocalSettingsStore from "@/store/localSettings";
export default function App({ export default function App({
Component, Component,
@ -14,12 +13,6 @@ export default function App({
}: AppProps<{ }: AppProps<{
session: Session; session: Session;
}>) { }>) {
const { setSettings } = useLocalSettingsStore();
useEffect(() => {
setSettings();
}, []);
return ( return (
<SessionProvider <SessionProvider
session={pageProps.session} session={pageProps.session}
@ -54,7 +47,7 @@ export default function App({
reverseOrder={false} reverseOrder={false}
toastOptions={{ toastOptions={{
className: className:
"border border-neutral-content dark:bg-neutral-900 dark:text-white", "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
}} }}
/> />
<Component {...pageProps} /> <Component {...pageProps} />

4
pages/choose-username.tsx
View File

@ -41,7 +41,7 @@ export default function ChooseUsername() {
return ( return (
<CenteredForm> <CenteredForm>
<form onSubmit={submitUsername}> <form onSubmit={submitUsername}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight"> <p className="text-3xl text-center font-extralight">
Choose a Username Choose a Username
</p> </p>
@ -55,7 +55,7 @@ export default function ChooseUsername() {
autoFocus autoFocus
placeholder="john" placeholder="john"
value={inputedUsername} value={inputedUsername}
className="bg-white" className="bg-base-100"
onChange={(e) => setInputedUsername(e.target.value)} onChange={(e) => setInputedUsername(e.target.value)}
/> />
</div> </div>

4
pages/collections/[id].tsx
View File

@ -127,7 +127,7 @@ export default function Index() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}
@ -148,7 +148,7 @@ export default function Index() {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}

4
pages/collections/index.tsx
View File

@ -51,7 +51,7 @@ export default function Collections() {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}
@ -90,7 +90,7 @@ export default function Collections() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

2
pages/confirmation.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
export default function EmailConfirmaion() { export default function EmailConfirmaion() {
return ( return (
<CenteredForm> <CenteredForm>
<div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-slate-50 dark:bg-neutral-800"> <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-base-200">
<p className="text-center text-2xl sm:text-3xl font-extralight mb-2 "> <p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
Please check your Email Please check your Email
</p> </p>

6
pages/dashboard.tsx
View File

@ -120,7 +120,7 @@ export default function Dashboard() {
</div> </div>
<div> <div>
<div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200 dark:bg-neutral-800"> <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
<DashboardItem <DashboardItem
name={numberOfLinks === 1 ? "Link" : "Links"} name={numberOfLinks === 1 ? "Link" : "Links"}
value={numberOfLinks} value={numberOfLinks}
@ -242,7 +242,7 @@ export default function Dashboard() {
<label <label
htmlFor="import-linkwarden-file" htmlFor="import-linkwarden-file"
title="JSON File" title="JSON File"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer" className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100 cursor-pointer"
> >
Linkwarden File... Linkwarden File...
<input <input
@ -259,7 +259,7 @@ export default function Dashboard() {
<label <label
htmlFor="import-html-file" htmlFor="import-html-file"
title="HTML File" title="HTML File"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer" className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100 cursor-pointer"
> >
Bookmarks HTML file... Bookmarks HTML file...
<input <input

4
pages/forgot.tsx
View File

@ -43,7 +43,7 @@ export default function Forgot() {
return ( return (
<CenteredForm> <CenteredForm>
<form onSubmit={sendConfirmation}> <form onSubmit={sendConfirmation}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight"> <p className="text-3xl text-center font-extralight">
Password Recovery Password Recovery
</p> </p>
@ -68,7 +68,7 @@ export default function Forgot() {
type="email" type="email"
placeholder="johnny@example.com" placeholder="johnny@example.com"
value={form.email} value={form.email}
className="bg-white" className="bg-base-100"
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
/> />
</div> </div>

2
pages/links/[id].tsx
View File

@ -165,7 +165,7 @@ export default function Index() {
height={42} height={42}
alt="" alt=""
id={"favicon-" + link.id} id={"favicon-" + link.id}
className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square" className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-base-100 bg-base-100 aspect-square"
draggable="false" draggable="false"
onLoad={(e) => { onLoad={(e) => {
try { try {

2
pages/links/index.tsx
View File

@ -37,7 +37,7 @@ export default function Links() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

2
pages/links/pinned.tsx
View File

@ -37,7 +37,7 @@ export default function PinnedLinks() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

6
pages/login.tsx
View File

@ -63,7 +63,7 @@ export default function Login() {
return ( return (
<CenteredForm text="Sign in to your account"> <CenteredForm text="Sign in to your account">
<form onSubmit={loginUser}> <form onSubmit={loginUser}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight"> <p className="text-3xl text-center font-extralight">
Enter your credentials Enter your credentials
</p> </p>
@ -80,7 +80,7 @@ export default function Login() {
autoFocus={true} autoFocus={true}
placeholder="johnny" placeholder="johnny"
value={form.username} value={form.username}
className="bg-white" className="bg-base-100"
onChange={(e) => setForm({ ...form, username: e.target.value })} onChange={(e) => setForm({ ...form, username: e.target.value })}
/> />
</div> </div>
@ -92,7 +92,7 @@ export default function Login() {
type="password" type="password"
placeholder="••••••••••••••" placeholder="••••••••••••••"
value={form.password} value={form.password}
className="bg-white" className="bg-base-100"
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
/> />
{emailEnabled && ( {emailEnabled && (

8
pages/public/collections/[id].tsx
View File

@ -197,7 +197,7 @@ export default function PublicCollections() {
<p className="mt-5">{collection.description}</p> <p className="mt-5">{collection.description}</p>
<hr className="mt-5 border-1 border-neutral-500" /> <hr className="mt-5 border-1 border-neutral" />
<div className="flex mb-5 mt-10 flex-col gap-5"> <div className="flex mb-5 mt-10 flex-col gap-5">
<div className="flex justify-between"> <div className="flex justify-between">
@ -210,7 +210,7 @@ export default function PublicCollections() {
<div <div
onClick={() => setFilterDropdown(!filterDropdown)} onClick={() => setFilterDropdown(!filterDropdown)}
id="filter-dropdown" id="filter-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-neutral-500 hover:bg-opacity-40 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faFilter} icon={faFilter}
@ -232,7 +232,7 @@ export default function PublicCollections() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-neutral-500 hover:bg-opacity-40 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}
@ -271,7 +271,7 @@ export default function PublicCollections() {
})} })}
</div> </div>
{/* <p className="text-center text-gray-500"> {/* <p className="text-center text-neutral">
List created with <span className="text-black">Linkwarden.</span> List created with <span className="text-black">Linkwarden.</span>
</p> */} </p> */}
</div> </div>

2
pages/public/links/[id].tsx
View File

@ -165,7 +165,7 @@ export default function Index() {
height={42} height={42}
alt="" alt=""
id={"favicon-" + link.id} id={"favicon-" + link.id}
className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square" className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-base-100 bg-base-100 aspect-square"
draggable="false" draggable="false"
onLoad={(e) => { onLoad={(e) => {
try { try {

14
pages/register.tsx
View File

@ -104,7 +104,7 @@ export default function Register() {
} }
> >
{process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? ( {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p> <p>
Registration is disabled for this instance, please contact the admin Registration is disabled for this instance, please contact the admin
in case of any issues. in case of any issues.
@ -112,7 +112,7 @@ export default function Register() {
</div> </div>
) : ( ) : (
<form onSubmit={registerUser}> <form onSubmit={registerUser}>
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight"> <p className="text-3xl text-center font-extralight">
Enter your details Enter your details
</p> </p>
@ -126,7 +126,7 @@ export default function Register() {
autoFocus={true} autoFocus={true}
placeholder="Johnny" placeholder="Johnny"
value={form.name} value={form.name}
className="bg-white" className="bg-base-100"
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
/> />
</div> </div>
@ -138,7 +138,7 @@ export default function Register() {
<TextInput <TextInput
placeholder="john" placeholder="john"
value={form.username} value={form.username}
className="bg-white" className="bg-base-100"
onChange={(e) => onChange={(e) =>
setForm({ ...form, username: e.target.value }) setForm({ ...form, username: e.target.value })
} }
@ -154,7 +154,7 @@ export default function Register() {
type="email" type="email"
placeholder="johnny@example.com" placeholder="johnny@example.com"
value={form.email} value={form.email}
className="bg-white" className="bg-base-100"
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
/> />
</div> </div>
@ -167,7 +167,7 @@ export default function Register() {
type="password" type="password"
placeholder="••••••••••••••" placeholder="••••••••••••••"
value={form.password} value={form.password}
className="bg-white" className="bg-base-100"
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
/> />
</div> </div>
@ -181,7 +181,7 @@ export default function Register() {
type="password" type="password"
placeholder="••••••••••••••" placeholder="••••••••••••••"
value={form.passwordConfirmation} value={form.passwordConfirmation}
className="bg-white" className="bg-base-100"
onChange={(e) => onChange={(e) =>
setForm({ ...form, passwordConfirmation: e.target.value }) setForm({ ...form, passwordConfirmation: e.target.value })
} }

4
pages/search.tsx
View File

@ -58,7 +58,7 @@ export default function Search() {
<div <div
onClick={() => setFilterDropdown(!filterDropdown)} onClick={() => setFilterDropdown(!filterDropdown)}
id="filter-dropdown" id="filter-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faFilter} icon={faFilter}
@ -80,7 +80,7 @@ export default function Search() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

14
pages/settings/account.tsx
View File

@ -206,13 +206,13 @@ export default function Account() {
image: "", image: "",
}) })
} }
className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500" className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 rounded-full bg-base-200 text-center select-none cursor-pointer duration-100 hover:text-red-500"
> >
<FontAwesomeIcon icon={faClose} className="w-3 h-3" /> <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
</div> </div>
)} )}
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center"> <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
<label className="border border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"> <label className="border border-slate-200 rounded-md bg-base-200 px-2 text-center select-none cursor-pointer duration-100 hover:border-primary">
Browse... Browse...
<input <input
type="file" type="file"
@ -247,7 +247,7 @@ export default function Account() {
> >
<div <div
id="import-dropdown" id="import-dropdown"
className="border border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600" className="border border-slate-200 rounded-md bg-base-200 px-2 text-center select-none cursor-pointer duration-100 hover:border-primary"
> >
Import From Import From
</div> </div>
@ -264,7 +264,7 @@ export default function Account() {
<label <label
htmlFor="import-linkwarden-file" htmlFor="import-linkwarden-file"
title="JSON File" title="JSON File"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer" className="flex items-center gap-2 py-1 px-2 hover:bg-neutral-content duration-100 cursor-pointer"
> >
Linkwarden File... Linkwarden File...
<input <input
@ -281,7 +281,7 @@ export default function Account() {
<label <label
htmlFor="import-html-file" htmlFor="import-html-file"
title="HTML File" title="HTML File"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer" className="flex items-center gap-2 py-1 px-2 hover:bg-neutral-content duration-100 cursor-pointer"
> >
Bookmarks HTML file... Bookmarks HTML file...
<input <input
@ -304,7 +304,7 @@ export default function Account() {
<div> <div>
<p className="mb-2">Download your data instantly.</p> <p className="mb-2">Download your data instantly.</p>
<Link className="w-fit" href="/api/v1/migration"> <Link className="w-fit" href="/api/v1/migration">
<div className="border w-fit border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"> <div className="border w-fit border-slate-200 rounded-md bg-base-200 px-2 text-center select-none cursor-pointer duration-100 hover:border-primary">
Export Data Export Data
</div> </div>
</Link> </Link>
@ -339,7 +339,7 @@ export default function Account() {
visibility to your profile. Separated by comma. visibility to your profile. Separated by comma.
</p> </p>
<textarea <textarea
className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600" className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
placeholder="Your profile is hidden from everyone right now..." placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox} value={whitelistedUsersTextbox}
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)} onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}

14
pages/settings/delete.tsx
View File

@ -54,12 +54,15 @@ export default function Password() {
return ( return (
<CenteredForm> <CenteredForm>
<div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<Link <Link
href="/settings/account" href="/settings/account"
className="absolute top-4 left-4 gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700" className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" /> <FontAwesomeIcon
icon={faChevronLeft}
className="w-5 h-5 text-neutral"
/>
</Link> </Link>
<div className="flex items-center gap-2 w-full rounded-md h-8"> <div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center"> <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">
@ -86,6 +89,7 @@ export default function Password() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••••••••" placeholder="••••••••••••••"
className="bg-base-100"
type="password" type="password"
/> />
</div> </div>
@ -102,7 +106,7 @@ export default function Password() {
<label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col"> <label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
<p className="text-sm">Reason for cancellation:</p> <p className="text-sm">Reason for cancellation:</p>
<select <select
className="rounded-md p-1 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950" className="rounded-md p-1 outline-none"
value={feedback} value={feedback}
onChange={(e) => setFeedback(e.target.value)} onChange={(e) => setFeedback(e.target.value)}
> >
@ -127,7 +131,7 @@ export default function Password() {
value={comment} value={comment}
onChange={(e) => setComment(e.target.value)} onChange={(e) => setComment(e.target.value)}
placeholder="e.g. I needed a feature that..." placeholder="e.g. I needed a feature that..."
className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950" className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-100 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
/> />
</div> </div>
</fieldset> </fieldset>

2
pages/subscribe.tsx
View File

@ -30,7 +30,7 @@ export default function Subscribe() {
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14 process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
}-day free trial, cancel anytime!`} }-day free trial, cancel anytime!`}
> >
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content"> <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p className="sm:text-3xl text-2xl text-center font-extralight"> <p className="sm:text-3xl text-2xl text-center font-extralight">
Subscribe to Linkwarden! Subscribe to Linkwarden!
</p> </p>

10
pages/tags/[id].tsx
View File

@ -115,14 +115,14 @@ export default function Index() {
<input <input
type="text" type="text"
autoFocus autoFocus
className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content dark:border-b-neutral-700" className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
value={newTagName} value={newTagName}
onChange={(e) => setNewTagName(e.target.value)} onChange={(e) => setNewTagName(e.target.value)}
/> />
<div <div
onClick={() => submit()} onClick={() => submit()}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faCheck} icon={faCheck}
@ -133,7 +133,7 @@ export default function Index() {
<div <div
onClick={() => cancelUpdateTag()} onClick={() => cancelUpdateTag()}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faXmark} icon={faXmark}
@ -152,7 +152,7 @@ export default function Index() {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown" id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}
@ -197,7 +197,7 @@ export default function Index() {
<div <div
onClick={() => setSortDropdown(!sortDropdown)} onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown" id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1" className="btn btn-ghost btn-square btn-sm"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faSort} icon={faSort}

17
store/localSettings.ts
View File

@ -21,11 +21,9 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
) { ) {
localStorage.setItem("theme", newSettings.theme); localStorage.setItem("theme", newSettings.theme);
const localTheme = localStorage.getItem("theme"); const localTheme = localStorage.getItem("theme") || "";
document document.querySelector("html")?.setAttribute("data-theme", localTheme);
.querySelector("html")
?.setAttribute("data-theme", localTheme || "");
} }
set((state) => ({ settings: { ...state.settings, ...newSettings } })); set((state) => ({ settings: { ...state.settings, ...newSettings } }));
@ -35,10 +33,13 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
localStorage.setItem("theme", "dark"); localStorage.setItem("theme", "dark");
} }
const localTheme = localStorage.getItem("theme"); const localTheme = localStorage.getItem("theme") || "";
document
.querySelector("html") set((state) => ({
?.setAttribute("data-theme", localTheme || ""); settings: { ...state.settings, theme: localTheme },
}));
document.querySelector("html")?.setAttribute("data-theme", localTheme);
}, },
})); }));

2
styles/globals.css
View File

@ -158,7 +158,7 @@ body {
/* react-select */ /* react-select */
@layer components { @layer components {
.react-select-container .react-select__control { .react-select-container .react-select__control {
@apply dark:bg-neutral-950 bg-gray-50 dark:hover:border-neutral-500; @apply bg-base-200 dark:hover:border-neutral-500 border-red-500 border;
} }
.react-select-container .react-select__menu { .react-select-container .react-select__menu {