diff --git a/modules/rsocials/components/campaign-wizard.css b/modules/rsocials/components/campaign-wizard.css index 437b7e5..046e6ae 100644 --- a/modules/rsocials/components/campaign-wizard.css +++ b/modules/rsocials/components/campaign-wizard.css @@ -422,9 +422,9 @@ .cw-platform-chip { display: inline-flex; align-items: center; - gap: 0.3rem; + gap: 0.4rem; padding: 0.35rem 0.7rem; - border-radius: 20px; + border-radius: 6px; border: 1px solid var(--rs-border, #444); background: transparent; color: var(--rs-text-muted, #64748b); @@ -435,13 +435,25 @@ text-transform: capitalize; } +.cw-platform-chip input[type="checkbox"] { + accent-color: var(--rs-accent, #14b8a6); + width: 14px; + height: 14px; + margin: 0; + cursor: pointer; +} + +.cw-platform-chip span { + pointer-events: none; +} + .cw-platform-chip:hover { border-color: var(--rs-accent, #14b8a6); color: var(--rs-text-primary, #e1e1e1); } .cw-platform-chip--active { - background: rgba(20, 184, 166, 0.15); + background: rgba(20, 184, 166, 0.1); border-color: var(--rs-accent, #14b8a6); color: var(--rs-accent, #14b8a6); } diff --git a/modules/rsocials/components/folk-campaign-wizard.ts b/modules/rsocials/components/folk-campaign-wizard.ts index c94c5f6..b05c537 100644 --- a/modules/rsocials/components/folk-campaign-wizard.ts +++ b/modules/rsocials/components/folk-campaign-wizard.ts @@ -380,7 +380,10 @@ export class FolkCampaignWizard extends HTMLElement { const allPlatforms = ['x', 'linkedin', 'instagram', 'youtube', 'threads', 'bluesky', 'newsletter']; const platformChips = allPlatforms.map(p => { const active = this._selectedPlatforms.has(p); - return ``; + return ``; }).join(''); return `