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={`theme-gradient h-1 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="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,29 +18,31 @@ const Header = ({ app }) => {
       <header className={`
         bg-neutral
         block
-        sm:hidden
         z-30
       `}>
-        <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
+        <div className="max-w-6xl m-auto">
-        <button
+          <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
-          className={`
+            <button
-            btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
+              className={`
-            hover:border hover:bg-transparent hover:border-base-100
+                btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
-          `}
+                hover:border hover:bg-transparent hover:border-base-100
-          onClick={app.togglePrimaryMenu}>
+              `}
-            {app.primaryMenu
+              onClick={app.togglePrimaryMenu}>
-              ? <><Left />&nbsp; Hide menu</>
+                {app.primaryMenu
-              : <>Show menu &nbsp;<Right /></>
+                  ? <><Left />&nbsp; Hide menu</>
-            }
+                  : <>Show menu &nbsp;<Right /></>
-        </button>
+                }
-        <Logo size={32} fill="currentColor" stroke={false} />
+            </button>
-        <Link href="/">
+            <Logo size={32} fill="currentColor" stroke={false} />
-          <a role="button" className="btn btn-link btn-sm text-neutral-content">
+            <Link href="/">
-            freesewing.dev
+              <a role="button" className="btn btn-link btn-sm text-neutral-content">
-          </a>
+                freesewing.dev
-        </Link>
+              </a>
+            </Link>
+            <ThemePicker app={app} />
+          </div>
         </div>
-        <div className={`theme-gradient h-2 w-full z-10 relative -mb-2 ${app.loading ? 'loading' : ''}`}></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
+      <div className="dropdown">
-      className={`select select-bordered w-full max-w-sm text-base-content ${className}`}
+        <div tabIndex="0" className="m-0 btn flex flex-row gap-2">
-      onChange={evt => app.setTheme(evt.target.value)}
+          <ThemeIcon />
-    >
+          <span>Theme:</span>
-      {Object.keys(themes).map(theme => (
+          <span>{app.theme}</span>
-        <option>{theme}</option>
+        </div>
-      ))}
+        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
-    </select>
+          {Object.keys(themes).map(theme => (
+            <li key={theme}>
+              <button onClick={() => app.setTheme(theme)} className="btn btn-link">
+                {theme}
+              </button>
+            </li>
+          ))}
+        </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>
   )