Skip to content

Commit

Permalink
Updated styling for navbar and breadcrumbs (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
karthik-Jay authored Jul 3, 2023
1 parent 389200c commit 5171a0e
Show file tree
Hide file tree
Showing 10 changed files with 577 additions and 48 deletions.
11 changes: 11 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
1 change: 1 addition & 0 deletions src/data/model/organisationSummary.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
37 changes: 17 additions & 20 deletions src/features/common/NavigationBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -41,25 +41,23 @@ const Navigation = () => {
backgroundColor="#FFFFFF"
>
<HStack className="page-width page-padding">
<Image src={logo} width="auto" height="150%"></Image>
<Image src={logo} width="180px" height="auto"></Image>
<Spacer></Spacer>
<HStack spacing={8} alignItems={"center"}>
<HStack
paddingRight="100px"
as={"nav"}
spacing="80px"
fontSize="15px"
fontWeight="700"
color="#333333"
display={{ base: "none", md: "flex" }}
>
<Link onClick={handleScrollToFooter}>About</Link>
<Link as={ReactRouterLink} to={Paths.organisationListing}>
Organisations
</Link>
<Link onClick={handleScrollToFooter}>Contact Us</Link>
</HStack>
{/* <Flex flex={1} justify={"flex-end"}>
<HStack
as={"nav"}
spacing="80px"
fontSize="15px"
fontWeight="700"
color="#333333"
display={{ base: "none", md: "flex" }}
>
<Link onClick={handleScrollToFooter}>About</Link>
<Link as={ReactRouterLink} to={Paths.organisationListing}>
Organisations
</Link>
<Link onClick={handleScrollToFooter}>Contact Us</Link>
</HStack>
{/* <Flex flex={1} justify={"flex-end"}>
<HStack
direction={"row"}
spacing={4}
Expand Down Expand Up @@ -89,7 +87,6 @@ const Navigation = () => {
onClick={toggleMobileNav}
/>
</Flex> */}
</HStack>

{mobileNav ? (
<Box pb={4} display={{ md: "none" }}>
Expand Down
23 changes: 17 additions & 6 deletions src/features/common/orgBreadCrumb.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Flex h="8vh">
<Box alignSelf="center">
<Flex h="6vh">
<Box alignSelf="center" fontSize="14px">
<Breadcrumb spacing="1vw" separator={<ChevronRightIcon />}>
{/* Home link */}
<BreadcrumbItem>
Expand All @@ -29,17 +36,21 @@ const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => {
<BreadcrumbItem>
<BreadcrumbLink
href={isOrgProfilePage ? Paths.organisationListing : undefined}
style={isOrgProfilePage ? undefined : currentPageStyle}
>
<Text textStyle={isOrgProfilePage ? undefined : "breadCrumbLink"}>
Organisations
</Text>
Organisations
</BreadcrumbLink>
</BreadcrumbItem>

{/* organisation profile page */}
{isOrgProfilePage && (
<BreadcrumbItem>
<Text textStyle="breadCrumbLink">{org.name}</Text>
<BreadcrumbLink
as={Text}
style={isOrgProfilePage ? currentPageStyle : undefined}
>
{org.name}
</BreadcrumbLink>
</BreadcrumbItem>
)}
</Breadcrumb>
Expand Down
21 changes: 0 additions & 21 deletions src/features/common/simple-navbar.tsx

This file was deleted.

Loading

0 comments on commit 5171a0e

Please sign in to comment.