diff --git a/src/css/injected.scss b/src/css/injected.scss index 62a56537..9a92a4a3 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -3692,6 +3692,32 @@ div.day-empty { object-position: center; } +.whatsnewHeader.bsCloudAutoSyncAnnouncementHeader { + height: auto; + min-height: unset; +} +.whatsnewHeader.bsCloudAutoSyncAnnouncementHeader h1 { + line-height: 1.2; +} +.bsCloudAccent { + color: #059669; + font-weight: 700; +} +.dark .bsCloudAccent { + color: #34d399; +} +.whatsnewTextContainer .bsCloudAutoSyncSignupCallout { + margin: 1.5rem 0 0; + padding: 1.25rem 1rem 0; + border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent); + font-size: clamp(1.35rem, 3.8vw, 1.85rem); + font-weight: 800; + line-height: 1.35; + letter-spacing: -0.02em; + text-align: center; + color: var(--text-primary); +} + .popup-media-fullscreenable { cursor: pointer; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; diff --git a/src/seqta/utils/Openers/OpenBsCloudAutoSyncAnnouncement.ts b/src/seqta/utils/Openers/OpenBsCloudAutoSyncAnnouncement.ts new file mode 100644 index 00000000..440e3ca0 --- /dev/null +++ b/src/seqta/utils/Openers/OpenBsCloudAutoSyncAnnouncement.ts @@ -0,0 +1,71 @@ +import stringToHTML from "../stringToHTML"; +import { settingsState } from "../listeners/SettingsState"; +import { openPopup } from "./PopupManager"; +import { attachPopupMediaFullscreen } from "./attachPopupMediaFullscreen"; + +/** Same hosting pattern as the What's New update video (GitHub raw). */ +const BS_CLOUD_DEMO_VIDEO_URL = + "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/bsclouddemo.webm"; + +export function shouldShowBsCloudAutoSyncAnnouncement(): boolean { + return !settingsState.bsCloudAutoSyncAnnouncementShown; +} + +/** + * One-time announcement for BetterSEQTA Cloud automatic settings sync (after other startup popups). + * Video layout matches {@link OpenWhatsNewPopup} (`whatsnewImgContainer` / `whatsnewImg`). + */ +export function showBsCloudAutoSyncAnnouncement(onDismissed?: () => void) { + if (document.getElementById("whatsnewbk")) { + onDismissed?.(); + return; + } + if (!shouldShowBsCloudAutoSyncAnnouncement()) { + onDismissed?.(); + return; + } + + const header = stringToHTML( + /* html */ + `
+ BetterSEQTA Cloud can keep your BetterSEQTA+ settings backed up and in + sync across browsers. Optional automatic settings sync runs when you are signed in (passwords + and tokens are never included). +
++ Close this dialog when you are done. We will not show this announcement again. +
+Sign up in BetterSEQTA settings
+