farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate Electron context into NotificationProvider for responsive styling

Browse Source 
- Added `ElectronContext` to the `NotificationProvider` to access the `isElectron` state.
- Updated the notification center's styling to conditionally apply a top margin based on whether the app is running in an Electron environment, enhancing the UI for better responsiveness.
This commit is contained in:
Tom Butcher 2026-08-08 19:38:00 +01:00
parent 998084160f
commit a5cad3b746
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Dashboard/context/NotificationContext.jsx
View File

@ -13,6 +13,7 @@ import { ApiServerContext } from './ApiServerContext'
import NotificationCenter from '../common/NotificationCenter' import NotificationCenter from '../common/NotificationCenter'
import Notification from '../common/Notification' import Notification from '../common/Notification'
import { useMediaQuery } from 'react-responsive' import { useMediaQuery } from 'react-responsive'
import { ElectronContext } from './ElectronContext'
const NotificationContext = createContext() const NotificationContext = createContext()
@ -35,6 +36,8 @@ const NotificationProvider = ({ children }) => {
const [notifications, setNotifications] = useState([]) const [notifications, setNotifications] = useState([])
const [notificationsLoading, setNotificationsLoading] = useState(false) const [notificationsLoading, setNotificationsLoading] = useState(false)
const { isElectron } = useContext(ElectronContext)
const isMobile = useMediaQuery({ maxWidth: 768 }) const isMobile = useMediaQuery({ maxWidth: 768 })
const fetchNotifications = useCallback(async () => { const fetchNotifications = useCallback(async () => {
@ -180,6 +183,7 @@ const NotificationProvider = ({ children }) => {
title='Notifications' title='Notifications'
placement='right' placement='right'
width={isMobile ? '100%' : 460} width={isMobile ? '100%' : 460}
style={{ marginTop: isElectron ? '40px' : '0px' }}
onClose={() => setNotificationCenterVisible(false)} onClose={() => setNotificationCenterVisible(false)}
open={notificationCenterVisible} open={notificationCenterVisible}
> >