Phase 7.3c: Migrate App Components - Layout & Common UI to Plain CSS (#3061)

* Phase 7.3c: Migrate App Components - Layout & Common UI to Plain CSS

Migrated 7 app-level components from styled-components to plain CSS:

**Components Migrated:**
- Layout.tsx - Removed createGlobalStyle for MathJax, moved to CSS
- Loader.tsx - Converted all keyframe animations and styles to plain CSS
- Dropdown.tsx - Removed styled() wrappers, moved inline styles to CSS
- AllOrNone.tsx - Full migration with new AllOrNone.css
- Details.tsx - Removed styled() wrappers from icon components
- Checkbox.tsx - Removed styled() wrapper, now plain React component
- PageTitleConfirmation.tsx - Migrated from connect() to useSelector hooks, removed styled-components

**Files Changed:**
- 9 .tsx files migrated (removed styled-components imports)
- 2 new .css files created (AllOrNone.css, Loader.css)
- 2 existing .css files updated (Layout.css, Dropdown.css)

**Migration Approach:**
- Followed simplified in-place migration pattern from PLAIN_CSS_MIGRATION_LEARNINGS.md
- Used CSS variables for dynamic values (delay, width, etc.)
- Converted Redux connect() HOC to useSelector hooks pattern
- Preserved all component functionality and TypeScript types
- No breaking changes to component APIs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* Fix review issues: restore styled() wrappers and add fadeIn keyframe

Addresses code review feedback from PR #3061:

1. Restored styled() wrappers for backward compatibility:
   - DropdownToggle, Dropdown: Wrapped with styled() to support component selectors in Filters.tsx
   - AllOrNone: Wrapped with styled() to support component selectors in ColorFilter/ChapterFilter
   - Checkbox: Wrapped with styled() to support component selectors in ColorFilter/ChapterFilter

   These components still use plain CSS for all styling (in .css files), but the
   styled() wrapper maintains compatibility with existing component selector usage
   in other files that haven't been migrated yet.

2. Added fadeIn keyframe to Loader.css:
   - Defined @Keyframes fadeIn (0% opacity: 0; 100% opacity: 1)
   - Previously relied on NavBar/NavBar.css, but this creates fragile cross-component dependency
   - Now self-contained to avoid issues if styles are code-split or refactored

Fixes test failures where DropdownToggle.cloneElement was receiving undefined component.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

No need for default value

Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* Snaps

Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* Fix CSS loading issue

Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* Remove unused separate disconnected PageTitleConfirmation

Also comment some CSS lint exceptions

* Remove deprecated SFC from Layout

* Copilot suggestions

Namespacing @Keyframes to avoid unintended coupling

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Print button layout fix (from 7.1b)

* Reduce specificity of print-opt-wrapper

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Roy Johnson <roy.e.johnson@rice.edu>

Author: 4 people

src/app/components/AllOrNone.css

@@ -0,0 +1,19 @@
+/* AllOrNone component styles */
+
+.all-or-none {
+  height: 2rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 1.4rem;
+  overflow: visible;
+}
+
+.all-or-none .button-link {
+  font-size: 1.4rem;
+  overflow: visible;
+}
+
+.all-or-none span {
+  padding: 0 1rem;
+}

src/app/components/AllOrNone.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components/macro';
-import { ButtonLink as ButtonLinkBase } from './Button';
-
-// Wrap with styled() to make ButtonLink compatible with component selectors
-const ButtonLink = styled(ButtonLinkBase)``;
+import { ButtonLink } from './Button';
+import './AllOrNone.css';
 
 interface Props {
   className?: string;
@@ -13,29 +12,21 @@ interface Props {
   disabled?: boolean;
 }
 
-const AllOrNone = ({className, onAll, onNone, disabled}: Props) => <div className={className}>
-  <FormattedMessage id='i18n:highlighting:filters:all'>
-    {(msg) => <ButtonLink disabled={disabled} decorated onClick={onAll}>{msg}</ButtonLink>}
-  </FormattedMessage>
-  <span aria-hidden="true">|</span>
-  <FormattedMessage id='i18n:highlighting:filters:none'>
-    {(msg) => <ButtonLink disabled={disabled} decorated onClick={onNone}>{msg}</ButtonLink>}
-  </FormattedMessage>
-</div>;
-
-export default styled(AllOrNone)`
-  &,
-  ${ButtonLink} {
-    font-size: 1.4rem;
-    overflow: visible;
-  }
-
-  height: 2rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+// Plain React component for AllOrNone
+function AllOrNoneBase({ className, onAll, onNone, disabled }: Props) {
+  return (
+    <div className={classNames('all-or-none', className)}>
+      <FormattedMessage id='i18n:highlighting:filters:all'>
+        {(msg) => <ButtonLink disabled={disabled} decorated onClick={onAll}>{msg}</ButtonLink>}
+      </FormattedMessage>
+      <span aria-hidden="true">|</span>
+      <FormattedMessage id='i18n:highlighting:filters:none'>
+        {(msg) => <ButtonLink disabled={disabled} decorated onClick={onNone}>{msg}</ButtonLink>}
+      </FormattedMessage>
+    </div>
+  );
+}
 
-  span {
-    padding: 0 1rem;
-  }
-`;
+// Wrap with styled() for backward compatibility with component selectors
+// Styles are now in AllOrNone.css, but this wrapper maintains selector compatibility
+export default styled(AllOrNoneBase)``;

src/app/components/Details.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import styled from 'styled-components/macro';
 import { HTMLDetailsElement } from '@openstax/types/lib.dom';
 import '../../polyfill/details';
 // Note: Details.css is imported globally from src/app/index.tsx to ensure consistent
@@ -15,10 +14,8 @@ interface IconProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * Expand icon (caret-right) for Details component.
  * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components component selector references
  */
-function ExpandIconBase({ className, ...props }: IconProps) {
+export function ExpandIcon({ className, ...props }: IconProps) {
   return (
     <svg
       className={classNames('details-expand-icon', className)}
@@ -34,15 +31,11 @@ function ExpandIconBase({ className, ...props }: IconProps) {
   );
 }
 
-export const ExpandIcon = styled(ExpandIconBase)``;
-
 /**
  * Collapse icon (caret-down) for Details component.
  * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
- *
- * Note: Wrapped with styled() to enable styled-components component selector references
  */
-function CollapseIconBase({ className, ...props }: IconProps) {
+export function CollapseIcon({ className, ...props }: IconProps) {
   return (
     <svg
       className={classNames('details-collapse-icon', className)}
@@ -58,8 +51,6 @@ function CollapseIconBase({ className, ...props }: IconProps) {
   );
 }
 
-export const CollapseIcon = styled(CollapseIconBase)``;
-
 export function Summary({
   children,
   className,

src/app/components/Dropdown.css

@@ -11,6 +11,12 @@
   }
 }
 
+/* Base Dropdown wrapper styles */
+.dropdown-wrapper {
+  overflow: visible;
+  position: relative;
+}
+
 /* DropdownToggle styles */
 .dropdown-toggle {
   cursor: pointer;
@@ -71,8 +77,10 @@
 .dropdown-list li button:focus,
 .dropdown-list li a:focus {
   background: var(--dropdown-form-border, #d5d5d5); /* theme.color.neutral.formBorder */
+  /* stylelint-disable declaration-block-no-duplicate-properties -- different browsers */
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  /* stylelint-enable declaration-block-no-duplicate-properties */
 }
 
 /* TabTransparentDropdown focus-within behavior */

src/app/components/Dropdown.tsx

@@ -189,14 +189,11 @@ function TrappingDropdownList(props: React.MenuHTMLAttributes<HTMLMenuElement>)
   );
 }
 
-// Plain React component for DropdownList, but wrapped with styled() for backward compatibility
-const DropdownListBase = ({ className, ...props }: React.MenuHTMLAttributes<HTMLMenuElement>) => {
+// Plain React component for DropdownList
+export const DropdownList = ({ className, ...props }: React.MenuHTMLAttributes<HTMLMenuElement>) => {
   return <TrappingDropdownList className={classNames('dropdown-list', className)} {...props} />;
 };
 
-// Wrap with styled() for backward compatibility with component selectors
-export const DropdownList = styled(DropdownListBase)``;
-
 interface DropdownItemProps {
   message: string;
   ariaMessage?: string;
@@ -263,15 +260,13 @@ export type TabHiddenDropdownProps = CommonDropdownProps & (Props | Props & Cont
 
 export type DropdownProps = TabTransparentDropdownProps | TabHiddenDropdownProps;
 
-const DropdownBase = React.forwardRef<HTMLElement, DropdownProps>(({transparentTab, ...props}, ref) =>
-  transparentTab !== false
-    ? <TabTransparentDropdown ref={ref} {...props} />
-    : <TabHiddenDropDown ref={ref} {...props} />
-);
+// Plain React component for Dropdown, but wrapped with styled() for backward compatibility
+const DropdownBase = React.forwardRef<HTMLElement, DropdownProps>(({transparentTab, className, ...props}, ref) => {
+  const Component = transparentTab !== false ? TabTransparentDropdown : TabHiddenDropDown;
+  return <Component ref={ref} className={classNames('dropdown-wrapper', className)} {...props} />;
+});
 
-const Dropdown = styled(DropdownBase)<DropdownProps>`
-  overflow: visible;
-  position: relative;
-`;
+// Wrap with styled() for backward compatibility with component selectors
+const Dropdown = styled(DropdownBase)``;
 
 export default Dropdown;

src/app/components/Layout.css

@@ -1,5 +1,17 @@
 /* Layout component styles */
 
+/* MathJax help background z-index
+ * IMPORTANT: This value is derived from theme.zIndex.navbar + 1
+ * navbar is at position 7 in the zIndex array: (7) * 10 = 70
+ * Therefore: 70 + 1 = 71
+ * If theme.zIndex array changes, this value MUST be updated accordingly.
+ */
+/* stylelint-disable selector-type-no-unknown */
+mjx-help-background {
+  z-index: 71;
+}
+/* stylelint-enable selector-type-no-unknown */
+
 .layout-body {
   width: 100%;
   padding: 0 var(--layout-padding-desktop, 3.2rem);

src/app/components/Layout.tsx

@@ -1,32 +1,27 @@
-import React, { SFC } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { createGlobalStyle } from 'styled-components/macro';
 import ErrorBoundary from '../errors/components/ErrorBoundary';
 import ErrorModal from '../errors/components/ErrorModal';
-import theme from '../theme';
 import AccessibilityButtonsWrapper from './AccessibilityButtonsWrapper';
 import NavBar from './NavBar';
 import OnEsc from './OnEsc';
 import PageTitleConfirmation from './PageTitleConfirmation';
 import { layoutPadding } from './Layout.constants';
 import './Layout.css';
 
-const MathJaxStyles = createGlobalStyle`
-  mjx-help-background {
-    z-index: ${theme.zIndex.navbar + 1};
-  }
-`;
-
-const Layout: SFC = ({ children }) => <AccessibilityButtonsWrapper>
-  <MathJaxStyles />
-  <NavBar />
-  <OnEsc />
-  <PageTitleConfirmation />
-  <ErrorModal />
-  <ErrorBoundary>
-    {children}
-  </ErrorBoundary>
-</AccessibilityButtonsWrapper>;
+export default function Layout({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <AccessibilityButtonsWrapper>
+      <NavBar />
+      <OnEsc />
+      <PageTitleConfirmation />
+      <ErrorModal />
+      <ErrorBoundary>
+        {children}
+      </ErrorBoundary>
+    </AccessibilityButtonsWrapper>
+  );
+}
 
 // Export legacy styled-components fragment for backward compatibility
 export { wrapperPadding } from './Layout.legacy';
@@ -49,5 +44,3 @@ export const LayoutBody = ({
     {children}
   </div>
 );
-
-export default Layout;

src/app/components/Loader.css

@@ -0,0 +1,136 @@
+/* Keyframe animations for loader */
+
+@keyframes loaderFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes loadSvg {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes moveGreen {
+  from {
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
+
+  to {
+    transform: matrix(0.965926, -0.258819, 0.258819, 0.965926, 0, -18);
+  }
+}
+
+@keyframes moveOrange {
+  from {
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
+
+  to {
+    transform: matrix(0.994522, 0.104528, -0.104528, 0.994522, 0, -14);
+  }
+}
+
+@keyframes moveGray {
+  from {
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
+
+  to {
+    transform: matrix(0.99863, 0.052336, -0.052336, 0.99863, 0, -8);
+  }
+}
+
+@keyframes moveYellow {
+  from {
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
+
+  to {
+    transform: matrix(1, 0, 0, 1, 0, -8);
+  }
+}
+
+@keyframes moveBlue {
+  from {
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
+
+  to {
+    transform: matrix(0.99863, 0.052336, -0.052336, 0.99863, 0, -4);
+  }
+}
+
+/* Loader icon component styles */
+.loading-icon {
+  /* stylelint-disable property-no-unknown -- `enable-background` is an SVG presentation attribute */
+  enable-background: new 0 0 57.6 39.1;
+  /* stylelint-enable property-no-unknown */
+  animation: loadSvg 0.3s forwards;
+  animation-delay: var(--loader-delay, 300ms);
+  display: block;
+  height: 100%;
+  margin: 0 auto;
+  opacity: 0;
+  position: relative;
+  transform: scale(0);
+  transform-origin: center;
+  width: var(--loader-width, 5rem);
+}
+
+.loading-icon * {
+  animation: loaderFadeIn 0.3s forwards;
+}
+
+.loading-icon .os-green,
+.loading-icon .os-orange,
+.loading-icon .os-gray,
+.loading-icon .os-yellow,
+.loading-icon .os-blue {
+  animation-delay: 0.5s;
+}
+
+.loading-icon .os-green {
+  animation:
+    moveGreen 0.6s cubic-bezier(0.81, 0.41, 0.13, 0.74) 0.5s
+    infinite alternate;
+  transform-origin: center left;
+}
+
+.loading-icon .os-orange {
+  animation:
+    moveOrange 0.6s cubic-bezier(0.81, 0.41, 0.13, 0.74) 0.5s
+    infinite alternate;
+  transform-origin: center right;
+}
+
+.loading-icon .os-gray {
+  animation:
+    moveGray 0.6s cubic-bezier(0.81, 0.41, 0.13, 0.74) 0.5s
+    infinite alternate;
+  transform-origin: center right;
+}
+
+.loading-icon .os-yellow {
+  animation:
+    moveYellow 0.6s cubic-bezier(0.81, 0.41, 0.13, 0.74) 0.6s
+    infinite alternate;
+  transform-origin: center right;
+}
+
+.loading-icon .os-blue {
+  animation:
+    moveBlue 0.6s cubic-bezier(0.81, 0.41, 0.13, 0.74) 0.5s
+    infinite alternate;
+  transform-origin: center;
+}