@redacto.io/consent-sdk-react 9.3.0 → 9.4.0-beta.0

package/src/RedactoNoticeAssisted/styles.ts

@@ -0,0 +1,730 @@
+// Style constants for RedactoNoticeAssisted.
+//
+// The layout/typography tokens are copied verbatim from RedactoNoticeConsent/
+// styles.ts so the two components are pixel-identical: 700px centered white modal,
+// #4f87ff blue accent, #d0d5dd borders, 8px radius, same shadow/typography,
+// accordion purposes, language pill. The OTP-verification and brief-confirmation
+// tokens at the bottom are the only Assisted-specific additions (they reuse the
+// same palette already present in NoticeConsent).
+export const styles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 999,
+    animation:
+      "redactoAssistedOverlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
+    pointerEvents: "all",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  modal: {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "700px",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    boxShadow: "4px 0px 4px 0px #00000040",
+    border: "none",
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "90vh",
+    zIndex: 1000,
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+    fontFamily: "inherit",
+  },
+
+  content: {
+    margin: "22px",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+    minHeight: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  topSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    gap: "10px",
+    paddingBottom: "15px",
+    borderBottom: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  topLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    flex: "1 1 0",
+    minWidth: 0,
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  logo: {
+    height: "32px",
+    width: "auto",
+    maxWidth: "140px",
+    objectFit: "contain",
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    display: "block",
+  },
+
+  title: {
+    fontSize: "18px",
+    fontWeight: 700,
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    verticalAlign: "middle",
+    color: "#101828",
+    flex: "1 1 auto",
+    minWidth: 0,
+    wordBreak: "normal",
+    overflowWrap: "anywhere",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  // Header pill, shared by the speaker (TTS) button and the language selector.
+  topRight: {
+    borderRadius: "8px",
+    padding: "3px 9px",
+    border: "1px solid #d0d5dd",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    verticalAlign: "middle",
+    color: "#344054",
+    gap: "5px",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+    cursor: "pointer",
+    backgroundColor: "#ffffff",
+  },
+
+  middleSection: {
+    margin: "0px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    flexGrow: 1,
+    overflowY: "auto",
+    minHeight: 0,
+    paddingRight: "15px",
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  privacyText: {
+    fontSize: "16px",
+    fontWeight: 400,
+    lineHeight: "150%",
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  link: {
+    color: "#4f87ff",
+    textDecoration: "none",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  subTitle: {
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  optionsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionItem: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionLeft: {
+    display: "flex",
+    gap: "12px",
+    alignItems: "center",
+    cursor: "pointer",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionTextContainer: {
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  optionTitle: {
+    fontWeight: 500,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  optionDescription: {
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#475467",
+    verticalAlign: "middle",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  dataElementsContainer: {
+    marginLeft: "27px",
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    paddingLeft: "22px",
+  },
+
+  dataElementItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    justifyContent: "space-between",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    minHeight: "24px",
+  },
+
+  dataElementText: {
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  languageSelectorContainer: {
+    position: "relative",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+  },
+
+  languageDropdown: {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    backgroundColor: "#ffffff",
+    border: "1px solid #d0d5dd",
+    borderRadius: "4px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+    zIndex: 10,
+    width: "max-content",
+    maxHeight: "200px",
+    overflowY: "auto",
+    marginTop: "4px",
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  languageItem: {
+    padding: "8px 12px",
+    cursor: "pointer",
+    fontSize: "12px",
+    color: "#344054",
+    backgroundColor: "#ffffff",
+    borderBottom: "1px solid #e5e7eb",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+  },
+
+  selectedLanguageItem: {
+    backgroundColor: "#f3f4f6",
+    fontWeight: 600,
+  },
+
+  // ── Inline verify panel ───────────────────────────────────────────────────
+  // Single-screen flow: the notice stays mounted and this section is appended
+  // below it once the user clicks Confirm. It lives on the SAME white surface as
+  // the notice and is set apart only by a top divider (mirroring the DPO footer),
+  // so the mobile/OTP step reads as a continuation of the notice — not a card.
+  verifyPanel: {
+    marginTop: "12px",
+    paddingTop: "14px",
+    borderTop: "1px solid rgba(152, 162, 179, 0.3)",
+    boxSizing: "border-box",
+  },
+
+  verifyPanelHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "10px",
+    marginBottom: "12px",
+    boxSizing: "border-box",
+  },
+
+  verifyPanelTitle: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    fontWeight: 600,
+    fontSize: "14px",
+    letterSpacing: "0.2px",
+    lineHeight: "150%",
+    color: "#344054",
+    margin: 0,
+    padding: 0,
+  },
+
+  // Quiet text-button to reopen the notice selections. Colour set inline from
+  // the brand accent.
+  editLink: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    margin: 0,
+    fontWeight: 500,
+    fontSize: "13px",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    whiteSpace: "nowrap",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+  },
+
+  // Dim + lock the purposes once verification has started.
+  lockedOptions: {
+    opacity: 0.55,
+    pointerEvents: "none",
+    transition: "opacity 0.2s ease",
+  },
+
+  // ── Verification-method label row (switch-link picker) ────────────────────
+  // A single justified row: the active method's icon + field label on the left,
+  // and a quiet accent text-link on the right to switch to the other method.
+  // The link is hidden once the OTP is sent (the status row takes over).
+  fieldLabelRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "10px",
+    width: "100%",
+    boxSizing: "border-box",
+  },
+
+  // ── OTP verification ──────────────────────────────────────────────────────
+  // Spacious, soft, rounded verification column. The accent (focus rings, filled
+  // boxes, links, primary button) is driven by the API brand colour via the
+  // --ra-accent / --ra-accent-soft CSS variables set on the modal root.
+  phoneFieldWrap: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    boxSizing: "border-box",
+  },
+
+  fieldLabel: {
+    fontWeight: 500,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#475467",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  // Field label carrying the method icon (phone / envelope) + text.
+  fieldLabelWithIcon: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    fontWeight: 500,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#475467",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  phoneField: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    border: "1px solid #d0d5dd",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    transition: "border-color 0.15s, box-shadow 0.15s",
+  },
+
+  phonePrefix: {
+    display: "flex",
+    alignItems: "center",
+    padding: "10px 14px",
+    fontSize: "15px",
+    fontWeight: 400,
+    color: "#344054",
+    backgroundColor: "#f9fafb",
+    borderRight: "1px solid #d0d5dd",
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    flexShrink: 0,
+  },
+
+  phoneInput: {
+    flex: "1 1 auto",
+    minWidth: 0,
+    border: "none",
+    outline: "none",
+    padding: "10px 14px",
+    fontSize: "15px",
+    fontWeight: 400,
+    lineHeight: "150%",
+    color: "#344054",
+    backgroundColor: "transparent",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+  },
+
+  helperText: {
+    fontWeight: 400,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#475467",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
+  },
+
+  // Inline error text under the phone field / OTP boxes.
+  fieldError: {
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    color: "#d92d20",
+    textAlign: "center",
+    margin: 0,
+    padding: 0,
+  },
+
+  // "Change Mobile Number" link — colour is set inline from the brand accent.
+  changeMobileLink: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    margin: 0,
+    fontWeight: 500,
+    fontSize: "13px",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    whiteSpace: "nowrap",
+  },
+
+  // Justified status row under the field once the code is sent:
+  // "✓ OTP sent to …" on the left, "Change number" on the right.
+  otpStatusRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "10px",
+    width: "100%",
+    flexWrap: "wrap",
+    margin: 0,
+    padding: 0,
+  },
+
+  otpSentText: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    fontWeight: 400,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#067647",
+    margin: 0,
+    padding: 0,
+  },
+
+  otpRow: {
+    display: "flex",
+    gap: "8px",
+    justifyContent: "center",
+    width: "100%",
+    margin: 0,
+    padding: 0,
+  },
+
+  otpBox: {
+    flex: "1 1 0",
+    minWidth: 0,
+    maxWidth: "44px",
+    height: "44px",
+    borderRadius: "8px",
+    border: "1px solid #d0d5dd",
+    textAlign: "center",
+    fontSize: "18px",
+    fontWeight: 500,
+    color: "#101828",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    padding: 0,
+    transition: "border-color 0.15s, box-shadow 0.15s, background-color 0.15s",
+  },
+
+  centerLabel: {
+    fontWeight: 500,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#475467",
+    textAlign: "center",
+    margin: 0,
+    padding: 0,
+  },
+
+  resendText: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px",
+    fontWeight: 400,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#475467",
+    textAlign: "center",
+    margin: 0,
+    padding: 0,
+  },
+
+  // Resend link — colour is set inline from the brand accent.
+  resendLink: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    margin: 0,
+    fontWeight: 600,
+    fontSize: "13px",
+    cursor: "pointer",
+    fontFamily: "inherit",
+  },
+
+  // ── Brief confirmation screen ─────────────────────────────────────────────
+  confirmedCenter: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center",
+    gap: "8px",
+    paddingTop: "8px",
+  },
+
+  successCircle: {
+    width: "64px",
+    height: "64px",
+    borderRadius: "50%",
+    backgroundColor: "#10B981",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    animation: "redactoAssistedPop 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
+  },
+
+  confirmedTitle: {
+    fontWeight: 700,
+    fontSize: "20px",
+    lineHeight: "140%",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+  },
+
+  confirmedSubtitle: {
+    fontWeight: 400,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#475467",
+    margin: 0,
+    padding: 0,
+  },
+
+  referenceBanner: {
+    backgroundColor: "#EFF6FF",
+    borderRadius: "8px",
+    padding: "12px 14px",
+    textAlign: "center",
+    boxSizing: "border-box",
+  },
+
+  referenceLabel: {
+    fontWeight: 600,
+    fontSize: "10px",
+    letterSpacing: "0.6px",
+    textTransform: "uppercase",
+    color: "#3b6fd4",
+    margin: 0,
+    padding: 0,
+  },
+
+  referenceValue: {
+    fontWeight: 700,
+    fontSize: "16px",
+    letterSpacing: "0.5px",
+    color: "#1E40AF",
+    margin: "4px 0 0 0",
+    padding: 0,
+    fontFamily:
+      "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  },
+
+  divider: {
+    border: "none",
+    borderTop: "1px solid #eaecf0",
+    margin: 0,
+  },
+
+  // ── Footer buttons (NoticeConsent tokens) ─────────────────────────────────
+  bottomSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "29px",
+    paddingTop: "15px",
+    borderTop: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+  },
+
+  button: {
+    width: "100%",
+    borderRadius: "8px",
+    padding: "9px 45px",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "center",
+  },
+
+  acceptButton: {
+    backgroundColor: "#4f87ff",
+    border: "none",
+    color: "#ffffff",
+  },
+
+  cancelButton: {
+    border: "1px solid #d0d5dd",
+    backgroundColor: "#ffffff",
+    color: "#000000",
+  },
+
+  loadingSpinner: {
+    width: "40px",
+    height: "40px",
+    border: "4px solid #f3f3f3",
+    borderTop: "4px solid #4f87ff",
+    borderRadius: "50%",
+    animation: "redactoAssistedSpin 1s linear infinite",
+    boxSizing: "border-box",
+  },
+
+  // Loading / error states.
+  loadingWrap: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px",
+    minHeight: "220px",
+    textAlign: "center",
+    boxSizing: "border-box",
+  },
+
+  errorTitle: {
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "150%",
+    color: "#101828",
+    margin: 0,
+    padding: 0,
+  },
+
+  errorText: {
+    fontWeight: 400,
+    fontSize: "13px",
+    lineHeight: "150%",
+    color: "#667085",
+    margin: 0,
+    padding: 0,
+    maxWidth: "360px",
+  },
+} as const;