talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

nicer icons and such for office rooms

Browse Source
This commit is contained in:
Arjun Patel
2022-01-23 22:14:32 -08:00
parent f1182456b5
commit de4e63e579
2 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/TeamVoiceLine.tsx
+1 -1
View File
@@ -104,7 +104,7 @@ export default function TeamVoiceLine() {
onClick={() => selectTeamMember(tmember.id)}
key={i}
className={`rounded flex flex-row items-center py-2 px-2 justify-items-start
ease-in-out duration-300 hover:cursor-pointer ${customSelectClasses}`}
ease-in-out duration-300 hover:cursor-pointer ${customSelectClasses} hover:bg-gray-200 hover:bg-opacity-20`}
>
<span
className={`relative flex mr-2 transition-all duration-500 ${
components/OfficeCard.tsx
+46 -46
View File
@@ -1,6 +1,6 @@
import { Avatar, Tooltip } from "antd";
import toast from "react-hot-toast";
import { FaPhoneSlash, FaPlus } from "react-icons/fa";
import { FaPhoneSlash, FaPlus, FaWalking } from "react-icons/fa";
import { HiSpeakerphone } from "react-icons/hi";
import { useAuth } from "../contexts/authContext";
import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
@@ -109,54 +109,54 @@ export default function OfficeCard(props: IOfficeCard) {
return (
<span
className={`flex flex-col transition-all duration-300 hover:bg-gray-200 hover:bg-opacity-25
py-3 px-3 rounded-lg ${isUserInRoom ? "bg-orange-500 bg-opacity-25" : ""}`}
className={`group flex flex-row justify-start items-center transition-all duration-500 hover:bg-gray-200 hover:bg-opacity-25
py-3 px-3 min-h-[3rem] rounded-lg ${
isUserInRoom ? "bg-orange-500 bg-opacity-25" : ""
}`}
>
<span className="flex flex-row justify-start items-center">
{renderOfficePulse(props.officeRoom.state)}
{renderOfficePulse(props.officeRoom.state)}
{/* office location name */}
<span className="text-gray-200 text-md font-semibold ml-2">
{props.officeRoom.name}
</span>
{/* all members in room */}
<span className="ml-auto items-center flex">
<Avatar.Group>
{allMembersInRoom.map((member) => {
return (
<Tooltip key={member.id} title={member.nickName}>
<Avatar
src={member.avatarUrl}
style={{ backgroundColor: "teal", verticalAlign: "middle" }}
className="shadow-xl hover:z-20 hover:cursor-pointer"
>
{member.nickName[0]}
</Avatar>
</Tooltip>
);
})}
</Avatar.Group>
</span>
{isUserInRoom ? (
<button
onClick={handleLeaveOfficeRoom}
className="ml-2 bg-orange-500 bg-opacity-40 p-2 rounded"
>
<VscDebugDisconnect className="text-orange-500 text-xl" />
</button>
) : (
<Tooltip title={"Join"}>
<button
onClick={handleJoinOfficeRoom}
className="ml-2 bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
>
<HiSpeakerphone className="text-lg text-white" />
</button>
</Tooltip>
)}
{/* office location name */}
<span className="text-gray-200 text-md font-semibold ml-2">
{props.officeRoom.name}
</span>
{/* all members in room */}
<span className="ml-auto items-center flex">
<Avatar.Group>
{allMembersInRoom.map((member) => {
return (
<Tooltip key={member.id} title={member.nickName}>
<Avatar
src={member.avatarUrl}
style={{ backgroundColor: "teal", verticalAlign: "middle" }}
className="shadow-xl hover:z-20 hover:cursor-pointer"
>
{member.nickName[0]}
</Avatar>
</Tooltip>
);
})}
</Avatar.Group>
</span>
{isUserInRoom ? (
<button
onClick={handleLeaveOfficeRoom}
className="ml-2 bg-orange-500 bg-opacity-40 p-2 rounded"
>
<VscDebugDisconnect className="text-orange-500 text-xl" />
</button>
) : (
<Tooltip title={"Join"}>
<button
onClick={handleJoinOfficeRoom}
className="ml-2 bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40 group-hover:flex hidden"
>
<FaWalking className="text-lg text-white" />
</button>
</Tooltip>
)}
</span>
);
}