Integrate Electron context into NotificationProvider for responsive styling
- 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:
parent
998084160f
commit
a5cad3b746
@ -13,6 +13,7 @@ import { ApiServerContext } from './ApiServerContext'
|
||||
import NotificationCenter from '../common/NotificationCenter'
|
||||
import Notification from '../common/Notification'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
import { ElectronContext } from './ElectronContext'
|
||||
|
||||
const NotificationContext = createContext()
|
||||
|
||||
@ -35,6 +36,8 @@ const NotificationProvider = ({ children }) => {
|
||||
const [notifications, setNotifications] = useState([])
|
||||
const [notificationsLoading, setNotificationsLoading] = useState(false)
|
||||
|
||||
const { isElectron } = useContext(ElectronContext)
|
||||
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
|
||||
const fetchNotifications = useCallback(async () => {
|
||||
@ -180,6 +183,7 @@ const NotificationProvider = ({ children }) => {
|
||||
title='Notifications'
|
||||
placement='right'
|
||||
width={isMobile ? '100%' : 460}
|
||||
style={{ marginTop: isElectron ? '40px' : '0px' }}
|
||||
onClose={() => setNotificationCenterVisible(false)}
|
||||
open={notificationCenterVisible}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user