Add markdown, message component [WiP]

src/components/Inbox/Message.module.scss

@@ -0,0 +1,7 @@
+.Message {
+  .own {
+  }
+  .body {
+    // message text
+  }
+}

src/components/Inbox/Message.tsx

@@ -0,0 +1,17 @@
+import { clsx } from 'clsx'
+import styles from './Message.module.scss'
+
+type Props = {
+  body: string
+  isOwn: boolean
+}
+
+const Message = (props: Props) => {
+  return (
+    <div class={clsx(styles.Message, props.isOwn && styles.own)}>
+      <div class={styles.body}>{props.body}</div>
+    </div>
+  )
+}
+
+export default Message

src/components/Views/Inbox.tsx

@@ -6,6 +6,7 @@ import { Loading } from '../Loading'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
 import { useAuthorsStore } from '../../stores/zine/authors'
+import MarkdownIt from 'markdown-it'
 // const { session } = useAuthStore()
 
 import '../../styles/Inbox.scss'
@@ -13,6 +14,9 @@ import '../../styles/Inbox.scss'
 import { createClient } from '@urql/core'
 import { useSession } from '../../context/session'
 
+const md = new MarkdownIt({
+  linkify: true
+})
 const OWNER_ID = '501'
 const client = createClient({
   url: 'https://graphqlzero.almansi.me/api'
@@ -183,7 +187,7 @@ export const InboxView = () => {
                   }`}
                   >
                     <div class="conversation__message">
-                      {comment.body}
+                      <div innerHTML={md.render(comment.body)} />
                       <div class="conversation__message-details">
                         <time>14:26</time>
                         {comment.email} id: {comment.id}

src/styles/Inbox.scss

@@ -283,6 +283,18 @@ body {
   padding: 12px 16px;
   position: relative;
 
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    &:hover {
+      color: inherit;
+    }
+  }
+
   &:hover {
     .conversation__context-popup-control {
       opacity: 1;
@@ -303,7 +315,6 @@ body {
 .conversation__message-container--other {
   .conversation__message {
     background: #f6f6f6;
-    border-right: 0.3em solid #fff;
   }
 
   .conversation__context-popup-control {
@@ -317,7 +328,6 @@ body {
 
   .conversation__message {
     background: #000;
-    border-left: 0.3em solid #fff;
     color: #fff;
   }