Skip to content

Dark mode #1407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Betree merged 4 commits into from
Dec 7, 2025
Merged

Dark mode #1407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de84872
fix(StatementForm): broken update
Betree Dec 6, 2025
b778643
feat: Dark mode
Betree Dec 6, 2025
2215f82
Merge branch 'staging' into feat/dark-mode
Betree Dec 7, 2025
b3f8dd8
iterate
Betree Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 22 additions & 19 deletions app/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import UserProvider from './components/LoggedInUser/UserProvider'
import { ToastProvider } from './components/ui/toast'
import { TooltipProvider } from './components/ui/tooltip'
import { ENTITY_SPEAKER, ENTITY_STATEMENT, ENTITY_VIDEO } from './constants'
import { ThemeProvider } from './hooks/use-theme'
import i18n from './i18n/i18n'
import { ALGOLIA_INDEXES_NAMES, searchClient } from './lib/algolia'
// Import router
Expand All @@ -31,25 +32,27 @@ const App = () => (
<ReduxProvider store={store}>
<ApolloProvider client={GraphQLClient}>
<I18nextProvider i18n={i18n}>
<TooltipProvider>
<UserProvider>
<InstantSearch
searchClient={searchClient}
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
>
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
<Configure hitsPerPage={16} />
</Index>
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
<Configure hitsPerPage={32} />
</Index>
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
<Configure hitsPerPage={24} />
</Index>
<CFRouter />
</InstantSearch>
</UserProvider>
</TooltipProvider>
<ThemeProvider>
<TooltipProvider>
<UserProvider>
<InstantSearch
searchClient={searchClient}
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
>
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
<Configure hitsPerPage={16} />
</Index>
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
<Configure hitsPerPage={32} />
</Index>
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
<Configure hitsPerPage={24} />
</Index>
<CFRouter />
</InstantSearch>
</UserProvider>
</TooltipProvider>
</ThemeProvider>
</I18nextProvider>
</ApolloProvider>
</ReduxProvider>
Expand Down
2 changes: 1 addition & 1 deletion app/components/App/Logo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import borderlessLogo from '../../assets/logo-borderless.svg'
* The main website logo.
*/
const Logo = ({ borderless = false }) => (
<div className="flex items-center max-h-full font-serif font-medium text-black-500 tracking-wide text-black">
<div className="flex items-center max-h-full font-serif font-medium text-black-500 tracking-wide text-black dark:text-foreground">
<img
alt="C"
src={borderless ? borderlessLogo : logo}
Expand Down
74 changes: 47 additions & 27 deletions app/components/App/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { LogIn } from 'lucide-react'
import React from 'react'
import React, { useMemo } from 'react'
import { withTranslation } from 'react-i18next'
import { withResizeDetector } from 'react-resize-detector'
import { Link, withRouter } from 'react-router-dom'
import Popup from 'reactjs-popup'

Check warning on line 6 in app/components/App/Navbar.jsx

View workflow job for this annotation

GitHub Actions / lint 

Using exported name 'Popup' as identifier for default import
import { UserCircle } from 'styled-icons/fa-regular'
import { CaretDown } from 'styled-icons/fa-solid'

import { ENABLE_PUBLIC_SEARCH } from '../../config'
import { USER_PICTURE_LARGE } from '../../constants'
import { useTheme } from '../../hooks/use-theme'
import { cn } from '../../lib/css-utils'
import NotificationBell from '../LoggedInUser/NotificationBell'
import Notifications from '../LoggedInUser/Notifications'
Expand Down Expand Up @@ -38,10 +39,43 @@
const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, location, width }) => {
const isMobile = width < 600
const loginRedirect = getRedirectUrl()
const { resolvedTheme } = useTheme()
const isDarkMode = resolvedTheme === 'dark'

const notificationsPopupStyle = useMemo(
() => ({
zIndex: 9999,
overflow: 'hidden',
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
borderRadius: '5px',
boxShadow: isDarkMode
? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px'
: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
width: isMobile ? '95%' : '400px',
}),
[isDarkMode, isMobile],
)

const userMenuPopupStyle = useMemo(
() => ({
zIndex: 9999,
overflow: 'hidden',
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
borderRadius: '5px',
boxShadow: isDarkMode
? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px'
: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
minWidth: '200px',
}),
[isDarkMode],
)

return (
<div data-cy="Navbar">
<div className="h-[60px] w-full" />
<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">
<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">
{/* Left */}
<div className="flex items-center">
<div className="flex gap-4 items-center h-[59px]">
Expand All @@ -68,7 +102,7 @@
className="animate-[fadeIn_0.75s_infinite_linear_alternate] mr-2 opacity-50"
/>
) : (
<div className="flex">
<div className="flex items-center gap-2">
{isAuthenticated ? (
<div className="flex items-center">
<div className="mr-3">
Expand All @@ -77,15 +111,7 @@
<Popup
position="bottom right"
offsetX={isMobile ? 75 : 0}
contentStyle={{
zIndex: 9999,
overflow: 'hidden',
backgroundColor: '#ffffff',
border: '1px solid #d3d3d3',
borderRadius: '5px',
boxShadow: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
width: isMobile ? '95%' : '400px',
}}
contentStyle={notificationsPopupStyle}
trigger={<NotificationBell mr={[3, 4]} />}
>
<Notifications>
Expand All @@ -110,28 +136,22 @@
</Popup>
<Popup
position="bottom right"
contentStyle={{
zIndex: 9999,
overflow: 'hidden',
backgroundColor: '#ffffff',
border: '1px solid #d3d3d3',
borderRadius: '5px',
boxShadow: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
minWidth: '200px',
}}
contentStyle={userMenuPopupStyle}
trigger={
<div className="flex items-center h-[38px] cursor-pointer hover:text-[#c2c2c2] [&_figure]:max-h-full [&_figure]:max-w-[38px]">
<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]">
<UserPicture size={36} user={loggedInUser} />
<CaretDown size={24} />
</div>
}
>
<div>
<div className="flex items-center gap-2 border-b border-[#e7e7e7] px-[15px] py-2.5">
<div className="bg-background">
<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">
<UserPicture size={USER_PICTURE_LARGE} user={loggedInUser} />
<div className="flex flex-col justify-center">
<UserAppellation user={loggedInUser} withoutActions />
<span className="text-[0.8em] text-[#252525]">{loggedInUser.email}</span>
<span className="text-[0.8em] text-[#252525] dark:text-muted-foreground">
{loggedInUser.email}
</span>
</div>
</div>
<UserMenu user={loggedInUser} hasLogout isSelf>
Expand All @@ -141,8 +161,8 @@
to={route}
onClick={onClick}
className={cn(
'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]',
index > 0 && 'border-t border-[#e7e7e7]',
'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',
index > 0 && 'border-t border-[#e7e7e7] dark:border-border',
isActive && 'border-l-2 border-primary',
)}
>
Expand Down
Loading
Loading