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) => +