m0nica / ambition-fund-website

Website for www.ambitionfund.org, micro-grant program to provide support for underrepresented people who need financial assistance pursuing professional development opportunities in the technology industry.

Hi, I'm Monica 👋🏾 👩🏾‍💻

I'm a software engineer who is passionate about making contributing to open-source more approachable, creating technology to elevate people, and building community. Some technologies I enjoy working with include ReactJS, Jamstack (JavaScript, APIs + Markup) and GraphQL. In 2020, I was selected to be an inaugural GitHub Star 🌟 based on my involvement in the tech community. My interest in the React ecosystem led me to launch React Robins, a community for women and non-binary ReactJS developers.

Find me around the web 🌎:

• Learning in public on Twitch or monica.dev 📹 ✍🏾
• Tinkering with interactions on Codepen 🏓
• Sharing updates on LinkedIn 💼

ambition-fund-website's Issues

Add Hover State to - Receive Updates Button

The receive updates button currently doesn't have a hover state but should be updated to appear different on hover. Also, the link in the button should no longer have an underline (regardless of hover state).

[Increase Test Coverage] Navigation

• jest/react-testing-library unit tests should be added to the nav component to confirm that the link to homepage, mission and opportunities appear as expected.
• this functionality should be tested both within the context of the index page and non-index page (i.e., testing

  ambition-fund-website/src/components/common/navigation/navigation.js

  Line 54 in 2d388b9

  getNavLink = ({ name, pathname, hash }) => {

  )

[Increase Test Coverage] Index

The index file should have jest/react-testing-library unit tests to ensure that

• the text Ambition Fund appears
• the subscribe button appears
• the text Supporting your professional ambitions. appears
• text contact us appears
  Additional context
  The mocks inside of mocks will likely need to be updated for this issue

Align Sign Up Form

The left-side of the sign up form should be aligned with the left-side of the sign up paragraph. Right now the sign up form has additional spacing on the left-hand side that is causing it to not appear aligned with the sign up paragraph.

Add opportunities page to nav + make nav links more flexible

There is a list of free and low-cost professional development opportunities at: http://localhost:8000/opportunities or /opportunities. However, this page needs to be added to the Navigation component. The current navigation component doesn't work on the opportunities page due to the anchor links (throws error in dev and fails "silently" in production).

Tasks to be completed

• Make the navigation on the /opportunities page functional
• Add link to the /opportunities page in the sitewide navigation

Add Keep In Touch Section to Opportunities Page

The "Keep In Touch" section that appears on the homepage should be added to the opportunities page as well.

If you're working on this please also add test-coverage if this issue is still open: #20

[Increase Test Coverage] Keep in Touch

• Add jest/react-testing-library tests to confirm that "Keep in Touch" header text appears and that link to sign up form is functional.

[Increase Test Coverage] Footer

• jest/react-testing-library unit tests should be added to the footer component to confirm that the link to e-mail address, twitter link, github and open collective links appear.

[Increase Test Coverage] Sign Up Form

• jest/react-testing-library unit tests should be added to the signup component to confirm that the form fields appear and the form is functional. The request/request URL for the form service should be mocked.

[Increase Test Coverage] Mission

• Verify that mission appears on the homepage
• Verify that the following copy appears in the Mission component:
  • Supporting your professional ambitions.
  • Microgrant Program
  • Amplify Opportunities

Align Icon with Site Title

In the site navigation the icon is raised to the left of the text "Ambition Fund". The icon and site title should appear to be aligned to the same axis so that one is not higher or lower than the other.

Style Links

• Update links in footer to be styled
  • The links should match the theme colors vs. default browser link colors
  • Underline can be kept or removed

Resolve "Warning: Failed prop type: Invalid prop `fluid` supplied to `Image`" when running unit tests

Describe the bug
A clear and concise description of what the bug is.

console.error is output when running yarn test

  Warning: Failed prop type: Invalid prop `fluid` supplied to `Image`.
      in Image (created by Context.Consumer)
      in StyledComponent (created by Styled(Image))
      in Styled(Image) (created by PureHeader)
      in div (created by Context.Consumer)
      in StyledComponent (created by styled.div)
      in styled.div (created by PureHeader)
      in div (created by Context.Consumer)
      in StyledComponent (created by styled.div)
      in styled.div (created by PureHeader)
      in div (created by Context.Consumer)
      in StyledComponent (created by styled.div)
      in styled.div (created by PureHeader)
      in header (created by Context.Consumer)
      in StyledComponent (created by styled.header)
      in styled.header (created by PureHeader)
      in PureHeader
      in ThemeProvider

To Reproduce
Steps to reproduce the behavior:

1. Install project and dependencies locally
2. Run yarn test or yarn test:watch
3. See passing tests with that console.error output

Expected behavior
A clear and concise description of what you expected to happen.

When running yarn test or yarn test:watch all tests should pass with no console.error's output