improvement: fixed styles when replying messages

frontend/src/components/MessageInput/index.js

@@ -123,7 +123,7 @@ const useStyles = makeStyles(theme => ({
 		paddingRight: 7,
 	},
 
-	quotedContainerRight: {
+	quotedContainer: {
 		flex: 1,
 		marginRight: 5,
 		overflowY: "hidden",
@@ -133,41 +133,31 @@ const useStyles = makeStyles(theme => ({
 		position: "relative",
 	},
 
-	quotedMsgRight: {
+	quotedMsgBody: {
 		padding: 10,
-		maxWidth: 300,
-		height: "auto",
-		whiteSpace: "pre-wrap",
-	},
-
-	quotedSideRight: {
-		flex: "none",
-		width: "4px",
-		backgroundColor: "#35cd96",
-	},
-
-	quotedContainerLeft: {
-		overflow: "hidden",
-		backgroundColor: "rgba(0, 0, 0, 0.05)",
-		borderRadius: "7.5px",
-		display: "flex",
-		position: "relative",
-	},
-
-	quotedMsg: {
-		padding: 10,
-		maxWidth: 300,
 		height: "auto",
 		display: "block",
 		whiteSpace: "pre-wrap",
 		overflow: "hidden",
 	},
 
-	quotedSideLeft: {
+	quotedSideOther: {
+		flex: "none",
+		width: "4px",
+		backgroundColor: "#35cd96",
+	},
+
+	quotedSideMine: {
 		flex: "none",
 		width: "4px",
 		backgroundColor: "#6bcbef",
 	},
+
+	messageContactName: {
+		display: "flex",
+		color: "#6bcbef",
+		fontWeight: 500,
+	},
 }));
 
 const MessageInput = ({ ticketStatus }) => {
@@ -335,17 +325,13 @@ const MessageInput = ({ ticketStatus }) => {
 	const renderQuotedMessage = message => {
 		return (
 			<div className={classes.quotedMsgWrapper}>
-				<div
-					className={clsx(classes.quotedContainerLeft, {
-						[classes.quotedContainerRight]: message.fromMe,
-					})}
-				>
+				<div className={classes.quotedContainer}>
 					<span
-						className={clsx(classes.quotedSideLeft, {
-							[classes.quotedSideRight]: message.quotedMsg?.fromMe,
+						className={clsx(classes.quotedSideOther, {
+							[classes.quotedSideMine]: !message.fromMe,
 						})}
 					></span>
-					<div className={classes.quotedMsg}>
+					<div className={classes.quotedMsgBody}>
 						{!message.fromMe && (
 							<span className={classes.messageContactName}>
 								{message.contact?.name}

frontend/src/components/MessagesList/index.js

@@ -66,6 +66,12 @@ const useStyles = makeStyles(theme => ({
 		height: "auto",
 		display: "block",
 		position: "relative",
+		"&:hover #messageActionsButton": {
+			display: "flex",
+			position: "absolute",
+			top: 0,
+			right: 0,
+		},
 
 		whiteSpace: "pre-wrap",
 		backgroundColor: "#ffffff",
@@ -163,8 +169,8 @@ const useStyles = makeStyles(theme => ({
 		position: "relative",
 		color: "#999",
 		zIndex: 1,
-		backgroundColor: "#dcf8c6",
-		"&:hover, &.Mui-focusVisible": { backgroundColor: "#dcf8c6" },
+		backgroundColor: "inherit",
+		"&:hover, &.Mui-focusVisible": { backgroundColor: "inherit" },
 	},
 
 	messageContactName: {
@@ -553,6 +559,16 @@ const MessagesList = ({ ticketId, isGroup, setReplyingMessage }) => {
 							{renderDailyTimestamps(message, index)}
 							{renderMessageDivider(message, index)}
 							<div className={classes.messageLeft}>
+								<IconButton
+									variant="contained"
+									size="small"
+									id="messageActionsButton"
+									disabled={message.isDeleted}
+									className={classes.messageActionsButton}
+									onClick={e => handleOpenMessageOptionsMenu(e, message)}
+								>
+									<ExpandMore />
+								</IconButton>
 								{isGroup && (
 									<span className={classes.messageContactName}>
 										{message.contact?.name}