From 252d16866ff9eed9a727cf59e20dc654b48d9e7e Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Wed, 9 Mar 2022 02:06:03 -0800 Subject: [PATCH] client: dark mode --- client/components/header/index.tsx | 54 +++++++++++++++++--------- client/components/post/title/index.tsx | 5 ++- client/next.config.js | 2 - client/pages/_app.tsx | 10 ++++- 4 files changed, 48 insertions(+), 23 deletions(-) diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx index 263891c..ae250c5 100644 --- a/client/components/header/index.tsx +++ b/client/components/header/index.tsx @@ -1,5 +1,5 @@ import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading, Spacer } from "@geist-ui/core"; -import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon } from "@geist-ui/icons"; +import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons"; import { DriftProps } from "../../pages/_app"; import { useEffect, useMemo, useState } from "react"; import styles from './header.module.css'; @@ -28,19 +28,22 @@ const Header = ({ changeTheme, theme }: DriftProps) => { name: "Home", href: "/", icon: , - condition: true + condition: true, + value: "home" }, { name: "New", href: "/new", icon: , - condition: isSignedIn + condition: isSignedIn, + value: "new" }, { name: "Yours", href: "/mine", icon: , - condition: isSignedIn + condition: isSignedIn, + value: "mine" }, // { // name: "Settings", @@ -57,27 +60,42 @@ const Header = ({ changeTheme, theme }: DriftProps) => { } }, icon: , - condition: isSignedIn + condition: isSignedIn, + value: "signout" }, { name: "Sign in", href: "/signin", icon: , - condition: !isSignedIn + condition: !isSignedIn, + value: "signin" }, { name: "Sign up", href: "/signup", icon: , - condition: !isSignedIn + condition: !isSignedIn, + value: "signup" }, { name: isMobile ? "GitHub" : "", href: "https://github.com/maxleiter/drift", icon: , - condition: true + condition: true, + value: "github" + }, + { + name: isMobile ? "Change theme" : "", + action: function () { + if (typeof window !== 'undefined') { + changeTheme(); + } + }, + icon: theme === 'light' ? : , + condition: true, + value: "theme", } - ], [isMobile, isSignedIn, router]) + ], [changeTheme, isMobile, isSignedIn, router, theme]) useEffect(() => { setSelectedTab(pages.find((page) => { @@ -98,20 +116,20 @@ const Header = ({ changeTheme, theme }: DriftProps) => { hideDivider hideBorder onChange={(tab) => { - const nameMatch = pages.find(page => page.name === tab) - if (nameMatch?.action) { - nameMatch.action() - } else { - router.push(`${tab}`) + const match = pages.find(page => page.value === tab) + if (match?.action) { + match.action() + } else if (match?.href) { + router.push(`${match.href}`) } }}> - {!isLoading && pages.map((tab, index) => { + {!isLoading && pages.map((tab) => { if (tab.condition) return {tab.icon} {tab.name}} - value={tab.href || tab.name} - key={`${tab.name}-${index}`} + value={tab.value} + key={`${tab.value}`} /> else return null })} @@ -124,7 +142,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => { onClick={() => setExpanded(!expanded)} > - + {isMobile && expanded && (
diff --git a/client/components/post/title/index.tsx b/client/components/post/title/index.tsx index 92b8020..03fe1a0 100644 --- a/client/components/post/title/index.tsx +++ b/client/components/post/title/index.tsx @@ -8,6 +8,9 @@ const titlePlaceholders = [ "Status update for ...", "My new project", "My new idea", + "Let's talk about...", + "What's up with ...", + "I'm thinking about ...", ] type props = { @@ -25,7 +28,7 @@ const Title = ({ setTitle, title }: props) => { onChange={(event) => setTitle(event.target.value)} height={"55px"} font={1.5} - label="Your title" + label="Post title" marginLeft={'var(--gap)'} style={{ width: "100%" }} /> diff --git a/client/next.config.js b/client/next.config.js index 15362d4..3aaadd8 100644 --- a/client/next.config.js +++ b/client/next.config.js @@ -1,8 +1,6 @@ const dotenv = require("dotenv"); dotenv.config(); -console.log(`${process.env.API_URL}/:path*`); - /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index 30a35dd..0d6e0e7 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -1,6 +1,6 @@ import '../styles/globals.css' import { GeistProvider, CssBaseline } from '@geist-ui/core' -import { useState } from 'react' +import { useEffect, useState } from 'react' import type { AppProps as NextAppProps } from "next/app"; export type ThemeProps = { @@ -15,7 +15,13 @@ type AppProps

= { export type DriftProps = ThemeProps function MyApp({ Component, pageProps }: AppProps) { - const [themeType, setThemeType] = useState(typeof window !== 'undefined' ? localStorage.getItem('drift-theme') || 'light' : 'light') + const [themeType, setThemeType] = useState('light') + + useEffect(() => { + if (typeof window === 'undefined' || !window.localStorage) return + const storedTheme = window.localStorage.getItem('drift-theme') + if (storedTheme) setThemeType(storedTheme) + }, []) const changeTheme = () => { const newTheme = themeType === 'dark' ? 'light' : 'dark'