adding action buttons

This commit is contained in:
Arjun Patel
2022-02-04 15:55:41 -08:00
parent 3e73cb6ac1
commit 93e6b6c6e4
2 changed files with 28 additions and 23 deletions
@@ -1,5 +1,5 @@
import Conversation from "@nirvana/common/models/conversation";
import { Avatar } from "antd";
import { Avatar, Tooltip } from "antd";
import moment from "moment";
import {
FaCircle,
@@ -15,6 +15,7 @@ import {
checkIncomingMessageSelector,
} from "../../recoil/main";
import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
import { FaPlay } from "react-icons/fa";
export default function ConversationFullRow(props: {
conversation: Conversation;
@@ -33,7 +34,7 @@ export default function ConversationFullRow(props: {
return (
<span
className="py-5 px-4 border-t border-t-slate-200 flex flex-row
hover:bg-slate-50 transition-all items-center"
hover:bg-slate-50 transition-all items-center group relative"
>
{isNewIncoming && (
<FaCircle className="text-orange-500 mr-2 animate-pulse text-[0.75rem]" />
@@ -61,19 +62,31 @@ export default function ConversationFullRow(props: {
</span>
{/* actions */}
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaRocket className="ml-auto text-lg" />
</span>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaRegClock className="ml-auto text-lg" />
</span>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaCheck className="ml-auto text-lg" />
</span>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaAngleRight className="ml-auto text-lg" />
</span>
<span
className="ml-auto flex flex-row items-center
group-hover:visible invisible absolute right-5 text-slate-400"
>
<Tooltip title={"Play last convo chunk."}>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaPlay className="ml-auto text-lg text-emerald-500" />
</span>
</Tooltip>
<Tooltip title={"Priority"}>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaRocket className="ml-auto text-lg" />
</span>
</Tooltip>
<Tooltip title={"Later"}>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaRegClock className="ml-auto text-lg" />
</span>
</Tooltip>
<Tooltip title={"Done"}>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
<FaCheck className="ml-auto text-lg" />
</span>
</Tooltip>
</span>
</span>
);
@@ -79,8 +79,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today
</span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span>
<span
onClick={() => handleViewConversationDetails("woah")}
@@ -100,8 +98,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today
</span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span>
<span
onClick={() => handleViewConversationDetails("woah")}
@@ -121,8 +117,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today
</span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span>
<span
onClick={() => handleViewConversationDetails("woah")}
@@ -142,8 +136,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today
</span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span>
<span
onClick={() => handleViewConversationDetails("woah")}