Merge pull request #481 from audioverse-org/AV-518.2-Presenters-with-…

…no-images-to-display-First-letter-of-first-and-last-name-Presenter-s-card-on-website-and-mobile-browser

updated cardperson and circleInitials

src/components/molecules/card/favoriteEntity.tsx

@@ -23,7 +23,7 @@ export default function CardFavoriteEntity({
 		case 'Collection':
 			return <CardCollection collection={entity} />;
 		case 'Person':
-			return <CardPerson person={entity} />;
+			return <CardPerson person={entity} midinit={true} />;
 		case 'Recording':
 			return <CardRecording recording={entity} />;
 		case 'Sequence':

src/components/molecules/card/inferred.tsx

@@ -34,7 +34,9 @@ const Typename = {
 export default function CardInferred({ entity }: { entity: InferrableEntity }) {
 	switch (entity.__typename) {
 		case Typename.Person:
-			return <CardPerson person={entity as CardPersonFragment} />;
+			return (
+				<CardPerson person={entity as CardPersonFragment} midinit={true} />
+			);
 		case Typename.Recording:
 			return <CardRecording recording={entity as CardRecordingFragment} />;
 		case Typename.Sequence:

src/components/molecules/card/person.tsx

@@ -19,11 +19,17 @@ import styles from './person.module.scss';
 interface CardCollectionProps {
 	person: CardPersonFragment;
 	compact?: boolean;
+	largeinit?: boolean;
+	midinit?: boolean;
+	smallinit?: boolean;
 }
 
 export default function CardPerson({
 	person,
 	compact = false,
+	largeinit = false,
+	midinit = false,
+	smallinit = false,
 }: CardCollectionProps): JSX.Element {
 	const { isFavorited, toggleFavorited } = useIsPersonFavorited(person.id);
 	const { canonicalPath, image, name, recordings } = person;
@@ -39,7 +45,12 @@ export default function CardPerson({
 									<RoundImage image={image.url} alt={name} large={compact} />
 								</div>
 							) : (
-								<CircleInitials name={name} large={true} />
+								<CircleInitials
+									name={name}
+									large={largeinit}
+									mid={midinit}
+									small={smallinit}
+								/>
 							)}
 							{name}
 						</Heading2>

src/components/organisms/cardSlider/section/presenters.tsx

@@ -38,7 +38,7 @@ export default function Presenters(props: {
 			})}
 			seeAllUrl={root.lang(lang).presenters.get()}
 			Card={(p: { node: CardPersonFragment }) => (
-				<CardPerson person={p.node} compact />
+				<CardPerson person={p.node} compact largeinit={true} />
 			)}
 		/>
 	);

src/containers/collection/presenters.tsx

@@ -43,7 +43,7 @@ function CollectionPresenters({
 			</LineHeading>
 			<CardGroup>
 				{nodes.map((node) => (
-					<CardPerson person={node} key={node.canonicalPath} />
+					<CardPerson person={node} key={node.canonicalPath} midinit={true} />
 				))}
 			</CardGroup>
 			<Pagination