Add okay styles to edit part page

web/src/components/EditPartCell/EditPartCell.js

@@ -39,13 +39,6 @@ export const Success = ({ part }) => {
   }
 
   return (
-    <div className="rw-segment">
-      <header className="rw-segment-header">
-        <h2 className="rw-heading rw-heading-secondary">Edit Part {part.id}</h2>
-      </header>
-      <div className="rw-segment-main">
     <PartForm part={part} onSave={onSave} error={error} loading={loading} />
-      </div>
-    </div>
   )
 }

web/src/components/PartCell/PartCell.js

@@ -21,7 +21,7 @@ export const Success = ({ part }) => {
         <div className="bg-white p-8 my-12 min-h-md">
           <h2 className="text-4xl py-4">{part.title}</h2>
           <Editor
-            className="bg-indigo-700"
+            className="markdown-overrides"
             defaultValue={part.description}
             readOnly
           />

web/src/components/PartForm/PartForm.js

@@ -7,14 +7,21 @@ import {
   TextAreaField,
   Submit,
 } from '@redwoodjs/forms'
+import { useState } from 'react';
+
+import Editor from "rich-markdown-editor";
 
 const PartForm = (props) => {
+  const [description, setDescription] = useState(props?.part?.description)
   const onSubmit = (data) => {
-    props.onSave(data, props?.part?.id)
+    props.onSave({
+      ...data,
+      description,
+    }, props?.part?.id)
   }
 
   return (
-    <div className="rw-form-wrapper">
+    <div className="max-w-7xl mx-auto mt-10">
       <Form onSubmit={onSubmit} error={props.error}>
         <FormError
           error={props.error}
@@ -25,7 +32,7 @@ const PartForm = (props) => {
 
         <Label
           name="title"
-          className="rw-label"
+          className="p-0"
           errorClassName="rw-label rw-label-error"
         >
           Title
@@ -39,41 +46,9 @@ const PartForm = (props) => {
         />
         <FieldError name="title" className="rw-field-error" />
 
-        <Label
-          name="description"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
-          Description
-        </Label>
-        <TextField
-          name="description"
-          defaultValue={props.part?.description}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-          validation={{ required: true }}
-        />
-        <FieldError name="description" className="rw-field-error" />
-
-        <Label
-          name="code"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
-          Code
-        </Label>
-        <TextAreaField
-          name="code"
-          defaultValue={props.part?.code}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-          validation={{ required: false }}
-        />
-        <FieldError name="code" className="rw-field-error" />
-
         <Label
           name="mainImage"
-          className="rw-label"
+          className="p-0"
           errorClassName="rw-label rw-label-error"
         >
           Main image
@@ -87,6 +62,20 @@ const PartForm = (props) => {
         />
         <FieldError name="mainImage" className="rw-field-error" />
 
+        <Label
+          name="description"
+          className="p-0"
+          errorClassName="rw-label rw-label-error"
+        >
+          Description
+        </Label>
+        <div name="description" className="markdown-overrides bg-white p-12 my-10 min-h-md">
+          <Editor
+            defaultValue={props.part?.description}
+            onChange={(valueFn) => setDescription(valueFn())}
+          />
+        </div>
+
         <div className="rw-button-group">
           <Submit disabled={props.loading} className="rw-button rw-button-blue">
             Save

web/src/index.css

@@ -12,6 +12,25 @@
  * END --- TAILWIND GENERATOR EDIT
  */
 
+.markdown-overrides h4 {
+  @apply text-lg font-bold;
+}
+.markdown-overrides h3 {
+  @apply text-xl;
+}
+.markdown-overrides h2 {
+  @apply text-2xl;
+}
+.markdown-overrides h1 {
+  @apply text-3xl;
+}
+.markdown-overrides ol {
+  @apply list-decimal;
+}
+.markdown-overrides ul {
+  @apply list-disc;
+}
+
 body {
   /* TODO can I use a tailwind class here? */
   background-color: #4a5568;

web/src/pages/EditPartPage/EditPartPage.js

@@ -1,11 +1,11 @@
-import PartsLayout from 'src/layouts/PartsLayout'
 import EditPartCell from 'src/components/EditPartCell'
+import MainLayout from 'src/layouts/MainLayout'
 
 const EditPartPage = ({ id }) => {
   return (
-    <PartsLayout>
+    <MainLayout>
       <EditPartCell id={id} />
-    </PartsLayout>
+    </MainLayout>
   )
 }