move Welcome CSS to a CSS module + allow overriding

Author: severo

src/components/Layout.tsx

@@ -1,13 +1,16 @@
 import { ReactNode, useEffect, useState } from 'react'
 import { cn } from '../lib/utils.js'
-import Welcome from './Welcome.js'
+import Welcome, { WelcomeConfig } from './Welcome.js'
+
+export type LayoutConfig = WelcomeConfig
 
 interface LayoutProps {
   children: ReactNode
   className?: string
   progress?: number
   error?: Error
   title?: string
+  config?: LayoutConfig
 }
 
 /**
@@ -20,8 +23,9 @@ interface LayoutProps {
  * @param props.progress - progress bar value
  * @param props.error - error message to display
  * @param props.title - page title
+ * @param props.config - configuration for the layout
  */
-export default function Layout({ children, className, progress, error, title }: LayoutProps) {
+export default function Layout({ children, className, progress, error, title, config }: LayoutProps) {
   const [showWelcome, setShowWelcome] = useState(false)
 
   // Check localStorage on mount to see if the user has seen the welcome popup
@@ -54,7 +58,7 @@ export default function Layout({ children, className, progress, error, title }:
         <div style={{ width: `${100 * progress}%` }} />
       </div>
     }
-    {showWelcome && <Welcome onClose={handleCloseWelcome} />}
+    {showWelcome && <Welcome onClose={handleCloseWelcome} config={config}/>}
   </main>
 }
 

src/components/Welcome.tsx

@@ -1,14 +1,23 @@
 import { MouseEvent, useEffect } from 'react'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Welcome.module.css'
+
+export interface WelcomeConfig {
+  welcome: {
+    className?: string
+  }
+}
 
 interface WelcomePopupProps {
-  onClose: () => void
+  onClose: () => void,
+  config?: WelcomeConfig
 }
 
 /**
  * Welcome popup component shown to first-time users.
  * Clicking outside the popup or pressing Escape will dismiss it.
  */
-export default function Welcome({ onClose }: WelcomePopupProps) {
+export default function Welcome({ onClose, config }: WelcomePopupProps) {
   // Close popup when clicking outside
   function handleBackdropClick(e: MouseEvent) {
     if (e.target === e.currentTarget) {
@@ -29,7 +38,7 @@ export default function Welcome({ onClose }: WelcomePopupProps) {
   }, [onClose])
 
   return (
-    <div className="welcome" onClick={handleBackdropClick}>
+    <div className={cn(styles.welcome, config?.welcome.className)} onClick={handleBackdropClick}>
       <div>
         <h2>npx hyperparam</h2>
         <p>

src/styles/Welcome.module.css

@@ -0,0 +1,40 @@
+/* Welcome popup */
+.welcome {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease-in;
+}
+
+.welcome > div {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  width: 450px;
+  max-width: 90%;
+}
+
+.welcome h2 {
+  color: #342267;
+  margin-bottom: 16px;
+  font-size: 24px;
+}
+
+.welcome p {
+  color: #444;
+  line-height: 1.5;
+  margin-bottom: 24px;
+}
+
+.welcome button {
+  margin-left: auto;
+}

src/styles/app.css

@@ -531,44 +531,3 @@ button.close-button:hover {
   overflow-x: auto;
   white-space: pre-wrap;
 }
-
-/* Welcome popup */
-.welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.3s ease-in;
-}
-
-.welcome > div {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  padding: 30px;
-  width: 450px;
-  max-width: 90%;
-}
-
-.welcome h2 {
-  color: #342267;
-  margin-bottom: 16px;
-  font-size: 24px;
-}
-
-.welcome p {
-  color: #444;
-  line-height: 1.5;
-  margin-bottom: 24px;
-}
-
-.welcome button {
-  margin-left: auto;
-}