From 1a7cbc13e02685068ccde5b0be3e22b2b34c288f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 12 Aug 2025 15:57:29 +0300 Subject: [PATCH 01/11] feat(call-to-action): basic dialog --- apps/client/src/layouts/layout_commons.ts | 2 + .../src/widgets/dialogs/call_to_action.tsx | 43 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 apps/client/src/widgets/dialogs/call_to_action.tsx diff --git a/apps/client/src/layouts/layout_commons.ts b/apps/client/src/layouts/layout_commons.ts index c2802c963..5ee261317 100644 --- a/apps/client/src/layouts/layout_commons.ts +++ b/apps/client/src/layouts/layout_commons.ts @@ -30,6 +30,7 @@ import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolb import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js"; import NoteDetailWidget from "../widgets/note_detail.js"; import NoteListWidget from "../widgets/note_list.js"; +import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx"; export function applyModals(rootContainer: RootContainer) { rootContainer @@ -66,4 +67,5 @@ export function applyModals(rootContainer: RootContainer) { .child(new PromotedAttributesWidget()) .child(new NoteDetailWidget()) .child(new NoteListWidget(true))) + .child(new CallToActionDialog()); } diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx new file mode 100644 index 000000000..073362e98 --- /dev/null +++ b/apps/client/src/widgets/dialogs/call_to_action.tsx @@ -0,0 +1,43 @@ +import Button from "../react/Button"; +import Modal from "../react/Modal"; +import ReactBasicWidget from "../react/ReactBasicWidget"; + +interface CallToAction { + title: string; + message: string; + buttons: { + text: string; + }[]; +} + +function CallToActionDialogComponent() { + const CallToAction: CallToAction = { + title: "Background effects are now stable", + message: "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.", + buttons: [ + { text: "Enable background effects" } + ] + }; + + return ( + +

{CallToAction.title}

+

{CallToAction.message}

+ + {CallToAction.buttons.map((button) => +