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

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

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