in frontend/src/pages/accounts/profile.page.tsx [601:648]
size: getRuntimeConfig().emailSizeLimitNumber,
unit: getRuntimeConfig().emailSizeLimitUnit,
})}
</p>
</section>
{bottomBanners}
</main>
<CornerNotification
profile={profile}
runtimeData={runtimeData.data}
aliases={allAliases}
/>
<Tips profile={profile} runtimeData={runtimeData.data} />
</Layout>
</>
);
};
const StatExplainer = (props: { children: React.ReactNode }) => {
const l10n = useL10n();
const explainerState = useMenuTriggerState({});
const overlayRef = useRef<HTMLDivElement>(null);
const openButtonRef = useRef<HTMLButtonElement>(null);
const closeButtonRef = useRef<HTMLButtonElement>(null);
const { triggerProps } = useOverlayTrigger(
{ type: "dialog" },
explainerState,
openButtonRef,
);
const openButtonProps = useButton(triggerProps, openButtonRef).buttonProps;
const closeButtonProps = useButton(
{ onPress: explainerState.close },
closeButtonRef,
).buttonProps;
const positionProps = useOverlayPosition({
targetRef: openButtonRef,
overlayRef: overlayRef,
placement: "bottom",
// $spacing-sm is 8px:
offset: 8,
isOpen: explainerState.isOpen,
}).overlayProps;
return (
<div
className={`${styles["learn-more-wrapper"]} ${