diff --git a/frontend/src/api_data/creditsIconData.ts b/frontend/src/api_data/creditsIconData.ts index 637bc571..f5c54e9a 100644 --- a/frontend/src/api_data/creditsIconData.ts +++ b/frontend/src/api_data/creditsIconData.ts @@ -2,13 +2,19 @@ import { iconArrowDown, iconArrowLeft, - iconCheckMarkDark, + iconCheckMark, iconDropdownDown, iconDropdownUp, iconHamburgerMenu, iconPlus, iconSearch, iconX, + iconFilter, + iconClipboard, + iconCarouselDots, + iconChevronLeft, + iconChevronRight, + iconMinus, } from "assets/images/images"; interface iconDatum { @@ -69,23 +75,22 @@ const iconData: iconDatum[] = [ provider: "Majesticons", link: "https://www.majesticons.com/", }, - // // Commented out icon info shown on Figma design but not yet used in MVP - // { - // id: 7, - // imgSrc: , - // name: "Chevron left", - // usedIn: "How to Join", - // provider: "Majesticons", - // link: "https://www.majesticons.com/", - // }, - // { - // id: 8, - // imgSrc: , - // name: "Chevron right", - // usedIn: "How to Join", - // provider: "Majesticons", - // link: "https://www.majesticons.com/", - // }, + { + id: 7, + imgSrc: iconChevronLeft, + name: "Chevron left", + usedIn: "How to Join", + provider: "Majesticons", + link: "https://www.majesticons.com/", + }, + { + id: 8, + imgSrc: iconChevronRight, + name: "Chevron right", + usedIn: "How to Join", + provider: "Majesticons", + link: "https://www.majesticons.com/", + }, { id: 9, imgSrc: iconSearch, @@ -94,30 +99,30 @@ const iconData: iconDatum[] = [ provider: "Majesticons", link: "https://www.majesticons.com/", }, - // { - // id: 10, - // imgSrc: iconCarouselSvg, - // name: "Carousel dot", - // usedIn: "How to Join", - // provider: "Majesticons", - // link: "https://www.majesticons.com/", - // }, + { + id: 10, + imgSrc: iconCarouselDots, + name: "Carousel dot", + usedIn: "How to Join", + provider: "Majesticons", + link: "https://www.majesticons.com/", + }, { id: 11, - imgSrc: iconCheckMarkDark, + imgSrc: iconCheckMark, name: "Check line", usedIn: "How to Join", provider: "Majesticons", link: "https://www.majesticons.com/", }, - // { - // id: 12, - // imgSrc: iconMinusSvg, - // name: "Minus line", - // usedIn: "How to Join", - // provider: "Majesticons", - // link: "https://www.majesticons.com/", - // }, + { + id: 12, + imgSrc: iconMinus, + name: "Minus line", + usedIn: "How to Join", + provider: "Majesticons", + link: "https://www.majesticons.com/", + }, { id: 13, imgSrc: iconPlus, @@ -126,22 +131,22 @@ const iconData: iconDatum[] = [ provider: "Majesticons", link: "https://www.majesticons.com/", }, - // { - // id: 14, - // imgSrc: iconClipboardSvg, - // name: "Clipboard check", - // usedIn: "How to Join", - // provider: "Majesticons", - // link: "https://www.majesticons.com/", - // }, - // { - // id: 15, - // imgSrc: iconFilterSvg, - // name: "Filter line", - // usedIn: "How to Join", - // provider: "Majesticons", - // link: "https://www.majesticons.com/", - // }, + { + id: 14, + imgSrc: iconClipboard, + name: "Clipboard check", + usedIn: "How to Join", + provider: "Majesticons", + link: "https://www.majesticons.com/", + }, + { + id: 15, + imgSrc: iconFilter, + name: "Filter line", + usedIn: "How to Join", + provider: "Majesticons", + link: "https://www.majesticons.com/", + }, ]; export { iconDatum, iconData }; diff --git a/frontend/src/api_data/creditsIllustrationData.ts b/frontend/src/api_data/creditsIllustrationData.ts index 1a35da1e..e173ad36 100644 --- a/frontend/src/api_data/creditsIllustrationData.ts +++ b/frontend/src/api_data/creditsIllustrationData.ts @@ -1,10 +1,15 @@ // data that will be used for credits page import { creditsPageHighFive, + digitalPresentation, landingPageCreativeTeam, loginIllustration, notFoundPageImg, + onboarding, privacyPolicyIllustration, + signup, + teamPage, + teamSpirit, } from "assets/images/images"; interface illustrationDatum { @@ -18,30 +23,30 @@ interface illustrationDatum { const illustrationData: illustrationDatum[] = [ // // Commented out illustration info shown on Figma design but not yet used in MVP - // { - // id: 1, - // imgSrc: illustrationTeamPageSvg, - // name: "Team Page", - // usedIn: "How to Join", - // provider: "Storyset", - // link: "https://storyset.com/illustration/team-page/pana", - // }, - // { - // id: 2, - // imgSrc: illustrationOnboardingSvg, - // name: "Onboarding", - // usedIn: "How to Join", - // provider: "Storyset", - // link: "https://storyset.com/illustration/onboarding/pana", - // }, - // { - // id: 3, - // imgSrc: illustrationDigitalPresentationSvg, - // name: "Digital Presentation", - // usedIn: "How to Join", - // provider: "Storyset", - // link: "https://storyset.com/", - // }, + { + id: 1, + imgSrc: teamPage, + name: "Team Page", + usedIn: "How to Join", + provider: "Storyset", + link: "https://storyset.com/illustration/team-page/pana", + }, + { + id: 2, + imgSrc: onboarding, + name: "Onboarding", + usedIn: "How to Join", + provider: "Storyset", + link: "https://storyset.com/illustration/onboarding/pana", + }, + { + id: 3, + imgSrc: digitalPresentation, + name: "Digital Presentation", + usedIn: "How to Join", + provider: "Storyset", + link: "https://storyset.com/", + }, // { // id: 4, // imgSrc: illustrationSelectSvg, @@ -50,22 +55,22 @@ const illustrationData: illustrationDatum[] = [ // provider: "Storyset", // link: "https://storyset.com/illustration/select/pana", // }, - // { - // id: 5, - // imgSrc: illustrationTeamSpiritSvg, - // name: "Team Spirit", - // usedIn: "How to Join", - // provider: "Storyset", - // link: "https://storyset.com/illustration/team-spirit/pana", - // }, - // { - // id: 6, - // imgSrc: illustrationSignUpSvg, - // name: "Sign Up", - // usedIn: "How to Join", - // provider: "Storyset", - // link: "https://www.freepik.com/free-vector/sign-up-concept-illustration_20602852.htm#query=signup&position=17&from_view=search&track=sph", - // }, + { + id: 5, + imgSrc: teamSpirit, + name: "Team Spirit", + usedIn: "How to Join", + provider: "Storyset", + link: "https://storyset.com/illustration/team-spirit/pana", + }, + { + id: 6, + imgSrc: signup, + name: "Sign Up", + usedIn: "How to Join", + provider: "Storyset", + link: "https://www.freepik.com/free-vector/sign-up-concept-illustration_20602852.htm#query=signup&position=17&from_view=search&track=sph", + }, // { // id: 7, // imgSrc: illustrationTeamWorkSvg, diff --git a/frontend/src/assets/images/images.tsx b/frontend/src/assets/images/images.tsx index 245a4a0b..a8b86130 100644 --- a/frontend/src/assets/images/images.tsx +++ b/frontend/src/assets/images/images.tsx @@ -237,7 +237,19 @@ export { default as privacyPolicyIllustration } from "./svgs/privacy-policy-illu export { default as creditsPageBgTop } from "./svgs/credits-page-bg-top.svg?url"; export { default as creditsPageBgBottom } from "./svgs/credits-page-bg-bottom.svg?url"; export { default as creditsPageHighFive } from "./svgs/credits-page-high-five.svg?url"; +export { default as teamPage } from "./svgs/team-page.svg?url"; +export { default as digitalPresentation } from "./svgs/digital-presentation.svg?url"; +export { default as onboarding } from "./svgs/onboarding.svg?url"; +export { default as teamSpirit } from "./svgs/team-spirit.svg?url"; +export { default as signup } from "./svgs/sign-up.svg?url"; export { default as landingPageCreativeTeam } from "./svgs/landing-page-creative-team.svg?url"; export { default as LandingPageBg } from "./svgs/landing-page-bg.svg?url"; export { default as LandingPageFg } from "./svgs/landing-page-fg.svg?url"; export { default as iconArrowDown } from "./svgs/icons/icon-arrow-down.svg?url"; +export { default as iconFilter } from "./svgs/icons/icon-filter.svg?url"; +export { default as iconCarouselDots } from "./svgs/icons/icon-carousel-dots.svg?url"; +export { default as iconClipboard } from "./svgs/icons/icon-clipboard.svg?url"; +export { default as iconMinus } from "./svgs/icons/icon-minus.svg?url"; +export { default as iconChevronLeft } from "./svgs/icons/icon-chevron-left.svg?url"; +export { default as iconChevronRight } from "./svgs/icons/icon-chevron-right.svg?url"; +export { default as iconCheckmark } from "./svgs/icons/icon-checkmark.svg?url"; diff --git a/frontend/src/assets/images/svgs/digital-presentation.svg b/frontend/src/assets/images/svgs/digital-presentation.svg new file mode 100644 index 00000000..f8f3e1c8 --- /dev/null +++ b/frontend/src/assets/images/svgs/digital-presentation.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/icons/icon-arrow-down.svg b/frontend/src/assets/images/svgs/icons/icon-arrow-down.svg index 2bf8da04..6bccd902 100644 --- a/frontend/src/assets/images/svgs/icons/icon-arrow-down.svg +++ b/frontend/src/assets/images/svgs/icons/icon-arrow-down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-arrow-left.svg b/frontend/src/assets/images/svgs/icons/icon-arrow-left.svg index 4bd4d6e9..888139d4 100644 --- a/frontend/src/assets/images/svgs/icons/icon-arrow-left.svg +++ b/frontend/src/assets/images/svgs/icons/icon-arrow-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-carousel-dots.svg b/frontend/src/assets/images/svgs/icons/icon-carousel-dots.svg new file mode 100644 index 00000000..4e3fc0c9 --- /dev/null +++ b/frontend/src/assets/images/svgs/icons/icon-carousel-dots.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/assets/images/svgs/icons/icon-checkmark.svg b/frontend/src/assets/images/svgs/icons/icon-checkmark.svg index b0dd1581..5263fc5e 100644 --- a/frontend/src/assets/images/svgs/icons/icon-checkmark.svg +++ b/frontend/src/assets/images/svgs/icons/icon-checkmark.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-chevron-left.svg b/frontend/src/assets/images/svgs/icons/icon-chevron-left.svg index 8275c484..21060cf2 100644 --- a/frontend/src/assets/images/svgs/icons/icon-chevron-left.svg +++ b/frontend/src/assets/images/svgs/icons/icon-chevron-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-chevron-right.svg b/frontend/src/assets/images/svgs/icons/icon-chevron-right.svg index 47c25dab..db403ea9 100644 --- a/frontend/src/assets/images/svgs/icons/icon-chevron-right.svg +++ b/frontend/src/assets/images/svgs/icons/icon-chevron-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-clipboard.svg b/frontend/src/assets/images/svgs/icons/icon-clipboard.svg new file mode 100644 index 00000000..9ee4d962 --- /dev/null +++ b/frontend/src/assets/images/svgs/icons/icon-clipboard.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/images/svgs/icons/icon-dropdown-down.svg b/frontend/src/assets/images/svgs/icons/icon-dropdown-down.svg index 9d27bcc8..84a8b1e5 100644 --- a/frontend/src/assets/images/svgs/icons/icon-dropdown-down.svg +++ b/frontend/src/assets/images/svgs/icons/icon-dropdown-down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-dropdown-up.svg b/frontend/src/assets/images/svgs/icons/icon-dropdown-up.svg index 947bbf6e..ffaa489c 100644 --- a/frontend/src/assets/images/svgs/icons/icon-dropdown-up.svg +++ b/frontend/src/assets/images/svgs/icons/icon-dropdown-up.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-filter.svg b/frontend/src/assets/images/svgs/icons/icon-filter.svg new file mode 100644 index 00000000..0045afbe --- /dev/null +++ b/frontend/src/assets/images/svgs/icons/icon-filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/svgs/icons/icon-hamburger-menu.svg b/frontend/src/assets/images/svgs/icons/icon-hamburger-menu.svg index 6cbb4744..ae24a416 100644 --- a/frontend/src/assets/images/svgs/icons/icon-hamburger-menu.svg +++ b/frontend/src/assets/images/svgs/icons/icon-hamburger-menu.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-minus.svg b/frontend/src/assets/images/svgs/icons/icon-minus.svg new file mode 100644 index 00000000..ed963105 --- /dev/null +++ b/frontend/src/assets/images/svgs/icons/icon-minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/svgs/icons/icon-plus.svg b/frontend/src/assets/images/svgs/icons/icon-plus.svg index 4012ca90..f4db63fe 100644 --- a/frontend/src/assets/images/svgs/icons/icon-plus.svg +++ b/frontend/src/assets/images/svgs/icons/icon-plus.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/icons/icon-search.svg b/frontend/src/assets/images/svgs/icons/icon-search.svg index eb8b404b..321e867a 100644 --- a/frontend/src/assets/images/svgs/icons/icon-search.svg +++ b/frontend/src/assets/images/svgs/icons/icon-search.svg @@ -1,15 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/frontend/src/assets/images/svgs/icons/icon-x.svg b/frontend/src/assets/images/svgs/icons/icon-x.svg index 01bbc9a9..30c89857 100644 --- a/frontend/src/assets/images/svgs/icons/icon-x.svg +++ b/frontend/src/assets/images/svgs/icons/icon-x.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/images/svgs/onboarding.svg b/frontend/src/assets/images/svgs/onboarding.svg new file mode 100644 index 00000000..7ae4989c --- /dev/null +++ b/frontend/src/assets/images/svgs/onboarding.svg @@ -0,0 +1,429 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/sign-up.svg b/frontend/src/assets/images/svgs/sign-up.svg new file mode 100644 index 00000000..7207e523 --- /dev/null +++ b/frontend/src/assets/images/svgs/sign-up.svg @@ -0,0 +1,234 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/team-page.svg b/frontend/src/assets/images/svgs/team-page.svg new file mode 100644 index 00000000..434e206a --- /dev/null +++ b/frontend/src/assets/images/svgs/team-page.svg @@ -0,0 +1,298 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/team-spirit.svg b/frontend/src/assets/images/svgs/team-spirit.svg new file mode 100644 index 00000000..3ab4059a --- /dev/null +++ b/frontend/src/assets/images/svgs/team-spirit.svg @@ -0,0 +1,274 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/pages/CreditsPage/CreditsPage.tsx b/frontend/src/pages/CreditsPage/CreditsPage.tsx index 73b110d7..9e5d848e 100644 --- a/frontend/src/pages/CreditsPage/CreditsPage.tsx +++ b/frontend/src/pages/CreditsPage/CreditsPage.tsx @@ -104,9 +104,17 @@ const CreditsPage: FC = () => { usedIn={cardData.usedIn} provider={cardData.provider} imgSrc={cardData.imgSrc} + // imgStyleClasses={`${ + // activeButton === "icons" ? "w-1/6" : "w-2/3" + // } h-auto place-self-center`} + // imgStyleClasses={`${ + // activeButton === "icons" ? "max-h-6 max-w-16" : "w-2/3 h-auto" + // } place-self-center`} imgStyleClasses={`${ - activeButton === "icons" ? "w-1/6" : "w-2/3" - } h-auto place-self-center`} + activeButton === "icons" + ? "max-h-12 max-w-1/3 object-contain" + : "w-2/3 h-auto" + } place-self-center`} imgContainerStyleClasses={`${ activeButton === "illustrations" ? "bg-grey-light"