feat(shared): Ported account/units to new inputs

markdown/org/docs/site/account/en.md

@@ -0,0 +1,5 @@
+---
+title: Account
+---
+
+FIXME

markdown/org/docs/site/account/language/en.md

@@ -0,0 +1,11 @@
+---
+title: Language
+---
+
+This controls the **language** that will be used to generate your patterns,
+as well send you emails and so on.
+
+It is in other words a central language setting stored in your account.  
+
+It does not control the language of the website itself.
+That setting -- just like the theme you prefer -- is stored on your device, not in our backend.

markdown/org/docs/site/account/units/en.md

@@ -0,0 +1,11 @@
+---
+title: Units
+---
+
+FreeSewing support both **metric units** (cm) and **imperial units** (inch).
+
+Here you can choose which type of units you prefer. 
+
+Note that you can override these default units in various places, such as on a
+specific pattern or measurements set.
+

sites/shared/components/account/imperial.mjs

@@ -6,8 +6,10 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
 import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 // Components
-import { Choice, Icons, welcomeSteps, BackToAccountButton } from './shared.mjs'
+import { Icons, welcomeSteps, BackToAccountButton, NumberBullet } from './shared.mjs'
 import { ContinueButton } from 'shared/components/buttons/continue-button.mjs'
+import { ListInput } from 'shared/components/inputs.mjs'
+import { DynamicOrgDocs } from 'shared/components/dynamic-docs/org.mjs'
 
 export const ns = ['account', 'status']
 
@@ -16,7 +18,7 @@ export const ImperialSettings = ({ title = false, welcome = false }) => {
   const { account, setAccount } = useAccount()
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
   const backend = useBackend()
-  const { t } = useTranslation(ns)
+  const { t, i18n } = useTranslation(ns)
 
   // State
   const [selection, setSelection] = useState(account?.imperial === true ? 'imperial' : 'metric')
@@ -43,23 +45,22 @@ export const ImperialSettings = ({ title = false, welcome = false }) => {
   return (
     <div className="max-w-xl">
       <LoadingStatus />
-      {title ? <h1 className="text-4xl">{t('unitsTitle')}</h1> : <h1></h1>}
-      {['metric', 'imperial'].map((val) => (
-        <Choice
-          val={val}
-          t={t}
-          update={update}
+      <ListInput
+        label={t('unitsTitle')}
+        list={['metric', 'imperial'].map((val) => ({
+          val,
+          label: (
+            <div className="flex flex-row items-center w-full justify-between">
+              <span>{t(`${val}Units`)}</span>
+              <NumberBullet nr={val === 'imperial' ? '″' : 'cm'} color="secondary" />
+            </div>
+          ),
+          desc: t(`${val}Unitsd`),
+        }))}
         current={selection}
-          bool
-          key={val}
-          boolIcons={{ yes: <span>&quot;</span>, no: <span>cm</span> }}
-        >
-          <span className="block text-lg leading-5">
-            {selection === 1 && val === 2 ? t('showMore') : t(`${val}Units`)}
-          </span>
-          <span className="block text-normal font-light normal-case pt-1">{t(`${val}Unitsd`)}</span>
-        </Choice>
-      ))}
+        update={update}
+        docs={<DynamicOrgDocs language={i18n.language} path={`site/account/units`} />}
+      />
       {welcome ? (
         <>
           <ContinueButton btnProps={{ href: nextHref }} link />

sites/shared/components/inputs.mjs

@@ -61,7 +61,7 @@ export const FormControl = ({
             onClick={() =>
               setModal(
                 <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
-                  {docs}
+                  <div className="mdx max-w-prose">{docs}</div>
                 </ModalWrapper>
               )
             }