Merge pull request #35033 from overleaf/mj-drop-dark-mode-components-opt-in

[web] Remove explicit dark mode component opt-in

GitOrigin-RevId: b28603a9989bd046039c247ee2cf9f740c9feac0

services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx

@@ -95,12 +95,7 @@ function FileTreeContextMenu() {
       : 'down'
 
   return ReactDOM.createPortal(
-    <div
-      style={contextMenuCoords}
-      // TODO ide-redesign-cleanup: remove 'ide-redesign-main' class when old editor is removed
-      // It is only used to apply dark theme styles to the context menu in the new editor
-      className="context-menu ide-redesign-main"
-    >
+    <div style={contextMenuCoords} className="context-menu">
       <Dropdown
         show
         drop={dropDirection}

services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.tsx

@@ -28,15 +28,7 @@ function PdfPreviewDetachedRootContent() {
       activeOverallTheme === 'dark' ? 'default' : 'light'
   }, [activeOverallTheme])
 
-  return (
-    <EditorRedesignWrapper>
-      <PdfPreview />
-    </EditorRedesignWrapper>
-  )
-}
-function EditorRedesignWrapper({ children }: { children: React.ReactNode }) {
-  // TODO ide-redesign-cleanup: this wrapper should not be required
-  return <div className="ide-redesign-main">{children}</div>
+  return <PdfPreview />
 }
 
 export default PdfPreviewDetachedRoot // for testing

services/web/frontend/js/features/source-editor/components/tabs/tabs-context-menu.tsx

@@ -73,8 +73,7 @@ export function TabsContextMenu() {
     <div
       ref={menuRef}
       style={{ top: contextMenuTarget.top, left: contextMenuTarget.left }}
-      // TODO ide-redesign-cleanup: remove 'ide-redesign-main' class when old editor is removed
-      className="context-menu ide-redesign-main"
+      className="context-menu"
     >
       <Dropdown
         show

services/web/frontend/stylesheets/components/button.scss

@@ -94,11 +94,8 @@
   }
 
   @include theme('default') {
-    .ide-redesign-main,
-    .project-ds-nav-page {
-      .btn {
-        @include dark-buttons;
-      }
+    .btn {
+      @include dark-buttons;
     }
   }
 }

services/web/frontend/stylesheets/components/dropdown-menu.scss

@@ -37,14 +37,7 @@
 }
 
 @include theme('default') {
-  .ide-redesign-main,
-  .project-ds-nav-page,
-  // Codemirror tooltips are rendered outside of the main app container
-  .cm-tooltip .dropdown-menu,
-  .cm-tooltip .dropdown,
-  .cm-tooltip .editor-floating-menu {
-    @include dark-dropdown-menu;
-  }
+  @include dark-dropdown-menu;
 }
 
 $dropdown-item-min-height: 36px;

services/web/frontend/stylesheets/components/footer.scss

@@ -68,16 +68,14 @@ $footer-width-delta: 320px;
   }
 
   @include theme('default') {
-    .ide-redesign-main,
-    .project-ds-nav-page {
-      .cookie-banner {
-        @include cookie-banner-dark;
-      }
+    .cookie-banner {
+      @include cookie-banner-dark;
+    }
 
-      .fat-footer {
-        @include footer-dark;
-        @include socials-dark;
-      }
+    .website-redesign-fat-footer,
+    .website-redesign .fat-footer {
+      @include footer-dark;
+      @include socials-dark;
     }
   }
 }

services/web/frontend/stylesheets/components/form.scss

@@ -118,14 +118,11 @@
 }
 
 @include theme('default') {
-  .ide-redesign-main,
-  .project-ds-nav-page {
-    @include form-check-dark;
+  @include form-check-dark;
 
-    .form-control,
-    .form-control-wrapper {
-      @include dark-input;
-    }
+  .form-control,
+  .form-control-wrapper {
+    @include dark-input;
   }
 }
 

services/web/frontend/stylesheets/components/modal.scss

@@ -2,13 +2,22 @@
   --bs-heading-color: var(--content-primary);
 }
 
-.modal {
-  // Until we add a dark modal version, all core components in modals should use light theme
-  @include light-dropdown-menu;
-  @include form-check-light;
-  @include light-notification;
-  @include light-input;
-  @include light-buttons;
+@include theme('default') {
+  .modal {
+    // Until we add a dark modal version, all core components in modals should use light theme
+    @include light-dropdown-menu;
+    @include light-notification;
+    @include form-check-light;
+
+    .form-control,
+    .form-control-wrapper {
+      @include light-input;
+    }
+
+    .btn {
+      @include light-buttons;
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {

services/web/frontend/stylesheets/components/notifications.scss

@@ -53,17 +53,17 @@
 
   @include light-notification;
 
-  // Until we roll out dark mode notifications, make sure we show buttons in
-  // light mode even when the rest of the page is in dark mode
-  .ide-redesign-main .notification .btn {
-    @include light-buttons;
-  }
-
   @include theme('default') {
     --notification-ai-paywall-background: var(--bg-dark-secondary);
     --notification-ai-paywall-color: var(--content-primary-dark);
     --notification-ai-paywall-border-color: var(--blue-30);
 
+    // Until we roll out dark mode notifications, make sure we show buttons in
+    // light mode even when the rest of the page is in dark mode
+    .notification .btn {
+      @include light-buttons;
+    }
+
     .project-ds-nav-page {
       .notification {
         @include dark-notification;

services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx

@@ -62,12 +62,8 @@ describe('<PdfLogsEntries/>', function () {
     )
   }
 
-  // TODO: Remove the ide-redesign-main wrapper when dark-mode buttons are rolled
-  // out globally.
   const LogsPanel = ({ children }: { children: ReactElement }) => (
-    <div className="ide-redesign-main">
-      <div className="error-logs"> {children}</div>
-    </div>
+    <div className="error-logs"> {children}</div>
   )
 
   const logEntries: LogEntry[] = [

services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx

@@ -29,13 +29,7 @@ const Layout: FC<{ layout: IdeLayout; view?: IdeView }> = ({
 }
 
 const PdfViewer = ({ children }: { children: ReactElement }) => {
-  return (
-    // TODO: ide-redesign-cleanup: Remove the .ide-redesign-main wrapper when
-    // the styles are no longer nested in that.
-    <div className="ide-redesign-main">
-      <div className="pdf-viewer">{children}</div>
-    </div>
-  )
+  return <div className="pdf-viewer">{children}</div>
 }
 
 describe('<PdfPreview/>', function () {