Skip to content

Commit 8fa9ba8

Browse files
BetreeBetree
authored
Dark mode (#1407)
1 parent 82a21ed commit 8fa9ba8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+844
-332
lines changed

‎app/App.jsx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import UserProvider from './components/LoggedInUser/UserProvider'
1616
import { ToastProvider } from './components/ui/toast'
1717
import { TooltipProvider } from './components/ui/tooltip'
1818
import { ENTITY_SPEAKER, ENTITY_STATEMENT, ENTITY_VIDEO } from './constants'
19+
import { ThemeProvider } from './hooks/use-theme'
1920
import i18n from './i18n/i18n'
2021
import { ALGOLIA_INDEXES_NAMES, searchClient } from './lib/algolia'
2122
// Import router
@@ -31,25 +32,27 @@ const App = () => (
3132
<ReduxProvider store={store}>
3233
<ApolloProvider client={GraphQLClient}>
3334
<I18nextProvider i18n={i18n}>
34-
<TooltipProvider>
35-
<UserProvider>
36-
<InstantSearch
37-
searchClient={searchClient}
38-
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
39-
>
40-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
41-
<Configure hitsPerPage={16} />
42-
</Index>
43-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
44-
<Configure hitsPerPage={32} />
45-
</Index>
46-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
47-
<Configure hitsPerPage={24} />
48-
</Index>
49-
<CFRouter />
50-
</InstantSearch>
51-
</UserProvider>
52-
</TooltipProvider>
35+
<ThemeProvider>
36+
<TooltipProvider>
37+
<UserProvider>
38+
<InstantSearch
39+
searchClient={searchClient}
40+
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
41+
>
42+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
43+
<Configure hitsPerPage={16} />
44+
</Index>
45+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
46+
<Configure hitsPerPage={32} />
47+
</Index>
48+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
49+
<Configure hitsPerPage={24} />
50+
</Index>
51+
<CFRouter />
52+
</InstantSearch>
53+
</UserProvider>
54+
</TooltipProvider>
55+
</ThemeProvider>
5356
</I18nextProvider>
5457
</ApolloProvider>
5558
</ReduxProvider>

‎app/components/App/Logo.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import borderlessLogo from '../../assets/logo-borderless.svg'
77
* The main website logo.
88
*/
99
const Logo = ({ borderless = false }) => (
10-
<div className="flex items-center max-h-full font-serif font-medium text-black-500 tracking-wide text-black">
10+
<div className="flex items-center max-h-full font-serif font-medium text-black-500 tracking-wide text-black dark:text-foreground">
1111
<img
1212
alt="C"
1313
src={borderless ? borderlessLogo : logo}

‎app/components/App/Navbar.jsx‎

Lines changed: 47 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { LogIn } from 'lucide-react'
2-
import React from 'react'
2+
import React, { useMemo } from 'react'
33
import { withTranslation } from 'react-i18next'
44
import { withResizeDetector } from 'react-resize-detector'
55
import { Link, withRouter } from 'react-router-dom'
@@ -9,6 +9,7 @@ import { CaretDown } from 'styled-icons/fa-solid'
99

1010
import { ENABLE_PUBLIC_SEARCH } from '../../config'
1111
import { USER_PICTURE_LARGE } from '../../constants'
12+
import { useTheme } from '../../hooks/use-theme'
1213
import { cn } from '../../lib/css-utils'
1314
import NotificationBell from '../LoggedInUser/NotificationBell'
1415
import Notifications from '../LoggedInUser/Notifications'
@@ -38,10 +39,43 @@ const getRedirectUrl = () => {
3839
const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, location, width }) => {
3940
const isMobile = width < 600
4041
const loginRedirect = getRedirectUrl()
42+
const { resolvedTheme } = useTheme()
43+
const isDarkMode = resolvedTheme === 'dark'
44+
45+
const notificationsPopupStyle = useMemo(
46+
() => ({
47+
zIndex: 9999,
48+
overflow: 'hidden',
49+
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
50+
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
51+
borderRadius: '5px',
52+
boxShadow: isDarkMode
53+
? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px'
54+
: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
55+
width: isMobile ? '95%' : '400px',
56+
}),
57+
[isDarkMode, isMobile],
58+
)
59+
60+
const userMenuPopupStyle = useMemo(
61+
() => ({
62+
zIndex: 9999,
63+
overflow: 'hidden',
64+
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
65+
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
66+
borderRadius: '5px',
67+
boxShadow: isDarkMode
68+
? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px'
69+
: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
70+
minWidth: '200px',
71+
}),
72+
[isDarkMode],
73+
)
74+
4175
return (
4276
<div data-cy="Navbar">
4377
<div className="h-[60px] w-full" />
44-
<div className="fixed z-40 top-0 w-full flex justify-between items-center bg-white h-[60px] border-b border-[#dadada] shadow-[0px_0px_15px_rgba(125,125,125,0.25)] transition-[top] duration-300 animate-fadeInUp px-2.5">
78+
<div className="fixed z-40 top-0 w-full flex justify-between items-center bg-white dark:bg-background h-[60px] border-b border-[#dadada] dark:border-border shadow-[0px_0px_15px_rgba(125,125,125,0.25)] dark:shadow-[0px_0px_15px_rgba(0,0,0,0.25)] transition-[top] duration-300 animate-fadeInUp px-2.5">
4579
{/* Left */}
4680
<div className="flex items-center">
4781
<div className="flex gap-4 items-center h-[59px]">
@@ -68,7 +102,7 @@ const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, locatio
68102
className="animate-[fadeIn_0.75s_infinite_linear_alternate] mr-2 opacity-50"
69103
/>
70104
) : (
71-
<div className="flex">
105+
<div className="flex items-center gap-2">
72106
{isAuthenticated ? (
73107
<div className="flex items-center">
74108
<div className="mr-3">
@@ -77,15 +111,7 @@ const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, locatio
77111
<Popup
78112
position="bottom right"
79113
offsetX={isMobile ? 75 : 0}
80-
contentStyle={{
81-
zIndex: 9999,
82-
overflow: 'hidden',
83-
backgroundColor: '#ffffff',
84-
border: '1px solid #d3d3d3',
85-
borderRadius: '5px',
86-
boxShadow: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
87-
width: isMobile ? '95%' : '400px',
88-
}}
114+
contentStyle={notificationsPopupStyle}
89115
trigger={<NotificationBell mr={[3, 4]} />}
90116
>
91117
<Notifications>
@@ -110,28 +136,22 @@ const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, locatio
110136
</Popup>
111137
<Popup
112138
position="bottom right"
113-
contentStyle={{
114-
zIndex: 9999,
115-
overflow: 'hidden',
116-
backgroundColor: '#ffffff',
117-
border: '1px solid #d3d3d3',
118-
borderRadius: '5px',
119-
boxShadow: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
120-
minWidth: '200px',
121-
}}
139+
contentStyle={userMenuPopupStyle}
122140
trigger={
123-
<div className="flex items-center h-[38px] cursor-pointer hover:text-[#c2c2c2] [&_figure]:max-h-full [&_figure]:max-w-[38px]">
141+
<div className="flex items-center h-[38px] cursor-pointer hover:text-[#c2c2c2] dark:hover:text-gray-400 [&_figure]:max-h-full [&_figure]:max-w-[38px]">
124142
<UserPicture size={36} user={loggedInUser} />
125143
<CaretDown size={24} />
126144
</div>
127145
}
128146
>
129-
<div>
130-
<div className="flex items-center gap-2 border-b border-[#e7e7e7] px-[15px] py-2.5">
147+
<div className="bg-background">
148+
<div className="flex items-center gap-2 border-b border-[#e7e7e7] dark:border-border px-[15px] py-2.5 dark:bg-slate-900 bg-slate-100">
131149
<UserPicture size={USER_PICTURE_LARGE} user={loggedInUser} />
132150
<div className="flex flex-col justify-center">
133151
<UserAppellation user={loggedInUser} withoutActions />
134-
<span className="text-[0.8em] text-[#252525]">{loggedInUser.email}</span>
152+
<span className="text-[0.8em] text-[#252525] dark:text-muted-foreground">
153+
{loggedInUser.email}
154+
</span>
135155
</div>
136156
</div>
137157
<UserMenu user={loggedInUser} hasLogout isSelf>
@@ -141,8 +161,8 @@ const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, locatio
141161
to={route}
142162
onClick={onClick}
143163
className={cn(
144-
'block border-l-2 border-white bg-white text-base px-[15px] py-2.5 outline-none hover:bg-[#f5f7fa] active:bg-[#f5f7fa] focus:bg-[#f5f7fa]',
145-
index > 0 && 'border-t border-[#e7e7e7]',
164+
'block border-l-2 border-white dark:border-background bg-white dark:bg-background text-base px-[15px] py-2.5 outline-none text-gray-700 dark:text-foreground hover:bg-[#f5f7fa] dark:hover:bg-accent active:bg-[#f5f7fa] dark:active:bg-accent focus:bg-[#f5f7fa] dark:focus:bg-accent',
165+
index > 0 && 'border-t border-[#e7e7e7] dark:border-border',
146166
isActive && 'border-l-2 border-primary',
147167
)}
148168
>

0 commit comments

Comments
 (0)