Skip to content

Updated credits page illustrations and icons #704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Updated credits page illustrations and icons #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c519e8
Updated credits page illustrations and icons
bzzz-coding Jun 16, 2025
d6ef710
Adjusted icon sizes
bzzz-coding Jun 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 56 additions & 51 deletions frontend/src/api_data/creditsIconData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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 };
85 changes: 45 additions & 40 deletions frontend/src/api_data/creditsIllustrationData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand All @@ -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,
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/assets/images/images.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Loading