Feature/css upgrade

[manix84]

This pull request modernizes the styling approach for the project by migrating from a single global CSS file to component-scoped SCSS modules and updates related dependencies and documentation. It also updates the main application code to use the new SCSS modules for styling and introduces the classnames package to manage class names more effectively.

Styling migration and code updates:

• Replaced the global CSS stylesheet with component-scoped SCSS modules for the React shell, canvas host, and overlay components. Updated all main markup in src/App.tsx to use SCSS modules and the classnames utility for cleaner, more maintainable styling. (src/App.tsx, [1] [2] [3] [4] [5] [6] [7] [8]
• Updated Storybook to import the new global SCSS reset instead of the old CSS file. (.storybook/preview.ts, .storybook/preview.tsL4-R4)

Dependency and configuration changes:

• Added classnames and sass as dependencies to support SCSS modules and class name composition. (package.json, [1] [2]
• Bumped the project version to 24.0.1 to reflect these significant changes. (package.json, package.jsonL4-R4)

Documentation updates:

• Updated README.md to mention SCSS module styling and document the new approach. (README.md, [1] [2]
• Added a note in WHATSNEW.md about the migration to SCSS modules and the new styling structure. (WHATSNEW.md, WHATSNEW.mdR9-R10)

[Copilot]

Pull request overview

This PR migrates the app and Storybook styling from a single global styles.css to a combination of a small global SCSS reset plus component-scoped SCSS modules, updating React markup and tests to be resilient to CSS-module class hashing.

Changes:

• Replaced the legacy src/styles.css global stylesheet with src/styles/global.scss and component-scoped *.module.scss files.
• Updated App, TimePilotGame, and UpdateOverlay to use SCSS modules + classnames, adding fillViewport behavior for the PWA shell.
• Updated Storybook stories/styles to use storybook.scss, and adjusted tests to query stable data-* hooks instead of global class names.

Reviewed changes

Copilot reviewed 27 out of 28 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
WHATSNEW.md	Notes the styling migration in release notes.
src/styles/global.scss	Introduces a minimal global SCSS reset/base styles.
src/styles.css	Removes the legacy global stylesheet.
src/stories/TimeWarp.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/TimePilotGame.stories.tsx	Switches Storybook styling import to SCSS and updates card class usage.
src/stories/Ticker.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/Text.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/Sprites.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/Preroll.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/Palette.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/MenuRendering.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/InputOverlays.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/DebugOptions.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/Audio.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/Achievements.stories.tsx	Switches Storybook styling import to SCSS.
src/stories/storybook.scss	Refactors Storybook styles to SCSS with variables/mixins and nesting.
src/main.tsx	Updates app entry to import the new global SCSS.
src/components/UpdateOverlay.tsx	Converts overlay markup to SCSS module classes and adds stable data-* hooks.
src/components/UpdateOverlay.module.scss	Adds component-scoped styles for the update overlay.
src/components/TimePilotGame.tsx	Converts game host to SCSS module classes, adds fillViewport, and adds stable data-* hooks.
src/components/TimePilotGame.module.scss	Adds component-scoped styles for the game host/stage/filter layers and exit fallback.
src/components/tests/TimePilotGame.test.tsx	Updates selectors to use stable data-* hooks instead of removed global classes.
src/App.tsx	Converts the main shell/about/showcase markup to SCSS module classes; enables fill-viewport PWA layout.
src/App.module.scss	Adds component-scoped styles replacing former global shell/showcase/about CSS.
README.md	Documents the move to SCSS module styling.
package.json	Adds classnames and sass, and bumps version to 24.0.1.
package-lock.json	Lockfile updates for added dependencies/version bump.
.storybook/preview.ts	Updates Storybook to import the new global SCSS reset.

Comments suppressed due to low confidence (1)

src/stories/storybook.scss:380

• @include panel(...) sets border, but .achievement-sprite-card immediately overrides border again. This is a bit redundant/confusing—consider extending the mixin to accept a border color (or moving the override into the mixin call pattern) so the intent is clearer and you avoid duplicated declarations.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.