From 8e77d108809bd6f4e9f06b78fe5f758246aca86a Mon Sep 17 00:00:00 2001 From: Harsh Shrikant Bhat <90265455+harshsbhat@users.noreply.github.com> Date: Mon, 23 Dec 2024 13:35:44 +0530 Subject: [PATCH] dark mode --- pnpm-lock.yaml | 16 ++++---- src/app/[...slug]/client.tsx | 2 + src/app/[...slug]/layout.tsx | 30 ++++++++++++++ src/app/layout.tsx | 4 -- .../controlModals/create-new-site.tsx | 1 - .../controlModals/decrypt-old-site.tsx | 1 - src/components/editor/Tiptap.tsx | 2 +- src/components/ui/mode-toggle.tsx | 40 +++++++++++++++++++ src/components/ui/toast.tsx | 2 +- 9 files changed, 82 insertions(+), 16 deletions(-) create mode 100644 src/app/[...slug]/layout.tsx create mode 100644 src/components/ui/mode-toggle.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5fa8526..6aa62de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6337,8 +6337,8 @@ snapshots: '@typescript-eslint/parser': 8.17.0(eslint@8.57.1)(typescript@5.7.2) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1) eslint-plugin-react: 7.37.2(eslint@8.57.1) eslint-plugin-react-hooks: 5.1.0(eslint@8.57.1) @@ -6357,7 +6357,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1): + eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.4.0 @@ -6369,18 +6369,18 @@ snapshots: is-glob: 4.0.3 stable-hash: 0.0.4 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.17.0(eslint@8.57.1)(typescript@5.7.2) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1) + eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1) transitivePeerDependencies: - supports-color @@ -6388,7 +6388,7 @@ snapshots: dependencies: eslint: 8.57.1 - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -6399,7 +6399,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 diff --git a/src/app/[...slug]/client.tsx b/src/app/[...slug]/client.tsx index ec04b17..b0eef0c 100644 --- a/src/app/[...slug]/client.tsx +++ b/src/app/[...slug]/client.tsx @@ -19,6 +19,7 @@ import { refresh } from "../actions/refresh"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; +import { ModeToggle } from "@/components/ui/mode-toggle"; import { PlusCircle, X, ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'; import { DropdownMenu, @@ -192,6 +193,7 @@ export function Client({ params, decryptedData, hash }: ClientProps) { Save + ); diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx new file mode 100644 index 0000000..19fee44 --- /dev/null +++ b/src/app/[...slug]/layout.tsx @@ -0,0 +1,30 @@ +import "@/styles/globals.css"; + +import { GeistSans } from "geist/font/sans"; +import { Toaster } from "@/components/ui/toaster"; + +import { ThemeProvider } from "@/components/theme-provider"; +import { ModeToggle } from "@/components/ui/mode-toggle"; + +export default function RootLayout({ + children, +}: Readonly<{ children: React.ReactNode }>) { + return ( + + + +
+ +
+ {children} + + + + + ); +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a153cfd..f32888f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,8 +4,6 @@ import { GeistSans } from "geist/font/sans"; import { type Metadata } from "next"; import { Toaster } from "@/components/ui/toaster"; -import { ThemeProvider } from "@/components/theme-provider"; - export const metadata: Metadata = { title: "SealNotes: Secure, Lightweight Encrypted Notepad for Privacy", description: "SealNotes: A free, open-source encrypted notepad for secure and private note-taking. Enjoy rich text editing and complete privacy—no login required.", @@ -31,10 +29,8 @@ export default function RootLayout({ return ( - {children} - ); diff --git a/src/components/controlModals/create-new-site.tsx b/src/components/controlModals/create-new-site.tsx index 9848739..5c39a8a 100644 --- a/src/components/controlModals/create-new-site.tsx +++ b/src/components/controlModals/create-new-site.tsx @@ -6,7 +6,6 @@ import { Card, CardContent, CardDescription, - CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; diff --git a/src/components/controlModals/decrypt-old-site.tsx b/src/components/controlModals/decrypt-old-site.tsx index 5455079..1a8ef0d 100644 --- a/src/components/controlModals/decrypt-old-site.tsx +++ b/src/components/controlModals/decrypt-old-site.tsx @@ -7,7 +7,6 @@ import { Card, CardContent, CardDescription, - CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" diff --git a/src/components/editor/Tiptap.tsx b/src/components/editor/Tiptap.tsx index 06e8f37..d6010b9 100644 --- a/src/components/editor/Tiptap.tsx +++ b/src/components/editor/Tiptap.tsx @@ -23,7 +23,7 @@ export default function RichTextEditor({ }, editorProps: { attributes: { - class: "cursor-text rounded-md border border-black p-5 ring-offset-background focus-within:outline-none min-h-[50vh] sm:min-h-[70vh]" + class: "cursor-text rounded-md border-2 shadow p-5 ring-offset-background focus-within:outline-none min-h-[50vh] sm:min-h-[70vh]" } }, diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx new file mode 100644 index 0000000..81474d7 --- /dev/null +++ b/src/components/ui/mode-toggle.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx index f53b348..1c0dcc2 100644 --- a/src/components/ui/toast.tsx +++ b/src/components/ui/toast.tsx @@ -29,7 +29,7 @@ const toastVariants = cva( { variants: { variant: { - default: "border-black h-[10vh] bg-background text-foreground", + default: "border-lime-600 h-[10vh] bg-background text-foreground", destructive: "destructive group h-[12vh] border-rose-700 bg-background text-foreground", },