Merge pull request #36446 from overleaf/mj-themed-keyboard-shortcuts

[web] Add theme support to keyboard shortcuts modal

GitOrigin-RevId: c92088cbe81a58431627b2343df5d90b68f2bc60

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx

@@ -11,6 +11,7 @@ import {
 import OLButton from '@/shared/components/ol/ol-button'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLCol from '@/shared/components/ol/ol-col'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export default memo(function HotkeysModal({
   animation = true,
@@ -26,11 +27,18 @@ export default memo(function HotkeysModal({
   trackChangesVisible?: boolean
 }) {
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
 
   const ctrl = isMac ? 'Cmd' : 'Ctrl'
 
   return (
-    <OLModal size="lg" onHide={handleHide} show={show} animation={animation}>
+    <OLModal
+      size="lg"
+      onHide={handleHide}
+      show={show}
+      animation={animation}
+      themed={themed}
+    >
       <OLModalHeader>
         <OLModalTitle>{t('hotkeys')}</OLModalTitle>
       </OLModalHeader>

services/web/frontend/stylesheets/pages/editor/hotkeys.scss

@@ -1,4 +1,8 @@
 .hotkeys-modal {
+  @include themed-links;
+
+  --bs-code-color: var(--content-secondary-themed);
+
   font-size: var(--font-size-02);
 
   h3:first-child {
@@ -23,7 +27,7 @@
   }
 
   .hotkeys-modal-bottom-text {
-    background-color: var(--bg-light-secondary);
+    background-color: var(--bg-secondary-themed);
     padding: var(--spacing-04);
     border-radius: var(--border-radius-base);
   }

services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react'
+import { ComponentProps } from 'react'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
 import HotkeysModal from '../../../../../frontend/js/features/hotkeys-modal/components/hotkeys-modal'
 import { expect } from 'chai'
 import sinon from 'sinon'
@@ -9,9 +11,17 @@ const modalProps = {
   trackChangesVisible: false,
 }
 
+function renderModal(props: Partial<ComponentProps<typeof HotkeysModal>> = {}) {
+  return render(
+    <SplitTestProvider>
+      <HotkeysModal {...modalProps} {...props} />
+    </SplitTestProvider>
+  )
+}
+
 describe('<HotkeysModal />', function () {
   it('renders the translated modal title on cm6', async function () {
-    const { baseElement } = render(<HotkeysModal {...modalProps} />)
+    const { baseElement } = renderModal()
 
     expect(baseElement.querySelector('.modal-title')?.textContent).to.equal(
       'Hotkeys'
@@ -19,14 +29,14 @@ describe('<HotkeysModal />', function () {
   })
 
   it('renders translated heading with embedded code', function () {
-    const { baseElement } = render(<HotkeysModal {...modalProps} />)
+    const { baseElement } = renderModal()
 
     const results = baseElement.querySelectorAll('h3 code')
     expect(results).to.have.length(1)
   })
 
   it('renders the hotkey descriptions', function () {
-    const { baseElement } = render(<HotkeysModal {...modalProps} />)
+    const { baseElement } = renderModal()
 
     const hotkeys = baseElement.querySelectorAll(
       '[data-test-selector="hotkey"]'
@@ -35,9 +45,7 @@ describe('<HotkeysModal />', function () {
   })
 
   it('adds extra hotkey descriptions when Track Changes is enabled', function () {
-    const { baseElement } = render(
-      <HotkeysModal {...modalProps} trackChangesVisible />
-    )
+    const { baseElement } = renderModal({ trackChangesVisible: true })
 
     const hotkeys = baseElement.querySelectorAll(
       '[data-test-selector="hotkey"]'
@@ -46,14 +54,14 @@ describe('<HotkeysModal />', function () {
   })
 
   it('uses Ctrl for non-macOS', function () {
-    render(<HotkeysModal {...modalProps} />)
+    renderModal()
 
     expect(screen.getAllByText(/Ctrl/)).to.have.length(16)
     expect(screen.queryByText(/Cmd/)).to.not.exist
   })
 
   it('uses Cmd for macOS', function () {
-    render(<HotkeysModal {...modalProps} isMac />)
+    renderModal({ isMac: true })
 
     expect(screen.getAllByText(/Cmd/)).to.have.length(12)
     expect(screen.getAllByText(/Ctrl/)).to.have.length(4)