diff --git a/products/statement-generator/src/assets/credits-assets/confirmation.svg b/products/statement-generator/src/assets/confirmation.svg similarity index 100% rename from products/statement-generator/src/assets/credits-assets/confirmation.svg rename to products/statement-generator/src/assets/confirmation.svg diff --git a/products/statement-generator/src/assets/credits-assets/back-arrow.svg b/products/statement-generator/src/assets/credits-assets/back-arrow.svg deleted file mode 100644 index b5ab7218..00000000 --- a/products/statement-generator/src/assets/credits-assets/back-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/cancel.png b/products/statement-generator/src/assets/credits-assets/cancel.png deleted file mode 100644 index 976f334f..00000000 Binary files a/products/statement-generator/src/assets/credits-assets/cancel.png and /dev/null differ diff --git a/products/statement-generator/src/assets/credits-assets/check.svg b/products/statement-generator/src/assets/credits-assets/check.svg deleted file mode 100644 index 48386f1b..00000000 --- a/products/statement-generator/src/assets/credits-assets/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/copy.svg b/products/statement-generator/src/assets/credits-assets/copy.svg deleted file mode 100644 index 49ceca18..00000000 --- a/products/statement-generator/src/assets/credits-assets/copy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/docx.svg b/products/statement-generator/src/assets/credits-assets/docx.svg deleted file mode 100644 index a9e475ed..00000000 --- a/products/statement-generator/src/assets/credits-assets/docx.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/products/statement-generator/src/assets/credits-assets/download.svg b/products/statement-generator/src/assets/credits-assets/download.svg deleted file mode 100644 index f3ba7304..00000000 --- a/products/statement-generator/src/assets/credits-assets/download.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/editorial.svg b/products/statement-generator/src/assets/credits-assets/editorial.svg deleted file mode 100644 index eeca2589..00000000 --- a/products/statement-generator/src/assets/credits-assets/editorial.svg +++ /dev/null @@ -1,194 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/products/statement-generator/src/assets/credits-assets/email.svg b/products/statement-generator/src/assets/credits-assets/email.svg deleted file mode 100644 index f737296d..00000000 --- a/products/statement-generator/src/assets/credits-assets/email.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/eye.svg b/products/statement-generator/src/assets/credits-assets/eye.svg deleted file mode 100644 index 66a1d33c..00000000 --- a/products/statement-generator/src/assets/credits-assets/eye.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/information-alert.svg b/products/statement-generator/src/assets/credits-assets/information-alert.svg deleted file mode 100644 index a80a3772..00000000 --- a/products/statement-generator/src/assets/credits-assets/information-alert.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/next-arrow.svg b/products/statement-generator/src/assets/credits-assets/next-arrow.svg deleted file mode 100644 index ede94d1d..00000000 --- a/products/statement-generator/src/assets/credits-assets/next-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/pencil.svg b/products/statement-generator/src/assets/credits-assets/pencil.svg deleted file mode 100644 index 98f2f2be..00000000 --- a/products/statement-generator/src/assets/credits-assets/pencil.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/products/statement-generator/src/assets/credits-assets/sharing-knowledge.svg b/products/statement-generator/src/assets/credits-assets/sharing-knowledge.svg deleted file mode 100644 index 443dab72..00000000 --- a/products/statement-generator/src/assets/credits-assets/sharing-knowledge.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/products/statement-generator/src/assets/credits-assets/group-chat.jpg b/products/statement-generator/src/assets/group-chat.jpg similarity index 100% rename from products/statement-generator/src/assets/credits-assets/group-chat.jpg rename to products/statement-generator/src/assets/group-chat.jpg diff --git a/products/statement-generator/src/components-layout/AppHeader.tsx b/products/statement-generator/src/components-layout/AppHeader.tsx index 0558cd85..3b1e82f5 100644 --- a/products/statement-generator/src/components-layout/AppHeader.tsx +++ b/products/statement-generator/src/components-layout/AppHeader.tsx @@ -2,8 +2,8 @@ import React, { useContext, useState } from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Theme, makeStyles, createStyles } from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import MenuIcon from '@material-ui/icons/Menu'; +import CloseRoundedIcon from '@material-ui/icons/CloseRounded'; +import MenuRoundedIcon from '@material-ui/icons/MenuRounded'; import { AppUrl } from 'contexts/RoutingProps'; import RoutingContext from 'contexts/RoutingContext'; @@ -172,7 +172,7 @@ const AppHeader = () => { )} diff --git a/products/statement-generator/src/pages-form/Advice.tsx b/products/statement-generator/src/pages-form/Advice.tsx index 915176ed..5625e439 100644 --- a/products/statement-generator/src/pages-form/Advice.tsx +++ b/products/statement-generator/src/pages-form/Advice.tsx @@ -1,8 +1,8 @@ import React, { useRef, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { makeStyles, createStyles } from '@material-ui/core'; -import CancelIcon from '@material-ui/icons/Cancel'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; +import CancelRoundedIcon from '@material-ui/icons/CancelRounded'; +import CheckCircleRoundedIcon from '@material-ui/icons/CheckCircleRounded'; import ContentContainer from 'components-layout/ContentContainer'; import FlowNavigation from 'components-layout/FlowNavigation'; @@ -75,6 +75,17 @@ export default function Advice() { titleRef.current?.focus(); }, []); + const RedCancelIcon = () => ( + + ); + + const GreenCheckIcon = () => ( + + ); + return (

@@ -84,16 +95,13 @@ export default function Advice() {

{t('advice_page.point1.content')}

- +

{t('advice_page.point1.no')}

- +

{t('advice_page.point1.yes')}

@@ -102,16 +110,13 @@ export default function Advice() {

{t('advice_page.point2.content')}

- +

{t('advice_page.point2.no')}

- +

{t('advice_page.point2.yes')}

@@ -120,16 +125,13 @@ export default function Advice() {

{t('advice_page.point3.content')}

- +

{t('advice_page.point3.no')}

- +

{t('advice_page.point3.yes')}

diff --git a/products/statement-generator/src/pages-form/BeforeYouBegin.tsx b/products/statement-generator/src/pages-form/BeforeYouBegin.tsx index 206daa61..cfbfc329 100644 --- a/products/statement-generator/src/pages-form/BeforeYouBegin.tsx +++ b/products/statement-generator/src/pages-form/BeforeYouBegin.tsx @@ -4,7 +4,7 @@ import { makeStyles, createStyles } from '@material-ui/core'; import ContentContainer from 'components-layout/ContentContainer'; import FlowNavigation from 'components-layout/FlowNavigation'; -import ErrorIcon from '@material-ui/icons/Error'; +import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded'; const useStyles = makeStyles(({ palette, breakpoints }) => createStyles({ @@ -132,7 +132,7 @@ const BeforeYouBegin = () => { />
- +
{t('before_you_begin_page.sectionTitle4')}

} + icon={} buttonText={t('download_page.docx_btn')} />

diff --git a/products/statement-generator/src/pages-form/FinalizeForm.tsx b/products/statement-generator/src/pages-form/FinalizeForm.tsx index d4e40099..5a42f061 100644 --- a/products/statement-generator/src/pages-form/FinalizeForm.tsx +++ b/products/statement-generator/src/pages-form/FinalizeForm.tsx @@ -1,7 +1,7 @@ import React, { useContext, useRef, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { makeStyles, createStyles } from '@material-ui/core'; -import VisibilityIcon from '@material-ui/icons/Visibility'; +import VisibilityRoundedIcon from '@material-ui/icons/VisibilityRounded'; import FormStateContext from 'contexts/FormStateContext'; @@ -94,7 +94,7 @@ function FinalizeForm() { return (
- + Editing final letter
diff --git a/products/statement-generator/src/pages-form/FinalizePreview.tsx b/products/statement-generator/src/pages-form/FinalizePreview.tsx index 4ee47458..b749a99f 100644 --- a/products/statement-generator/src/pages-form/FinalizePreview.tsx +++ b/products/statement-generator/src/pages-form/FinalizePreview.tsx @@ -6,7 +6,7 @@ import FormStateContext from 'contexts/FormStateContext'; import { AppUrl } from 'contexts/RoutingProps'; import { AffirmationContext } from 'contexts/AffirmationContext'; -import VisibilityIcon from '@material-ui/icons/Visibility'; +import VisibilityRoundedIcon from '@material-ui/icons/VisibilityRounded'; import InfoBlock from 'components/InfoBlock'; @@ -62,7 +62,7 @@ function FinalizeStep() { return (
- + {t('finalize_preview.header_title')}
diff --git a/products/statement-generator/src/pages/Credits.tsx b/products/statement-generator/src/pages/Credits.tsx index ec11a815..68cc9c84 100644 --- a/products/statement-generator/src/pages/Credits.tsx +++ b/products/statement-generator/src/pages/Credits.tsx @@ -2,29 +2,38 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { createStyles, makeStyles } from '@material-ui/core'; + +import { + SvgIconComponent, + ArrowForwardRounded, + ArrowBackRounded, + CancelRounded, + CheckCircleRounded, + CloseRounded, + CreateRounded, + EmailRounded, + ErrorRounded, + ExpandMoreRounded, + GetAppRounded, + HelpRounded, + InfoRounded, + FileCopyRounded, + MenuRounded, + VisibilityRounded, +} from '@material-ui/icons'; + import creditsHeader from '../assets/creditsHeader.svg'; -import groupChat from '../assets/credits-assets/group-chat.jpg'; +import groupChat from '../assets/group-chat.jpg'; import sharingKnowledge from '../assets/faqDesktop.svg'; import error from '../assets/notFound.svg'; import editorial from '../assets/why-img.svg'; import collaboration from '../assets/almost-there-img.svg'; -import backArrow from '../assets/credits-assets/back-arrow.svg'; -import check from '../assets/credits-assets/check.svg'; -import confirmation from '../assets/credits-assets/confirmation.svg'; -import copy from '../assets/credits-assets/copy.svg'; +import confirmation from '../assets/confirmation.svg'; import privacyPolicy from '../assets/privacyPolicy.png'; -import docX from '../assets/credits-assets/docx.svg'; -import download from '../assets/credits-assets/download.svg'; import eaImage from '../assets/eaImage.png'; import multitasking from '../assets/landingWorkImg.svg'; -import eye from '../assets/credits-assets/eye.svg'; -import email from '../assets/credits-assets/email.svg'; -import pencil from '../assets/credits-assets/pencil.svg'; -import informationAlert from '../assets/credits-assets/information-alert.svg'; import support101 from '../assets/affirmation-img.svg'; import report from '../assets/future-goals-img.svg'; -import cancel from '../assets/credits-assets/cancel.png'; -import nextArrow from '../assets/credits-assets/next-arrow.svg'; const useStyles = makeStyles(({ palette, breakpoints }) => createStyles({ @@ -189,6 +198,18 @@ const useStyles = makeStyles(({ palette, breakpoints }) => margin: 'auto', }, }, + creditIconContainer: { + maxWidth: '10rem', + minWidth: '10rem', + objectFit: 'contain', + margin: 'auto', + '& svg': { + alignItems: 'center', + width: '100%', + height: '100%', + margin: 'auto', + }, + }, creditText: { '& h2': { fontWeight: 'bold', @@ -211,13 +232,15 @@ const useStyles = makeStyles(({ palette, breakpoints }) => interface CreditsObject { name: string; class: number; - used_in: string; - img: any; - img_size: number; + usedIn: string; + img?: any; + imgSize?: number; + icon?: SvgIconComponent; + iconColor?: string; artist: string; provider: string; - provider_link: string; - alt_text: string; + providerLink: string; + altText: string; } export const CreditObjects: CreditsObject[] = [ @@ -225,259 +248,293 @@ export const CreditObjects: CreditsObject[] = [ name: 'At the office', img: creditsHeader, class: 2, - img_size: 75, - used_in: 'Credits Page', + imgSize: 75, + usedIn: 'Credits Page', artist: 'N/A', - provider_link: 'https://storyset.com/illustration/on-the-office/pana', + providerLink: 'https://storyset.com/illustration/on-the-office/pana', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Back Arrow', - img: backArrow, + icon: ArrowBackRounded, class: 3, - img_size: 75, - used_in: 'Buttons', + usedIn: 'Buttons', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Go back', + altText: 'Go back', }, { name: 'Success', - img: check, + icon: CheckCircleRounded, + iconColor: '#0AEBA0', class: 3, - img_size: 75, - used_in: 'Advice Page and Letter Generator', - artist: 'N/A', - provider_link: 'https://pictogrammers.com/library/mdi/', + usedIn: 'Advice Page and Letter Generator', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Correct', + altText: 'Correct', }, { name: 'Sharing Knowledge', img: sharingKnowledge, class: 2, - img_size: 144, - used_in: 'FAQ', + imgSize: 144, + usedIn: 'FAQ', artist: 'M/A', - provider_link: 'https://undraw.co/search', - alt_text: '', + providerLink: 'https://undraw.co/search', + altText: '', provider: 'Undraw', }, { name: '404 Error', img: error, class: 2, - img_size: 200, - used_in: '404 page', + imgSize: 200, + usedIn: '404 page', artist: 'Cuate', - provider_link: 'https://storyset.com/illustration/404-error/cuate', + providerLink: 'https://storyset.com/illustration/404-error/cuate', provider: 'Storyset', - alt_text: '404 error', + altText: '404 error', }, { name: 'Multi-device targeting concept illustration', img: confirmation, class: 2, - img_size: 75, - used_in: 'Last Page Pop-Up', + imgSize: 75, + usedIn: 'Last Page Pop-Up', artist: 'Storyset', - provider_link: + providerLink: 'https://www.freepik.com/free-vector/multi-device-targeting-concept-illustration_19949448.htm#&position=1&from_view=search&track=ais', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Copy', - img: copy, + icon: FileCopyRounded, class: 3, - img_size: 75, - used_in: 'Download Page', + usedIn: 'Download Page', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Copy to clipboard', + altText: 'Copy to clipboard', }, { name: 'Data Secure', img: privacyPolicy, class: 2, - img_size: 75, - used_in: 'Landing Page', + imgSize: 75, + usedIn: 'Landing Page', artist: 'N/A', - provider_link: 'https://storyset.com/illustration/security/cuate', + providerLink: 'https://storyset.com/illustration/security/cuate', provider: 'Storyset', - alt_text: '', - }, - { - name: 'DOCX File', - img: docX, - class: 3, - img_size: 75, - used_in: 'Download Page', - artist: 'Unknown', - provider_link: 'https://expungeassist.com/credits/', - provider: 'Unknown', - alt_text: 'Download word document', + altText: '', }, { name: 'Collaboration', img: collaboration, class: 2, - img_size: 75, - used_in: 'Almost There Pop-Up', + imgSize: 75, + usedIn: 'Almost There Pop-Up', artist: 'N/A', - provider_link: 'https://storyset.com/illustration/collaboration/rafiki', + providerLink: 'https://storyset.com/illustration/collaboration/rafiki', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Support', img: support101, class: 2, - img_size: 75, - used_in: 'Landing Page', + imgSize: 75, + usedIn: 'Landing Page', artist: 'N/A', - provider_link: 'https://www.whoooa.rocks/', + providerLink: 'https://www.whoooa.rocks/', provider: 'Whoooa', - alt_text: '', + altText: '', }, { name: 'Research', img: editorial, class: 2, - img_size: 75, - used_in: 'Why Pop-Up', + imgSize: 75, + usedIn: 'Why Pop-Up', artist: 'N/A', - provider_link: + providerLink: 'https://storyset.com/illustration/editorial-commision/rafiki', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Email', - img: email, + icon: EmailRounded, class: 3, - img_size: 75, - used_in: 'Download Page', + usedIn: 'Download Page', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Send in an email', + altText: 'Send in an email', }, { name: 'Report', img: report, class: 2, - img_size: 75, - used_in: 'Future Goals Pop-Up', + imgSize: 75, + usedIn: 'Future Goals Pop-Up', artist: 'N/A', - provider_link: 'https://storyset.com/illustration/report/pana', + providerLink: 'https://storyset.com/illustration/report/pana', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Cancel', - img: cancel, + icon: CancelRounded, + iconColor: '#E87461', class: 3, - img_size: 75, - used_in: 'Advice Page', - artist: 'N/A', - provider_link: 'https://pictogrammers.com/library/mdi/', + usedIn: 'Advice Page', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Not correct', + altText: 'Not correct', }, { name: 'Pencil', - img: pencil, + icon: CreateRounded, class: 3, - img_size: 75, - used_in: 'Letter Generator Edit Pages', + usedIn: 'Letter Generator', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Edit', + altText: 'Edit', }, { name: 'Eye', - img: eye, class: 3, - img_size: 75, - used_in: 'Preview Pages in Letter Generator', + icon: VisibilityRounded, + iconColor: '#9903FF', + usedIn: 'Letter Generator', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Preview pages', + altText: 'Preview pages', }, { name: 'Information Alert', - img: informationAlert, + icon: InfoRounded, + class: 3, + iconColor: '#2F6FED', + usedIn: 'Download Page', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Information Alert', + }, + { + name: 'Error Alert', + icon: ErrorRounded, class: 3, - img_size: 75, - used_in: 'Download Page', + iconColor: '#2F6FED', + usedIn: 'Before You Begin', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Information Alert', + altText: 'Error Alert', + }, + { + name: 'Help', + icon: HelpRounded, + class: 3, + iconColor: '#2F6FED', + usedIn: 'Letter Generator Popups', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Help', }, { name: 'MultiTasking', img: multitasking, class: 2, - img_size: 75, - used_in: 'Landing Page', + imgSize: 75, + usedIn: 'Landing Page', artist: 'N/A', - provider_link: 'https://storyset.com/illustration/multitasking/cuate', + providerLink: 'https://storyset.com/illustration/multitasking/cuate', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Next Arrow', - img: nextArrow, class: 3, - img_size: 75, - used_in: 'Buttons', + icon: ArrowForwardRounded, + usedIn: 'Buttons', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Go forward', + altText: 'Go forward', + }, + { + name: 'Open Menu', + class: 3, + icon: MenuRounded, + usedIn: 'Mobile Menu', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Open menu', + }, + { + name: 'Close Menu', + class: 3, + icon: CloseRounded, + usedIn: 'Mobile Menu', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Close menu', + }, + { + name: 'Expand', + class: 3, + icon: ExpandMoreRounded, + usedIn: 'Landing Page and FAQ', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Expand section', }, - { name: 'Download', - img: download, + icon: GetAppRounded, class: 3, - img_size: 75, - used_in: 'Download Page', + usedIn: 'Download Page', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Download', + altText: 'Download', }, { name: 'EA Mobile', img: eaImage, class: 2, - img_size: 75, - used_in: 'Landing Page', + imgSize: 75, + usedIn: 'Landing Page', artist: 'N/A', - provider_link: + providerLink: 'https://storyset.com/illustration/mobile-login/cuate#default&hide=&hide=false', provider: 'Storyset', - alt_text: '', + altText: '', }, { name: 'Group Chat', img: groupChat, class: 2, - img_size: 200, - used_in: 'FAQ', - artist: 'M/A', + imgSize: 200, + usedIn: 'FAQ', + artist: 'N/A', provider: 'Freepik', - provider_link: + providerLink: 'https://www.freepik.com/free-vector/characters-people-chatting-through-smartphones_3226068.htm#query=people%20chatting&position=11&from_view=search&track=ais#position=11&query=people%20chatting', - alt_text: 'People group chatting through smart phones', + altText: 'People group chatting through smart phones', }, ]; @@ -522,7 +579,11 @@ export const Filter: React.FC = () => { } }; - const filteredCredits = CreditObjects.filter((obj) => { + const alphabetizedCredits = CreditObjects.sort((a, b) => + a.name.localeCompare(b.name) + ); + + const filteredCredits = alphabetizedCredits.filter((obj) => { if (filter === 2) { return obj.class === 2; } @@ -535,19 +596,26 @@ export const Filter: React.FC = () => { const FilterCards: React.FC = () => (
{filteredCredits.map((credit) => ( -
+

{credit.name}

-

Used on: {credit.used_in}

+

Used on: {credit.usedIn}

Artist: {credit.artist}

- Provider: {credit.provider} + Provider: {credit.provider}

-
- {credit.alt_text} -
+ {credit.img && ( +
+ {credit.altText} +
+ )} + {credit.icon && ( +
+ +
+ )}
))}