New memberships graphical tweaks (#5523)

* New memberships graphical tweaks * translate * Default Journey visuals (#5519) * Default Journey visuals * cleanup * Top Callout width fixed * cleanup --------- Co-authored-by: Carlos Cano <[email protected]> * Minor version bump * fix --------- Co-authored-by: Andrew Pazniak <[email protected]> Co-authored-by: Valentin Yanakiev <[email protected]>
alkem-io · Feb 9, 2024 · 58eb875 · 58eb875
1 parent adcc588
commit 58eb875
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 100 deletions.
diff --git a/src/core/i18n/en/translation.en.json b/src/core/i18n/en/translation.en.json
@@ -1994,20 +1994,21 @@
         "newMemberships": {
           "title": "New Memberships",
           "openInvitations": "Open invitations",
+          "noOpenInvitations": "No open invitations",
           "openApplications": "Open applications",
           "recentlyJoined": "Recently joined",
           "seeMore": "All pending memberships",
           "seeAll": "See all my memberships",
           "invitation": {
-            "message": "<journeyicon /> {{journey}}",
+            "message": "{{journey}}",
             "caption": "Click here to see the invitation"
           },
           "application": {
-            "message": "<journeyicon /> {{journey}}",
+            "message": "{{journey}}",
             "caption": "Your application still has to be approved"
           },
           "membership": {
-            "message": "<journeyicon /> {{journey}}",
+            "message": "{{journey}}",
             "caption": "{{tagline}}"
           }
         },

diff --git a/src/main/topLevelPages/myDashboard/newMemberships/NewMembershipCard.tsx b/src/main/topLevelPages/myDashboard/newMemberships/NewMembershipCard.tsx
@@ -3,7 +3,7 @@ import { JourneyDetails } from '../../../../domain/community/pendingMembership/P
 import { Avatar, ButtonBase, ListItemButton, ListItemButtonProps, ListItemButtonTypeMap } from '@mui/material';
 import { Caption } from '../../../../core/ui/typography';
 import { Trans, useTranslation } from 'react-i18next';
-import JourneyIcon from '../../../../domain/shared/components/JourneyIcon/JourneyIcon';
+import { gutters } from '../../../../core/ui/grid/utils';
 import defaultJourneyAvatar from '../../../../domain/journey/defaultVisuals/Avatar.jpg';
 
 interface NewMembershipCardProps {
@@ -20,30 +20,27 @@ const Wrapper = <D extends React.ElementType = ListItemButtonTypeMap['defaultCom
 const NewMembershipCard = ({ membership, to, onClick, membershipType }: NewMembershipCardProps) => {
   const { t } = useTranslation();
 
-  const JourneyIconComponent = membership && JourneyIcon[membership.journeyTypeName];
-
   return (
     <BadgeCardView
       component={Wrapper}
       visual={<Avatar src={membership?.journeyVisual?.uri || defaultJourneyAvatar} />}
       to={to}
       onClick={onClick}
-      sx={{ textAlign: 'left' }}
+      sx={{ textAlign: 'left', paddingLeft: gutters(0.5), width: '100%' }}
     >
       <Caption whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
         <Trans
           t={t}
           i18nKey={`pages.home.sections.newMemberships.${membershipType}.message` as const}
           components={{
-            journeyicon: JourneyIconComponent ? <JourneyIconComponent fontSize="inherit" /> : <span />,
             b: <strong />,
           }}
           values={{
             journey: membership?.journeyDisplayName,
           }}
         />
       </Caption>
-      <Caption>
+      <Caption color={theme => theme.palette.neutral.light}>
         {t(`pages.home.sections.newMemberships.${membershipType}.caption` as const, {
           tagline: membership?.journeyTagline,
         })}

diff --git a/src/main/topLevelPages/myDashboard/newMemberships/NewMembershipsBlock.tsx b/src/main/topLevelPages/myDashboard/newMemberships/NewMembershipsBlock.tsx
@@ -1,7 +1,7 @@
 import PageContentBlock from '../../../../core/ui/content/PageContentBlock';
 import PageContentBlockHeader from '../../../../core/ui/content/PageContentBlockHeader';
 import { useTranslation } from 'react-i18next';
-import { BlockSectionTitle, Caption } from '../../../../core/ui/typography';
+import { BlockSectionTitle, Caption, CaptionSmall } from '../../../../core/ui/typography';
 import { gutters } from '../../../../core/ui/grid/utils';
 import {
   ApplicationHydrator,
@@ -27,6 +27,7 @@ import NewMembershipCard from './NewMembershipCard';
 import SeeMore from '../../../../core/ui/content/SeeMore';
 import { VisualType } from '../../../../core/apollo/generated/graphql-schema';
 import BadgeCounter from '../../../../core/ui/icon/BadgeCounter';
+import { Box } from '@mui/material';
 
 enum PendingMembershipItemType {
   Invitation,
@@ -180,96 +181,107 @@ const NewMembershipsBlock = ({
     <>
       <PageContentBlock halfWidth={halfWidth}>
         <PageContentBlockHeader title={t('pages.home.sections.newMemberships.title')} />
-        {pendingInvitations.length > 0 && (
-          <>
-            <Caption marginTop={gutters(-1)}>
-              {t('pages.home.sections.newMemberships.openInvitations')}
-              <BadgeCounter count={pendingInvitations.length} size="small" />
-            </Caption>
-            {pendingInvitations.slice(0, PENDING_MEMBERSHIPS_MAX_ITEMS).map(pendingInvitation => (
-              <InvitationHydrator
-                key={pendingInvitation.id}
-                invitation={mapApiDataToContributionItem(pendingInvitation)}
-                withJourneyDetails
-                visualType={VisualType.Avatar}
-              >
-                {({ invitation }) => (
-                  <NewMembershipCard
-                    membership={invitation}
-                    onClick={() => invitation && handleInvitationCardClick(invitation, 'card')}
-                    membershipType="invitation"
-                  />
-                )}
-              </InvitationHydrator>
-            ))}
-          </>
-        )}
-        {pendingApplications.length > 0 && (
-          <>
-            <Caption marginTop={pendingInvitations.length === 0 ? gutters(-1) : undefined}>
-              {t('pages.home.sections.newMemberships.openApplications')}
-            </Caption>
-            {pendingApplications.map(pendingApplication => (
-              <ApplicationHydrator
-                key={pendingApplication.id}
-                application={mapApiDataToContributionItem(pendingApplication)}
-                visualType={VisualType.Avatar}
-              >
-                {({ application: hydratedApplication }) => (
-                  <NewMembershipCard
-                    membership={hydratedApplication}
-                    to={hydratedApplication?.journeyUri ?? ''}
-                    membershipType="application"
-                  />
-                )}
-              </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 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.slice(0, PENDING_MEMBERSHIPS_MAX_ITEMS).map(pendingInvitation => (
+                <InvitationHydrator
+                  key={pendingInvitation.id}
+                  invitation={mapApiDataToContributionItem(pendingInvitation)}
+                  withJourneyDetails
+                  visualType={VisualType.Avatar}
+                >
+                  {({ invitation }) => (
+                    <NewMembershipCard
+                      membership={invitation}
+                      onClick={() => invitation && handleInvitationCardClick(invitation, 'card')}
+                      membershipType="invitation"
+                    />
+                  )}
+                </InvitationHydrator>
+              ))}
+            </>
+          )}
+          {pendingApplications.length > 0 && (
+            <>
+              <Caption marginTop={pendingInvitations.length === 0 ? gutters(-1) : undefined}>
+                {t('pages.home.sections.newMemberships.openApplications')}
+              </Caption>
+              {pendingApplications.map(pendingApplication => (
+                <ApplicationHydrator
+                  key={pendingApplication.id}
+                  application={mapApiDataToContributionItem(pendingApplication)}
+                  visualType={VisualType.Avatar}
+                >
+                  {({ application: hydratedApplication }) => (
+                    <NewMembershipCard
+                      membership={hydratedApplication}
+                      to={hydratedApplication?.journeyUri ?? ''}
+                      membershipType="application"
+                    />
+                  )}
+                </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>
         {pendingMembershipsCount > 0 ? (
           <SeeMore
             label="pages.home.sections.newMemberships.seeMore"