Merge pull request #31329 from overleaf/mj-dark-mode-notification

[web] Introduce notification for dashboard dark mode

GitOrigin-RevId: da5045d412ddc87a4b18823a4a5fa3192fe15c89

services/web/frontend/extracted-translations.json

@@ -14,6 +14,7 @@
   "Pricing": "",
   "Solutions": "",
   "a_custom_size_has_been_used_in_the_latex_code": "",
+  "a_dashboard_that_follows_your_lead": "",
   "a_file_with_that_name_already_exists_and_will_be_overriden": "",
   "a_more_comprehensive_list_of_keyboard_shortcuts": "",
   "a_new_reference_was_added": "",
@@ -601,6 +602,7 @@
   "failed_to_send_managed_user_invite_to_email": "",
   "failed_to_send_sso_link_invite_to_email": "",
   "fair_usage_policy_applies": "",
+  "fancy_going_dark": "",
   "fast": "",
   "fast_draft": "",
   "feature_enabled_or_disabled": "",
@@ -761,6 +763,7 @@
   "go_to_writefull": "",
   "good_news_you_already_purchased_this_add_on": "",
   "good_news_you_are_already_receiving_this_add_on_via_writefull": "",
+  "got_it": "",
   "got_questions": "",
   "group_admin": "",
   "group_audit_logs": "",
@@ -1091,6 +1094,7 @@
   "math_inline": "",
   "maximum_files_uploaded_together": "",
   "maybe_later": "",
+  "meet_the_new_dark_dashboard": "",
   "members_added": "",
   "members_management": "",
   "mendeley": "",
@@ -2219,11 +2223,15 @@
   "wed_love_you_to_stay": "",
   "welcome_to_overleaf_opening_workspace": "",
   "welcome_to_sl": "",
+  "welcome_to_the_dark_side": "",
   "well_be_here_when_youre_ready": "",
   "were_making_some_changes_to_project_sharing_this_means_you_will_be_visible": "",
   "were_performing_maintenance": "",
+  "weve_given_your_dashboard_a_sleek_new_dark_theme_for_more_comfortable_late_night_research_prefer_the_light_switch_back_anytime_right_here": "",
   "weve_hit_a_problem_try_starting_a_new_chat": "",
   "weve_made_it_easier_to_find_and_use_the_tools_you_need_today": "",
+  "weve_matched_your_dashboard_theme_to_your_editor_preferences_but_you_can_change_that_here_anytime": "",
+  "weve_set_your_dashboard_to_dark_mode_to_help_you_stay_focused_if_youre_a_fan_of_a_lighter_look_you_can_easily_switch_themes_here": "",
   "what_did_you_find_most_helpful": "",
   "what_do_you_need_help_with": "",
   "what_does_this_mean_for_you": "",
@@ -2308,6 +2316,7 @@
   "your_current_plan_gives_you": "",
   "your_current_plan_supports_up_to_x_licenses": "",
   "your_current_project_will_revert_to_the_version_from_time": "",
+  "your_dashboard_is_set_to_match_your_system_theme_automatically_want_a_different_look_pick_your_favorite_theme_here": "",
   "your_email_is_confirmed": "",
   "your_feedback_matters_answer_two_quick_questions": "",
   "your_git_access_info": "",

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -7,13 +7,13 @@ import { isVersionSelected } from '../../utils/history-details'
 import { useUserContext } from '../../../../shared/context/user-context'
 import useDropdownActiveItem from '../../hooks/use-dropdown-active-item'
 import { useHistoryContext } from '../../context/history-context'
-import { useEditorContext } from '../../../../shared/context/editor-context'
 import OLPopover from '@/shared/components/ol/ol-popover'
 import OLOverlay from '@/shared/components/ol/ol-overlay'
 import Close from '@/shared/components/close'
 import { Trans, useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 
 function AllHistoryList() {
   const { id: currentUserId } = useUserContext()
@@ -91,7 +91,7 @@ function AllHistoryList() {
     }
   }, [updatesLoadingState])
 
-  const { inactiveTutorials } = useEditorContext()
+  const { inactiveTutorials } = useTutorialContext()
   const {
     showPopup: showHistoryTutorial,
     tryShowingPopup: tryShowingHistoryTutorial,

services/web/frontend/js/features/ide-react/components/editor-survey.tsx

@@ -5,12 +5,12 @@ import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import OLIconButton from '@/shared/components/ol/ol-icon-button'
 import { OLToast } from '@/shared/components/ol/ol-toast'
 import { OLToastContainer } from '@/shared/components/ol/ol-toast-container'
-import { useEditorContext } from '@/shared/context/editor-context'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import { useTranslation } from 'react-i18next'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 
 type EditorSurveyPage = 'ease-of-use' | 'meets-my-needs' | 'thank-you'
 
@@ -28,7 +28,7 @@ const EditorSurveyContent = () => {
   const [easeOfUse, setEaseOfUse] = useState<number | null>(null)
   const [meetsMyNeeds, setMeetsMyNeeds] = useState<number | null>(null)
   const [page, setPage] = useState<EditorSurveyPage>('ease-of-use')
-  const { inactiveTutorials } = useEditorContext()
+  const { inactiveTutorials } = useTutorialContext()
   const hasCompletedSurvey = inactiveTutorials.includes(TUTORIAL_KEY)
   const newEditor = useIsNewEditorEnabled()
 

services/web/frontend/js/features/ide-react/context/react-context-root.tsx

@@ -32,6 +32,7 @@ import { CommandRegistryProvider } from './command-registry-context'
 import { NewEditorTourProvider } from '@/features/ide-redesign/contexts/new-editor-tour-context'
 import { EditorSelectionProvider } from '@/shared/context/editor-selection-context'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
+import { TutorialProvider } from '@/shared/context/tutorial-context'
 
 const rootContextProviders = importOverleafModules('rootContextProviders') as {
   import: { default: ElementType }
@@ -76,6 +77,7 @@ export const ReactContextRoot: FC<
     UserFeaturesProvider,
     NewEditorTourProvider,
     EditorSelectionProvider,
+    TutorialProvider,
     ...providers,
   }
 
@@ -105,47 +107,49 @@ export const ReactContextRoot: FC<
                         <Providers.EditorViewProvider>
                           <Providers.EditorOpenDocProvider>
                             <Providers.EditorProvider>
-                              <Providers.FileTreeDataProvider>
-                                <Providers.FileTreePathProvider>
-                                  <Providers.UserFeaturesProvider>
-                                    <Providers.PermissionsProvider>
-                                      <Providers.RailProvider>
-                                        <Providers.LayoutProvider>
-                                          <Providers.NewEditorTourProvider>
-                                            <Providers.ProjectSettingsProvider>
-                                              <Providers.EditorManagerProvider>
-                                                <Providers.ReferencesProvider>
-                                                  <Providers.LocalCompileProvider>
-                                                    <Providers.DetachCompileProvider>
-                                                      <Providers.ChatProvider>
-                                                        <Providers.FileTreeOpenProvider>
-                                                          <Providers.OnlineUsersProvider>
-                                                            <Providers.MetadataProvider>
-                                                              <Providers.OutlineProvider>
-                                                                <Providers.CommandRegistryProvider>
-                                                                  <Providers.EditorSelectionProvider>
-                                                                    {
-                                                                      childrenWrappedWithDynamicProviders
-                                                                    }
-                                                                  </Providers.EditorSelectionProvider>
-                                                                </Providers.CommandRegistryProvider>
-                                                              </Providers.OutlineProvider>
-                                                            </Providers.MetadataProvider>
-                                                          </Providers.OnlineUsersProvider>
-                                                        </Providers.FileTreeOpenProvider>
-                                                      </Providers.ChatProvider>
-                                                    </Providers.DetachCompileProvider>
-                                                  </Providers.LocalCompileProvider>
-                                                </Providers.ReferencesProvider>
-                                              </Providers.EditorManagerProvider>
-                                            </Providers.ProjectSettingsProvider>
-                                          </Providers.NewEditorTourProvider>
-                                        </Providers.LayoutProvider>
-                                      </Providers.RailProvider>
-                                    </Providers.PermissionsProvider>
-                                  </Providers.UserFeaturesProvider>
-                                </Providers.FileTreePathProvider>
-                              </Providers.FileTreeDataProvider>
+                              <Providers.TutorialProvider>
+                                <Providers.FileTreeDataProvider>
+                                  <Providers.FileTreePathProvider>
+                                    <Providers.UserFeaturesProvider>
+                                      <Providers.PermissionsProvider>
+                                        <Providers.RailProvider>
+                                          <Providers.LayoutProvider>
+                                            <Providers.NewEditorTourProvider>
+                                              <Providers.ProjectSettingsProvider>
+                                                <Providers.EditorManagerProvider>
+                                                  <Providers.ReferencesProvider>
+                                                    <Providers.LocalCompileProvider>
+                                                      <Providers.DetachCompileProvider>
+                                                        <Providers.ChatProvider>
+                                                          <Providers.FileTreeOpenProvider>
+                                                            <Providers.OnlineUsersProvider>
+                                                              <Providers.MetadataProvider>
+                                                                <Providers.OutlineProvider>
+                                                                  <Providers.CommandRegistryProvider>
+                                                                    <Providers.EditorSelectionProvider>
+                                                                      {
+                                                                        childrenWrappedWithDynamicProviders
+                                                                      }
+                                                                    </Providers.EditorSelectionProvider>
+                                                                  </Providers.CommandRegistryProvider>
+                                                                </Providers.OutlineProvider>
+                                                              </Providers.MetadataProvider>
+                                                            </Providers.OnlineUsersProvider>
+                                                          </Providers.FileTreeOpenProvider>
+                                                        </Providers.ChatProvider>
+                                                      </Providers.DetachCompileProvider>
+                                                    </Providers.LocalCompileProvider>
+                                                  </Providers.ReferencesProvider>
+                                                </Providers.EditorManagerProvider>
+                                              </Providers.ProjectSettingsProvider>
+                                            </Providers.NewEditorTourProvider>
+                                          </Providers.LayoutProvider>
+                                        </Providers.RailProvider>
+                                      </Providers.PermissionsProvider>
+                                    </Providers.UserFeaturesProvider>
+                                  </Providers.FileTreePathProvider>
+                                </Providers.FileTreeDataProvider>
+                              </Providers.TutorialProvider>
                             </Providers.EditorProvider>
                           </Providers.EditorOpenDocProvider>
                         </Providers.EditorViewProvider>

services/web/frontend/js/features/ide-redesign/components/new-editor-opt-out-intro-modal.tsx

@@ -9,15 +9,15 @@ import { useCallback, useEffect, useState } from 'react'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
-import { useEditorContext } from '@/shared/context/editor-context'
 import { useIsNewToNewEditor } from '../utils/new-editor-utils'
 import { useNewEditorTourContext } from '../contexts/new-editor-tour-context'
 import promoVideo from './new-editor-promo-video.mp4'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 
 const TUTORIAL_KEY = 'new-editor-intro-2'
 
 export default function NewEditorOptOutIntroModal() {
-  const { inactiveTutorials } = useEditorContext()
+  const { inactiveTutorials } = useTutorialContext()
   const {
     tryShowingPopup,
     showPopup: showModal,

services/web/frontend/js/features/ide-redesign/components/old-editor-warning-tooltip.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { useCallback, useEffect, useState } from 'react'
 import { useSwitchEnableNewEditorState } from '../hooks/use-switch-enable-new-editor-state'
-import { useEditorContext } from '@/shared/context/editor-context'
 import { canUseNewEditor } from '../utils/new-editor-utils'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 
 const TUTORIAL_KEY = 'old-editor-warning-tooltip-2'
 
@@ -15,7 +15,7 @@ export default function OldEditorWarningTooltip({
 }: {
   target: HTMLElement | null
 }) {
-  const { inactiveTutorials } = useEditorContext()
+  const { inactiveTutorials } = useTutorialContext()
   const { t } = useTranslation()
   const { loading, setEditorRedesignStatus } = useSwitchEnableNewEditorState()
 

services/web/frontend/js/features/ide-redesign/components/tooltip-promo.tsx

@@ -1,5 +1,5 @@
 import Close from '@/shared/components/close'
-import { useEditorContext } from '@/shared/context/editor-context'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import classNames from 'classnames'
@@ -26,7 +26,7 @@ export default function TooltipPromotion({
   placement?: OverlayProps['placement']
   splitTestName?: string
 }) {
-  const { inactiveTutorials } = useEditorContext()
+  const { inactiveTutorials } = useTutorialContext()
   const { showPopup, tryShowingPopup, hideUntilReload, dismissTutorial } =
     useTutorial(tutorialKey, eventData)
 

services/web/frontend/js/features/monthly-texlive/rolling-compile-image-changed-alert.tsx

@@ -1,17 +1,17 @@
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
-import { useEditorContext } from '@/shared/context/editor-context'
 import { useProjectContext } from '@/shared/context/project-context'
 import OLNotification from '@/shared/components/ol/ol-notification'
 import { useTranslation, Trans } from 'react-i18next'
 import { useCallback } from 'react'
 import { onRollingBuild } from '@/shared/utils/rolling-build'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 
 export const TUTORIAL_KEY = 'rolling-compile-image-changed'
 
 const RollingCompileImageChangedAlert = () => {
   const { completeTutorial } = useTutorial(TUTORIAL_KEY)
   const { project } = useProjectContext()
-  const { inactiveTutorials } = useEditorContext()
+  const { inactiveTutorials } = useTutorialContext()
 
   const { t } = useTranslation()
 

services/web/frontend/js/features/project-list/components/project-list-root.tsx

@@ -21,6 +21,7 @@ import { DsNavStyleProvider } from '@/features/project-list/components/use-is-ds
 import CookieBanner from '@/shared/components/cookie-banner'
 import useThemedPage from '@/shared/hooks/use-themed-page'
 import { UserSettingsProvider } from '@/shared/context/user-settings-context'
+import { TutorialProvider } from '@/shared/context/tutorial-context'
 
 function ProjectListRoot() {
   const { isReady } = useWaitForI18n()
@@ -37,9 +38,11 @@ export function ProjectListRootInner() {
     <ProjectListProvider>
       <ColorPickerProvider>
         <SplitTestProvider>
-          <UserSettingsProvider>
-            <ProjectListPageContent />
-          </UserSettingsProvider>
+          <TutorialProvider>
+            <UserSettingsProvider>
+              <ProjectListPageContent />
+            </UserSettingsProvider>
+          </TutorialProvider>
         </SplitTestProvider>
       </ColorPickerProvider>
     </ProjectListProvider>

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -18,6 +18,8 @@ import { useScrolled } from '@/features/project-list/components/sidebar/use-scro
 import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
 import { SurveyWidgetDsNav } from '@/features/project-list/components/survey-widget-ds-nav'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { ThemedProjectDashboardNotification } from './themed-project-dashboard-notification'
+import { useThemedDashboardIntro } from './use-themed-dashboard-intro'
 
 function SidebarDsNav() {
   const { t } = useTranslation()
@@ -38,6 +40,12 @@ function SidebarDsNav() {
   ) as NavbarDropdownItemData
   const { containerRef, scrolledUp, scrolledDown } = useScrolled()
   const themedDsNav = useFeatureFlag('themed-project-dashboard')
+  const {
+    completeThemedDashboardIntro,
+    dismissThemedDashboardIntro,
+    targetRef,
+    showingThemedDashboardIntro,
+  } = useThemedDashboardIntro()
 
   return (
     <div
@@ -131,6 +139,12 @@ function SidebarDsNav() {
                       item: 'account',
                       location: 'sidebar',
                     })
+                    if (showingThemedDashboardIntro) {
+                      completeThemedDashboardIntro({
+                        action: 'complete',
+                        event: 'promo-click',
+                      })
+                    }
                   }
                 }}
                 role="menu"
@@ -144,7 +158,7 @@ function SidebarDsNav() {
                     }}
                     hidden={showAccountDropdown}
                   >
-                    <div>
+                    <div ref={targetRef}>
                       <User size={24} />
                     </div>
                   </OLTooltip>
@@ -166,7 +180,16 @@ function SidebarDsNav() {
                   />
                 </Dropdown.Menu>
               </Dropdown>
-              <UserProvider>{contactUsModal}</UserProvider>
+              <UserProvider>
+                {themedDsNav && (
+                  <ThemedProjectDashboardNotification
+                    target={targetRef.current}
+                    show={showingThemedDashboardIntro}
+                    onDismiss={dismissThemedDashboardIntro}
+                  />
+                )}
+                {contactUsModal}
+              </UserProvider>
             </>
           )}
         </nav>

services/web/frontend/js/features/project-list/components/sidebar/themed-project-dashboard-notification.tsx

@@ -0,0 +1,102 @@
+import Close from '@/shared/components/close'
+import OLButton from '@/shared/components/ol/ol-button'
+import { useUserContext } from '@/shared/context/user-context'
+import { useUserSettingsContext } from '@/shared/context/user-settings-context'
+import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
+import { Overlay, Popover } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+// TODO: Update this before release
+const NEW_USER_CUTOFF_DATE = new Date('2026-02-15')
+
+type ThemedProjectDashboardNotificationProps = {
+  target: HTMLElement | null
+  show: boolean
+  onDismiss: () => void
+}
+export const ThemedProjectDashboardNotification = ({
+  target,
+  show,
+  onDismiss,
+}: ThemedProjectDashboardNotificationProps) => {
+  const theme = useActiveOverallTheme('themed-project-dashboard')
+  const {
+    userSettings: { overallTheme },
+  } = useUserSettingsContext()
+  const { signUpDate: signUpDateString } = useUserContext()
+  const signUpDate = signUpDateString ? new Date(signUpDateString) : new Date(0)
+  const isNewUser = signUpDate > NEW_USER_CUTOFF_DATE
+  const { t } = useTranslation()
+
+  if (!target) {
+    return null
+  }
+
+  if (!show) {
+    return null
+  }
+
+  let content
+  switch (true) {
+    case overallTheme === 'system':
+      content = {
+        header: t('a_dashboard_that_follows_your_lead'),
+        body: t(
+          'your_dashboard_is_set_to_match_your_system_theme_automatically_want_a_different_look_pick_your_favorite_theme_here'
+        ),
+      }
+      break
+    case isNewUser && theme === 'dark':
+      content = {
+        header: t('meet_the_new_dark_dashboard'),
+        body: t(
+          'weve_set_your_dashboard_to_dark_mode_to_help_you_stay_focused_if_youre_a_fan_of_a_lighter_look_you_can_easily_switch_themes_here'
+        ),
+      }
+      break
+    case theme === 'dark':
+      content = {
+        header: t('welcome_to_the_dark_side'),
+        body: t(
+          'weve_given_your_dashboard_a_sleek_new_dark_theme_for_more_comfortable_late_night_research_prefer_the_light_switch_back_anytime_right_here'
+        ),
+      }
+      break
+    case theme === 'light':
+      content = {
+        header: t('fancy_going_dark'),
+        body: t(
+          'weve_matched_your_dashboard_theme_to_your_editor_preferences_but_you_can_change_that_here_anytime'
+        ),
+      }
+      break
+    default:
+      content = { header: '', body: '' }
+  }
+
+  if (!content.header || !content.body) {
+    return null
+  }
+
+  return (
+    <Overlay show placement="right" target={target} onHide={onDismiss}>
+      <Popover className="themed-dashboard-intro-popover">
+        <Popover.Header>
+          {content.header}
+          <Close
+            variant={theme === 'light' ? 'dark' : 'light'}
+            onDismiss={onDismiss}
+          />
+        </Popover.Header>
+        <Popover.Body>
+          {content.body}
+          <div className="d-flex justify-content-end">
+            <OLButton onClick={onDismiss} variant="link">
+              {t('got_it')}
+            </OLButton>
+          </div>
+        </Popover.Body>
+      </Popover>
+    </Overlay>
+  )
+}

services/web/frontend/js/features/project-list/components/sidebar/use-themed-dashboard-intro.ts

@@ -0,0 +1,38 @@
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
+import useTutorial from '@/shared/hooks/promotions/use-tutorial'
+import { useCallback, useEffect, useRef } from 'react'
+
+const THEMED_DASHBOARD_TUTORIAL_KEY = 'themed-dashboard-intro'
+
+export const useThemedDashboardIntro = () => {
+  const themedDsNav = useFeatureFlag('themed-project-dashboard')
+  const targetRef = useRef<HTMLDivElement | null>(null)
+  const { inactiveTutorials } = useTutorialContext()
+  const {
+    tryShowingPopup: tryShowingPopupThemedDashboardIntro,
+    showPopup: showingThemedDashboardIntro,
+    completeTutorial: completeThemedDashboardIntro,
+    dismissTutorial,
+  } = useTutorial(THEMED_DASHBOARD_TUTORIAL_KEY, {
+    name: THEMED_DASHBOARD_TUTORIAL_KEY,
+  })
+  const dismissThemedDashboardIntro = useCallback(() => {
+    dismissTutorial()
+  }, [dismissTutorial])
+  useEffect(() => {
+    if (
+      themedDsNav &&
+      !inactiveTutorials.includes(THEMED_DASHBOARD_TUTORIAL_KEY)
+    ) {
+      tryShowingPopupThemedDashboardIntro()
+    }
+  }, [inactiveTutorials, tryShowingPopupThemedDashboardIntro, themedDsNav])
+
+  return {
+    targetRef,
+    showingThemedDashboardIntro,
+    completeThemedDashboardIntro,
+    dismissThemedDashboardIntro,
+  }
+}

services/web/frontend/js/shared/context/editor-context.tsx

@@ -29,10 +29,6 @@ export const EditorContext = createContext<
       isProjectOwner: boolean
       isRestrictedTokenMember?: boolean
       isPendingEditor: boolean
-      deactivateTutorial: (tutorial: string) => void
-      inactiveTutorials: string[]
-      currentPopup: string | null
-      setCurrentPopup: Dispatch<SetStateAction<string | null>>
       hasPremiumSuggestion: boolean
       setHasPremiumSuggestion: (value: boolean) => void
       setPremiumSuggestionResetDate: (date: Date) => void
@@ -77,11 +73,6 @@ export const EditorProvider: FC<React.PropsWithChildren> = ({ children }) => {
     )
   }, [])
 
-  const [inactiveTutorials, setInactiveTutorials] = useState(
-    () => getMeta('ol-inactiveTutorials') || []
-  )
-
-  const [currentPopup, setCurrentPopup] = useState<string | null>(null)
   const [hasPremiumSuggestion, setHasPremiumSuggestion] = useState<boolean>(
     () => {
       return Boolean(
@@ -111,13 +102,6 @@ export const EditorProvider: FC<React.PropsWithChildren> = ({ children }) => {
     [members, userId]
   )
 
-  const deactivateTutorial = useCallback(
-    (tutorialKey: string) => {
-      setInactiveTutorials([...inactiveTutorials, tutorialKey])
-    },
-    [inactiveTutorials]
-  )
-
   const renameProject = useCallback(
     (newName: string) => {
       const oldName = projectName
@@ -180,10 +164,6 @@ export const EditorProvider: FC<React.PropsWithChildren> = ({ children }) => {
       isRestrictedTokenMember: getMeta('ol-isRestrictedTokenMember'),
       isPendingEditor,
       insertSymbol,
-      inactiveTutorials,
-      deactivateTutorial,
-      currentPopup,
-      setCurrentPopup,
       hasPremiumSuggestion,
       setHasPremiumSuggestion,
       premiumSuggestionResetDate,
@@ -201,10 +181,6 @@ export const EditorProvider: FC<React.PropsWithChildren> = ({ children }) => {
       renameProject,
       isPendingEditor,
       insertSymbol,
-      inactiveTutorials,
-      deactivateTutorial,
-      currentPopup,
-      setCurrentPopup,
       hasPremiumSuggestion,
       setHasPremiumSuggestion,
       premiumSuggestionResetDate,

services/web/frontend/js/shared/context/tutorial-context.tsx

@@ -0,0 +1,64 @@
+import getMeta from '@/utils/meta'
+import {
+  createContext,
+  Dispatch,
+  FC,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+
+export const TutorialContext = createContext<
+  | {
+      deactivateTutorial: (tutorial: string) => void
+      inactiveTutorials: string[]
+      currentPopup: string | null
+      setCurrentPopup: Dispatch<SetStateAction<string | null>>
+    }
+  | undefined
+>(undefined)
+
+export const TutorialProvider: FC<React.PropsWithChildren> = ({ children }) => {
+  const [inactiveTutorials, setInactiveTutorials] = useState(
+    () => getMeta('ol-inactiveTutorials') || []
+  )
+
+  const [currentPopup, setCurrentPopup] = useState<string | null>(null)
+
+  const deactivateTutorial = useCallback(
+    (tutorialKey: string) => {
+      setInactiveTutorials([...inactiveTutorials, tutorialKey])
+    },
+    [inactiveTutorials]
+  )
+
+  const value = useMemo(
+    () => ({
+      deactivateTutorial,
+      inactiveTutorials,
+      currentPopup,
+      setCurrentPopup,
+    }),
+    [deactivateTutorial, inactiveTutorials, currentPopup, setCurrentPopup]
+  )
+
+  return (
+    <TutorialContext.Provider value={value}>
+      {children}
+    </TutorialContext.Provider>
+  )
+}
+
+export function useTutorialContext() {
+  const context = useContext(TutorialContext)
+
+  if (!context) {
+    throw new Error(
+      'useTutorialContext is only available inside TutorialProvider'
+    )
+  }
+
+  return context
+}

services/web/frontend/js/shared/hooks/promotions/use-tutorial.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'
 import * as eventTracking from '@/infrastructure/event-tracking'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
-import { useEditorContext } from '@/shared/context/editor-context'
+import { useTutorialContext } from '@/shared/context/tutorial-context'
 
 type CompleteTutorialParams = {
   event: string
@@ -22,7 +22,7 @@ const useTutorial = (
   const [showPopup, setShowPopup] = useState(false)
 
   const { deactivateTutorial, currentPopup, setCurrentPopup } =
-    useEditorContext()
+    useTutorialContext()
 
   const completeTutorial = useCallback(
     async (

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -4,6 +4,11 @@
   --theme-toggle-selected-background: var(--green-20);
   --ds-nav-content-bg-secondary: var(--bg-light-secondary);
   --table-icon-bg-hover: 27 34 44;
+  --themed-dashboard-popover-bg: var(--bg-dark-primary);
+  --themed-dashboard-popover-color: var(--content-primary-dark);
+  --themed-dashboard-popover-link-color: var(--link-ui-dark);
+  --themed-dashboard-popover-link-hover-color: var(--link-ui-hover-dark);
+  --themed-dashboard-popover-link-visited-color: var(--link-ui-visited-dark);
 
   @include theme('default') {
     --ds-nav-active-bg: var(--green-70);
@@ -11,6 +16,11 @@
     --theme-toggle-selected-background: var(--green-70);
     --ds-nav-content-bg-secondary: var(--bg-dark-secondary);
     --table-icon-bg-hover: 255 255 255;
+    --themed-dashboard-popover-bg: var(--bg-light-primary);
+    --themed-dashboard-popover-color: var(--content-primary);
+    --themed-dashboard-popover-link-color: var(--link-ui);
+    --themed-dashboard-popover-link-hover-color: var(--link-ui-hover);
+    --themed-dashboard-popover-link-visited-color: var(--link-ui-visited);
   }
 }
 
@@ -420,3 +430,26 @@ body {
     background-color: var(--theme-toggle-selected-background);
   }
 }
+
+.themed-dashboard-intro-popover {
+  --bs-popover-bg: var(--themed-dashboard-popover-bg);
+  --bs-popover-header-bg: var(--themed-dashboard-popover-bg);
+  --bs-popover-body-color: var(--themed-dashboard-popover-color);
+  --bs-popover-header-color: var(--themed-dashboard-popover-color);
+
+  .btn-link {
+    color: var(--bs-popover-body-color);
+  }
+
+  a {
+    color: var(--themed-dashboard-popover-link-color);
+
+    &:visited {
+      color: var(--themed-dashboard-popover-link-hover-color);
+    }
+
+    &:hover {
+      color: var(--themed-dashboard-popover-link-visited-color);
+    }
+  }
+}