From 0ff9d45dafc335fdc7e44028d985c9d927f51a18 Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 18:51:23 -0800 Subject: [PATCH 01/17] replace arrow icons in button component --- .../statement-generator/src/components/Button.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/products/statement-generator/src/components/Button.tsx b/products/statement-generator/src/components/Button.tsx index b524044c..696b3a2d 100644 --- a/products/statement-generator/src/components/Button.tsx +++ b/products/statement-generator/src/components/Button.tsx @@ -1,8 +1,8 @@ import React, { useContext, forwardRef } from 'react'; import { Link } from 'react-router-dom'; import { Button, Theme, makeStyles, createStyles } from '@material-ui/core'; -import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded'; +import ArrowBackRoundedIcon from '@material-ui/icons/ArrowBackRounded'; import { AppUrl } from 'contexts/RoutingProps'; import RoutingContext from 'contexts/RoutingContext'; @@ -166,12 +166,15 @@ const ButtonComponent = forwardRef( onKeyDown={onKeyDown} > {hasBackArrow && ( - + )} {icon} {buttonText} {hasForwardArrow && ( - From 0f7933b1283dab430bc261cb012a8687838270ae Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 18:56:37 -0800 Subject: [PATCH 02/17] replace expandmore icons in landing page, faq components --- products/statement-generator/src/components/FAQAccordion.tsx | 4 ++-- .../statement-generator/src/components/LandingAccordions.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/products/statement-generator/src/components/FAQAccordion.tsx b/products/statement-generator/src/components/FAQAccordion.tsx index f5304866..8fc2aac4 100644 --- a/products/statement-generator/src/components/FAQAccordion.tsx +++ b/products/statement-generator/src/components/FAQAccordion.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { makeStyles, createStyles, Typography } from '@material-ui/core'; import { useTranslation } from 'react-i18next'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import MuiAccordionSummary, { @@ -85,7 +85,7 @@ export const FAQAccordion: React.FC = ({ onChange={handleAccordionChange} > - // override default MUI styling const AccordionSummary = styled((props: AccordionSummaryProps) => ( - } {...props} /> + } {...props} /> ))(() => ({ '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': { transform: 'rotate(90deg)', From 18118ca09961b3d0cf431f16402949696e3a5936 Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 21:03:25 -0800 Subject: [PATCH 03/17] replace menu & close buttons in appheader component --- .../statement-generator/src/components-layout/AppHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 = () => { )} From 714172e46b62c04d861229e56ab8782968dbe5bd Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 21:48:36 -0800 Subject: [PATCH 05/17] change CreditsObject props to camel case --- .../statement-generator/src/pages/Credits.tsx | 198 +++++++++--------- 1 file changed, 99 insertions(+), 99 deletions(-) diff --git a/products/statement-generator/src/pages/Credits.tsx b/products/statement-generator/src/pages/Credits.tsx index ec11a815..d552cda1 100644 --- a/products/statement-generator/src/pages/Credits.tsx +++ b/products/statement-generator/src/pages/Credits.tsx @@ -211,13 +211,13 @@ const useStyles = makeStyles(({ palette, breakpoints }) => interface CreditsObject { name: string; class: number; - used_in: string; + usedIn: string; img: any; - img_size: number; + imgSize: number; artist: string; provider: string; - provider_link: string; - alt_text: string; + providerLink: string; + altText: string; } export const CreditObjects: CreditsObject[] = [ @@ -225,259 +225,259 @@ 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, class: 3, - img_size: 75, - used_in: 'Buttons', + imgSize: 75, + 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, class: 3, - img_size: 75, - used_in: 'Advice Page and Letter Generator', + imgSize: 75, + usedIn: 'Advice Page and Letter Generator', artist: 'N/A', - provider_link: 'https://pictogrammers.com/library/mdi/', + 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, class: 3, - img_size: 75, - used_in: 'Download Page', + imgSize: 75, + 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: '', + altText: '', }, { name: 'DOCX File', img: docX, class: 3, - img_size: 75, - used_in: 'Download Page', + imgSize: 75, + usedIn: 'Download Page', artist: 'Unknown', - provider_link: 'https://expungeassist.com/credits/', + providerLink: 'https://expungeassist.com/credits/', provider: 'Unknown', - alt_text: 'Download word document', + altText: 'Download word document', }, { 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, class: 3, - img_size: 75, - used_in: 'Download Page', + imgSize: 75, + 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, class: 3, - img_size: 75, - used_in: 'Advice Page', + imgSize: 75, + usedIn: 'Advice Page', artist: 'N/A', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Not correct', + altText: 'Not correct', }, { name: 'Pencil', img: pencil, class: 3, - img_size: 75, - used_in: 'Letter Generator Edit Pages', + imgSize: 75, + usedIn: 'Letter Generator Edit Pages', 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', + imgSize: 75, + usedIn: 'Preview Pages in 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, class: 3, - img_size: 75, - used_in: 'Download Page', + imgSize: 75, + usedIn: 'Download Page', artist: 'Material Design', - provider_link: 'https://pictogrammers.com/library/mdi/', + providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', - alt_text: 'Information Alert', + altText: 'Information Alert', }, { 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', + imgSize: 75, + 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: 'Download', img: download, class: 3, - img_size: 75, - used_in: 'Download Page', + imgSize: 75, + 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', + imgSize: 200, + usedIn: 'FAQ', artist: 'M/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', }, ]; @@ -539,14 +539,14 @@ export const Filter: React.FC = () => {

{credit.name}

-

Used on: {credit.used_in}

+

Used on: {credit.usedIn}

Artist: {credit.artist}

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

- {credit.alt_text} + {credit.altText}
From 3f1c7d840886b09d63ba0bcac57640d2e969431e Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 21:53:48 -0800 Subject: [PATCH 06/17] add key prop to resolve warning (Each child in a list should have a unique key prop.) --- products/statement-generator/src/pages/Credits.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/products/statement-generator/src/pages/Credits.tsx b/products/statement-generator/src/pages/Credits.tsx index d552cda1..70531ca9 100644 --- a/products/statement-generator/src/pages/Credits.tsx +++ b/products/statement-generator/src/pages/Credits.tsx @@ -535,7 +535,7 @@ export const Filter: React.FC = () => { const FilterCards: React.FC = () => (
{filteredCredits.map((credit) => ( -
+

{credit.name}

From 7e8e115862adaa4b1e329980f38e34cd719fee00 Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 22:28:07 -0800 Subject: [PATCH 07/17] refactor credits page to use icon imports instead of saving svgs --- .../src/assets/credits-assets/back-arrow.svg | 3 - .../src/assets/credits-assets/next-arrow.svg | 3 - .../src/assets/credits-assets/pencil.svg | 3 - .../statement-generator/src/pages/Credits.tsx | 86 +++++++++++++++---- 4 files changed, 69 insertions(+), 26 deletions(-) delete mode 100644 products/statement-generator/src/assets/credits-assets/back-arrow.svg delete mode 100644 products/statement-generator/src/assets/credits-assets/next-arrow.svg delete mode 100644 products/statement-generator/src/assets/credits-assets/pencil.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/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/pages/Credits.tsx b/products/statement-generator/src/pages/Credits.tsx index 70531ca9..af8831f1 100644 --- a/products/statement-generator/src/pages/Credits.tsx +++ b/products/statement-generator/src/pages/Credits.tsx @@ -2,13 +2,21 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { createStyles, makeStyles } from '@material-ui/core'; + +import { SvgIconComponent } from '@material-ui/icons'; +import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded'; +import ArrowBackRoundedIcon from '@material-ui/icons/ArrowBackRounded'; +import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded'; +import CreateRoundedIcon from '@material-ui/icons/CreateRounded'; +import CloseRoundedIcon from '@material-ui/icons/CloseRounded'; +import MenuRoundedIcon from '@material-ui/icons/MenuRounded'; + import creditsHeader from '../assets/creditsHeader.svg'; import groupChat from '../assets/credits-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'; @@ -19,12 +27,10 @@ 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 +195,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', @@ -212,8 +230,9 @@ interface CreditsObject { name: string; class: number; usedIn: string; - img: any; - imgSize: number; + img?: any; + imgSize?: number; + icon?: SvgIconComponent; artist: string; provider: string; providerLink: string; @@ -234,9 +253,8 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Back Arrow', - img: backArrow, + icon: ArrowBackRoundedIcon, class: 3, - imgSize: 75, usedIn: 'Buttons', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', @@ -390,10 +408,9 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Pencil', - img: pencil, + icon: CreateRoundedIcon, class: 3, - imgSize: 75, - usedIn: 'Letter Generator Edit Pages', + usedIn: 'Letter Generator', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', @@ -404,7 +421,7 @@ export const CreditObjects: CreditsObject[] = [ img: eye, class: 3, imgSize: 75, - usedIn: 'Preview Pages in Letter Generator', + usedIn: 'Letter Generator', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', @@ -434,16 +451,44 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Next Arrow', - img: nextArrow, class: 3, - imgSize: 75, + icon: ArrowForwardRoundedIcon, usedIn: 'Buttons', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', altText: 'Go forward', }, - + { + name: 'Open Menu', + class: 3, + icon: MenuRoundedIcon, + usedIn: 'Mobile Menu', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Open menu', + }, + { + name: 'Close Menu', + class: 3, + icon: CloseRoundedIcon, + usedIn: 'Mobile Menu', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Close menu', + }, + { + name: 'Expand', + class: 3, + icon: ExpandMoreRoundedIcon, + usedIn: 'Landing Page and FAQ', + artist: 'Material Design', + providerLink: 'https://pictogrammers.com/library/mdi/', + provider: 'Pictogrammers', + altText: 'Expand section', + }, { name: 'Download', img: download, @@ -545,9 +590,16 @@ export const Filter: React.FC = () => { Provider: {credit.provider}

-
- {credit.altText} -
+ {credit.img && ( +
+ {credit.altText} +
+ )} + {credit.icon && ( +
+ +
+ )}
))} From f27611e5c3128ed6045bc376bb497a0726281a86 Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 15 Nov 2024 22:52:10 -0800 Subject: [PATCH 08/17] update email icon on download & credits pages --- .../statement-generator/src/assets/credits-assets/email.svg | 3 --- products/statement-generator/src/pages-form/Download.tsx | 4 ++-- products/statement-generator/src/pages/Credits.tsx | 5 ++--- 3 files changed, 4 insertions(+), 8 deletions(-) delete mode 100644 products/statement-generator/src/assets/credits-assets/email.svg 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/pages-form/Download.tsx b/products/statement-generator/src/pages-form/Download.tsx index 5677e35b..eb05f966 100644 --- a/products/statement-generator/src/pages-form/Download.tsx +++ b/products/statement-generator/src/pages-form/Download.tsx @@ -4,7 +4,7 @@ import { saveAs } from 'file-saver'; import { Document, Packer, Paragraph } from 'docx'; import jsPDF from 'jspdf'; import { makeStyles, createStyles } from '@material-ui/core'; -import EmailIcon from '@material-ui/icons/Email'; +import EmailRoundedIcon from '@material-ui/icons/EmailRounded'; import GetAppIcon from '@material-ui/icons/GetApp'; import FileCopyIcon from '@material-ui/icons/FileCopy'; @@ -179,7 +179,7 @@ export default function Download({ onDownloadAgreementCheck }: IDownload) { className={classes.buttonSpacing} onClick={handleClickEmail} disabled={isDisabled} - icon={} + icon={} buttonText={t('download_page.email_btn')} />
diff --git a/products/statement-generator/src/pages/Credits.tsx b/products/statement-generator/src/pages/Credits.tsx index ac811898..3b8ffb01 100644 --- a/products/statement-generator/src/pages/Credits.tsx +++ b/products/statement-generator/src/pages/Credits.tsx @@ -3,24 +3,24 @@ import { useTranslation } from 'react-i18next'; import { createStyles, makeStyles } from '@material-ui/core'; -import { SvgIconComponent } from '@material-ui/icons'; -import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded'; -import ArrowBackRoundedIcon from '@material-ui/icons/ArrowBackRounded'; -import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded'; -import CreateRoundedIcon from '@material-ui/icons/CreateRounded'; -import CloseRoundedIcon from '@material-ui/icons/CloseRounded'; -import MenuRoundedIcon from '@material-ui/icons/MenuRounded'; -import EmailRoundedIcon from '@material-ui/icons/EmailRounded'; -import CancelRoundedIcon from '@material-ui/icons/CancelRounded'; -import CheckCircleRoundedIcon from '@material-ui/icons/CheckCircleRounded'; -import VisibilityRoundedIcon from '@material-ui/icons/VisibilityRounded'; -import InfoRoundedIcon from '@material-ui/icons/InfoRounded'; -import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded'; -import HelpRoundedIcon from '@material-ui/icons/HelpRounded'; - -import copy from '../assets/credits-assets/copy.svg'; -import docX from '../assets/credits-assets/docx.svg'; -import download from '../assets/credits-assets/download.svg'; +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/group-chat.jpg'; @@ -257,7 +257,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Back Arrow', - icon: ArrowBackRoundedIcon, + icon: ArrowBackRounded, class: 3, usedIn: 'Buttons', artist: 'Material Design', @@ -267,7 +267,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Success', - icon: CheckCircleRoundedIcon, + icon: CheckCircleRounded, iconColor: '#0AEBA0', class: 3, usedIn: 'Advice Page and Letter Generator', @@ -312,9 +312,8 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Copy', - img: copy, + icon: FileCopyRounded, class: 3, - imgSize: 75, usedIn: 'Download Page', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', @@ -332,17 +331,6 @@ export const CreditObjects: CreditsObject[] = [ provider: 'Storyset', altText: '', }, - { - name: 'DOCX File', - img: docX, - class: 3, - imgSize: 75, - usedIn: 'Download Page', - artist: 'Unknown', - providerLink: 'https://expungeassist.com/credits/', - provider: 'Unknown', - altText: 'Download word document', - }, { name: 'Collaboration', img: collaboration, @@ -379,7 +367,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Email', - icon: EmailRoundedIcon, + icon: EmailRounded, class: 3, usedIn: 'Download Page', artist: 'Material Design', @@ -400,7 +388,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Cancel', - icon: CancelRoundedIcon, + icon: CancelRounded, iconColor: '#E87461', class: 3, usedIn: 'Advice Page', @@ -411,7 +399,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Pencil', - icon: CreateRoundedIcon, + icon: CreateRounded, class: 3, usedIn: 'Letter Generator', artist: 'Material Design', @@ -422,7 +410,7 @@ export const CreditObjects: CreditsObject[] = [ { name: 'Eye', class: 3, - icon: VisibilityRoundedIcon, + icon: VisibilityRounded, iconColor: '#9903FF', usedIn: 'Letter Generator', artist: 'Material Design', @@ -432,7 +420,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Information Alert', - icon: InfoRoundedIcon, + icon: InfoRounded, class: 3, iconColor: '#2F6FED', usedIn: 'Download Page', @@ -443,7 +431,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Error Alert', - icon: ErrorRoundedIcon, + icon: ErrorRounded, class: 3, iconColor: '#2F6FED', usedIn: 'Before You Begin', @@ -454,7 +442,7 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Help', - icon: HelpRoundedIcon, + icon: HelpRounded, class: 3, iconColor: '#2F6FED', usedIn: 'Letter Generator Popups', @@ -477,7 +465,7 @@ export const CreditObjects: CreditsObject[] = [ { name: 'Next Arrow', class: 3, - icon: ArrowForwardRoundedIcon, + icon: ArrowForwardRounded, usedIn: 'Buttons', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', @@ -487,7 +475,7 @@ export const CreditObjects: CreditsObject[] = [ { name: 'Open Menu', class: 3, - icon: MenuRoundedIcon, + icon: MenuRounded, usedIn: 'Mobile Menu', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', @@ -497,7 +485,7 @@ export const CreditObjects: CreditsObject[] = [ { name: 'Close Menu', class: 3, - icon: CloseRoundedIcon, + icon: CloseRounded, usedIn: 'Mobile Menu', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', @@ -507,7 +495,7 @@ export const CreditObjects: CreditsObject[] = [ { name: 'Expand', class: 3, - icon: ExpandMoreRoundedIcon, + icon: ExpandMoreRounded, usedIn: 'Landing Page and FAQ', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', @@ -516,9 +504,8 @@ export const CreditObjects: CreditsObject[] = [ }, { name: 'Download', - img: download, + icon: GetAppRounded, class: 3, - imgSize: 75, usedIn: 'Download Page', artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', From 605b609a4f66de0ae31968b46283843dd6e6491e Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Mon, 18 Nov 2024 22:20:19 -0800 Subject: [PATCH 17/17] fix typo, add material as artist for new icons --- products/statement-generator/src/pages/Credits.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/products/statement-generator/src/pages/Credits.tsx b/products/statement-generator/src/pages/Credits.tsx index 3b8ffb01..68cc9c84 100644 --- a/products/statement-generator/src/pages/Credits.tsx +++ b/products/statement-generator/src/pages/Credits.tsx @@ -271,7 +271,7 @@ export const CreditObjects: CreditsObject[] = [ iconColor: '#0AEBA0', class: 3, usedIn: 'Advice Page and Letter Generator', - artist: 'N/A', + artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', altText: 'Correct', @@ -392,7 +392,7 @@ export const CreditObjects: CreditsObject[] = [ iconColor: '#E87461', class: 3, usedIn: 'Advice Page', - artist: 'N/A', + artist: 'Material Design', providerLink: 'https://pictogrammers.com/library/mdi/', provider: 'Pictogrammers', altText: 'Not correct', @@ -530,7 +530,7 @@ export const CreditObjects: CreditsObject[] = [ class: 2, imgSize: 200, usedIn: 'FAQ', - artist: 'M/A', + artist: 'N/A', provider: 'Freepik', 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',