From 5171a0eb06088ab8700e301cb50257e868b6136f Mon Sep 17 00:00:00 2001 From: karthik-Jay <32955712+karthik-Jay@users.noreply.github.com> Date: Mon, 3 Jul 2023 22:23:21 +0800 Subject: [PATCH] Updated styling for navbar and breadcrumbs (#145) --- package-lock.json | 11 + package.json | 1 + src/data/model/organisationSummary.ts | 1 + src/features/common/NavigationBar.tsx | 37 +- src/features/common/orgBreadCrumb.tsx | 23 +- src/features/common/simple-navbar.tsx | 21 - .../test-data/initial-organisations.ts | 526 ++++++++++++++++++ src/features/organisation-list/index.tsx | 1 - src/index.tsx | 1 + src/theme.ts | 3 + 10 files changed, 577 insertions(+), 48 deletions(-) delete mode 100644 src/features/common/simple-navbar.tsx create mode 100644 src/features/firestore-mock/test-data/initial-organisations.ts diff --git a/package-lock.json b/package-lock.json index 2d25dc4..c2546a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "react-router-dom": "^6.4.4", "react-scripts": "5.0.1", "sass": "^1.56.1", + "typeface-inter": "^3.18.1", "typescript": "^4.9.3", "web-vitals": "^2.1.4" }, @@ -28865,6 +28866,11 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typeface-inter": { + "version": "3.18.1", + "resolved": "https://registry.npmjs.org/typeface-inter/-/typeface-inter-3.18.1.tgz", + "integrity": "sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==" + }, "node_modules/typescript": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", @@ -51516,6 +51522,11 @@ "is-typedarray": "^1.0.0" } }, + "typeface-inter": { + "version": "3.18.1", + "resolved": "https://registry.npmjs.org/typeface-inter/-/typeface-inter-3.18.1.tgz", + "integrity": "sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==" + }, "typescript": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", diff --git a/package.json b/package.json index b5d9df4..fb419b8 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-router-dom": "^6.4.4", "react-scripts": "5.0.1", "sass": "^1.56.1", + "typeface-inter": "^3.18.1", "typescript": "^4.9.3", "web-vitals": "^2.1.4" }, diff --git a/src/data/model/organisationSummary.ts b/src/data/model/organisationSummary.ts index da68a52..302fcba 100644 --- a/src/data/model/organisationSummary.ts +++ b/src/data/model/organisationSummary.ts @@ -21,6 +21,7 @@ export class OrganisationSummary implements IOrganisationSummary { videoUrl?: string; websiteUrl: string; donationUrl?: string; + // potentially create reference to parent organisation object, if queries require it diff --git a/src/features/common/NavigationBar.tsx b/src/features/common/NavigationBar.tsx index 3c00cab..4ad422a 100644 --- a/src/features/common/NavigationBar.tsx +++ b/src/features/common/NavigationBar.tsx @@ -13,7 +13,7 @@ import NavigationButton from "../home/components/NavigationButton"; import { Paths } from "../../paths"; import "../page-style.scss"; -import logo from "../../assets/images/logo/Mendisphere Logo Square colour.png"; +import logo from "../../assets/images/logo/Mendisphere Logo colour.png"; const Navigation = () => { const [mobileNav, setMobileNav] = useState(false); @@ -41,25 +41,23 @@ const Navigation = () => { backgroundColor="#FFFFFF" > - + - - - About - - Organisations - - Contact Us - - {/* + + About + + Organisations + + Contact Us + + {/* { onClick={toggleMobileNav} /> */} - {mobileNav ? ( diff --git a/src/features/common/orgBreadCrumb.tsx b/src/features/common/orgBreadCrumb.tsx index 6d0609b..fd9cb05 100644 --- a/src/features/common/orgBreadCrumb.tsx +++ b/src/features/common/orgBreadCrumb.tsx @@ -7,16 +7,23 @@ import { Box, Text, } from "@chakra-ui/react"; +import { Link as RouterLink } from "react-router-dom"; import { HomeIcon } from "@primer/octicons-react"; import { Organisation } from "../../data/model/organisation"; import { Paths } from "../../paths"; +const currentPageStyle = { + color: "#3959FF", + textDecoration: "underline", + fontWeight: "700", +}; + const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => { const isOrgProfilePage = org !== undefined; return ( - - + + }> {/* Home link */} @@ -29,17 +36,21 @@ const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => { - - Organisations - + Organisations {/* organisation profile page */} {isOrgProfilePage && ( - {org.name} + + {org.name} + )} diff --git a/src/features/common/simple-navbar.tsx b/src/features/common/simple-navbar.tsx deleted file mode 100644 index a6fec51..0000000 --- a/src/features/common/simple-navbar.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Flex, Text } from "@chakra-ui/react"; -import "../page-style.scss"; - -export default function SimpleNavigationBar() { - return ( - - - Mendisphere - - - ); -} diff --git a/src/features/firestore-mock/test-data/initial-organisations.ts b/src/features/firestore-mock/test-data/initial-organisations.ts new file mode 100644 index 0000000..d02cd3e --- /dev/null +++ b/src/features/firestore-mock/test-data/initial-organisations.ts @@ -0,0 +1,526 @@ +import { IPCStatus } from "../../../data/enums/ipc-status.enum"; +import { Service } from "../../../data/enums/service.enum"; +import { Specialisation } from "../../../data/enums/specialisation.enum"; +import { SupportArea } from "../../../data/enums/support-area.enum"; +import { VerificationStatus } from "../../../data/enums/verification-status.enum"; +import { IOrganisation } from "../../../data/model/organisation"; +import { IProfileContent } from "../../../data/model/organisationProfile/profileContent"; +import { IOrganisationSummary } from "../../../data/model/organisationSummary"; +import { faker } from "@faker-js/faker"; +import { SocialType } from "../../../data/enums/social-type.enum"; +import { IPeopleSpotlight } from "../../../data/model/organisationProfile/organisationProfilePeopleSpotlight"; + +export const testOrg1: IOrganisation = { + name: "Over The Rainbow (OTR)", + ipcApproved: IPCStatus.Approved, + verified: VerificationStatus.Verified, + mainSpecialisation: Specialisation.YouthMentalWellness, + mainSupportArea: SupportArea.FundingSupport, + services: [Service.Youth, Service.Workshops, Service.Counselling], + description: + "Over-The-Rainbow (OTR) is the mental wellness initiative of the WholeTree Foundation, the not-for-profit family foundation of Yen-Lu & Yee Ling Chow, founded in loving memory of their son and only child Lawrance H. Chow who ended his own life at the age of 26 after suffering for many years from manic depression. OTR is a one-stop hub for youth mental wellness.", +// Our mission is to transform mental wellness for the 21st century: +// Propel mental wellness to the top of life’s priorities; +// Create a community based on the timeless wisdoms of love, compassion, truth, beauty, harmony, generosity, joy and service; +// Empower every young person on his/her mental wellness journey via holistic self care and a supportive community - to overcome life challenges, live life with purpose and passion, and fulfil their life potential as human beings.", + cardImageUrl: "https://picsum.photos/278/425", +}; + +// { +// socialType: SocialType.Instagram, +// url: "https://www.instagram.com/otrsg/?hl=en", +// }, +// { +// socialType: SocialType.LinkedIn, +// url: "https://www.linkedin.com/company/over-the-rainbow-sg/", +// }, +// { +// socialType: SocialType.Facebook, +// url: "https://www.facebook.com/OverTheRainbow.sg/", +// }, + +export const testOrg1Summary: IOrganisationSummary = { + videoUrl: "https://youtu.be/oznr-1-poSU", + websiteUrl: "https://overtherainbow.sg/", + donationUrl: "https://give.asia/campaign/you_are_not_alone", +}; + +export const testOrg1OurStory: IProfileContent[] = [ + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, +]; + +export const testOrg1PeopleSpotlight: IPeopleSpotlight[] = [ + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.Instagram, + url: "https://www.instagram.com/otrsg/?hl=en", + }, + { + socialType: SocialType.LinkedIn, + url: "https://www.linkedin.com/company/over-the-rainbow-sg/", + }, + { + socialType: SocialType.Facebook, + url: "https://www.facebook.com/OverTheRainbow.sg/", + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, +]; + +export const testOrg2: IOrganisation = { + name: "OCDNetwork", + ipcApproved: IPCStatus.Pending, + verified: VerificationStatus.Verified, + mainSpecialisation: Specialisation.OCD, + mainSupportArea: SupportArea.FundingSupport, + services: [Service.Workshops, Service.Counselling], + description: + "Non-profit society providing support services, cohesion activities and community for those struggling with OCD.", + cardImageUrl: "https://picsum.photos/278/425", +}; + +export const testOrg2Summary: IOrganisationSummary = { + videoUrl: "https://youtu.be/oznr-1-poSU", + websiteUrl: faker.internet.url(), + donationUrl: faker.internet.url(), +}; + +export const testOrg2OurStory: IProfileContent[] = [ + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, +]; + +export const testOrg2PeopleSpotlight: IPeopleSpotlight[] = [ + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.Facebook, + url: faker.internet.url(), + }, + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, +]; + +export const testOrg3: IOrganisation = { + name: "Rebound With Resilience", + ipcApproved: IPCStatus.Approved, + verified: VerificationStatus.NotVerified, + mainSpecialisation: Specialisation.OverallMentalWellbeing, + mainSupportArea: SupportArea.PartnershipOpportunities, + services: [Service.Workshops, Service.SpeakingEngagements], + description: + "Training provider and podcast commited to cultivating resilience and positive mental wellness.", + cardImageUrl: "https://picsum.photos/278/425", +}; + +export const testOrg3Summary: IOrganisationSummary = { + videoUrl: "https://youtu.be/oznr-1-poSU", + websiteUrl: faker.internet.url(), + donationUrl: faker.internet.url(), +}; + +export const testOrg3OurStory: IProfileContent[] = [ + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, +]; + +export const testOrg3PeopleSpotlight: IPeopleSpotlight[] = [ + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.Facebook, + url: faker.internet.url(), + }, + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, +]; + +export const testOrg4: IOrganisation = { + name: "Resilience Collective (RC)", + ipcApproved: IPCStatus.NotApproved, + verified: VerificationStatus.Pending, + mainSpecialisation: Specialisation.AntiStigmatism, + mainSupportArea: SupportArea.PartnershipOpportunities, + services: [Service.Workshops, Service.SpeakingEngagements], + description: + "By harnessing the voices of peers with first-hand perspectives of mental health recovery, RC aims to drive anti-stigmatism and promote help-seeking among those at risk.", + cardImageUrl: "https://picsum.photos/278/425", +}; + +export const testOrg4Summary: IOrganisationSummary = { + videoUrl: "https://youtu.be/oznr-1-poSU", + websiteUrl: faker.internet.url(), + donationUrl: faker.internet.url(), +}; + +export const testOrg4OurStory: IProfileContent[] = [ + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, + { + header: faker.lorem.words(), + section: [ + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + { + subHeader: faker.lorem.words(), + text: faker.lorem.paragraph(), + }, + ], + imageUrl: "https://picsum.photos/300/450", + }, +]; + +export const testOrg4PeopleSpotlight: IPeopleSpotlight[] = [ + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.Facebook, + url: faker.internet.url(), + }, + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, + { + name: faker.person.fullName(), + jobTitle: faker.person.jobTitle(), + description: faker.person.jobDescriptor(), + photoUrl: "https://picsum.photos/100/100", + socials: [ + { + socialType: SocialType.LinkedIn, + url: faker.internet.url(), + }, + { + socialType: SocialType.Youtube, + url: faker.internet.url(), + }, + ], + learnMore: { + question: faker.lorem.sentence(), + answer: faker.lorem.lines({ + min: 1, + max: 3, + }), + }, + }, +]; + +type testData = { + org: IOrganisation; + summary: IOrganisationSummary; + ourStory: IProfileContent[]; + peopleSpotlight: IPeopleSpotlight[]; +}; + +export const testOrgs: testData[] = [ + { + org: testOrg1, + summary: testOrg1Summary, + ourStory: testOrg1OurStory, + peopleSpotlight: testOrg1PeopleSpotlight, + }, + { + org: testOrg2, + summary: testOrg2Summary, + ourStory: testOrg2OurStory, + peopleSpotlight: testOrg2PeopleSpotlight, + }, + { + org: testOrg3, + summary: testOrg3Summary, + ourStory: testOrg3OurStory, + peopleSpotlight: testOrg3PeopleSpotlight, + }, + { + org: testOrg4, + summary: testOrg4Summary, + ourStory: testOrg4OurStory, + peopleSpotlight: testOrg4PeopleSpotlight, + }, +]; diff --git a/src/features/organisation-list/index.tsx b/src/features/organisation-list/index.tsx index a00a0b0..7268fb9 100644 --- a/src/features/organisation-list/index.tsx +++ b/src/features/organisation-list/index.tsx @@ -10,7 +10,6 @@ import { } from "@chakra-ui/react"; import React, { useEffect, useState } from "react"; import Footer from "../common/footer"; -import SimpleNavigationBar from "../common/simple-navbar"; import CardView from "./components/CardView"; import ListView from "./components/ListView"; import ViewToggle from "./components/ViewToggle"; diff --git a/src/index.tsx b/src/index.tsx index eed7ab1..ea9920c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,6 +5,7 @@ import { BrowserRouter } from "react-router-dom"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import * as serviceWorker from "./serviceWorker"; +import 'typeface-inter' const container = document.getElementById("root"); if (!container) throw new Error("Failed to find the root element"); diff --git a/src/theme.ts b/src/theme.ts index 446a7eb..35a5419 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -2,6 +2,9 @@ import { extendTheme } from "@chakra-ui/react"; import { StepsTheme as Steps } from "chakra-ui-steps"; export const appTheme = extendTheme({ + fonts: { + body: `'Inter', sans-serif`, + }, textStyles: { breadCrumbLink: { fontWeight: "600",