maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix/border avatargroup (#1956) 

* adding border to avatargroup based on the parent background color

* fixed border

Co-authored-by: Peer Richelsen <peeroke@richelsen.net>
This commit is contained in:
Peer Richelsen 2022-02-23 15:29:40 +00:00 committed by GitHub
parent 9e89f954e8
commit b91dfe7595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -123,7 +123,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
<div className="block p-4 sm:p-8 md:hidden">
<div className="flex items-center">
<AvatarGroup
border="dark:border-gray-900 border-white"
border="border-2 dark:border-gray-900 border-white"
items={
[
{ image: profile.image, alt: profile.name, title: profile.name },
@ -172,7 +172,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
(selectedDate ? "sm:w-1/3" : "sm:w-1/2")
}>
<AvatarGroup
border="dark:border-gray-900 border-white"
border="border-2 dark:border-gray-900 border-white"
items={
[
{ image: profile.image, alt: profile.name, title: profile.name },

2
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -288,7 +288,7 @@ const BookingPage = (props: BookingPageProps) => {
<div className="px-4 py-5 sm:flex sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-gray-800">
<AvatarGroup
border="border-white dark:border-gray-900"
border="border-2 border-white dark:border-gray-900"
size={14}
items={[{ image: props.profile.image || "", alt: props.profile.name || "" }].concat(
props.eventType.users

10
apps/web/components/ui/AvatarGroup.tsx
View File

@ -22,8 +22,14 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
{props.items.slice(0, props.truncateAfter).map((item, idx) => {
if (item.image != null) {
return (
<li key={idx} className={classNames("-mr-2 inline-block border-2", props.border)}>
<Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
<li key={idx} className="-mr-2 inline-block">
<Avatar
className={props.border}
imageSrc={item.image}
title={item.title}
alt={item.alt || ""}
size={props.size}
/>
</li>
);
}

2
apps/web/pages/event-types/index.tsx
View File

@ -159,7 +159,7 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
<div className="flex items-center space-x-2 overflow-hidden rtl:space-x-reverse">
{type.users?.length > 1 && (
<AvatarGroup
border="border-white"
border="border-2 border-white"
size={8}
truncateAfter={4}
items={type.users.map((organizer) => ({

2
apps/web/pages/team/[slug].tsx
View File

@ -42,7 +42,7 @@ function TeamPage({ team }: TeamPageProps) {
</div>
<div className="mt-1">
<AvatarGroup
border="border-white"
border="border-2 border-white"
truncateAfter={4}
className="flex-shrink-0"
size={10}