chore(shared): Moved account components to allowed shared access

sites/org/components/wrappers/page.mjs

@@ -1,99 +0,0 @@
-// Dependencies
-import React, { useState, useEffect } from 'react'
-import { useSwipeable } from 'react-swipeable'
-import { useHotkeys } from 'react-hotkeys-hook'
-// Hooks
-import { useTheme } from 'shared/hooks/use-theme.mjs'
-// Components
-import { LayoutWrapper, ns as layoutNs } from 'site/components/wrappers/layout.mjs'
-import { DocsLayout } from 'site/components/layouts/docs.mjs'
-import { Feeds } from 'site/components/feeds.mjs'
-
-export const ns = [...layoutNs]
-
-/* This component should wrap all page content */
-export const PageWrapper = ({
-  title = 'FIXME: No title set',
-  noSearch = false,
-  app = false,
-  layout = DocsLayout,
-  footer = true,
-  crumbs = false,
-  children = [],
-}) => {
-  /*
-   * This forces a re-render upon initial bootstrap of the app
-   * This is needed to avoid hydration errors because theme can't be set reliably in SSR
-   */
-  const [theme, setTheme] = useTheme()
-  const [currentTheme, setCurrentTheme] = useState()
-  useEffect(() => setCurrentTheme(theme), [currentTheme, theme])
-
-  /*
-   * Swipe handling for the entire site
-   */
-  const swipeHandlers = useSwipeable({
-    onSwipedLeft: () => (app.primaryMenu ? app.setPrimaryMenu(false) : null),
-    onSwipedRight: () => (app.primaryMenu ? null : app.setPrimaryMenu(true)),
-    trackMouse: true,
-  })
-
-  /*
-   * Hotkeys (keyboard actions)
-   */
-  // Trigger search with /
-  useHotkeys('/', (evt) => {
-    evt.preventDefault()
-    setSearch(true)
-  })
-
-  // Always close modal when Escape key is hit
-  useHotkeys('esc', (evt) => {
-    evt.preventDefault()
-    app.setModal(false)
-  })
-
-  // Search state
-  const [search, setSearch] = useState(false)
-
-  // Helper object to pass props down (keeps things DRY)
-  const childProps = {
-    app: app,
-    title: title,
-    footer,
-    crumbs: crumbs,
-    search,
-    setSearch,
-    toggleSearch: () => setSearch(!search),
-    noSearch: noSearch,
-  }
-
-  // Make layout prop into a (uppercase) component
-  const Layout = layout
-
-  // Return wrapper
-  return (
-    <div
-      ref={swipeHandlers.ref}
-      onMouseDown={swipeHandlers.onMouseDown}
-      data-theme={currentTheme} // This facilitates CSS selectors
-      key={currentTheme} // This forces the data-theme update
-    >
-      <Feeds />
-      <LayoutWrapper {...childProps}>
-        {Layout ? <Layout {...childProps}>{children}</Layout> : children}
-      </LayoutWrapper>
-      {app.modal ? (
-        <div
-          className={`fixed top-0 left-0 m-0 p-0 shadow drop-shadow-lg w-full h-screen
-              bg-base-100 bg-opacity-90 z-50 hover:cursor-pointer
-              flex flex-row items-center justify-center
-            `}
-          onClick={() => app.setModal(false)}
-        >
-          {app.modal}
-        </div>
-      ) : null}
-    </div>
-  )
-}

sites/org/pages/account/apikeys.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as apikeysNs } from 'site/components/account/apikeys.mjs'
+import { ns as apikeysNs } from 'shared/components/account/apikeys.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...apikeysNs, ...authNs, ...pageNs])]
@@ -18,12 +18,12 @@ console.log(namespaces)
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicApikeys = dynamic(
-  () => import('site/components/account/apikeys.mjs').then((mod) => mod.Apikeys),
+  () => import('shared/components/account/apikeys.mjs').then((mod) => mod.Apikeys),
   { ssr: false }
 )
 

sites/org/pages/account/bio.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as bioNs } from 'site/components/account/bio.mjs'
+import { ns as bioNs } from 'shared/components/account/bio.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...bioNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...bioNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicBio = dynamic(
-  () => import('site/components/account/bio.mjs').then((mod) => mod.BioSettings),
+  () => import('shared/components/account/bio.mjs').then((mod) => mod.BioSettings),
   { ssr: false }
 )
 
@@ -49,6 +49,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'bio'],
+      },
     },
   }
 }

sites/org/pages/account/compare.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as compareNs } from 'site/components/account/compare.mjs'
+import { ns as compareNs } from 'shared/components/account/compare.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...compareNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...compareNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicCompare = dynamic(
-  () => import('site/components/account/compare.mjs').then((mod) => mod.CompareSettings),
+  () => import('shared/components/account/compare.mjs').then((mod) => mod.CompareSettings),
   { ssr: false }
 )
 

sites/org/pages/account/consent.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as consentNs } from 'site/components/account/consent.mjs'
+import { ns as consentNs } from 'shared/components/account/consent.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...consentNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...consentNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicConsent = dynamic(
-  () => import('site/components/account/consent.mjs').then((mod) => mod.ConsentSettings),
+  () => import('shared/components/account/consent.mjs').then((mod) => mod.ConsentSettings),
   { ssr: false }
 )
 
@@ -46,10 +46,12 @@ const AccountPage = (props) => {
 export default AccountPage
 
 export async function getStaticProps({ locale }) {
-  console.log(namespaces)
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'consent'],
+      },
     },
   }
 }

sites/org/pages/account/control.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as controlNs } from 'site/components/account/control.mjs'
+import { ns as controlNs } from 'shared/components/account/control.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...controlNs, ...authNs, ...pageNs])]
@@ -17,25 +17,21 @@ const namespaces = [...new Set([...controlNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicControl = dynamic(
-  () => import('site/components/account/control.mjs').then((mod) => mod.ControlSettings),
+  () => import('shared/components/account/control.mjs').then((mod) => mod.ControlSettings),
   { ssr: false }
 )
 
 const AccountPage = (props) => {
   const app = useApp(props)
   const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('control'), '/account/control'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('control')} crumbs={crumbs}>
+    <PageWrapper app={app} itle={t('control')}>
       <DynamicAuthWrapper app={app}>
         <DynamicControl app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +45,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'control'],
+      },
     },
   }
 }

sites/org/pages/account/email.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as emailNs } from 'site/components/account/email.mjs'
+import { ns as emailNs } from 'shared/components/account/email.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...emailNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...emailNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicEmail = dynamic(
-  () => import('site/components/account/email.mjs').then((mod) => mod.EmailSettings),
+  () => import('shared/components/account/email.mjs').then((mod) => mod.EmailSettings),
   { ssr: false }
 )
 

sites/org/pages/account/github.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as githubNs } from 'site/components/account/github.mjs'
+import { ns as githubNs } from 'shared/components/account/github.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...githubNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...githubNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicGithub = dynamic(
-  () => import('site/components/account/github.mjs').then((mod) => mod.GithubSettings),
+  () => import('shared/components/account/github.mjs').then((mod) => mod.GithubSettings),
   { ssr: false }
 )
 

sites/org/pages/account/img.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as imgNs } from 'site/components/account/img.mjs'
+import { ns as imgNs } from 'shared/components/account/img.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...imgNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...imgNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicImg = dynamic(
-  () => import('site/components/account/img.mjs').then((mod) => mod.ImgSettings),
+  () => import('shared/components/account/img.mjs').then((mod) => mod.ImgSettings),
   { ssr: false }
 )
 

sites/org/pages/account/index.mjs

@@ -5,8 +5,8 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = ['account', ...authNs]
@@ -16,12 +16,12 @@ const namespaces = ['account', ...authNs]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicAccountOverview = dynamic(
-  () => import('site/components/account/overview.mjs').then((mod) => mod.AccountOverview),
+  () => import('shared/components/account/overview.mjs').then((mod) => mod.AccountOverview),
   { ssr: false }
 )
 

sites/org/pages/account/language.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as languageNs } from 'site/components/account/language.mjs'
+import { ns as languageNs } from 'shared/components/account/language.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...languageNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...languageNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicLanguage = dynamic(
-  () => import('site/components/account/language.mjs').then((mod) => mod.LanguageSettings),
+  () => import('shared/components/account/language.mjs').then((mod) => mod.LanguageSettings),
   { ssr: false }
 )
 

sites/org/pages/account/mfa.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as mfaNs } from 'site/components/account/mfa.mjs'
+import { ns as mfaNs } from 'shared/components/account/mfa.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...mfaNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...mfaNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicMfa = dynamic(
-  () => import('site/components/account/mfa.mjs').then((mod) => mod.MfaSettings),
+  () => import('shared/components/account/mfa.mjs').then((mod) => mod.MfaSettings),
   { ssr: false }
 )
 

sites/org/pages/account/newsletter.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as newsletterNs } from 'site/components/account/newsletter.mjs'
+import { ns as newsletterNs } from 'shared/components/account/newsletter.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...newsletterNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...newsletterNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicNewsletter = dynamic(
-  () => import('site/components/account/newsletter.mjs').then((mod) => mod.NewsletterSettings),
+  () => import('shared/components/account/newsletter.mjs').then((mod) => mod.NewsletterSettings),
   { ssr: false }
 )
 

sites/org/pages/account/password.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as passwordNs } from 'site/components/account/password.mjs'
+import { ns as passwordNs } from 'shared/components/account/password.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...passwordNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...passwordNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicPassword = dynamic(
-  () => import('site/components/account/password.mjs').then((mod) => mod.PasswordSettings),
+  () => import('shared/components/account/password.mjs').then((mod) => mod.PasswordSettings),
   { ssr: false }
 )
 

sites/org/pages/account/reload.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as reloadNs } from 'site/components/account/reload.mjs'
+import { ns as reloadNs } from 'shared/components/account/reload.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...reloadNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...reloadNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicReload = dynamic(
-  () => import('site/components/account/reload.mjs').then((mod) => mod.ReloadAccount),
+  () => import('shared/components/account/reload.mjs').then((mod) => mod.ReloadAccount),
   { ssr: false }
 )
 

sites/org/pages/account/sets/index.mjs

@@ -5,9 +5,9 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as apikeysNs } from 'site/components/account/apikeys.mjs'
+import { ns as apikeysNs } from 'shared/components/account/apikeys.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...apikeysNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...apikeysNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicApikeys = dynamic(
-  () => import('site/components/account/apikeys.mjs').then((mod) => mod.Apikeys),
+  () => import('shared/components/account/apikeys.mjs').then((mod) => mod.Apikeys),
   { ssr: false }
 )
 

sites/org/pages/account/units.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as unitsNs } from 'site/components/account/imperial.mjs'
+import { ns as unitsNs } from 'shared/components/account/imperial.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...unitsNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...unitsNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicImperial = dynamic(
-  () => import('site/components/account/imperial.mjs').then((mod) => mod.ImperialSettings),
+  () => import('shared/components/account/imperial.mjs').then((mod) => mod.ImperialSettings),
   { ssr: false }
 )
 

sites/org/pages/account/username.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as usernameNs } from 'site/components/account/username.mjs'
+import { ns as usernameNs } from 'shared/components/account/username.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...usernameNs, ...authNs, ...pageNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set([...usernameNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicUsername = dynamic(
-  () => import('site/components/account/username.mjs').then((mod) => mod.UsernameSettings),
+  () => import('shared/components/account/username.mjs').then((mod) => mod.UsernameSettings),
   { ssr: false }
 )
 

sites/org/pages/confirm/emailchange/[...confirmation].mjs

@@ -9,11 +9,11 @@ import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Link from 'next/link'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'
 import { Robot } from 'shared/components/robot/index.mjs'
-import { BackToAccountButton } from 'site/components/account/shared.mjs'
+import { BackToAccountButton } from 'shared/components/account/shared.mjs'
 import { HelpIcon } from 'shared/components/icons.mjs'
 
 // Translation namespaces used on this page

sites/org/pages/confirm/signin/[...confirmation].mjs

@@ -8,7 +8,7 @@ import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Link from 'next/link'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { WelcomeWrapper } from 'site/components/wrappers/welcome.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'

sites/org/pages/confirm/signup/[...confirmation].mjs

@@ -9,7 +9,7 @@ import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Link from 'next/link'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { WelcomeWrapper } from 'site/components/wrappers/welcome.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'

sites/org/pages/docs/index.mjs

@@ -4,7 +4,7 @@ import { useApp } from 'shared/hooks/use-app.mjs'
 import Head from 'next/head'
 import { mdxLoader } from 'shared/mdx/loader.mjs'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
 import { ReadMore } from 'shared/components/mdx/read-more.mjs'
 import { jargon } from 'site/jargon.mjs'

sites/org/pages/index.mjs

@@ -5,7 +5,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 //import { useTranslation } from 'next-i18next'
 import Head from 'next/head'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'

sites/org/pages/profile.mjs

@@ -6,11 +6,11 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { Popout } from 'shared/components/popout.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
-import { BackToAccountButton } from 'site/components/account/shared.mjs'
+import { BackToAccountButton } from 'shared/components/account/shared.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set(['account', ...authNs, ...pageNs])]
@@ -20,12 +20,12 @@ const namespaces = [...new Set(['account', ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicAccountProfile = dynamic(
-  () => import('site/components/account/profile.mjs').then((mod) => mod.AccountProfile),
+  () => import('shared/components/account/profile.mjs').then((mod) => mod.AccountProfile),
   { ssr: false }
 )
 

sites/org/pages/signin/index.mjs

@@ -10,7 +10,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { validateEmail, validateTld } from 'shared/utils.mjs'
 // Components
 import Link from 'next/link'
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { SusiWrapper } from 'site/components/wrappers/susi.mjs'
 import { EmailIcon, KeyIcon, RightIcon, WarningIcon } from 'shared/components/icons.mjs'

sites/org/pages/signup/index.mjs

@@ -8,7 +8,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { validateEmail, validateTld } from 'site/utils.mjs'
 // Components
 import Link from 'next/link'
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { SusiWrapper } from 'site/components/wrappers/susi.mjs'
 import { Robot } from 'shared/components/robot/index.mjs'

sites/org/pages/typography.mjs

@@ -1,7 +1,7 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout.mjs'
 
 const TypographyPage = (props) => {

sites/org/pages/welcome/bio.mjs

@@ -5,10 +5,10 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as bioNs } from 'site/components/account/bio.mjs'
+import { ns as bioNs } from 'shared/components/account/bio.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...bioNs, ...authNs, ...pageNs])]
@@ -18,11 +18,11 @@ const namespaces = [...new Set([...bioNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 const DynamicBio = dynamic(
-  () => import('site/components/account/bio.mjs').then((mod) => mod.BioSettings),
+  () => import('shared/components/account/bio.mjs').then((mod) => mod.BioSettings),
   { ssr: false }
 )
 

sites/org/pages/welcome/compare.mjs

@@ -5,10 +5,10 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as compareNs } from 'site/components/account/compare.mjs'
+import { ns as compareNs } from 'shared/components/account/compare.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...compareNs, ...authNs, ...pageNs])]
@@ -18,11 +18,11 @@ const namespaces = [...new Set([...compareNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 const DynamicCompare = dynamic(
-  () => import('site/components/account/compare.mjs').then((mod) => mod.CompareSettings),
+  () => import('shared/components/account/compare.mjs').then((mod) => mod.CompareSettings),
   { ssr: false }
 )
 

sites/org/pages/welcome/img.mjs

@@ -5,10 +5,10 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as imgNs } from 'site/components/account/img.mjs'
+import { ns as imgNs } from 'shared/components/account/img.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...imgNs, ...authNs, ...pageNs])]
@@ -18,11 +18,11 @@ const namespaces = [...new Set([...imgNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 const DynamicImg = dynamic(
-  () => import('site/components/account/img.mjs').then((mod) => mod.ImgSettings),
+  () => import('shared/components/account/img.mjs').then((mod) => mod.ImgSettings),
   { ssr: false }
 )
 

sites/org/pages/welcome/index.mjs

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set(['account', ...authNs])]
@@ -17,12 +17,12 @@ const namespaces = [...new Set(['account', ...authNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicControl = dynamic(
-  () => import('site/components/account/control.mjs').then((mod) => mod.ControlSettings),
+  () => import('shared/components/account/control.mjs').then((mod) => mod.ControlSettings),
   { ssr: false }
 )
 

sites/org/pages/welcome/newsletter.mjs

@@ -5,10 +5,10 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as newsletterNs } from 'site/components/account/newsletter.mjs'
+import { ns as newsletterNs } from 'shared/components/account/newsletter.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...newsletterNs, ...authNs, ...pageNs])]
@@ -18,12 +18,12 @@ const namespaces = [...new Set([...newsletterNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 
 const DynamicNewsletter = dynamic(
-  () => import('site/components/account/newsletter.mjs').then((mod) => mod.NewsletterSettings),
+  () => import('shared/components/account/newsletter.mjs').then((mod) => mod.NewsletterSettings),
   { ssr: false }
 )
 

sites/org/pages/welcome/units.mjs

@@ -5,10 +5,10 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as imperialNs } from 'site/components/account/imperial.mjs'
+import { ns as imperialNs } from 'shared/components/account/imperial.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...imperialNs, ...authNs, ...pageNs])]
@@ -18,11 +18,11 @@ const namespaces = [...new Set([...imperialNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 const DynamicImperial = dynamic(
-  () => import('site/components/account/imperial.mjs').then((mod) => mod.ImperialSettings),
+  () => import('shared/components/account/imperial.mjs').then((mod) => mod.ImperialSettings),
   { ssr: false }
 )
 

sites/org/pages/welcome/username.mjs

@@ -5,10 +5,10 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
-import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
-import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { ns as usernameNs } from 'site/components/account/username.mjs'
+import { ns as usernameNs } from 'shared/components/account/username.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...usernameNs, ...authNs, ...pageNs])]
@@ -18,11 +18,11 @@ const namespaces = [...new Set([...usernameNs, ...authNs, ...pageNs])]
  * So for these, we run a dynamic import and disable SSR rendering
  */
 const DynamicAuthWrapper = dynamic(
-  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
   { ssr: false }
 )
 const DynamicUsername = dynamic(
-  () => import('site/components/account/username.mjs').then((mod) => mod.UsernameSettings),
+  () => import('shared/components/account/username.mjs').then((mod) => mod.UsernameSettings),
   { ssr: false }
 )
 

sites/shared/components/account/apikeys.mjs

@@ -285,7 +285,7 @@ export const Apikeys = ({ app }) => {
   const keyAdded = () => setAdded(added + 1)
 
   return (
-    <div>
+    <div className="max-w-xl xl:pl-4">
       {generate ? (
         <NewKey {...{ app, t, setGenerate, backend, toast, keyAdded }} />
       ) : (
@@ -294,14 +294,12 @@ export const Apikeys = ({ app }) => {
           {keys.map((apikey) => (
             <Apikey {...{ app, apikey, t, backend, keyAdded }} key={apikey.id} />
           ))}
-          <div className="max-w-sm">
+          <button
-            <button
+            className="btn btn-primary w-full capitalize mt-4"
-              className="btn btn-primary w-full capitalize mt-4"
+            onClick={() => setGenerate(true)}
-              onClick={() => setGenerate(true)}
+          >
-            >
+            {t('newApikey')}
-              {t('newApikey')}
+          </button>
-            </button>
-          </div>
           <BackToAccountButton loading={app.state.loading} />
           {account.control < 5 ? (
             <Popout tip>

sites/shared/components/account/bio.mjs

@@ -50,7 +50,7 @@ export const BioSettings = ({ app, title = false, welcome = false }) => {
   const tabProps = { activeTab, setActiveTab, t }
 
   return (
-    <>
+    <div className="max-w-xl xl:pl-4">
       {title ? <h1 className="text-4xl">{t('bioTitle')}</h1> : null}
       <div className="tabs w-full">
         <Tab id="edit" {...tabProps} />
@@ -99,6 +99,6 @@ export const BioSettings = ({ app, title = false, welcome = false }) => {
           ) : null}
         </>
       ) : null}
-    </>
+    </div>
   )
 }

sites/shared/components/account/consent.mjs

@@ -116,7 +116,7 @@ export const ConsentSettings = ({ app, title = false }) => {
   )
 
   return (
-    <>
+    <div className="max-w-xl xl:pl-4">
       {title ? <h2 className="text-4xl">{t('privacyMatters')}</h2> : null}
       <p>{t('compliant')}</p>
       <p>{t('consentWhyAnswer')}</p>
@@ -152,6 +152,6 @@ export const ConsentSettings = ({ app, title = false }) => {
           FreeSewing Privacy Notice
         </Link>
       </p>
-    </>
+    </div>
   )
 }