Skip to content
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

Jump to bottom

Refactor footer #1561 #1572

Merged
merged 8 commits into from
Jul 10, 2024
Merged

Refactor footer #1561 #1572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f64115e
rearranged footer links and dropdowns, rearranged icons for social media
JabaDUDE Jun 5, 2024
927a520
changed social media icons back to what they were
JabaDUDE Jun 5, 2024
a0c7529
fix spacing and added line to mobile navlinks
JabaDUDE Jun 12, 2024
f90bf96
fix font weight and border width
JabaDUDE Jun 13, 2024
bedddd7
got rid of useMediaQuery import
JabaDUDE Jun 18, 2024
f035792
fixed translation keys
JabaDUDE Jun 19, 2024
49fe417
change hover effect for browse links to white
JabaDUDE Jun 20, 2024
e81bff9
added text decoration underline to hover for browse links
JabaDUDE Jun 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
150 changes: 62 additions & 88 deletions components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useAppDispatch } from "components/hooks"
import { User } from "firebase/auth"
import { useTranslation } from "next-i18next"
import styled from "styled-components"
import { ExternalNavLink, NavLink } from "../Navlink"
import { NavLink } from "../Navlink"
import { Button, Col, Image, Container, Row, Nav, Navbar } from "../bootstrap"
import CustomDropdown, {
CustomDropdownProps
Expand All @@ -27,23 +27,31 @@ const TextHeader = styled.h6`
padding: 0.5rem 1rem 0 0;
margin: 0;
`

const StyledInternalLink = styled(NavLink)`
color: rgba(255, 255, 255, 0.55);
const BrowseHeader = styled(NavLink)`
font-size: 1rem;
color: #fff;
font-family: Nunito;
letter-spacing: -0.63px;
padding-top: 4;
padding: 0.5rem 1rem 0 0;
margin: 0 0 10px 0;

@media (max-width: 768px) {
padding-bottom: 0.6rem;
border-bottom: solid 1.5px rgba(255, 255, 255, 0.75);
margin: 0;
}

&:hover {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the Desktop view, the Browse Bills text gets unreadably dark when hovered over - we should probably add a hover style to make this more visible, not less when a user is ready to interact with it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On hover, this is what the Browse Bills link looks like:
Screenshot 2024-06-18 at 8 35 55 PM

color: white;
text-decoration: none;
text-decoration: underline 1.5px;
}
`
const StyledExternalLink = styled(ExternalNavLink)`

const StyledInternalLink = styled(NavLink)`
color: rgba(255, 255, 255, 0.55);
font-family: Nunito;
letter-spacing: -0.63px;
padding-top: 4;
margin: 5px 0;

&:hover {
color: white;
Expand All @@ -62,28 +70,28 @@ function MapleContainer({ className }: { className?: string }) {
<Col style={{ display: "flex", justifyContent: "center" }}>
<Button
variant="light"
href="https://www.instagram.com/mapletestimony/?hl=en"
style={{ borderRadius: 50, padding: 8, margin: 5 }}
href="https://twitter.com/MapleTestimony"
target="_blank"
rel="noopener noreferrer"
>
<Image
src="/images/instagram.svg"
alt="Instagram Icon"
src="/images/twitter.svg"
alt="Twitter Icon"
width="24"
height="24"
></Image>
</Button>
<Button
variant="light"
href="https://www.instagram.com/mapletestimony/?hl=en"
style={{ borderRadius: 50, padding: 8, margin: 5 }}
href="https://twitter.com/MapleTestimony"
target="_blank"
rel="noopener noreferrer"
>
<Image
src="/images/twitter.svg"
alt="Twitter Icon"
src="/images/instagram.svg"
alt="Instagram Icon"
width="24"
height="24"
></Image>
Expand Down Expand Up @@ -116,47 +124,19 @@ function MapleContainer({ className }: { className?: string }) {
)
}

const ResourcesLinks = () => {
const TermsAndPolicies = () => {
const { t } = useTranslation("footer")
return (
<>
<StyledExternalLink href="https://malegislature.gov/Search/FindMyLegislator">
{t("links.resourcesLegislators")}
</StyledExternalLink>
<StyledExternalLink href="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/codeforboston/maple">
{t("links.resourcesGitHub")}
</StyledExternalLink>
<StyledExternalLink href="https://opencollective.com/mapletestimony">
{t("links.resourcesOpenCollective")}
</StyledExternalLink>
</>
)
}

const BrowseLinks = () => {
const { t } = useTranslation("common")
return (
<>
<StyledInternalLink href="/bills">
{t("navigation.browseBills")}
<StyledInternalLink href="/policies">
{t("legal.privacyPolicy")}
</StyledInternalLink>
<StyledInternalLink href="/testimony">
{t("navigation.browseTestimony")}
<StyledInternalLink href="/policies/copyright">
{t("legal.TOS")}
</StyledInternalLink>
<StyledInternalLink href="/policies/code-of-conduct">
{t("legal.codeOfConduct")}
</StyledInternalLink>
</>
)
}

const OurTeamLinks = () => {
const { t } = useTranslation("footer")
return (
<>
<StyledExternalLink href="https://www.nulawlab.org">
{t("links.teamNEU")}
</StyledExternalLink>
<StyledExternalLink href="https://www.codeforboston.org/">
{t("links.teamCFB")}
</StyledExternalLink>
</>
)
}
Expand Down Expand Up @@ -195,30 +175,48 @@ const LearnLinks = () => {
<StyledInternalLink href="/learn/writing-effective-testimony">
{t("links.learnWriting")}
</StyledInternalLink>
<StyledInternalLink href="/learn/communicating-with-legislators">
{t("links.learnLegislators")}
<StyledInternalLink href="/learn/legislative-process">
{t("links.learnProcess")}
</StyledInternalLink>
<StyledInternalLink href="/learn/additional-resources">
{t("navigation.additionalResources", { ns: "common" })}
<StyledInternalLink href="/why-use-maple/for-individuals">
{t("links.learnWhy")}
</StyledInternalLink>
</>
)
}

const AboutLinks = () => {
const { t } = useTranslation("common")
const { t } = useTranslation(["footer", "common"])
return (
<>
<StyledInternalLink href="/about/mission-and-goals">
{t("navigation.missionAndGoals")}
{t("links.ourMission")}
</StyledInternalLink>
<StyledInternalLink href="/about/our-team">
{t("team")}
{t("links.team")}
</StyledInternalLink>
<StyledInternalLink href="/about/support-maple">
{t("links.supportMaple")}
</StyledInternalLink>
<StyledInternalLink href="/about/faq-page">
{t("links.faq")}
</StyledInternalLink>
</>
)
}

const BrowseList = () => {
const { t } = useTranslation("common")
return (
<>
<BrowseHeader href="/testimony">
{t("navigation.browseTestimony")}
</BrowseHeader>
<BrowseHeader href="/bills">{t("navigation.browseBills")}</BrowseHeader>
</>
)
}

const PageFooter = (props: PageFooterProps) => {
const { t } = useTranslation(["footer", "common"])
return (
Expand All @@ -232,9 +230,8 @@ const PageFooter = (props: PageFooterProps) => {
className="d-md-none w-100 order-1 p-2 mb-2"
>
<Nav className={`d-flex w-100`}>
<CustomDropdown title={t("headers.browse")}>
<BrowseLinks />
</CustomDropdown>
<BrowseList />

<CustomDropdown title={t("headers.account")}>
<AccountLinks {...props} />
</CustomDropdown>
Expand All @@ -248,56 +245,33 @@ const PageFooter = (props: PageFooterProps) => {
</CustomDropdown>

<CustomDropdown title={t("headers.resources")}>
<ResourcesLinks />
</CustomDropdown>

<CustomDropdown title={t("team", { ns: "common" })}>
<OurTeamLinks />
<TermsAndPolicies />
</CustomDropdown>
</Nav>
</Navbar>
<div className={`d-none d-md-flex order-1 flex-grow-1`}>
<Col>
<TextHeader>{t("headers.browse")}</TextHeader>
<BrowseLinks />
<BrowseList />
<TextHeader>{t("headers.account")}</TextHeader>

<AccountLinks {...props} />
</Col>
<Col>
<TextHeader>{t("learn", { ns: "common" })}</TextHeader>
<LearnLinks />
<TextHeader>{t("about", { ns: "common" })}</TextHeader>
<AboutLinks />
<TextHeader>{t("learn", { ns: "common" })}</TextHeader>
<LearnLinks />
</Col>
<Col>
<TextHeader>{t("headers.resources")}</TextHeader>
<ResourcesLinks />
<TextHeader>{t("team", { ns: "common" })}</TextHeader>
<OurTeamLinks />
<TermsAndPolicies />
</Col>
</div>
<MapleContainer className={`col-auto order-md-2 justify-self-end `} />
<div
className={`d-flex flex-column gap-2 flex-md-row flex-wrap col-12 flex-shrink-0 order-md-3 text-center text-md-start`}
>
<Col className="text-white col-md-auto">{t("legal.disclaimer")}</Col>
<Col className="text-center">
<StyledInternalLink href="/policies">
{t("legal.TOS")}
</StyledInternalLink>
</Col>
<Col className="">
<StyledInternalLink
href="https://cdn.forms-content.sg-form.com/fc8a7d49-d903-11ed-9e53-c2519c5b83a4"
other={{
target: "_blank",
rel: "noopener noreferrer"
}}
>
{t("Click here to subscribe to our newsletter")}
</StyledInternalLink>
</Col>
</div>
</FooterContainer>
)
Expand Down
19 changes: 10 additions & 9 deletions public/locales/en/footer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@
"resources": "Resources"
},
"links": {
"learnWriting": "Writing Effective Testimony",
"learnLegislators": "Contacting Legislators",
"resourcesLegislators": "Find your Legislators",
"resourcesGitHub": "MAPLE on GitHub",
"resourcesOpenCollective": "MAPLE OpenCollective",
"teamNEU": "Northeastern University NuLawLab",
"teamCFB": "Code for Boston",
"teamHarvard": "Harvard Berkman Klein Center"
"learnWriting": "To Writing Effective Testimony",
"learnProcess": "About the Legislative Process",
"learnWhy": "Why use MAPLE",
"supportMaple": "Support MAPLE",
"ourMission": "Mission & Goals",
"team": "Team",
"faq": "FAQ"
},
"legal": {
"disclaimer": "MAPLE is an independent project, not affiliated with the Massachusetts legislature",
"TOS": "Our Privacy Policy & Terms of Service"
"privacyPolicy": "Privacy Policy",
"TOS": "Terms of Service",
"codeOfConduct": "Code of Conduct"
}
}