This commit is contained in:
daniel31x13 2023-11-24 03:06:33 -05:00
parent 828e8eae2e
commit b8b6fe24bc
15 changed files with 121 additions and 99 deletions

View File

@ -8,7 +8,6 @@ import ProfilePhoto from "./ProfilePhoto";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons"; import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import useModalStore from "@/store/modals"; import useModalStore from "@/store/modals";
import usePermissions from "@/hooks/usePermissions"; import usePermissions from "@/hooks/usePermissions";
import { useTheme } from "next-themes";
type Props = { type Props = {
collection: CollectionIncludingMembersAndLinkCount; collection: CollectionIncludingMembersAndLinkCount;
@ -25,8 +24,6 @@ type DropdownTrigger =
export default function CollectionCard({ collection, className }: Props) { export default function CollectionCard({ collection, className }: Props) {
const { setModal } = useModalStore(); const { setModal } = useModalStore();
const { theme } = useTheme();
const formattedDate = new Date(collection.createdAt as string).toLocaleString( const formattedDate = new Date(collection.createdAt as string).toLocaleString(
"en-US", "en-US",
{ {
@ -45,8 +42,8 @@ export default function CollectionCard({ collection, className }: Props) {
<div <div
style={{ style={{
backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${ backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
theme === "dark" ? "#262626" : "#f3f4f6" "dark" ? "#262626" : "#f3f4f6"
} 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`, } 50%, ${"dark" ? "#262626" : "#f9fafb"} 100%)`,
}} }}
className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${ className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
className || "" className || ""

View File

@ -10,7 +10,6 @@ import SearchBar from "@/components/SearchBar";
import useAccountStore from "@/store/account"; import useAccountStore from "@/store/account";
import ProfilePhoto from "@/components/ProfilePhoto"; import ProfilePhoto from "@/components/ProfilePhoto";
import useModalStore from "@/store/modals"; import useModalStore from "@/store/modals";
import { useTheme } from "next-themes";
import useWindowDimensions from "@/hooks/useWindowDimensions"; import useWindowDimensions from "@/hooks/useWindowDimensions";
import ToggleDarkMode from "./ToggleDarkMode"; import ToggleDarkMode from "./ToggleDarkMode";
@ -23,16 +22,6 @@ export default function Navbar() {
const router = useRouter(); const router = useRouter();
const { theme, setTheme } = useTheme();
const handleToggle = () => {
if (theme === "dark") {
setTheme("light");
} else {
setTheme("dark");
}
};
const [sidebar, setSidebar] = useState(false); const [sidebar, setSidebar] = useState(false);
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
@ -106,9 +95,8 @@ export default function Navbar() {
href: "/settings/account", href: "/settings/account",
}, },
{ {
name: `Switch to ${theme === "light" ? "Dark" : "Light"}`, name: `Switch to ${"light" ? "Dark" : "Light"}`,
onClick: () => { onClick: () => {
handleToggle();
setProfileDropdown(!profileDropdown); setProfileDropdown(!profileDropdown);
}, },
}, },

View File

@ -1,31 +1,56 @@
import { useTheme } from "next-themes"; import { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
type Props = { type Props = {
className?: string; className?: string;
}; };
export default function ToggleDarkMode({ className }: Props) { export default function ToggleDarkMode({ className }: Props) {
const { theme, setTheme } = useTheme(); const [theme, setTheme] = useState(
localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"
);
const handleToggle = () => { const handleToggle = (e: any) => {
if (theme === "dark") { if (e.target.checked) {
setTheme("light");
} else {
setTheme("dark"); setTheme("dark");
} else {
setTheme("light");
} }
}; };
useEffect(() => {
localStorage.setItem("theme", theme || "");
const localTheme = localStorage.getItem("theme");
document
.querySelector("html")
?.setAttribute("data-theme", localTheme || "");
}, [theme]);
return ( return (
<div <label className="swap swap-rotate className">
className={`cursor-pointer flex select-none border border-sky-600 items-center justify-center dark:bg-neutral-900 bg-white hover:border-sky-500 group duration-100 rounded-full text-white w-10 h-10 ${className}`} <input
onClick={handleToggle} type="checkbox"
> onChange={handleToggle}
<FontAwesomeIcon className="theme-controller"
icon={theme === "dark" ? faSun : faMoon} checked={theme === "light" ? false : true}
className="w-1/2 h-1/2 text-sky-600 group-hover:text-sky-500"
/> />
</div>
{/* sun icon */}
<svg
className="swap-on fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
</svg>
{/* moon icon */}
<svg
className="swap-off fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</label>
); );
} }

View File

@ -1,4 +1,3 @@
import { useTheme } from "next-themes";
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 } from "react";
@ -9,14 +8,12 @@ interface Props {
} }
export default function CenteredForm({ text, children }: Props) { export default function CenteredForm({ text, children }: Props) {
const { theme } = useTheme();
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">
{theme ? ( {true ? (
<Image <Image
src={`/linkwarden_${theme === "dark" ? "dark" : "light"}.png`} src={`/linkwarden_${"dark" ? "dark" : "light"}.png`}
width={640} width={640}
height={136} height={136}
alt="Linkwarden" alt="Linkwarden"

View File

@ -43,7 +43,6 @@
"micro": "^10.0.1", "micro": "^10.0.1",
"next": "13.4.12", "next": "13.4.12",
"next-auth": "^4.22.1", "next-auth": "^4.22.1",
"next-themes": "^0.2.1",
"nodemailer": "^6.9.3", "nodemailer": "^6.9.3",
"playwright": "^1.35.1", "playwright": "^1.35.1",
"react": "18.2.0", "react": "18.2.0",

View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect, useState } 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 { ThemeProvider } from "next-themes";
export default function App({ export default function App({
Component, Component,
@ -14,11 +13,20 @@ export default function App({
}: AppProps<{ }: AppProps<{
session: Session; session: Session;
}>) { }>) {
const defaultTheme: "light" | "dark" = "dark"; const [theme, setTheme] = useState("");
useEffect(() => { useEffect(() => {
if (!localStorage.getItem("theme")) setTheme(
localStorage.setItem("theme", defaultTheme); localStorage.getItem("theme")
? (localStorage.getItem("theme") as string)
: "light"
);
if (theme) localStorage.setItem("theme", theme as string);
const localTheme = localStorage.getItem("theme");
document
.querySelector("html")
?.setAttribute("data-theme", localTheme || "");
}, []); }, []);
return ( return (
@ -50,17 +58,15 @@ export default function App({
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
</Head> </Head>
<AuthRedirect> <AuthRedirect>
<ThemeProvider attribute="class"> <Toaster
<Toaster position="top-center"
position="top-center" reverseOrder={false}
reverseOrder={false} toastOptions={{
toastOptions={{ className:
className: "border border-sky-100 dark:border-neutral-700 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} />
</ThemeProvider>
</AuthRedirect> </AuthRedirect>
</SessionProvider> </SessionProvider>
); );

View File

@ -18,15 +18,12 @@ import useModalStore from "@/store/modals";
import useLinks from "@/hooks/useLinks"; import useLinks from "@/hooks/useLinks";
import usePermissions from "@/hooks/usePermissions"; import usePermissions from "@/hooks/usePermissions";
import NoLinksFound from "@/components/NoLinksFound"; import NoLinksFound from "@/components/NoLinksFound";
import { useTheme } from "next-themes";
export default function Index() { export default function Index() {
const { setModal } = useModalStore(); const { setModal } = useModalStore();
const router = useRouter(); const router = useRouter();
const { theme } = useTheme();
const { links } = useLinkStore(); const { links } = useLinkStore();
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
@ -54,8 +51,8 @@ export default function Index() {
style={{ style={{
backgroundImage: `linear-gradient(-45deg, ${ backgroundImage: `linear-gradient(-45deg, ${
activeCollection?.color activeCollection?.color
}30 10%, ${theme === "dark" ? "#262626" : "#f3f4f6"} 50%, ${ }30 10%, ${"dark" ? "#262626" : "#f3f4f6"} 50%, ${
theme === "dark" ? "#262626" : "#f9fafb" "dark" ? "#262626" : "#f9fafb"
} 100%)`, } 100%)`,
}} }}
className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between" className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"

View File

@ -106,6 +106,8 @@ export default function Dashboard() {
return ( return (
<MainLayout> <MainLayout>
<button className="btn btn-primary">Primary</button>
<button className=" dark:bg-red-500">Primary</button>
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5"> <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<FontAwesomeIcon <FontAwesomeIcon

View File

@ -9,7 +9,6 @@ import {
} from "@/types/global"; } from "@/types/global";
import Image from "next/image"; import Image from "next/image";
import ColorThief, { RGBColor } from "colorthief"; import ColorThief, { RGBColor } from "colorthief";
import { useTheme } from "next-themes";
import unescapeString from "@/lib/client/unescapeString"; import unescapeString from "@/lib/client/unescapeString";
import isValidUrl from "@/lib/client/isValidUrl"; import isValidUrl from "@/lib/client/isValidUrl";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
@ -31,7 +30,6 @@ type LinkContent = {
}; };
export default function Index() { export default function Index() {
const { theme } = useTheme();
const { links, getLink } = useLinkStore(); const { links, getLink } = useLinkStore();
const { setModal } = useModalStore(); const { setModal } = useModalStore();
@ -140,13 +138,13 @@ export default function Index() {
)})30`; )})30`;
} }
} }
}, [colorPalette, theme]); }, [colorPalette]);
return ( return (
<LinkLayout> <LinkLayout>
<div <div
className={`flex flex-col max-w-screen-md h-full ${ className={`flex flex-col max-w-screen-md h-full ${
theme === "dark" ? "banner-dark-mode" : "banner-light-mode" "dark" ? "banner-dark-mode" : "banner-light-mode"
}`} }`}
> >
<div <div

View File

@ -12,7 +12,6 @@ import ProfilePhoto from "@/components/ProfilePhoto";
import useModalStore from "@/store/modals"; import useModalStore from "@/store/modals";
import ModalManagement from "@/components/ModalManagement"; import ModalManagement from "@/components/ModalManagement";
import ToggleDarkMode from "@/components/ToggleDarkMode"; import ToggleDarkMode from "@/components/ToggleDarkMode";
import { useTheme } from "next-themes";
import getPublicUserData from "@/lib/client/getPublicUserData"; import getPublicUserData from "@/lib/client/getPublicUserData";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@ -46,8 +45,6 @@ export default function PublicCollections() {
: (document.body.style.overflow = "auto"); : (document.body.style.overflow = "auto");
}, [modal]); }, [modal]);
const { theme } = useTheme();
const router = useRouter(); const router = useRouter();
const [collectionOwner, setCollectionOwner] = useState({ const [collectionOwner, setCollectionOwner] = useState({
@ -106,8 +103,8 @@ export default function PublicCollections() {
className="h-screen" className="h-screen"
style={{ style={{
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${ backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
theme === "dark" ? "#262626" : "#f3f4f6" "dark" ? "#262626" : "#f3f4f6"
} 50%, ${theme === "dark" ? "#171717" : "#ffffff"} 100%)`, } 50%, ${"dark" ? "#171717" : "#ffffff"} 100%)`,
}} }}
> >
<ModalManagement /> <ModalManagement />

View File

@ -9,7 +9,6 @@ import {
} from "@/types/global"; } from "@/types/global";
import Image from "next/image"; import Image from "next/image";
import ColorThief, { RGBColor } from "colorthief"; import ColorThief, { RGBColor } from "colorthief";
import { useTheme } from "next-themes";
import unescapeString from "@/lib/client/unescapeString"; import unescapeString from "@/lib/client/unescapeString";
import isValidUrl from "@/lib/client/isValidUrl"; import isValidUrl from "@/lib/client/isValidUrl";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
@ -31,7 +30,6 @@ type LinkContent = {
}; };
export default function Index() { export default function Index() {
const { theme } = useTheme();
const { links, getLink } = useLinkStore(); const { links, getLink } = useLinkStore();
const { setModal } = useModalStore(); const { setModal } = useModalStore();
@ -140,13 +138,13 @@ export default function Index() {
)})30`; )})30`;
} }
} }
}, [colorPalette, theme]); }, [colorPalette]);
return ( return (
<LinkLayout> <LinkLayout>
<div <div
className={`flex flex-col max-w-screen-md h-full ${ className={`flex flex-col max-w-screen-md h-full ${
theme === "dark" ? "banner-dark-mode" : "banner-light-mode" "dark" ? "banner-dark-mode" : "banner-light-mode"
}`} }`}
> >
<div <div

View File

@ -1,5 +1,4 @@
import SettingsLayout from "@/layouts/SettingsLayout"; import SettingsLayout from "@/layouts/SettingsLayout";
import { useTheme } from "next-themes";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons"; import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
@ -16,8 +15,6 @@ import Checkbox from "@/components/Checkbox";
import LinkPreview from "@/components/LinkPreview"; import LinkPreview from "@/components/LinkPreview";
export default function Appearance() { export default function Appearance() {
const { theme, setTheme } = useTheme();
const submit = async () => { const submit = async () => {
setSubmitLoader(true); setSubmitLoader(true);
@ -78,11 +75,8 @@ export default function Appearance() {
<div className="flex gap-3 w-full"> <div className="flex gap-3 w-full">
<div <div
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${ className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
theme === "dark" "dark" ? "dark:outline-sky-500 text-sky-500" : "text-white"
? "dark:outline-sky-500 text-sky-500"
: "text-white"
}`} }`}
onClick={() => setTheme("dark")}
> >
<FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" /> <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
<p className="text-2xl">Dark Theme</p> <p className="text-2xl">Dark Theme</p>
@ -91,11 +85,8 @@ export default function Appearance() {
</div> </div>
<div <div
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${ className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
theme === "light" "light" ? "outline-sky-500 text-sky-500" : "text-black"
? "outline-sky-500 text-sky-500"
: "text-black"
}`} }`}
onClick={() => setTheme("light")}
> >
<FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" /> <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
<p className="text-2xl">Light Theme</p> <p className="text-2xl">Light Theme</p>

View File

@ -245,13 +245,14 @@ body {
.reader-view code { .reader-view code {
padding: 0.15rem 0.4rem 0.15rem 0.4rem; padding: 0.15rem 0.4rem 0.15rem 0.4rem;
} }
[class="dark"] .reader-view code,
[class="dark"] .reader-view pre { [data-theme="dark"] .reader-view code,
[data-theme="dark"] .reader-view pre {
background-color: rgb(49, 49, 49); background-color: rgb(49, 49, 49);
border-radius: 8px; border-radius: 8px;
} }
[class="light"] .reader-view code, [data-theme="light"] .reader-view code,
[class="light"] .reader-view pre { [data-theme="light"] .reader-view pre {
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
border-radius: 8px; border-radius: 8px;
} }

View File

@ -1,10 +1,38 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
module.exports = { module.exports = {
darkMode: "class", daisyui: {
// daisyui: { themes: [
// themes: ["light", "dark"], {
// }, light: {
primary: "#0ea5e9",
secondary: "#22d3ee",
accent: "#4f46e5",
neutral: "#6b7280",
"base-100": "#f5f5f4",
info: "#a5f3fc",
success: "#22c55e",
warning: "#facc15",
error: "#dc2626",
},
},
{
dark: {
primary: "#38bdf8",
secondary: "#0284c7",
accent: "#818cf8",
neutral: "#1f2937",
"base-100": "#fcfcfc",
info: "#009ee4",
success: "#00b17d",
warning: "#eac700",
error: "#f1293c",
},
},
],
},
darkMode: ["class", '[data-theme="dark"]'],
content: [ content: [
"./app/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}",
@ -14,6 +42,9 @@ module.exports = {
"./layouts/**/*.{js,ts,jsx,tsx}", "./layouts/**/*.{js,ts,jsx,tsx}",
], ],
plugins: [ plugins: [
// require("daisyui") require("daisyui"),
plugin(({ addVariant }) => {
addVariant("dark", '&[data-theme="dark"]');
}),
], ],
}; };

View File

@ -3825,11 +3825,6 @@ next-auth@^4.22.1:
preact-render-to-string "^5.1.19" preact-render-to-string "^5.1.19"
uuid "^8.3.2" uuid "^8.3.2"
next-themes@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
next@13.4.12: next@13.4.12:
version "13.4.12" version "13.4.12"
resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df" resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"