fix!: update messageCanvas styling

src/components/messageCanvas/messageCanvas.css

@@ -1,29 +1,38 @@
 .rustic-message-canvas {
-  display: flex;
-  flex-direction: column;
   gap: 4px;
+  position: relative;
 }
 
-.rustic-message-canvas .rustic-message-actions-container {
+.rustic-message-canvas .rustic-message-container {
   padding: 16px;
 }
 
-.rustic-message-canvas .rustic-sender-info {
+.rustic-message-canvas .rustic-message-actions-container {
+  opacity: 0;
+  position: absolute;
+  top: 4px;
+  right: 16px;
   display: flex;
   align-items: center;
-  gap: 8px;
 }
 
-.rustic-message-canvas .rustic-message-footer {
-  opacity: 0;
-  display: flex;
-  align-items: center;
+.rustic-message-canvas .rustic-timestamp {
+  margin-left: 16px;
 }
 
-.rustic-message-canvas:hover .rustic-message-footer {
+.rustic-message-canvas:hover .rustic-message-actions-container {
   opacity: 1;
 }
 
-.rustic-message-canvas .rustic-timestamp {
-  margin-left: auto;
+@media (max-width: 900px) {
+  .rustic-message-canvas .rustic-message-actions-container {
+    bottom: -20px;
+    top: unset;
+  }
+
+  .rustic-message-canvas .rustic-timestamp {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+  }
 }

src/components/messageCanvas/messageCanvas.cy.tsx

@@ -18,20 +18,6 @@ describe('MessageCanvas', () => {
     data: { text: 'Hello World' },
   }
 
-  const testMessageUpdate = {
-    ...testMessage,
-    lastThreadMessage: {
-      id: '3',
-      timestamp: '2020-01-02T00:00:00.000Z',
-      sender: 'senderId',
-      conversationId: 'lkd9vc',
-      topicId: 'default',
-      threadId: '2',
-      format: 'text',
-      data: { text: '!' },
-    },
-  }
-
   const messageCanvas = '[data-cy=message-canvas]'
   supportedViewports.forEach((viewport) => {
     it(`renders the component on ${viewport} screen`, () => {
@@ -47,6 +33,7 @@ describe('MessageCanvas', () => {
 
       cy.contains('Hello World').should('be.visible')
       cy.contains('senderId').should('be.visible')
+      cy.contains('Jan 1, 2020').should('be.visible')
       cy.get('[data-cy="account-circle-icon"]').should('be.visible')
     })
 
@@ -80,60 +67,4 @@ describe('MessageCanvas', () => {
       })
     })
   })
-
-  context('Desktop', () => {
-    beforeEach(() => {
-      cy.viewport('macbook-13')
-    })
-
-    it('shows timestamp on hover', () => {
-      cy.mount(
-        <MessageCanvas message={testMessage}>
-          <p>Hello World</p>
-        </MessageCanvas>
-      )
-      cy.contains('Jan 1, 2020').should('not.be.visible')
-      cy.get(messageCanvas).realHover()
-      cy.contains('Jan 1, 2020').should('be.visible')
-    })
-
-    it('shows that it was last updated if an update is provided', () => {
-      cy.mount(
-        <MessageCanvas message={testMessageUpdate}>
-          <p>Hello World</p>
-        </MessageCanvas>
-      )
-
-      cy.get(messageCanvas).realHover()
-      cy.contains('last updated').should('be.visible')
-    })
-  })
-
-  context('Mobile', () => {
-    beforeEach(() => {
-      cy.viewport('iphone-6')
-    })
-
-    it('shows timestamp on touch', () => {
-      cy.mount(
-        <MessageCanvas message={testMessage}>
-          <p>Hello World</p>
-        </MessageCanvas>
-      )
-      cy.contains('Jan 1, 2020').should('not.be.visible')
-      cy.get(messageCanvas).realTouch()
-      cy.contains('Jan 1, 2020').should('be.visible')
-    })
-
-    it('shows that it was last updated if an update is provided', () => {
-      cy.mount(
-        <MessageCanvas message={testMessageUpdate}>
-          <p>Hello World</p>
-        </MessageCanvas>
-      )
-
-      cy.get(messageCanvas).realTouch()
-      cy.contains('last updated').should('be.visible')
-    })
-  })
 })

src/components/messageCanvas/messageCanvas.tsx

@@ -1,8 +1,9 @@
 import './messageCanvas.css'
 
+import { useTheme } from '@mui/material'
 import Card from '@mui/material/Card'
+import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import Box from '@mui/system/Box'
 import React, { forwardRef, type ReactNode } from 'react'
 
 import Timestamp from '../timestamp/timestamp'
@@ -36,42 +37,36 @@ function MessageCanvasElement(
   props: MessageCanvasProps,
   ref: React.Ref<HTMLDivElement>
 ) {
+  const theme = useTheme()
+
   return (
-    <Box
+    <Stack
       id={props.message.id}
       className="rustic-message-canvas"
       data-cy="message-canvas"
       ref={ref}
     >
-      <Box className="rustic-sender-info">
+      <Stack direction="row" alignItems="center" spacing={1}>
         {props.getProfileComponent && props.getProfileComponent(props.message)}
-        <Typography variant="body2" color="text.secondary" data-cy="sender">
-          {props.message.sender}:
+        <Typography variant="body1" color="text.secondary" data-cy="sender">
+          {props.message.sender}
         </Typography>
-      </Box>
-      <Card variant="outlined" className="rustic-message-actions-container">
+        <Timestamp timestamp={props.message.timestamp} />
+      </Stack>
+      {props.getActionsComponent &&
+        props.getActionsComponent(props.message) && (
+          <Card
+            variant="outlined"
+            className="rustic-message-actions-container"
+            sx={{ boxShadow: theme.shadows[1] }}
+          >
+            {props.getActionsComponent(props.message)}
+          </Card>
+        )}
+      <Card variant="outlined" className="rustic-message-container">
         {props.children}
       </Card>
-      <Box className="rustic-message-footer">
-        {props.getActionsComponent &&
-          props.getActionsComponent(props.message) && (
-            <Card variant="outlined">
-              {props.getActionsComponent(props.message)}
-            </Card>
-          )}
-        <Box className="rustic-timestamp">
-          {props.message.lastThreadMessage && (
-            <Typography variant="caption">last updated: </Typography>
-          )}
-          <Timestamp
-            timestamp={
-              props.message.lastThreadMessage?.timestamp ||
-              props.message.timestamp
-            }
-          />
-        </Box>
-      </Box>
-    </Box>
+    </Stack>
   )
 }
 

src/components/timestamp/timestamp.tsx

@@ -10,7 +10,11 @@ export interface TimestampProps {
 
 const Timestamp = (props: TimestampProps) => {
   return (
-    <Typography variant="caption" color="textSecondary">
+    <Typography
+      variant="caption"
+      color="text.secondary"
+      className="rustic-timestamp"
+    >
       {formatMessageTimestamp(props.timestamp)}
     </Typography>
   )