Skip to content

Commit

Permalink
Fixed visual identation in My Dashboard > New Memberships (#5599)
Browse files Browse the repository at this point in the history 
* Fixed visual identation in My Dashboard > New Memberships

* fix build

---------

Co-authored-by: Carlos Cano <[email protected]>
  • Loading branch information
@me-andre @ccanos
me-andre and ccanos authored Feb 23, 2024
1 parent c971473 commit 630cbd7
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 77 deletions.
10 changes: 6 additions & 4 deletions src/core/ui/content/BasePageContentBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { BlockAnchorProvider } from '../keyboardNavigation/NextBlockAnchor';
import { v4 as uuid } from 'uuid';

export interface BasePageContentBlockProps {
flex?: boolean;
disablePadding?: boolean;
disableGap?: boolean;
halfWidth?: boolean;
Expand All @@ -24,11 +25,11 @@ type BasePageContentBlockWithChildrenProps<Props extends { id?: string; sx?: SxP
padding: SystemCssProperties<Theme>['padding'];
} & Props;

const getFlexDirection = ({ row, disableGap }: { row: boolean; disableGap: boolean }) => {
const getFlexDirection = ({ row, flex }: { row: boolean; flex: boolean }) => {
if (row) {
return 'row';
}
if (!disableGap) {
if (flex) {
return 'column';
}
return undefined;
Expand All @@ -40,6 +41,7 @@ const BasePageContentBlock = forwardRef(
{
disablePadding = false,
disableGap = false,
flex = !disableGap,
halfWidth = false,
row = false,
flexWrap,
Expand All @@ -60,8 +62,8 @@ const BasePageContentBlock = forwardRef(

const mergedSx: Partial<SxProps<Theme>> = {
padding: disablePadding ? undefined : padding,
display: disableGap ? undefined : 'flex',
flexDirection: getFlexDirection({ row, disableGap }),
display: flex ? 'flex' : undefined,
flexDirection: getFlexDirection({ row, flex }),
flexWrap,
gap: disableGap ? undefined : gutters(),
...getGridItemStyle(columnsTaken),
Expand Down
2 changes: 1 addition & 1 deletion src/core/ui/content/PageContentBlockSeamless.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { SystemCssProperties } from '@mui/system/styleFunctionSx/styleFunctionSx

export interface PageContentBlockSeamlessProps
extends BasePageContentBlockProps,
Omit<BoxProps, 'flexWrap'>,
Omit<BoxProps, 'flexWrap' | 'flex'>,
PropsWithChildren<{}> {}

const PageContentBlockSeamless = forwardRef<HTMLDivElement, PageContentBlockSeamlessProps>(
Expand Down
145 changes: 73 additions & 72 deletions src/main/topLevelPages/myDashboard/newMemberships/NewMembershipsBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,24 +179,20 @@ const NewMembershipsBlock = ({

return (
<>
<PageContentBlock halfWidth={halfWidth}>
<PageContentBlock halfWidth={halfWidth} disableGap flex>
<PageContentBlockHeader title={t('pages.home.sections.newMemberships.title')} />
<Box height="100%">
{pendingInvitations.length === 0 && pendingApplications.length === 0 && (
<CaptionSmall
color={theme => theme.palette.neutral.light}
marginTop={gutters(-1)}
marginBottom={gutters(0.5)}
>
{t('pages.home.sections.newMemberships.noOpenInvitations')}
</CaptionSmall>
)}
{pendingInvitations.length > 0 && (
<>
<Caption marginTop={gutters(-1)}>
{t('pages.home.sections.newMemberships.openInvitations')}
<BadgeCounter count={pendingInvitations.length} size="small" />
</Caption>
{pendingInvitations.length === 0 && pendingApplications.length === 0 && (
<CaptionSmall color={theme => theme.palette.neutral.light} marginBottom={gutters(0.5)}>
{t('pages.home.sections.newMemberships.noOpenInvitations')}
</CaptionSmall>
)}
{pendingInvitations.length > 0 && (
<>
<Caption>
{t('pages.home.sections.newMemberships.openInvitations')}
<BadgeCounter count={pendingInvitations.length} size="small" />
</Caption>
<Box marginX={-1}>
{pendingInvitations.slice(0, PENDING_MEMBERSHIPS_MAX_ITEMS).map(pendingInvitation => (
<InvitationHydrator
key={pendingInvitation.id}
Expand All @@ -213,13 +209,13 @@ const NewMembershipsBlock = ({
)}
</InvitationHydrator>
))}
</>
)}
{pendingApplications.length > 0 && (
<>
<Caption marginTop={pendingInvitations.length === 0 ? gutters(-1) : undefined}>
{t('pages.home.sections.newMemberships.openApplications')}
</Caption>
</Box>
</>
)}
{pendingApplications.length > 0 && (
<>
<Caption>{t('pages.home.sections.newMemberships.openApplications')}</Caption>
<Box marginX={-1}>
{pendingApplications.map(pendingApplication => (
<ApplicationHydrator
key={pendingApplication.id}
Expand All @@ -235,60 +231,65 @@ const NewMembershipsBlock = ({
)}
</ApplicationHydrator>
))}
</>
)}
{recentMemberships.length > 0 && (
<>
<Caption>{t('pages.home.sections.newMemberships.recentlyJoined')}</Caption>
{recentMemberships.map(membership => {
switch (membership.type) {
case PendingMembershipItemType.Invitation:
return (
<InvitationHydrator
key={membership.id}
invitation={mapApiDataToContributionItem(membership)}
withJourneyDetails
visualType={VisualType.Avatar}
>
{({ invitation }) => (
<NewMembershipCard
membership={invitation}
to={invitation?.journeyUri}
membershipType="membership"
/>
)}
</InvitationHydrator>
);
case PendingMembershipItemType.Application:
return (
<ApplicationHydrator
key={membership.id}
application={mapApiDataToContributionItem(membership)}
visualType={VisualType.Avatar}
>
{({ application: hydratedApplication }) => (
<NewMembershipCard
membership={hydratedApplication}
to={hydratedApplication?.journeyUri}
membershipType="membership"
/>
)}
</ApplicationHydrator>
);
default:
return null;
}
})}
</>
)}
</Box>
</Box>
</>
)}
{recentMemberships.length > 0 && (
<>
<Caption>{t('pages.home.sections.newMemberships.recentlyJoined')}</Caption>
{recentMemberships.map(membership => {
switch (membership.type) {
case PendingMembershipItemType.Invitation:
return (
<InvitationHydrator
key={membership.id}
invitation={mapApiDataToContributionItem(membership)}
withJourneyDetails
visualType={VisualType.Avatar}
>
{({ invitation }) => (
<NewMembershipCard
membership={invitation}
to={invitation?.journeyUri}
membershipType="membership"
/>
)}
</InvitationHydrator>
);
case PendingMembershipItemType.Application:
return (
<ApplicationHydrator
key={membership.id}
application={mapApiDataToContributionItem(membership)}
visualType={VisualType.Avatar}
>
{({ application: hydratedApplication }) => (
<NewMembershipCard
membership={hydratedApplication}
to={hydratedApplication?.journeyUri}
membershipType="membership"
/>
)}
</ApplicationHydrator>
);
default:
return null;
}
})}
</>
)}
{pendingMembershipsCount > 0 ? (
<SeeMore
sx={{ marginTop: gutters() }}
label="pages.home.sections.newMemberships.seeMore"
onClick={() => setOpenDialog({ type: DialogType.PendingMembershipsList })}
/>
) : (
<SeeMore label="pages.home.sections.newMemberships.seeAll" onClick={() => onOpenMemberships?.()} />
<SeeMore
sx={{ marginTop: gutters() }}
label="pages.home.sections.newMemberships.seeAll"
onClick={() => onOpenMemberships?.()}
/>
)}
</PageContentBlock>
<DialogWithGrid columns={12} open={openDialog?.type === DialogType.PendingMembershipsList} onClose={closeDialog}>
Expand Down

0 comments on commit 630cbd7

Please sign in to comment.