diff --git a/client/src/components/Messaging/Message.tsx b/client/src/components/Messaging/Message.tsx index 3346849..1e0f5a7 100644 --- a/client/src/components/Messaging/Message.tsx +++ b/client/src/components/Messaging/Message.tsx @@ -1,8 +1,6 @@ import React, { useCallback, useContext, useEffect, useState } from "react"; - import styles from "./styles/Message.module.css"; import Image from "../Image"; - import { ThemeContext } from "../../ThemeContext"; import { Timestamp } from "mongodb"; @@ -51,16 +49,30 @@ export const Message = ({ }, []); const [darkMode] = useContext(ThemeContext); + let messageClass; + + if (owner) { + if (!local) { + messageClass = `${styles.messageRight} ${styles.noanimate}`; + } else { + messageClass = styles.messageRight; + } + } else { + messageClass = styles.messageLeft; + } + return ( -
+
-
You {owner === true ? "sent" : "received"}
+
+ You {owner ? "sent" : "received"} +
{image && } {body} {timestamp && ( - {(owner === true ? "sent at " : "received at ") + + {(owner ? "sent at " : "received at ") + new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} )} diff --git a/client/src/components/Messaging/styles/Message.module.css b/client/src/components/Messaging/styles/Message.module.css index 63c493a..85f4ed5 100644 --- a/client/src/components/Messaging/styles/Message.module.css +++ b/client/src/components/Messaging/styles/Message.module.css @@ -17,6 +17,10 @@ animation: fade-in-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; } +.noanimate { + animation: none !important; /* disable animation */ +} + .messageLeft + .messageLeft .sentReceived { display: none; }