fix: add theme for remirror and update some copies

src/config/theme.ts

@@ -1,7 +1,25 @@
 import { extendTheme, StyleFunctionProps } from '@chakra-ui/react'
+import { RemirrorThemeType } from 'remirror'
 
 import { colors, fonts, neutralColors, primaryColors } from '../styles'
 
+export const remirrorTheme: RemirrorThemeType = {
+  color: {
+    text: colors.neutral900,
+    background: colors.neutral0,
+    primary: colors.primary400,
+    primaryText: colors.neutral900,
+    hover: {
+      background: colors.neutral100,
+      primary: colors.primary400,
+    },
+    secondary: colors.primary400,
+    secondaryText: colors.neutral900,
+    border: colors.neutral200,
+    outline: colors.primary400,
+  },
+}
+
 export const theme = extendTheme({
   initialColorMode: 'light',
   breakpoints: {

src/forms/components/MarkdownField.tsx

@@ -27,7 +27,11 @@ import {
 import { AllStyledComponent } from '@remirror/styles/emotion'
 import { PropsWithChildren, useCallback } from 'react'
 import { Control, useController } from 'react-hook-form'
-import { getRemirrorJSON, InvalidContentHandler } from 'remirror'
+import {
+  ExtensionPriority,
+  getRemirrorJSON,
+  InvalidContentHandler,
+} from 'remirror'
 import {
   BlockquoteExtension,
   BoldExtension,
@@ -48,6 +52,7 @@ import {
 } from 'remirror/extensions'
 import TurndownService from 'turndown'
 
+import { remirrorTheme } from '../../config'
 import { useSignedUpload } from '../../hooks'
 
 const turndownService = new TurndownService()
@@ -102,7 +107,6 @@ export const MarkdownField = ({
       new HeadingExtension(),
       new BlockquoteExtension(),
       new OrderedListExtension(),
-      new ListItemExtension(),
       new CodeExtension(),
       new IframeExtension(),
       new HardBreakExtension(),
@@ -170,8 +174,8 @@ export const MarkdownField = ({
 const RemirrorStyleProvider = ({ children }: PropsWithChildren) => {
   return (
     <Box width="100%">
-      <AllStyledComponent>
-        <ThemeProvider>{children}</ThemeProvider>
+      <AllStyledComponent theme={remirrorTheme}>
+        <ThemeProvider theme={remirrorTheme}>{children}</ThemeProvider>
       </AllStyledComponent>
     </Box>
   )

src/pages/projectCreate/ProjectCreate.tsx

@@ -144,7 +144,7 @@ export const ProjectCreate = () => {
         onBackClick={onBackClick}
         title={
           <TitleWithProgressBar
-            title="Project description"
+            title="Story"
             subtitle="Create a project"
             index={1}
             length={4}

src/pages/projectCreate/components/ProjectPreviewComponent.tsx

@@ -68,10 +68,7 @@ export const ProjectPreviewComponent = ({
           <H3 wordBreak="break-all">
             {data.shortDescription || 'Project Objective'}
           </H3>
-          <MarkdownField
-            preview
-            content={data.description || 'Project Description'}
-          />
+          <MarkdownField preview content={data.description || 'Story'} />
         </VStack>
       </Card>
     </VStack>