From 337a1e9f8c56769424d4b0355fa52fc036f81617 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Thu, 9 Jun 2022 17:23:12 +0200
Subject: [PATCH] fix(dev): Put theme picker in navbar on mobile

---
 packages/freesewing.dev/components/header.js       | 13 +++++++------
 packages/freesewing.dev/components/layouts/docs.js |  3 +--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js
index eaff538fb58..c2de6ad7dd6 100644
--- a/packages/freesewing.dev/components/header.js
+++ b/packages/freesewing.dev/components/header.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import Logo from 'shared/components/logos/freesewing.js'
+import FreeSewingIcon from 'shared/components/icons/freesewing.js'
 import Link from 'next/link'
 import ThemePicker from 'shared/components/theme-picker.js'
 import CloseIcon from 'shared/components/icons/close.js'
@@ -81,10 +81,11 @@ const Header = ({ app, setSearch }) => {
                   )
                 }
             </button>
-            <div className="flex flex-row gap-2 md:hidden">
-              <button className="btn btn-sm btn h-12 px-12" onClick={() => setSearch(true)}>
+            <div className="flex flex-row items-center md:hidden pr-4">
+              <button onClick={() => setSearch(true)} className="btn btn-sm">
                 <SearchIcon />
               </button>
+              <ThemePicker app={app} iconOnly />
             </div>
             <button className={`
               btn btn-sm h-12
@@ -103,12 +104,12 @@ const Header = ({ app, setSearch }) => {
             <div className="hidden md:flex md:flex-row gap-2">
               <Link href="/">
                 <a className="flex flex-column items-center">
-                  <Logo size={36} fill="currentColor" stroke={false} />
+                  <FreeSewingIcon className="h-10 w-10"/>
                 </a>
               </Link>
               <Link href="/">
-                <a role="button" className="btn btn-link btn-sm text-neutral-content h-12">
-                  freesewing.dev
+                <a role="button" className="btn btn-link btn-sm text-neutral-content h-12 font-normal lowercase text-2xl">
+                  <span className="font-black px-1 normal-case">FreeSewing</span>.dev
                 </a>
               </Link>
             </div>
diff --git a/packages/freesewing.dev/components/layouts/docs.js b/packages/freesewing.dev/components/layouts/docs.js
index 0af52ccbe7e..285e5a3c124 100644
--- a/packages/freesewing.dev/components/layouts/docs.js
+++ b/packages/freesewing.dev/components/layouts/docs.js
@@ -5,7 +5,6 @@ import Link from 'next/link'
 import Logo from 'shared/components/logos/freesewing.js'
 import Aside from 'shared/components/navigation/aside'
 import get from 'lodash.get'
-import ThemePicker from 'shared/components/theme-picker'
 
 const PageTitle = ({ app, slug, title }) => {
   if (title) return <h1>{title}</h1>
@@ -60,7 +59,7 @@ const DefaultLayout = ({ app, title=false, children=[] }) => {
 
   return (
     <div className="m-auto flex flex-row justify-center">
-      <Aside app={app} slug={slug} before={<ThemePicker app={app}/>}/>
+      <Aside app={app} slug={slug} />
       <section className="py-28 md:py-36">
         <div>
           {title && (