diff --git a/client/src/components/Messaging/Message.tsx b/client/src/components/Messaging/Message.tsx index 3346849..de1d0d7 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,34 @@ export const Message = ({ }, []); const [darkMode] = useContext(ThemeContext); + let messageClass; + + if (owner) { + // If the owner is true + if (!local) { + // When local is false, disable animation + messageClass = `${styles.messageRight} ${styles.noanimate}`; + } else { + // When local is true, apply animation + messageClass = styles.messageRight; + } + } else { + // Always use styles.messageLeft for receivers, with animation + messageClass = styles.messageLeft; + } + return ( -