Laying out Header Component

mwilkins74 commented 8 months ago

Put the pieces together to make the Header Component pretty much complete. Now we'll just have to clean up the NavList itself.

mwilkins74 commented 8 months ago

I can update both of these. h2 will be too big. I built these like this because h1, etc elements come with built-in margins. So we'll have to override that any way to get these to layout properly. Will deal with that down the road as the figma gets closer to finished.

mwilkins74 commented 8 months ago

Current Header appearance:

With variant=h1 applied to the MainHeading

To make the font size anywhere close to what it looks like in the mockups, as well as make it responsive to screen size, the Typography line ends up reading like this: <Typography variant="h1" sx={{ margin: 0, fontSize: '40px', '@media (min-width: 1280px)': { fontSize: '60px' } }}>

Putting all of this in theme.tsx does nothing to change the appearance of the h1:

kurtTheme.typography.h1 = {
  fontSize: '40px',                    
  fontWeight: 'bold',
  '@media (min-width: 1280px)': {
    fontSize: '60px',                  
  },
};

So I don't really see the point behind declaring it a variant="h1" and then having to include all this sx to make it do what we want?

Unless there is something I am misunderstanding?

ChuckBTaylor commented 8 months ago

Yea, something seems off. Happy to look at it with you (or without) once conflicts are resolved.

mwilkins74 commented 8 months ago

Probably time this week (like Wednesday or Thursday) if you want to take a look. Couldn't figure it out. I have another idea I want to try this week though.

kmdunn5 commented 8 months ago

For the heading components (main and sub hearders) those are the only instances of that specific styling. So don't worry about making those related to any specific variant of typography. We will make h1's and h2's something different in other PR's

netlify[bot] commented 8 months ago

Deploy Preview for kurt-sensenbrenner ready!

Name	Link
Latest commit	7a94ae6765c22af8031d976335056589595e2083
Latest deploy log	https://app.netlify.com/sites/kurt-sensenbrenner/deploys/65c532c297272a0008e7042b
Deploy Preview	https://deploy-preview-40--kurt-sensenbrenner.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mwilkins74 commented 8 months ago

Completely removed both instances of Header.tsx and directly added the NavBar.tsx into App.tsx.

MainHeading and SubHeading are both just standard Typography for now until we tackle actual styling.

ChuckBTaylor commented 8 months ago

Looks good. I think the build error from Netlify is legit though. Check where we're importing NavBar

ChuckBTaylor commented 8 months ago

For the heading components (main and sub hearders) those are the only instances of that specific styling. So don't worry about making those related to any specific variant of typography. We will make h1's and h2's something different in other PR's

Also, we can use different ThemeProviders for different parts of the application. We could certainly wrap the header and footer in their own theme and the pages in their own as well.

mwkwsd / sensensomething