Conversation
binary-koan
left a comment
binary-koan
left a comment
There was a problem hiding this comment.
@gianfrancopiana Could you review this one too?
| [ | ||
| "Powered by", | ||
| tag.span("Gumroad", class: "logo-full", aria: { label: "Gumroad" }) | ||
| tag.span("Gumroad", class: "inline-block aspect-115/22 h-[1lh] shrink-0 bg-current mask-(--logo) mask-contain mask-center mask-no-repeat") |
There was a problem hiding this comment.
As with other migrations, just inlined these into the helper. Eventually we'll replace all ERB with Inertia and remove these
| aria-label="Gumroad" | ||
| /> | ||
| <a href={Routes.discover_url({ host: discoverDomain })} className="shrink-0" aria-label="Gumroad"> | ||
| <Logo className="h-auto w-[245px]" /> |
There was a problem hiding this comment.
Overrides the default styling and computes the aspect ratio based on width rather than height (note: since the aspect ratio in Logo is different the height actually changes, but it's a flex container anyway so it doesn't affect the layout)
| <div className="override grid grid-cols-[auto_1fr_auto] items-center gap-3 p-4 text-lg leading-6 lg:hidden"> | ||
| <a href={Routes.root_url()} className="no-underline"> | ||
| <span className="logo-g" /> | ||
| <img src={logo} className="size-6" alt="Home" /> |
There was a problem hiding this comment.
This is the only place logo-g was used, and it works fine with just an img tag
| $icons: []; | ||
| @import "../stylesheets/icons"; | ||
|
|
||
| .logo-full { |
There was a problem hiding this comment.
Similar to button styles, just inlined the relevant CSS as-is here. We don't need to migrate this file in the short term, we can handle it further down the line alongside emails since it's another bundle separate to the main app
| <span | ||
| className={classNames( | ||
| // Deliberately using an aspect ratio that adds vertical padding, so that the logo aligns with text | ||
| "inline-block aspect-115/22 h-[1lh] shrink-0 bg-current mask-(--logo) mask-contain mask-center mask-no-repeat selection:bg-transparent selection:text-transparent", |
There was a problem hiding this comment.
Kept the mask-image approach since it's easier to handle dark mode than img, easier to read than inline SVG, and it's nice that when the page content is copied and pasted "Powered by Gumroad" is preserved as text
2 participants
Ref #3011
Converts the
logo-gandlogo-fullclasses to Tailwind + React. See inline comments for details.No visual changes, logos look the same: