Fixingshit

.eslintignore

@@ -18,4 +18,4 @@ dist
 node_modules
 yarn.lock
 package.json
-.html
+*.html

scripts/help.mjs

@@ -45,8 +45,8 @@ console.log(`
   ${chalk.gray('≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡')}
 
   Our development environment for ${chalk.bold('designs')} and ${chalk.bold(
-    'plugins'
-  )} lives in ${chalk.green('sites/lab')}
+  'plugins'
+)} lives in ${chalk.green('sites/lab')}
   We refer to it as ${chalk.bold('the FreeSewing lab')}.
   It can display any design in this repository and will hot-reload any changes you make to a design.
 

sites/dev/components/header/index.mjs

@@ -1,7 +1,6 @@
 // Hooks
 import { useContext } from 'react'
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'shared/hooks/use-theme.mjs'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Components
@@ -27,59 +26,44 @@ export const ns = ['common', 'header', 'sections', ...themeNs]
 const NavIcons = ({ setModal, slug }) => {
   const { t } = useTranslation(['header'])
   const iconSize = 'h-6 w-6 lg:h-12 lg:w-12'
-  const { spectrum } = useTheme()
 
   return (
     <>
       <NavButton
         onClick={() => setModal(<ModalMenu slug={slug} />)}
         label={t('header:menu')}
-        color={spectrum[0]}
+        color={0}
       >
         <MenuIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton href="/api" label="API Docs" color={spectrum[1]} extraClasses="hidden lg:flex">
+      <NavButton href="/api" label="API Docs" color={1} extraClasses="hidden lg:flex">
         <DocsIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/design" label="Design" color={spectrum[2]} extraClasses="hidden lg:flex">
+      <NavButton href="/design" label="Design" color={2} extraClasses="hidden lg:flex">
         <DesignIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/contribute"
-        label="Contribute"
-        color={spectrum[3]}
-        extraClasses="hidden lg:flex"
-      >
+      <NavButton href="/contribute" label="Contribute" color={3} extraClasses="hidden lg:flex">
         <CodeIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/i18n" label="Translate" color={spectrum[4]} extraClasses="hidden lg:flex">
+      <NavButton href="/i18n" label="Translate" color={4} extraClasses="hidden lg:flex">
         <I18nIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/infra"
-        label="Infrastrucure"
-        color={spectrum[5]}
-        extraClasses="hidden lg:flex"
-      >
+      <NavButton href="/infra" label="Infrastrucure" color={5} extraClasses="hidden lg:flex">
         <WrenchIcon className={iconSize} stroke={1.5} />
       </NavButton>
       <NavSpacer />
-      <NavButton href="/about" label="About" color={spectrum[6]} extraClasses="hidden lg:flex">
+      <NavButton href="/about" label="About" color={6} extraClasses="hidden lg:flex">
         <FreeSewingIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/support" label="Support" color={spectrum[7]} extraClasses="hidden lg:flex">
+      <NavButton href="/support" label="Support" color={7} extraClasses="hidden lg:flex">
         <HeartIcon className={iconSize} fill />
       </NavButton>
       <NavSpacer />
-      <NavButton
-        onClick={() => setModal(<ModalThemePicker />)}
-        label={t('header:theme')}
-        color={spectrum[8]}
-      >
+      <NavButton onClick={() => setModal(<ModalThemePicker />)} label={t('header:theme')} color={8}>
         <ThemeIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/search" label={t('header:search')} color={spectrum[9]}>
+      <NavButton href="/search" label={t('header:search')} color={9}>
         <SearchIcon className={iconSize} />
       </NavButton>
     </>

sites/dev/components/navigation/sections-menu.mjs

@@ -26,7 +26,7 @@ export const SectionsMenu = ({ bOnly = false }) => {
             className={
               bOnly
                 ? `bg-secondary border border solid border-secondary bg-opacity-0 hover:bg-opacity-20 ${sharedClasses}`
-                : `bg-${colors[i]}-400 bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}`
+                : `bg-${colors[i]} bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}`
             }
             href={`/${page.s}`}
             title={page.t}

sites/lab/components/header/index.mjs

@@ -1,7 +1,6 @@
 // Hooks
 import { useContext } from 'react'
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'shared/hooks/use-theme.mjs'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Components
@@ -28,70 +27,51 @@ export const ns = ['header', 'sections', ...themeNs, ...localeNs]
 
 const NavIcons = ({ setModal }) => {
   const { t } = useTranslation(['header'])
-  const { spectrum } = useTheme()
   const iconSize = 'h-6 w-6 lg:h-12 lg:w-12'
 
   return (
     <>
-      <NavButton
-        onClick={() => setModal(<ModalMenu />)}
-        label={t('header:menu')}
-        color={spectrum[0]}
-      >
+      <NavButton onClick={() => setModal(<ModalMenu />)} label={t('header:menu')} color={0}>
         <MenuIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton href="/designs" label={t('header:designs')} color={spectrum[1]}>
+      <NavButton href="/designs" label={t('header:designs')} color={1}>
         <DesignIcon className={iconSize} />
       </NavButton>
       <NavButton
         href="/patterns"
         label={t('header:patterns')}
-        color={spectrum[2]}
+        color={2}
         extraClasses="hidden lg:flex"
       >
         <PageIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/sets"
-        label={t('header:sets')}
-        color={spectrum[3]}
-        extraClasses="hidden lg:flex"
-      >
+      <NavButton href="/sets" label={t('header:sets')} color={3} extraClasses="hidden lg:flex">
         <MeasieIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton
-        href="/docs"
-        label={t('header:docs')}
-        color={spectrum[4]}
-        extraClasses="hidden lg:flex"
-      >
+      <NavButton href="/docs" label={t('header:docs')} color={4} extraClasses="hidden lg:flex">
         <DocsIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/code" label={t('sections:code')} color={spectrum[5]}>
+      <NavButton href="/code" label={t('sections:code')} color={5}>
         <GitHubIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/account" label={t('header:account')} color={spectrum[6]}>
+      <NavButton href="/account" label={t('header:account')} color={6}>
         <UserIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton
-        onClick={() => setModal(<ModalThemePicker />)}
-        label={t('header:theme')}
-        color={spectrum[7]}
-      >
+      <NavButton onClick={() => setModal(<ModalThemePicker />)} label={t('header:theme')} color={7}>
         <ThemeIcon className={iconSize} />
       </NavButton>
       <NavButton
         onClick={() => setModal(<ModalLocalePicker />)}
         label={t('header:language')}
-        color={spectrum[8]}
+        color={8}
       >
         <I18nIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton href="/new" label={t('header:new')} color={spectrum[9]}>
+      <NavButton href="/new" label={t('header:new')} color={9}>
         <PlusIcon className={iconSize} />
       </NavButton>
     </>

sites/lab/components/layouts/bare.mjs

@@ -1,17 +1,5 @@
-import { useRouter } from 'next/router'
-import { AsideNavigation } from 'shared/components/navigation/aside.mjs'
-import { BeforeNav } from './lab.mjs'
-
 export const ns = ['']
 
-export const BareLayout = ({ app, children = [] }) => {
-  const router = useRouter()
-  const slug = router.asPath.slice(1)
-
-  return (
-    <>
-      <AsideNavigation app={app} slug={slug} before={<BeforeNav app={app} />} mobileOnly />
-      {children}
-    </>
-  )
+export const BareLayout = ({ children = [] }) => {
+  return <>{children}</>
 }

sites/lab/components/layouts/lab.mjs

@@ -1,46 +1,7 @@
-import { ThemePicker } from 'shared/components/theme-picker/index.mjs'
-import { LocalePicker } from 'shared/components/locale-picker/index.mjs'
-
 export const ns = ['']
 
-export const BeforeNav = ({ app }) => (
-  <>
-    <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
-      <ThemePicker app={app} />
-      <LocalePicker app={app} />
-    </div>
-    <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2"></div>
-  </>
-)
-
-export const LabLayout = ({ app, AltMenu, children = [] }) => (
+export const LabLayout = ({ children = [] }) => (
   <div className="pb-24 flex flex-row">
     <div className="w-full xl:w-3/4 px-8">{children}</div>
-    <aside
-      className={`
-      fixed top-0 right-0
-      pt-20 pb-8 px-8
-      md:pt-0
-      md:relative md:transform-none
-      h-screen w-screen
-      bg-base-100
-      md:bg-base-50
-      md:flex
-      md:sticky
-      overflow-y-scroll
-      z-20
-      bg-base-100 text-base-content
-      transition-all
-      xl:w-1/4
-      ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
-      md:flex-row
-      md:w-80
-      lg:w-96
-      shrink-0
-    `}
-    >
-      <BeforeNav app={app} />
-      {AltMenu}
-    </aside>
   </div>
 )

sites/org/components/header/index.mjs

@@ -1,7 +1,6 @@
 // Hooks
 import { useContext } from 'react'
 import { useTranslation } from 'next-i18next'
-import { useTheme } from 'shared/hooks/use-theme.mjs'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Components
@@ -29,42 +28,31 @@ export const ns = ['header', 'sections', ...themeNs, ...localeNs]
 
 const NavIcons = ({ setModal, setSearch }) => {
   const { t } = useTranslation(['header'])
-  const { spectrum } = useTheme()
 
   return (
     <>
       <NavButton
         onClick={() => setModal(<ModalMenu />)}
         label={t('header:menu')}
-        color={spectrum[0]}
+        color={0}
         extraClasses="md:px-4"
       >
         <MenuIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton href="/designs" label={t('header:designs')} color={spectrum[1]}>
+      <NavButton href="/designs" label={t('header:designs')} color={1}>
         <DesignIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/docs"
-        label={t('header:docs')}
-        color={spectrum[2]}
-        extraClasses="hidden md:flex"
-      >
+      <NavButton href="/docs" label={t('header:docs')} color={2} extraClasses="hidden md:flex">
         <DocsIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/blog"
-        label={t('header:blog')}
-        color={spectrum[3]}
-        extraClasses="hidden md:flex"
-      >
+      <NavButton href="/blog" label={t('header:blog')} color={3} extraClasses="hidden md:flex">
         <RssIcon className={iconSize} />
       </NavButton>
       <NavButton
         href="/showcase"
         label={t('header:showcase')}
-        color={spectrum[4]}
+        color={4}
         extraClasses="hidden md:flex"
       >
         <ShowcaseIcon className={iconSize} />
@@ -73,41 +61,32 @@ const NavIcons = ({ setModal, setSearch }) => {
       <NavButton
         href="/patterns"
         label={t('header:patterns')}
-        color={spectrum[5]}
+        color={5}
         extraClasses="hidden lg:flex"
       >
         <PageIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/sets"
-        label={t('header:sets')}
-        color={spectrum[6]}
-        extraClasses="hidden lg:flex"
-      >
+      <NavButton href="/sets" label={t('header:sets')} color={6} extraClasses="hidden lg:flex">
         <MeasieIcon className={iconSize} />
       </NavButton>
-      <NavButton href="/account" label={t('header:account')} color={spectrum[7]}>
+      <NavButton href="/account" label={t('header:account')} color={7}>
         <UserIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton
-        onClick={() => setModal(<ModalThemePicker />)}
-        label={t('header:theme')}
-        color={spectrum[8]}
-      >
+      <NavButton onClick={() => setModal(<ModalThemePicker />)} label={t('header:theme')} color={8}>
         <ThemeIcon className={iconSize} />
       </NavButton>
       <NavButton
         onClick={() => setModal(<ModalLocalePicker />)}
         label={t('header:language')}
-        color={spectrum[9]}
+        color={9}
       >
         <I18nIcon className={iconSize} />
       </NavButton>
       <NavButton
         onClick={() => setSearch(true)}
         label={t('header:search')}
-        color={spectrum[10]}
+        color={10}
         extraClasses="md:px-4"
       >
         <SearchIcon className={iconSize} />

sites/org/components/search.mjs

@@ -172,7 +172,7 @@ const SearchBox = (props) => {
       `}
       >
         <div className="px-4 py-0 flex flex-row w-full lg:py-2">
-          <button className={`btn btn-ghost btn-block`} onClick={() => props.setSearch(false)}>
+          <button className={`btn btn-block`} onClick={() => props.setSearch(false)}>
             <span className="px-2 pt-2 pb-2">Close Search</span>
           </button>
         </div>

sites/shared/components/account/shared.mjs

@@ -21,7 +21,7 @@ const btnClasses = {
     'flex flex-row flex-nowrap items-center gap-4 py-4 h-auto ' +
     'border border-secondary justify-start text-left bg-opacity-30',
   active:
-    'btn-ghost bg-secondary hover:bg-secondary ' + 'hover:bg-opacity-30 hover:border-secondary',
+    'btn-ghost bg-secondary hover:bg-secondary ' + 'hover:bg-accent-focus hover:border-secondary',
   inactive:
     'hover:bg-opacity-20 hover:bg-secondary btn-ghost ' +
     'border border-secondary hover:border hover:border-secondary',