From 3bbf3f747072eb4e5c2efb2965b17568c0b88996 Mon Sep 17 00:00:00 2001 From: keyan Date: Thu, 4 Nov 2021 19:07:41 -0400 Subject: [PATCH] add dark mode --- api/resolvers/user.js | 9 +++ api/typeDefs/user.js | 2 + components/header.js | 22 +++++++- components/me.js | 1 + pages/_app.js | 56 +++++++++++-------- .../20211104210749_theme/migration.sql | 2 + prisma/schema.prisma | 1 + styles/globals.scss | 4 ++ 8 files changed, 72 insertions(+), 25 deletions(-) create mode 100644 prisma/migrations/20211104210749_theme/migration.sql diff --git a/api/resolvers/user.js b/api/resolvers/user.js index fe9489fe..a58c4af2 100644 --- a/api/resolvers/user.js +++ b/api/resolvers/user.js @@ -44,6 +44,15 @@ export default { return true }, + setTheme: async (parent, { theme }, { me, models }) => { + if (!me) { + throw new AuthenticationError('you must be logged in') + } + + await models.user.update({ where: { id: me.id }, data: { theme } }) + + return true + }, upsertBio: async (parent, { bio }, { me, models }) => { if (!me) { throw new AuthenticationError('you must be logged in') diff --git a/api/typeDefs/user.js b/api/typeDefs/user.js index af0cf975..f511dff1 100644 --- a/api/typeDefs/user.js +++ b/api/typeDefs/user.js @@ -11,6 +11,7 @@ export default gql` extend type Mutation { setName(name: String!): Boolean setSettings(tipDefault: Int!): Boolean + setTheme(theme: String!): Boolean upsertBio(bio: String!): User! } @@ -29,5 +30,6 @@ export default gql` bio: Item sats: Int! msats: Int! + theme: String! } ` diff --git a/components/header.js b/components/header.js index 12a68d35..d7aac6ea 100644 --- a/components/header.js +++ b/components/header.js @@ -13,6 +13,8 @@ import { useEffect, useState } from 'react' import { randInRange } from '../lib/rand' import styled from 'styled-components' import Sun from '../svgs/sun-fill.svg' +import Moon from '../svgs/moon-fill.svg' +import { gql, useMutation } from '@apollo/client' const Brand = styled(Navbar.Brand)` color: ${({ theme }) => theme.brandColor} @@ -43,6 +45,16 @@ export const StyledNavbar = styled(Navbar).attrs(({ theme }) => ({ & .dropdown-divider { border-top: 1px solid ${({ theme }) => theme.borderColor}; } + + & .theme { + margin-right: 1rem; + cursor: pointer; + fill: ${({ theme }) => theme.dropdownItemColor}; + } + + & .theme:hover { + fill: ${({ theme }) => theme.dropdownItemColorHover}; + } ` function WalletSummary ({ me }) { @@ -56,6 +68,12 @@ export default function Header () { const [session, loading] = useSession() const [sort, setSort] = useState('recent') const [within, setWithin] = useState() + const [setTheme] = useMutation( + gql` + mutation setTheme($theme: String!) { + setTheme(theme: $theme) + }` + ) useEffect(() => { setSort(localStorage.getItem('sort') || 'recent') @@ -127,7 +145,9 @@ export default function Header () { settings - + {me?.theme === 'light' + ? setTheme({ variables: { theme: 'dark' } })} className='theme' /> + : setTheme({ variables: { theme: 'light' } })} className='theme' />} logout diff --git a/components/me.js b/components/me.js index b41969c3..8eedf09c 100644 --- a/components/me.js +++ b/components/me.js @@ -21,6 +21,7 @@ export function MeProvider ({ children }) { id } hasInvites + theme } }` const { data } = useQuery(query, { pollInterval: 1000 }) diff --git a/pages/_app.js b/pages/_app.js index 3b9009ae..8d4893b7 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -2,7 +2,7 @@ import '../styles/globals.scss' import { ApolloProvider, gql } from '@apollo/client' import { Provider } from 'next-auth/client' import { FundErrorModal, FundErrorProvider } from '../components/fund-error' -import { MeProvider } from '../components/me' +import { MeProvider, useMe } from '../components/me' import PlausibleProvider from 'next-plausible' import { LightningProvider } from '../components/lightning' import { ItemActModal, ItemActProvider } from '../components/item-act' @@ -60,20 +60,18 @@ const GlobalStyle = createGlobalStyle` } ` -// const lightTheme = { -// body: 'linear-gradient(180deg, #f5f5f5, #f5f5f5, white)', -// color: '#212529', -// navbarVariant: 'light', -// inputBg: '#ffffff', -// navbarVariant: 'light', -// borderColor: 'rgb(255 255 255 / 50%)', -// dropdownItemColor: 'rgba(255, 255, 255, 0.7)', -// dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)', -// commentBg: 'rgba(255, 255, 255, 0.04)', -// clickToContextColor: 'rgba(255, 255, 255, 0.08)', -// color: '#f8f9fa', -// brandColor: 'var(--primary) !important' -// } +const lightTheme = { + body: '#f5f5f5', + color: '#212529', + navbarVariant: 'light', + borderColor: '#ced4da', + inputBg: '#ffffff', + dropdownItemColor: 'inherit', + dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)', + commentBg: 'rgba(0, 0, 0, 0.03)', + clickToContextColor: 'rgba(0, 0, 0, 0.05)', + brandColor: 'rgba(0, 0, 0, 0.9)' +} const darkTheme = { body: '#000000', @@ -88,6 +86,16 @@ const darkTheme = { brandColor: 'var(--primary) !important' } +function ThemeProviderWrapper ({ children }) { + const me = useMe() + console.log(me) + return ( + + {children} + + ) +} + function MyApp ({ Component, pageProps: { session, ...props } }) { const client = getApolloClient() /* @@ -107,11 +115,11 @@ function MyApp ({ Component, pageProps: { session, ...props } }) { return ( - - - - - + + + + + @@ -121,10 +129,10 @@ function MyApp ({ Component, pageProps: { session, ...props } }) { - - - - + + + + ) } diff --git a/prisma/migrations/20211104210749_theme/migration.sql b/prisma/migrations/20211104210749_theme/migration.sql new file mode 100644 index 00000000..fa690e8e --- /dev/null +++ b/prisma/migrations/20211104210749_theme/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "users" ADD COLUMN "theme" TEXT NOT NULL DEFAULT E'light'; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 9195317a..88d54488 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -35,6 +35,7 @@ model User { checkedNotesAt DateTime? tipDefault Int @default(0) pubkey String? @unique + theme String @default("light") @@index([createdAt]) @@map(name: "users") diff --git a/styles/globals.scss b/styles/globals.scss index a400149b..0a3d8ac3 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -95,6 +95,10 @@ footer { fill: #6c757d; } +.pointer { + cursor: pointer; +} + @media screen and (max-width: 767px) { input, select, textarea, .form-control, .form-control:focus, .input-group-text { font-size: 1rem !important;