// partner-shared.jsx — shared components and styles used across all partner pages // ── Shared brand panel shell (gradient + glow) ──────────────────────────────── const BRAND_GRADIENT = "linear-gradient(145deg, #072B1E 0%, #0B4A30 38%, #10A171 72%, #0D7A56 100%)"; const BrandPanelShell = ({ style, children }) => (
{children}
); // ── Login brand panel ───────────────────────────────────────────────────────── const PartnerBrandPanel = () => (
{t("PartnerBrandPanel.taglineLine1")}
{t("PartnerBrandPanel.taglineLine2")}

{t("PartnerBrandPanel.subtext")}

{/* Phone sidebar */}
{/* Info card */}
24
{t("PartnerBrandPanel.newReferrals")}
{t("PartnerBrandPanel.activeCasesLabel")}
{t("PartnerBrandPanel.activeCasesSubtext")}
7
{t("PartnerBrandPanel.avgJobValue")}
€2,300
 ); // ── Sign-up brand panel ─────────────────────────────────────────────────────── const PartnerSignUpBrandPanel = () => (
{t("PartnerSignUpBrandPanel.taglineLine1")}
{t("PartnerSignUpBrandPanel.taglineLine2")}

{t("PartnerSignUpBrandPanel.subtext")}

{[ t("PartnerSignUpBrandPanel.bullet1"), t("PartnerSignUpBrandPanel.bullet2"), t("PartnerSignUpBrandPanel.bullet3"), ].map((text, i) => (
{text}
))}
); // ── Shared card shell ───────────────────────────────────────────────────────── const PartnerPageShell = ({ children }) => (
{children}
); // ── Small shared sub-components ─────────────────────────────────────────────── const PartnerTypeCard = ({ value, selected, onSelect, title }) => ( ); const PartnerField = ({ label, children }) => (
{children}
); const PasswordInput = ({ value, onChange, show, onToggle }) => (
); const PartnerSubmitBtn = ({ loading, label, loadingLabel, testId }) => ( ); // ── Helpers ─────────────────────────────────────────────────────────────────── // Logo that links back home — shared across login / signup / activate. const PartnerLogoHome = ({ onHome }) => ( { e.preventDefault(); onHome && onHome(); }} style={{ display: "inline-block" }}> ); // Inline form error box (red tint). Routes through the --danger* tokens. const PartnerErrorBox = ({ children }) => (
{children}
); // Scroll to top once when a partner page mounts. const useScrollTopOnMount = () => React.useEffect(() => { window.scrollTo(0, 0); }, []); const HoverLink = ({ onClick, children, disabled }) => { const [hovered, setHovered] = React.useState(false); return ( ); }; const loginInputStyle = { fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink)", background: "#F7F7F5", border: "1px solid rgba(10,10,11,.1)", borderRadius: 8, padding: "11px 14px", outline: "none", width: "100%", boxSizing: "border-box", transition: "border-color .15s ease", }; const forgotStyle = { appearance: "none", background: "none", border: "none", padding: 0, fontSize: 12.5, color: "var(--accent-ink)", cursor: "default", fontFamily: "var(--sans)", fontWeight: 500, }; const linkBtnStyle = { appearance: "none", background: "none", border: "none", padding: 0, color: "var(--accent-ink)", fontSize: 12.5, fontWeight: 500, cursor: "default", fontFamily: "var(--sans)", }; const eyeButtonStyle = { position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", appearance: "none", background: "none", border: "none", padding: 4, color: "var(--mute)", cursor: "default", display: "grid", placeItems: "center", }; const SpinnerIcon = () => ( );