From 1bc0b4985c558fed0f3f61de7a6b381c758c7e45 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Thu, 30 Dec 2021 14:23:02 +0100
Subject: [PATCH] wip(fs.dev): Troubleshooting SSR themeing issues

---
 packages/freesewing.dev/components/footer.js  |  4 +-
 packages/freesewing.dev/components/header.js  | 43 ++++++++++---------
 .../components/layouts/default.js             |  2 +-
 .../components/theme-picker.js                | 25 +++++++----
 .../components/wrappers/page.js               |  9 +++-
 5 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/packages/freesewing.dev/components/footer.js b/packages/freesewing.dev/components/footer.js
index b080d9a45ae..713406690aa 100644
--- a/packages/freesewing.dev/components/footer.js
+++ b/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">
diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js
index ee120a9e834..e416f82cf4d 100644
--- a/packages/freesewing.dev/components/header.js
+++ b/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">
-        <button
-          className={`
-            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
-              ? <><Left />&nbsp; Hide menu</>
-              : <>Show menu &nbsp;<Right /></>
-            }
-        </button>
-        <Logo size={32} fill="currentColor" stroke={false} />
-        <Link href="/">
-          <a role="button" className="btn btn-link btn-sm text-neutral-content">
-            freesewing.dev
-          </a>
-        </Link>
+        <div className="max-w-6xl m-auto">
+          <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
+            <button
+              className={`
+                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
+                  ? <><Left />&nbsp; Hide menu</>
+                  : <>Show menu &nbsp;<Right /></>
+                }
+            </button>
+            <Logo size={32} fill="currentColor" stroke={false} />
+            <Link href="/">
+              <a role="button" className="btn btn-link btn-sm text-neutral-content">
+                freesewing.dev
+              </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>
   )
 }
diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js
index b21c58db86f..f8227c4160b 100644
--- a/packages/freesewing.shared/components/layouts/default.js
+++ b/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' : ''}
diff --git a/packages/freesewing.shared/components/theme-picker.js b/packages/freesewing.shared/components/theme-picker.js
index 50aefe60c8b..e9b8a9c83a6 100644
--- a/packages/freesewing.shared/components/theme-picker.js
+++ b/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)}
-    >
-      {Object.keys(themes).map(theme => (
-        <option>{theme}</option>
-      ))}
-    </select>
+      <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 => (
+            <li key={theme}>
+              <button onClick={() => app.setTheme(theme)} className="btn btn-link">
+                {theme}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
   )
 }
 
diff --git a/packages/freesewing.shared/components/wrappers/page.js b/packages/freesewing.shared/components/wrappers/page.js
index c73f6fc26c1..e79da0dc860 100644
--- a/packages/freesewing.shared/components/wrappers/page.js
+++ b/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>
   )