[WIP] Refactor message card

src/components/Inbox/DialogAvatar.module.scss

@@ -32,4 +32,13 @@
     line-height: 10px;
     color: #fff;
   }
+
+  &.small {
+    width: 24px;
+    height: 24px;
+
+    > .letter {
+      font-size: 14px;
+    }
+  }
 }

src/components/Inbox/DialogAvatar.tsx

@@ -4,9 +4,10 @@ import styles from './DialogAvatar.module.scss'
 import { clsx } from 'clsx'
 
 type Props = {
-  url: string
   name: string
+  url?: string
   online?: boolean
+  size?: 'small'
 }
 
 const colors = [
@@ -35,7 +36,7 @@ const DialogAvatar = (props: Props) => {
 
   return (
     <div
-      class={clsx(styles.DialogAvatar, props.online && styles.online)}
+      class={clsx(styles.DialogAvatar, props.online && styles.online, `${styles[props.size]}`)}
       style={{ 'background-color': `${randomBg()}` }}
     >
       <Show when={props.url} fallback={() => <div class={styles.letter}>{nameFirstLetter}</div>}>

src/components/Inbox/Message.module.scss

@@ -1,7 +1,58 @@
 .Message {
-  .own {
-  }
+  display: flex;
+  flex-direction: column;
+  margin: 3.2rem 0;
+
   .body {
-    // message text
+    background: #f6f6f6;
+    font-size: 14px;
+    max-width: 60%;
+    border-radius: 16px;
+    padding: 12px 16px;
+    position: relative;
+    display: flex;
+
+    p {
+      margin: 0;
+    }
+    a {
+      color: inherit;
+      text-decoration: underline;
+      &:hover {
+        color: inherit;
+      }
+    }
+  }
+
+  .time {
+    margin-top: 8px;
+    font-size: 10px;
+    color: #9fa1a7;
+  }
+
+  .author {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+
+    .name {
+      color: #141414;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+  &.own {
+    .body {
+      justify-content: flex-end;
+      margin-left: auto;
+      background: #000;
+      color: #fff;
+    }
+    .time {
+      text-align: right;
+    }
   }
 }

src/components/Inbox/Message.tsx

@@ -1,15 +1,31 @@
+import { Show } from 'solid-js'
+import MarkdownIt from 'markdown-it'
 import { clsx } from 'clsx'
 import styles from './Message.module.scss'
+import DialogAvatar from './DialogAvatar'
 
 type Props = {
   body: string
   isOwn: boolean
 }
 
+const md = new MarkdownIt({
+  linkify: true
+})
+
 const Message = (props: Props) => {
   return (
     <div class={clsx(styles.Message, props.isOwn && styles.own)}>
-      <div class={styles.body}>{props.body}</div>
+      <Show when={!props.isOwn}>
+        <div class={styles.author}>
+          <DialogAvatar size="small" name={'Message Author'} />
+          <div class={styles.name}>Message Author</div>
+        </div>
+      </Show>
+      <div class={styles.body}>
+        <div innerHTML={md.render(props.body)} />
+      </div>
+      <div class={styles.time}>12:24</div>
     </div>
   )
 }

src/components/Views/Inbox.tsx

@@ -15,6 +15,8 @@ import { createClient } from '@urql/core'
 import { findAndLoadGraphQLConfig } from '@graphql-codegen/cli'
 // import { useAuthStore } from '../../stores/auth'
 import { useSession } from '../../context/session'
+import { SVGNamespace } from 'solid-js/web'
+import Message from '../Inbox/Message'
 
 const md = new MarkdownIt({
   linkify: true
@@ -171,25 +173,7 @@ export const InboxView = () => {
               </Show>
               <For each={messages()}>
                 {(comment: { body: string; id: string; email: string }) => (
-                  <div
-                    class={`conversation__message-container
-                  ${
-                    OWNER_ID === comment.id
-                      ? 'conversation__message-container--own'
-                      : 'conversation__message-container--other'
-                  }`}
-                  >
-                    <div class="conversation__message">
-                      <div innerHTML={md.render(comment.body)} />
-                      <div class="conversation__message-details">
-                        <time>14:26</time>
-                        {comment.email} id: {comment.id}
-                      </div>
-                      <button class="conversation__context-popup-control">
-                        <Icon name="ellipsis" />
-                      </button>
-                    </div>
-                  </div>
+                  <Message body={comment.body} isOwn={OWNER_ID === comment.id} />
                 )}
               </For>
 

src/styles/Inbox.scss

@@ -275,97 +275,3 @@ body {
     padding: 0 0.5em;
   }
 }
-
-.conversation__message-container {
-  display: flex;
-  margin: 3.2rem 0;
-}
-
-.conversation__message {
-  font-size: 14px;
-  max-width: 60%;
-  border-radius: 16px;
-  padding: 12px 16px;
-  position: relative;
-
-  p {
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-    &:hover {
-      color: inherit;
-    }
-  }
-
-  &:hover {
-    .conversation__context-popup-control {
-      opacity: 1;
-    }
-  }
-}
-
-.conversation__message-details {
-  color: #9fa1a7;
-  @include font-size(1rem);
-
-  left: 0;
-  padding-top: 0.2em;
-  position: absolute;
-  top: 100%;
-}
-
-.conversation__message-container--other {
-  .conversation__message {
-    background: #f6f6f6;
-  }
-
-  .conversation__context-popup-control {
-    left: 100%;
-    margin-left: 0.3em;
-  }
-}
-
-.conversation__message-container--own {
-  justify-content: flex-end;
-
-  .conversation__message {
-    background: #000;
-    color: #fff;
-  }
-
-  .conversation__context-popup-control {
-    margin-right: 0.3em;
-    right: 100%;
-  }
-}
-
-.conversation__context-popup-control {
-  background: #f6f6f6;
-  border: none;
-  cursor: pointer;
-  height: 2.4rem;
-  margin-top: -1.2rem;
-  opacity: 0;
-  top: 50%;
-  position: absolute;
-  transition: opacity 0.3s;
-  width: 2.4rem;
-
-  &:hover {
-    .icon {
-      opacity: 0.5;
-    }
-  }
-
-  .icon {
-    opacity: 0.3;
-    transition: opacity 0.2s;
-  }
-
-  img {
-    vertical-align: middle;
-  }
-}

src/utils/config.ts

@@ -1,7 +1,7 @@
 export const isDev = import.meta.env.MODE === 'development'
 
-// export const apiBaseUrl = 'https://v2.discours.io'
-export const apiBaseUrl = 'https://testapi.discours.io'
+//export const apiBaseUrl = 'https://v2.discours.io'
+// export const apiBaseUrl = 'https://testapi.discours.io'
 // export const apiBaseUrl = 'https://newapi.discours.io'
 // testapi.discours.io
-// export const apiBaseUrl = 'http://localhost:8080'
+export const apiBaseUrl = 'http://localhost:8080'