Task/HOM-1 update white hero banner text color #826
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { dcnb } from 'cnbuilder'; | ||
|
|
||
| export const container = 'hero su-relative su-bg-saa-black lg:su-top-0'; | ||
| export const imgWrapper = | ||
| 'su-absolute su-top-0 su-overflow-hidden su-w-full su-h-full'; | ||
| export const img = 'su-w-full su-h-full su-object-cover'; | ||
| export const gradientOverlay = ({ gradient }) => | ||
| dcnb( | ||
| 'su-absolute su-block su-w-full su-h-full su-top-0 su-bg-gradient-to-t su-from-saa-black', | ||
| gradient | ||
| ); | ||
| export const textContainer = ({ isHideScroll }) => `su-relative su-rs-pt-9 | ||
| ${isHideScroll ? 'su-rs-pb-8' : 'su-rs-pb-4'}`; | ||
| export const flexbox = 'lg:su-mt-[19rem]'; | ||
| export const textWrapper = ({ blackText }) => | ||
| dcnb('su-text-center su-text-white', blackText); | ||
|
Comment on lines
+15
to
+16
There was a problem hiding this comment. There's probably a slightly better way to handle this. Here if blackText exists, you're going to have both of these classes There was a problem hiding this comment. Thank you for this suggestion. The text needs to be white when the screen size is smaller than the xs breakpoint. That's why I was using There was a problem hiding this comment. I see what you're doing - let me take a look later today @shc314 |
||
| export const sansSuper = | ||
| 'su-block su-max-w-prose su-font-semibold su-leading-display su-text-shadow-md su-type-4 su-mx-auto su-mb-01em'; | ||
| export const serifSuper = ({ blackText }) => | ||
| dcnb( | ||
| 'su-block su-max-w-prose su-font-serif su-leading-display su-type-2 su-mx-auto su-mb-05em su-text-shadow', | ||
| { | ||
| 'xs:su-text-shadow-white': blackText === 'xs:su-text-black-true', | ||
| } | ||
| ); | ||
| export const headline = ({ blackText }) => | ||
| dcnb( | ||
| 'su-block su-font-bold su-font-serif su-leading-tight su-tracking-normal su-mb-02em su-text-shadow-lg', | ||
| { | ||
| 'xs:su-text-shadow-white-lg': blackText === 'xs:su-text-black-true', | ||
| } | ||
| ); | ||
| export const sansSub = ({ blackText }) => | ||
| dcnb( | ||
| 'su-max-w-prose su-type-1 su-leading-display su-text-shadow su-mx-auto su-mb-0 su-text-shadow', | ||
| { | ||
| 'xs:su-text-shadow-white': blackText === 'xs:su-text-black-true', | ||
| } | ||
| ); | ||
| export const marginTop = ({ sansSub }) => (sansSub ? 'su-rs-mt-4' : ''); | ||
|
There was a problem hiding this comment. @yvonnetangsu After I passed sansSub as a prop, ESLint says 'sansSub' is already declared in the upper scope on line 33. Should I change the name of the one on line 33? There was a problem hiding this comment. @shc314 So yes, the fastest way to do this would be to update the variable name on line 33, but after that you'll need to update it in the hero.js file as well (where it uses styles.sansSub), so for example, if you rename the variable to There was a problem hiding this comment. Thank you. I've changed the variable name and there is no error now. There was a problem hiding this comment. Thank you for the update @shc314! I'll get back to you next week on this - it's been a really busy week. |
||
| export const scroll = ({ blackText }) => | ||
| dcnb( | ||
| 'su-text-center su-text-white su-grow-0 su-rs-mt-5 su-font-serif su-font-regular su-text-19 md:su-text-22', | ||
| blackText | ||
| ); | ||
| export const scrollText = 'su-mb-02em'; | ||
| export const pageTitleLink = 'su-block su-mx-auto su-w-fit su-group'; | ||
| export const arrowDownIcon = | ||
| 'su-transition-colors su-text-digital-red-xlight su-w-40 su-h-40 su-p-6 su-border-2 su-border-cardinal-red su-rounded-full group-hocus:su-text-white group-hocus:su-bg-cardinal-red-dark'; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yvonnetangsu I wasn't sure if this one would still work if moved to hero.styles. Is
sansSubreferring to something different here?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shc314 You'll need to pass sansSub into the styles here like how you pass blackText into the other ones 😄 Otherwise in the styles file, it wouldn't know whether this field exists.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you. There was already a sansSub in the styles file, so I think that's why it didn't cause an error, but I don't think it's the same one as what's here.