New Hero Component and Navbar

[veronicaadler]

PR for issues #470 and #471. Created new hero component for landing page. Adjusted placement and color of navbar with new logo and sign in button. Added new bootstrap color variables for landing page, adjusted V2layout to remove container for full width styling.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit veronicaadler/advocacy-maps@9f2af6b):

https://digital-testimony-dev--pr472-navbar-and-hero-newu-8c23j1zt.web.app

_{(expires Mon, 30 May 2022 19:21:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: bc0858669d4997df2a9165c2144bd1e2dbba0242}

[veronicaadler]

This is still in progress but Jeff wanted to take a look at it so far. I'm guessing it should be converted to draft status in that case?

[jkoren]

@veronicaadler This is a really nice start! It looks a lot like the Sketch Landing Page Copy 4 great work.

I am not sure how important the white "puzzle pieces" are. I am not sure what to call them. (see screenshot) We can ask @jamesvas5307.

[veronicaadler]

Yes the clouds! You're right they are missing. I can check in with James tomorrow to see if I get them back in. Thank you!

[veronicaadler]

Awesome work, Veronica!

I'm thinking about how this fits into the existing bootstrap design system. The site as designed uses a red-white-blue color scheme. Bootstrap has primary, secondary, and then a couple other colors that it calls "variants". We specify the variant to control the styling of the component, i.e. <Button variant="secondary"/>.

The secondary color is typically a muted color. Based on our discussion with James, it sounds like we want primary to be red, secondary to be white, and then use the blue explicitly on backgrounds. The red buttons would then be <Button variant="primary"/> what do you think?

Thanks! Yes that is one way we can approach it. There's a few different options. I've been trying to think through how to organize the color system as well. If we went the route of using the variant attribute, we would have to still include custom classes on some of the buttons (James's proposed buttons here: https://www.sketch.com/s/c5ddc4f9-a91b-4156-abf5-a1c3bf13616f/a/8yRE2vD because as you can see, some of them have custom styling beyond what's offered in Bootstrap (btn.secondary, btn.success, and btn.disabled). We would also have to assign the remaining colors that are used in the buttons to potential variants as well, unless you just wanted to use custom classes on those instead of variants?

Alternatively, we can set all the button styles into custom classes and apply those instead of variants. We can then use the primary and secondary colors on other UI components that use them, like the Navbar. I think either way has its plusses and minuses, so whatever the majority think is more straightforward I'm happy to apply.

[nesanders]

@veronicaadler and to the whole team - this looks so excited, I am thrilled about the new design. Thank you!

Are you seeking any feedback about the value prop text in the upper right (or other copy) at present, or would that come later?

[jkoren]

@nesanders I would think we would put it in as soon as we have it.

[veronicaadler]

Awesome work, Veronica! I'm thinking about how this fits into the existing bootstrap design system. The site as designed uses a red-white-blue color scheme. Bootstrap has primary, secondary, and then a couple other colors that it calls "variants". We specify the variant to control the styling of the component, i.e. <Button variant="secondary"/>. The secondary color is typically a muted color. Based on our discussion with James, it sounds like we want primary to be red, secondary to be white, and then use the blue explicitly on backgrounds. The red buttons would then be <Button variant="primary"/> what do you think?

Thanks! Yes that is one way we can approach it. There's a few different options. I've been trying to think through how to organize the color system as well. If we went the route of using the variant attribute, we would have to still include custom classes on some of the buttons (James's proposed buttons here: https://www.sketch.com/s/c5ddc4f9-a91b-4156-abf5-a1c3bf13616f/a/8yRE2vD because as you can see, some of them have custom styling beyond what's offered in Bootstrap (btn.secondary, btn.success, and btn.disabled). We would also have to assign the remaining colors that are used in the buttons to potential variants as well, unless you just wanted to use custom classes on those instead of variants?

Alternatively, we can set all the button styles into custom classes and apply those instead of variants. We can then use the primary and secondary colors on other UI components that use them, like the Navbar. I think either way has its plusses and minuses, so whatever the majority think is more straightforward I'm happy to apply.

@alexjball I talked with Sasha last week and it seems I may have misunderstood the capabilities of the variants. If we can do all the styling with those directly, that'd be awesome!

[veronicaadler]

New changes include a leaf component for issue #484.

[veronicaadler]

@veronicaadler and to the whole team - this looks so excited, I am thrilled about the new design. Thank you!

Are you seeking any feedback about the value prop text in the upper right (or other copy) at present, or would that come later?

So awesome! Yes @nesanders as Jeff said, it'd be great to add one as soon as we had it.

[alexjball]

@veronicaadler You are correct that we'll need to add some custom styles to match James' mocks. Ultimately the variant prop is just a cleaner/type checked syntax to adding the class on the button ourselves. Bootstrap adds the expected class to the html. So <Button variant="secondary"/> results in a <button class="btn-secondary"/>. So I think we can use the variant prop to configure the button and then your global btn-* styles will be applied correctly.