rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align theme preview with real themed banner styles

Browse Source 
Fix button layout in ThemePreview to match the actual themed-banner:
wrap buttons in spans to mimic custom element wrappers (preventing
flex: 1 from stretching them), use correct padding/background/max-width,
and set explicit line-height: normal. Also clean up dead flex properties
in themed-banner styles.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-22 11:16:59 +04:00
parent ae68196d76
commit 9510d91c61
2 changed files with 63 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
View File

@@ -179,7 +179,7 @@ function BannerPreview() {
fontFamily: "var(--probo-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)", fontFamily: "var(--probo-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)",
fontSize: "var(--probo-font-size, 14px)", fontSize: "var(--probo-font-size, 14px)",
lineHeight: 1.5, lineHeight: 1.5,
maxWidth: 520, maxWidth: 450,
width: "100%", width: "100%",
padding: 24, padding: 24,
}} }}
@@ -213,64 +213,67 @@ function BannerPreview() {
</a> </a>
</p> </p>
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}> <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
<button <span>
type="button" <button
style={{ type="button"
flex: 1, style={{
minWidth: 0, padding: "8px 10px",
padding: "10px 16px", borderRadius: "var(--probo-btn-radius, 8px)",
borderRadius: "var(--probo-btn-radius, 8px)", border: "1px solid var(--probo-accent, #1a1a1a)",
border: "1px solid var(--probo-accent, #1a1a1a)", background: "var(--probo-accent, #1a1a1a)",
background: "var(--probo-accent, #1a1a1a)", color: "var(--probo-accent-text, #ffffff)",
color: "var(--probo-accent-text, #ffffff)", fontFamily: "inherit",
fontFamily: "inherit", fontSize: "var(--probo-font-size, 14px)",
fontSize: "var(--probo-font-size, 14px)", fontWeight: 500,
fontWeight: 500, lineHeight: "normal",
cursor: "pointer", cursor: "pointer",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
> >
Accept all Accept all
</button> </button>
<button </span>
type="button" <span>
style={{ <button
flex: 1, type="button"
minWidth: 0, style={{
padding: "10px 16px", padding: "8px 10px",
borderRadius: "var(--probo-btn-radius, 8px)", borderRadius: "var(--probo-btn-radius, 8px)",
border: "1px solid var(--probo-border, #e0e0e0)", border: "1px solid var(--probo-border, #e0e0e0)",
background: "var(--probo-bg, #ffffff)", background: "color-mix(in srgb, var(--probo-text, #1a1a1a) 8%, var(--probo-bg, #ffffff))",
color: "var(--probo-text, #1a1a1a)", color: "var(--probo-text, #1a1a1a)",
fontFamily: "inherit", fontFamily: "inherit",
fontSize: "var(--probo-font-size, 14px)", fontSize: "var(--probo-font-size, 14px)",
fontWeight: 500, fontWeight: 500,
cursor: "pointer", lineHeight: "normal",
whiteSpace: "nowrap", cursor: "pointer",
}} whiteSpace: "nowrap",
> }}
Reject all >
</button> Reject all
<button </button>
type="button" </span>
style={{ <span>
flex: 1, <button
minWidth: 0, type="button"
padding: "10px 16px", style={{
borderRadius: "var(--probo-btn-radius, 8px)", padding: "8px 10px",
border: "none", borderRadius: "var(--probo-btn-radius, 8px)",
background: "transparent", border: "none",
color: "var(--probo-accent, #1a1a1a)", background: "transparent",
fontFamily: "inherit", color: "var(--probo-accent, #1a1a1a)",
fontSize: "var(--probo-font-size, 14px)", fontFamily: "inherit",
fontWeight: 500, fontSize: "var(--probo-font-size, 14px)",
cursor: "pointer", fontWeight: 500,
whiteSpace: "nowrap", lineHeight: "normal",
textDecoration: "underline", cursor: "pointer",
}} whiteSpace: "nowrap",
> textDecoration: "underline",
Customize }}
</button> >
Customize
</button>
</span>
</div> </div>
</div> </div>
); );

3
packages/cookie-banner/src/themed-banner/styles.ts
View File

@@ -129,8 +129,6 @@ export const THEMED_STYLES = `
} }
.btn { .btn {
flex: 1;
min-width: 0;
padding: 8px 10px; padding: 8px 10px;
border-radius: var(--_btn-radius); border-radius: var(--_btn-radius);
border: 1px solid var(--_border); border: 1px solid var(--_border);
@@ -139,6 +137,7 @@ export const THEMED_STYLES = `
font-family: var(--_font); font-family: var(--_font);
font-size: var(--_font-size); font-size: var(--_font-size);
font-weight: 500; font-weight: 500;
line-height: normal;
cursor: pointer; cursor: pointer;
transition: background 0.15s, border-color 0.15s; transition: background 0.15s, border-color 0.15s;
white-space: nowrap; white-space: nowrap;