From d4111069e86c41f85d7293230a8faf617bcb6fd8 Mon Sep 17 00:00:00 2001 From: Evan Sloan Date: Sun, 3 Mar 2024 05:06:24 -0500 Subject: [PATCH] add dark theme colors add theme toggle add settings menu to navbar --- app/globals.css | 21 ++++++--- app/layout.tsx | 43 ++++++++++-------- assets/images/settings.png | Bin 0 -> 327 bytes components/navbar.tsx | 2 + components/providers/theme-provider.tsx | 12 +++++ components/settings.tsx | 40 ++++++++++++++++ components/theme-toggle.tsx | 58 ++++++++++++++++++++++++ components/ui/dialog.tsx | 10 ++-- package-lock.json | 11 +++++ package.json | 1 + 10 files changed, 166 insertions(+), 32 deletions(-) create mode 100644 assets/images/settings.png create mode 100644 components/providers/theme-provider.tsx create mode 100644 components/settings.tsx create mode 100644 components/theme-toggle.tsx diff --git a/app/globals.css b/app/globals.css index 460cee0..19e5c4c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -66,13 +66,13 @@ } .dark { - --background: 222.2 84% 4.9%; + --background: 0 0% 9%; --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 0 0% 12%; + --card-foreground: 0 0% 100%; - --popover: 222.2 84% 4.9%; + --popover: 0 0% 9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; @@ -84,14 +84,20 @@ --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; + --accent: 0 0% 22%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; + --active: 0 0% 25%; + + --light: 0 0% 17%; + --lighter: 0 0% 20%; + + --border: 0 0% 0%; + --input: 0 0% 9%; + --input-focus: 0 0% 17%; --ring: 212.7 26.8% 83.9%; } @@ -185,6 +191,7 @@ border-radius: 5px; box-shadow: inset 4px 4px 5px -3px rgba(255, 255, 255, 0.15), inset -4px -4px 5px -3px rgba(0, 0, 0, 0.15); + color: white; } button.btn-primary:hover { diff --git a/app/layout.tsx b/app/layout.tsx index 4412d75..de6ead2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,7 @@ import type { Metadata, Viewport } from 'next'; import { GoogleAnalytics } from '@next/third-parties/google'; import Navbar from '@/components/navbar'; +import ThemeProvider from '@/components/providers/theme-provider'; import { GITHUB_URL, PLUGIN_URL } from '@/lib/constants'; import './globals.css'; @@ -28,28 +29,30 @@ export const viewport: Viewport = { const RootLayout = ({ children }: { children: React.ReactNode }) => { return ( - + - -
-
{children}
-
- + + diff --git a/assets/images/settings.png b/assets/images/settings.png new file mode 100644 index 0000000000000000000000000000000000000000..3133159a564a49dfe43f6c1e0934e5ba09c17aff GIT binary patch literal 327 zcmV-N0l5B&P)%osvpyth_-}shv7Uj9qw!6bV+As!OD9NJx1CcepsgaY%y= z;phD7-^y`&lbzg)hAR%m65h9Dr#4?j(5dh07x6Yk%xr>49UxZy&2_)Gdn_ zZbINTYR*EdQ3&palx(?p29yrM4RUTic;_##X_Y{Bz1wU!{C)!$*SzTzphhGCHLS)H zS?vSo+n*Zf3Ukl{@ou(O9sU-ja002ovPDHLkV1oTnkx&2t literal 0 HcmV?d00001 diff --git a/components/navbar.tsx b/components/navbar.tsx index 29c8b25..f7d9810 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -3,6 +3,7 @@ import { ChevronDown } from 'lucide-react'; import Image from 'next/image'; import NavLink from '@/components/nav-link'; +import Settings from '@/components/settings'; import { Button } from '@/components/ui/button'; import UserTypeahead from '@/components/typeahead/user-typeahead'; import { @@ -53,6 +54,7 @@ const Navbar = React.forwardRef< Join the Log Hunters Discord server + ); diff --git a/components/providers/theme-provider.tsx b/components/providers/theme-provider.tsx new file mode 100644 index 0000000..43e3da4 --- /dev/null +++ b/components/providers/theme-provider.tsx @@ -0,0 +1,12 @@ +'use client'; + +import React, { ReactNode } from 'react'; +import { ThemeProvider as TP } from 'next-themes'; + +interface ThemeProviderProps { + children: ReactNode; +} + +const ThemeProvider = ({ children }: ThemeProviderProps) => {children}; + +export default ThemeProvider; diff --git a/components/settings.tsx b/components/settings.tsx new file mode 100644 index 0000000..29c77de --- /dev/null +++ b/components/settings.tsx @@ -0,0 +1,40 @@ +'use client'; + +import React from 'react'; + +import NavLink from '@/components/nav-link'; +import ThemeToggle from '@/components/theme-toggle'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog'; + +import SettingsIcon from '@/assets/images/settings.png'; + +const Settings = () => { + return ( + + + + Settings + + + + + collectionlog.net settings + +
+
+

Theme color

+ +
+
+ + + ); +}; + +export default Settings; diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx new file mode 100644 index 0000000..1853c3f --- /dev/null +++ b/components/theme-toggle.tsx @@ -0,0 +1,58 @@ +'use client'; + +import React from 'react'; +import { Check, ChevronDown } from 'lucide-react'; +import { useTheme } from 'next-themes'; + +import { Button } from '@/components/ui/button'; +import { Command, CommandGroup, CommandItem } from '@/components/ui/command'; +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; +import { cn, toTitleCase } from '@/lib/utils'; + +interface ThemeToggleProps { + className?: string; +} + +const ThemeToggle = ({ className }: ThemeToggleProps) => { + const { theme, setTheme } = useTheme(); + const themeValues = ['dark', 'light', 'system']; + + return ( + + + + + + + + {themeValues.map((value) => ( + setTheme(value)} + > + {toTitleCase(value)} + + + ))} + + + + + ); +}; + +export default ThemeToggle; diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index e4ed4af..b74c736 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -38,14 +38,14 @@ const DialogContent = React.forwardRef< {children} - - + + Close @@ -59,7 +59,7 @@ const DialogHeader = ({ }: React.HTMLAttributes) => (