mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fixed small screen breaking (#1075)

Browse source 
* fixed small screen breaking

* fixed lint err
This commit is contained in:
Syed Ali Shahbaz 2021-10-29 18:29:23 +05:30 committed by GitHub
parent ed4587b3af
commit 5291dade42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
components/team/MemberListItem.tsx
View file

@ -23,43 +23,49 @@ export default function MemberListItem(props: {
member && ( member && (
<li className="divide-y"> <li className="divide-y">
<div className="flex justify-between my-4"> <div className="flex justify-between my-4">
<div className="flex"> <div className="flex flex-col justify-between w-full sm:flex-row">
<Avatar <div className="flex">
imageSrc={ <Avatar
props.member.avatar imageSrc={
? props.member.avatar props.member.avatar
: "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" + ? props.member.avatar
encodeURIComponent(props.member.name || "") : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
} encodeURIComponent(props.member.name || "")
displayName={props.member.name || ""} }
className="rounded-full w-9 h-9" alt={props.member.name || ""}
/> className="rounded-full w-9 h-9"
<div className="inline-block ml-3"> />
<span className="text-sm font-bold text-neutral-700">{props.member.name}</span> <div className="inline-block ml-3">
<span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span> <span className="text-sm font-bold text-neutral-700">{props.member.name}</span>
<span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
</div>
</div> </div>
</div> <div>
<div className="flex"> {props.member.role === "INVITEE" && (
{props.member.role === "INVITEE" && ( <>
<> <span className="self-center h-6 px-3 py-1 mr-2 text-xs text-yellow-700 capitalize rounded-md bg-yellow-50">
<span className="self-center h-6 px-3 py-1 mr-2 text-xs text-yellow-700 capitalize rounded-md bg-yellow-50"> {t("pending")}
{t("pending")} </span>
</span> <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
{t("member")}
</span>
</>
)}
{props.member.role === "MEMBER" && (
<span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50"> <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
{t("member")} {t("member")}
</span> </span>
</> )}
)} {props.member.role === "OWNER" && (
{props.member.role === "MEMBER" && ( <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-blue-700 capitalize rounded-md bg-blue-50">
<span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50"> {t("owner")}
{t("member")} </span>
</span> )}
)} </div>
{props.member.role === "OWNER" && ( </div>
<span className="self-center h-6 px-3 py-1 mr-4 text-xs text-blue-700 capitalize rounded-md bg-blue-50"> <div className="flex">
{t("owner")} {/* <div className="flex flex-col-reverse"> */}
</span>
)}
<Dropdown> <Dropdown>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<DotsHorizontalIcon className="w-5 h-5" /> <DotsHorizontalIcon className="w-5 h-5" />
@ -89,6 +95,7 @@ export default function MemberListItem(props: {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</Dropdown> </Dropdown>
{/* </div> */}
</div> </div>
</div> </div>
</li> </li>