feat(call-to-action): basic dialog

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());
 }

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 (
+        <Modal
+            title="New features"
+            show={true}
+        >
+            <h4>{CallToAction.title}</h4>
+            <p>{CallToAction.message}</p>
+
+            {CallToAction.buttons.map((button) =>
+                <Button text={button.text} />   
+            )}
+        </Modal>
+    )
+}
+
+export class CallToActionDialog extends ReactBasicWidget {
+
+    get component() {
+        return <CallToActionDialogComponent /> 
+    }
+
+}