wip(fs.dev): Troubleshooting SSR themeing issues

packages/freesewing.dev/components/footer.js

@@ -24,8 +24,8 @@ const social = {
 
 const Footer = ({ app }) => (
   <footer className="bg-neutral">
-    <div className={`theme-gradient h-2 w-full relative ${app.loading ? 'loading' : ''}`}></div>
-    <div className="p-4 py-16 flex flex-row bg-neutral -mt-2 z-0 gap-8 flex-wrap justify-around text-neutral-content">
+    <div className={`theme-gradient h-1 w-full relative ${app.loading ? 'loading' : ''}`}></div>
+    <div className="p-4 py-16 flex flex-row bg-neutral -mt-1 z-0 gap-8 flex-wrap justify-around text-neutral-content">
       <div className="w-64 mt-2">
         <div className="px-4 mb-4"><CreativeCommonsLogo /></div>
         <div className="flex flex-row gap-2 justify-center items-center">

packages/freesewing.dev/components/header.js

@@ -1,5 +1,6 @@
 import Logo from 'shared/components/logos/freesewing.js'
 import Link from 'next/link'
+import ThemePicker from 'shared/components/theme-picker.js'
 
 const Right = props => (
   <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -17,9 +18,9 @@ const Header = ({ app }) => {
       <header className={`
         bg-neutral
         block
-        sm:hidden
         z-30
       `}>
+        <div className="max-w-6xl m-auto">
           <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
             <button
               className={`
@@ -38,8 +39,10 @@ const Header = ({ app }) => {
                 freesewing.dev
               </a>
             </Link>
+            <ThemePicker app={app} />
           </div>
-        <div className={`theme-gradient h-2 w-full z-10 relative -mb-2 ${app.loading ? 'loading' : ''}`}></div>
+        </div>
+        <div className={`theme-gradient h-1 w-full z-10 relative -mb-1 ${app.loading ? 'loading' : ''}`}></div>
       </header>
   )
 }

packages/freesewing.shared/components/layouts/default.js

@@ -74,7 +74,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
     flex flex-col justify-between
     min-h-screen
     bg-base-100
-    `} data-theme={app.theme}>
+    `}>
       <Header app={app}/>
       <div className={`
         h-1 w-full theme-gradient ${app.loading ? 'loading' : ''}

packages/freesewing.shared/components/theme-picker.js

@@ -1,15 +1,24 @@
 import themes from 'shared/themes/index.js'
+import ThemeIcon from 'shared/components/icons/theme.js'
 
 const ThemePicker = ({ app, className='' }) => {
   return (
-    <select
-      className={`select select-bordered w-full max-w-sm text-base-content ${className}`}
-      onChange={evt => app.setTheme(evt.target.value)}
-    >
+      <div className="dropdown">
+        <div tabIndex="0" className="m-0 btn flex flex-row gap-2">
+          <ThemeIcon />
+          <span>Theme:</span>
+          <span>{app.theme}</span>
+        </div>
+        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
           {Object.keys(themes).map(theme => (
-        <option>{theme}</option>
+            <li key={theme}>
+              <button onClick={() => app.setTheme(theme)} className="btn btn-link">
+                {theme}
+              </button>
+            </li>
           ))}
-    </select>
+        </ul>
+      </div>
   )
 }
 

packages/freesewing.shared/components/wrappers/page.js

@@ -54,10 +54,15 @@ const AppWrapper= props => {
   //}
 
   return (
-    <div {...swipeHandlers}>
+    <div
+      {...swipeHandlers}
+      data-theme={props.app.theme}
+      key={props.app.theme}
+      className={`theme-${props.app.theme}`}
+    >
       {props.noLayout
         ? props.children
-        : <Layout {...childProps}>{props.children}</Layout>
+        : <Layout {...childProps}><p className={`theme-${props.app.theme}`} data-theme={props.app.theme}>{props.app.theme}</p>{props.children}</Layout>
       }
     </div>
   )