fix(paywall): apply figma specs and coverage driven layout#809
Open
kjmitchelljr wants to merge 5 commits into
Open
fix(paywall): apply figma specs and coverage driven layout#809kjmitchelljr wants to merge 5 commits into
kjmitchelljr wants to merge 5 commits into
Conversation
kjmitchelljr
changed the base branch from
feat/issue-781-paywall-wallet-hint
to
main
kjmitchelljr
changed the base branch from
main
to
feat/issue-781-paywall-wallet-hint
kjmitchelljr
changed the base branch from
feat/issue-781-paywall-wallet-hint
to
main
Deployment results
Logs #28874265434 |
sidvishnoi
requested changes
Jul 7, 2026
Comment on lines
+256
to
+274
| this.style.setProperty( | ||
| '--wmt-icon-display', | ||
| coverage.value >= 75 ? 'grid' : 'none', | ||
| ) | ||
| this.style.setProperty( | ||
| '--wmt-price-padding', | ||
| coverage.value >= 50 ? '1.5rem 0.5rem' : '0.25rem 0.5rem', | ||
| ) | ||
| // Compact (25%) sits top-aligned with tight 12px gap; medium+ (50/75/100) | ||
| const spacious = coverage.value >= 50 | ||
| this.style.setProperty( | ||
| '--wmt-content-justify', | ||
| spacious ? 'center' : 'flex-start', | ||
| ) | ||
| this.style.setProperty( | ||
| '--wmt-content-align', | ||
| spacious ? 'center' : 'flex-start', | ||
| ) | ||
| this.style.setProperty('--wmt-content-gap', spacious ? '1.5rem' : '0.75rem') |
Comment on lines
+11
to
+25
| [ | ||
| 'Inter', | ||
| { | ||
| fileName: 'inter.css', | ||
| fallback: [ | ||
| 'ui-sans-serif', | ||
| 'system-ui', | ||
| '-apple-system', | ||
| 'BlinkMacSystemFont', | ||
| '"Segoe UI"', | ||
| 'Roboto', | ||
| 'sans-serif', | ||
| ], | ||
| }, | ||
| ], |
Member
There was a problem hiding this comment.
This is not in product requirements, at least as of yet. We're using Inter only in our editor UI, not in embeds.
Comment on lines
+256
to
+274
| this.style.setProperty( | ||
| '--wmt-icon-display', | ||
| coverage.value >= 75 ? 'grid' : 'none', | ||
| ) | ||
| this.style.setProperty( | ||
| '--wmt-price-padding', | ||
| coverage.value >= 50 ? '1.5rem 0.5rem' : '0.25rem 0.5rem', | ||
| ) | ||
| // Compact (25%) sits top-aligned with tight 12px gap; medium+ (50/75/100) | ||
| const spacious = coverage.value >= 50 | ||
| this.style.setProperty( | ||
| '--wmt-content-justify', | ||
| spacious ? 'center' : 'flex-start', | ||
| ) | ||
| this.style.setProperty( | ||
| '--wmt-content-align', | ||
| spacious ? 'center' : 'flex-start', | ||
| ) | ||
| this.style.setProperty('--wmt-content-gap', spacious ? '1.5rem' : '0.75rem') |
Member
There was a problem hiding this comment.
Mobile (50% coverage). Note the difference in two screens.
| Home | Form |
|---|---|
 |
 |
| this.style.setProperty('--wmt-height', `${coverage.value}vh`) | ||
| this.style.setProperty( | ||
| '--wmt-icon-display', | ||
| coverage.value >= 75 ? 'grid' : 'none', |
Member
There was a problem hiding this comment.
Why hide icon on 50% coverage as well?
Comment on lines
+30
to
+33
| <p class="description"> | ||
| Already paid? Enter your wallet address to access this content for | ||
| free. | ||
| </p> |
Member
There was a problem hiding this comment.
Should this be on the form screen as well?
Comment on lines
-21
to
-26
| --min-height-threshold: 6rem; | ||
| height: clamp( | ||
| 0%, | ||
| (100% - var(--min-height-threshold)) * 999, | ||
| var(--coverage) * 0.3 | ||
| ); |
Member
There was a problem hiding this comment.
This ensured the icon size scaled to screen size, font size, virtual keyboard (phone) and available space, without hardcoding different settings.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.pricepadding, and content alignment/gap now derive from thecoveragesetting via CSS custom properties#363636text,#7469a8price,#f6f8faprice bg), title 500weight + 38px line-height, wallet-address required asterisk.
1.21 → 1.4so teal renders white textCloses #808