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 Conversation from "@nirvana/common/models/conversation";
import { Avatar } from "antd"; import { Avatar, Tooltip } from "antd";
import moment from "moment"; import moment from "moment";
import { import {
FaCircle, FaCircle,
@@ -15,6 +15,7 @@ import {
checkIncomingMessageSelector, checkIncomingMessageSelector,
} from "../../recoil/main"; } from "../../recoil/main";
import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup"; import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
import { FaPlay } from "react-icons/fa";
export default function ConversationFullRow(props: { export default function ConversationFullRow(props: {
conversation: Conversation; conversation: Conversation;
@@ -33,7 +34,7 @@ export default function ConversationFullRow(props: {
return ( return (
<span <span
className="py-5 px-4 border-t border-t-slate-200 flex flex-row 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 && ( {isNewIncoming && (
<FaCircle className="text-orange-500 mr-2 animate-pulse text-[0.75rem]" /> <FaCircle className="text-orange-500 mr-2 animate-pulse text-[0.75rem]" />
@@ -61,19 +62,31 @@ export default function ConversationFullRow(props: {
</span> </span>
{/* actions */} {/* actions */}
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5"> <span
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"> className="ml-auto flex flex-row items-center
<FaRocket className="ml-auto text-lg" /> group-hover:visible invisible absolute right-5 text-slate-400"
</span> >
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"> <Tooltip title={"Play last convo chunk."}>
<FaRegClock className="ml-auto text-lg" /> <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
</span> <FaPlay className="ml-auto text-lg text-emerald-500" />
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"> </span>
<FaCheck className="ml-auto text-lg" /> </Tooltip>
</span>
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"> <Tooltip title={"Priority"}>
<FaAngleRight className="ml-auto text-lg" /> <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
</span> <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>
</span> </span>
); );
@@ -79,8 +79,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase"> <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today Today
</span> </span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span> </span>
<span <span
onClick={() => handleViewConversationDetails("woah")} onClick={() => handleViewConversationDetails("woah")}
@@ -100,8 +98,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase"> <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today Today
</span> </span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span> </span>
<span <span
onClick={() => handleViewConversationDetails("woah")} onClick={() => handleViewConversationDetails("woah")}
@@ -121,8 +117,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase"> <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today Today
</span> </span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span> </span>
<span <span
onClick={() => handleViewConversationDetails("woah")} onClick={() => handleViewConversationDetails("woah")}
@@ -142,8 +136,6 @@ export default function Conversations() {
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase"> <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
Today Today
</span> </span>
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
</span> </span>
<span <span
onClick={() => handleViewConversationDetails("woah")} onClick={() => handleViewConversationDetails("woah")}