diff --git a/src/main.tsx b/src/main.tsx index 10d01b6..fdb3239 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -19,46 +19,34 @@ function main() { styleEl.id = 'sentinel-css' document.head.append(styleEl) - const injectionMap = new Map() + const injectionMap = new Map() + + const injectNavMenu = (target: Element) => { + if (injectionMap.has(target)) return - const injectNavMenu = (nav: HTMLElement) => { - if (injectionMap.has(nav)) return // eslint-disable-next-line no-console - console.log('[Exporter] Injecting nav', nav) + console.log('[Exporter] Injecting nav', target) const container = getMenuContainer() - injectionMap.set(nav, container) - - const chatList = nav.querySelector(':scope > div.sticky.bottom-0') - if (chatList) { - chatList.prepend(container) - // eslint-disable-next-line no-console - console.log('[Exporter] Prepended container to chat list', chatList) - } - else { - // fallback to the bottom of the nav - container.style.backgroundColor = '#171717' - container.style.position = 'sticky' - container.style.bottom = '72px' - nav.append(container) - // eslint-disable-next-line no-console - console.log('[Exporter] Fallback to appending container to nav', nav) - } + injectionMap.set(target, container) + target.before(container) } - sentinel.on('nav', injectNavMenu) + const selector = '[data-testid="accounts-profile-button"]' + + sentinel.on('selector', injectNavMenu) setInterval(() => { - injectionMap.forEach((container, nav) => { - if (!nav.isConnected) { + injectionMap.forEach((container, target) => { + if (!target.isConnected) { container.remove() - injectionMap.delete(nav) + injectionMap.delete(target) } }) - const navList = Array.from(document.querySelectorAll('nav')).filter(nav => !injectionMap.has(nav)) - navList.forEach(injectNavMenu) - }, 300) + const targets = Array.from(document.querySelectorAll(selector)).filter(target => !injectionMap.has(target)) + targets.forEach(injectNavMenu) + }, 1000) // Support for share page if (isSharePage()) { diff --git a/src/style.css b/src/style.css index dca4ec1..07cc182 100644 --- a/src/style.css +++ b/src/style.css @@ -36,14 +36,6 @@ html { --ce-menu-secondary: var(--sidebar-surface-secondary, #212121); } -.text-menu { - color: var(--ce-text-primary); -} - -.bg-menu { - background-color: var(--ce-menu-primary); -} - .border-menu { border-color: var(--ce-border-light); } diff --git a/src/ui/Dialog.css b/src/ui/Dialog.css index e093149..1efcb76 100644 --- a/src/ui/Dialog.css +++ b/src/ui/Dialog.css @@ -244,7 +244,7 @@ color: #6b7280; font-weight: 600; } -@media (prefers-color-scheme: dark) { +.dark { .SelectItemMetaActive { color: #d1d5db; } } @@ -258,9 +258,11 @@ background: #f9fafb; user-select: none; } -@media (prefers-color-scheme: dark) { + +.dark { .SelectListHeader { background: #1f2937; } } + .SelectListHeaderCell { flex-shrink: 0; font-size: 0.68rem; @@ -277,7 +279,7 @@ text-align: right; } .SelectListHeaderCell:hover { color: #374151; } -@media (prefers-color-scheme: dark) { +.dark { .SelectListHeaderCell:hover { color: #e5e7eb; } } .SelectListHeaderCellTitle { @@ -288,7 +290,7 @@ .SelectListHeaderCellActive { color: #2563eb; } -@media (prefers-color-scheme: dark) { +.dark { .SelectListHeaderCellActive { color: #60a5fa; } } diff --git a/src/ui/Menu.tsx b/src/ui/Menu.tsx index 6cc872e..051a1bb 100644 --- a/src/ui/Menu.tsx +++ b/src/ui/Menu.tsx @@ -91,7 +91,7 @@ function MenuInner({ container }: { container: HTMLDivElement }) { > { @@ -213,7 +213,7 @@ function MenuInner({ container }: { container: HTMLDivElement }) { width="16" height="8" style={{ - 'fill': 'var(--ce-menu-primary)', + 'fill': 'var(--ce-menu-secondary)', 'stroke': 'var(--ce-border-light)', 'stoke-width': '2px', }} diff --git a/src/ui/MenuItem.tsx b/src/ui/MenuItem.tsx index 7c5892f..75c3fb8 100644 --- a/src/ui/MenuItem.tsx +++ b/src/ui/MenuItem.tsx @@ -44,10 +44,9 @@ export const MenuItem: FC = ({ text, successText, disabled = fals