Feature:-About Page Redesign #270

[vernfongchao]

Tickets: #270

What has changed:

1. Complete redesign and structure of about page
2. Add Montserrat otf and import to App.css
3. Refractor scss
4. Add Tree Image
5. Add Affiliate and Org components
6. Add green button

What Reviewers Should Know:

This PR is only for About page, not the Contact Page do not close the issue after.
Figma Design: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=811%3A855

New Design:

New Design(mobile):

[vernfongchao]

@ri0nardo @zoobot Randy wants to use to font Montserrat as the font for these new redesigned pages however its not built into css. How did we want to go about this? importing it from google fonts or downloading the font into the project itself?

[zoobot]

@ri0nardo @zoobot Randy wants to use to font Montserrat as the font for these new redesigned pages however its not built into css. How did we want to go about this? importing it from google fonts or downloading the font into the project itself?

For other custom fonts, we downloaded them to assets, so lets just stay consistent with that. Thanks!

[vernfongchao]

@ri0nardo @mwpark2014 @zoobot let me know if there's anything I should change

[ri0nardo]

@vernfongchao can you add screenshots?

[vernfongchao]

@ri0nardo first comment

[ri0nardo]

@vernfongchao i can send you a markup if you want, but theyre all minor changes

1. on the very top there isn't a title "about us", needs to be removed.
2. The font style seems to be all regular, when the section titles are bold or semi-bold.
3. The "join our slack" green button font style needs to be bold. If the style goes has no padding, please add.
4. On mobile, where the section title text begins, there needs to be a margin from the navigation bar.

Other than that the core of the work looks great.

[vernfongchao]

• on the very top there isn't a title "about us", needs to be removed.
• The font style seems to be all regular, when the section titles are bold or semi-bold.
• The "join our slack" green button font style needs to be bold. If the style goes has no padding, please add.
• On mobile, where the section title text begins, there needs to be a margin from the navigation bar.
  @ri0nardo

1. removed about us header
   
2. Its actually bolded, without bold it looks like this (black not bold, green bolded)
   
3. changed font to bold and added padding on button
   
4. There is a margin, you just don't see it because its sized for the new hearder, and the new header isnt in yet
   

[ri0nardo]

@vernfongchao if thats the bold then thats fine. Its just that the bold on Figma is significantly fatter text. If its bold then its approved.

[mwpark2014]

One more minor comment: what are the dimensions of the photo in this PR? Probably completely fine to merge in a high res photo in this PR, but we might want to be smart in serving high-res vs low-res photos in the future (the about page is pretty low prio with highest prio being the photo gallery feature in the future).

[mwpark2014]

Probably needs a unit, don't think css defaults to a valid unit

[vernfongchao]

Yeah that was a mistake, was migrating things over from styled components.

[mwpark2014]

This feels like it can be simplified. Why is there a nesting of a position: absolute inside of a position: relative div? Is there a way to collapse the number of divs and the number of classname selectors?

[vernfongchao]

The reason why im having an absolute nesting inside of a relative is mainly for structure. The relative div is used to give structure but also control to its children divs. Its actually a well known technique used by alot of people. It allows me to manipulate the position and have it be relatives to its current flow instead of the html page

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

[mwpark2014]

Hmm, so the relative element gives structuring for the absolute element child. But there is just one child that doesn't have any positioning fields like top, left, etc, so I'm not sure why you need this extra div element. Couldn't you put these fields into the parent &__relative element? I could be wrong!

 &__absolute {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        color: #3fab4530;

        span {
          font-size: 15.5rem;
        }
      }