wip: Bunch of changes for v4

From the top of my head (but I'll write this up later):

- We keep the info about the designs in the design
- We use a new about.json file for this
- The auto-generated data.mjs file is no more
- Linedrawings we use in the design picker use the front
- Linedrawings should respect square aspect ration
- Migrated components to use the 'tw-' prefic for tailwind CSS classes
  to avoid conflicts with docusaurus styles

packages/react/components/Account/shared.mjs

@@ -18,11 +18,13 @@ import {
  * A component to display a row of data
  */
 export const DisplayRow = ({ title, children, keyWidth = 'w-24' }) => (
-  <div className="flex flex-row flex-wrap items-center lg:gap-4 my-2 w-full">
-    <div className={`${keyWidth} text-left md:text-right block md:inline font-bold pr-4 shrink-0`}>
+  <div className="tw-flex tw-flex-row tw-flex-wrap tw-items-center lg:tw-gap-4 tw-my-2 tw-w-full">
+    <div
+      className={`${keyWidth} tw-text-left md:tw-text-right tw-block md:tw-inline tw-font-bold tw-pr-4 tw-shrink-0`}
+    >
       {title}
     </div>
-    <div className="grow">{children}</div>
+    <div className="tw-grow">{children}</div>
   </div>
 )
 
@@ -35,12 +37,15 @@ export const welcomeSteps = {
 }
 
 export const WelcomeDoneIcon = ({ href }) => (
-  <Link href={`/welcome/${href}`} className="text-success hover:text-secondary">
+  <Link href={`/welcome/${href}`} className="tw-text-success hover:tw-text-secondary">
     <WelcomeTopicIcon href={href} />
   </Link>
 )
 export const WelcomeTodoIcon = ({ href }) => (
-  <Link href={`/welcome/${href}`} className="text-secondary w-6 h-6 opacity-50 hover:opacity-100">
+  <Link
+    href={`/welcome/${href}`}
+    className="tw-text-secondary tw-w-6 tw-h-6 tw-opacity-50 hover:tw-opacity-100"
+  >
     <WelcomeTopicIcon href={href} />
   </Link>
 )
@@ -57,11 +62,11 @@ const WelcomeTopicIcon = (props) => {
 }
 
 const WelcomeDoingIcon = ({ href }) => (
-  <WelcomeTopicIcon href={href} className="w-6 h-6 text-base-content" />
+  <WelcomeTopicIcon href={href} className="tw-w-6 tw-h-6 tw-text-base-content" />
 )
 
 export const WelcomeIcons = ({ done = [], todo = [], current = '' }) => (
-  <div className="m-auto flex flex-row items-center justify-center gap-2">
+  <div className="tw-m-auto tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-2">
     {done.map((href) => (
       <WelcomeDoneIcon href={href} key={href} />
     ))}