Porting Banner to Next [1616]

[huyxgit]

Issue This PR Addresses

Fixes #1616
Fixes #1554
Fixes #1553

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[humphd]

This is getting closer, but see differences with production:

[humphd]

Nice, getting closer. We still have a white margin at the bottom to get rid of:

Also, the font is wrong for the main title, etc. Maybe that's part of a different PR we need? Not sure.

[huyxgit]

Nice, getting closer. We still have a white margin at the bottom to get rid of:

Also, the font is wrong for the main title, etc. Maybe that's part of a different PR we need? Not sure.

@humphd Idk, something going on with the Header maybe.
Tried to import Roboto at global css (not a good idea since all changed to roboto)
now Idk why fontFamily: 'Roboto' in Banner.tsx isn't working

[humphd]

It looks like the image is too tall by about the same amount of height as the header adds, so when you scroll down, the image is below the viewport. Compare to master https://dev.telescope.cdot.systems/ where the image is exactly at the bottom of the viewport.

[humphd]

cc @tonyvugithub who might have thoughts on how to do these fonts.

[huyxgit]

It looks like the image is too tall by about the same amount of height as the header adds, so when you scroll down, the image is below the viewport. Compare to master https://dev.telescope.cdot.systems/ where the image is exactly at the bottom of the viewport.

I found css problem happened after this PR #1659

[huyxgit]

@foxviet : that PR is to ensure the background color applied to all pages. Nothing to do with the specific css problem that this PR is currently experiencing. I would look at the stylesheet to fix this.

I meant this one you mentioned:

also caused the 'black' in the fab scrolldown button,, not just the 'login' one on the header

[PedroFonsecaDEV]

@foxviet Could you please provide us a screenshot of this PR running on your end?

[huyxgit]

@foxviet Could you please provide us a screenshot of this PR running on your end?

@PedroFonsecaDEV your suggestion fixed the 'scrolldown' button to make it looks normal, but the font issue is still something else. Now it's the same as on Netlify deploy preview.

The CSS issue with 'login' button & the height of image I think it's in Header & DynamicImage components

[HyperTHD]

Almost there...
Just need to fix the height of the scroll down button and we gtg

Here's what you got right now:

How it should look like:

[huyxgit]

Almost there...
Just need to fix the height of the scroll down button and we gtg

Here's what you got right now:

How it should look like:

I saw and fixed it! Thanks for your note bro

[PedroFonsecaDEV]

Approving.
Since the Image size will be fixed on #1683