fix(dialog): update samples content

samples/notifications/dialog/overview/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>DialogOverview</title>
+    <title>Dialog Overview</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>

samples/notifications/dialog/overview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialog-overview",
-  "description": "This project provides example of Dialog Overview using Infragistics React components",
+  "description": "This project provides an example of Dialog overview using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",

samples/notifications/dialog/overview/src/index.css

@@ -1,2 +1,31 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.9375rem 1rem 1rem;
+}
+
+.open-button {
+    width: 11.25rem;
+}
+
+igc-dialog {
+    --ig-dialog-backdrop: transparent;
+    --ig-dialog-message-color: var(--ig-gray-700);
+}
+
+igc-dialog::part(base) {
+    width: 17.5rem;
+    margin-top: 6.9375rem;
+}
+
+igc-dialog igc-button {
+    --ig-size: var(--ig-size-medium);
+}
+
+igc-dialog igc-button::part(base) {
+    min-width: auto;
+}

samples/notifications/dialog/overview/src/index.tsx

@@ -5,28 +5,24 @@ import { IgrButton, IgrDialog } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function DialogOverview() {
-    const dialog = useRef<IgrDialog>(null);
+    const dialogRef = useRef<IgrDialog>(null);
 
-    function onDialogShow() {
-        dialog.current?.show();
-    }
-
-    function onDialogHide() {
-        dialog.current?.hide();
-    }
+    const showDialog = () => dialogRef.current?.show();
+    const hideDialog = () => dialogRef.current?.hide();
 
     return (
-        <div className="container sample">
-            <IgrButton variant="contained" onClick={onDialogShow}>
-                <span>Show Dialog</span>
+        <div className="sample">
+            <IgrButton variant="outlined" className="open-button" onClick={showDialog}>
+                <span>Open dialog</span>
             </IgrButton>
-
-            <IgrDialog title="Confirmation" ref={dialog}>
-                <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
-                <div slot="footer">
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>OK</span></IgrButton>
-                </div>
+            <IgrDialog ref={dialogRef} title="Confirmation" open>
+                <span slot="message">Your email will be permanently deleted</span>
+                <IgrButton slot="footer" variant="flat" onClick={hideDialog}>
+                    <span>Cancel</span>
+                </IgrButton>
+                <IgrButton slot="footer" variant="flat" onClick={hideDialog}>
+                    <span>OK</span>
+                </IgrButton>
             </IgrDialog>
         </div>
     );

samples/notifications/dialog/styling/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>DialogStyling</title>
+    <title>Dialog Styling</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>

samples/notifications/dialog/styling/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialog-styling",
-  "description": "This project provides example of Dialog Styling using Infragistics React components",
+  "description": "This project provides an example of Dialog styling using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",

samples/notifications/dialog/styling/src/index.css

@@ -1,13 +1,159 @@
 /* shared styles are loaded from: */
 /* https://dl.infragistics.com/x/css/samples/shared.v8.css */
 
-igc-dialog::part(content) {
-    background: #011627;
-    color: white;
+@import url("https://use.typekit.net/bng2zgw.css");
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital@0;1&display=swap");
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.sign-in-dialog {
+    --ig-dialog-background: #00142b;
+    --ig-dialog-border-radius: 1rem;
+    --ig-dialog-elevation: none;
+    --ig-dialog-title-color: #fcfcfc;
+    --ig-dialog-message-color: #d2dbe8;
+}
+
+.sign-in-dialog::part(base) {
+    position: static;
+    display: block;
+    width: 21.8125rem;
+    margin: 0;
+    border: none;
+}
+
+.sign-in-dialog::part(title) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem 1.5rem 0;
+    border: none;
+    font: 500 1.25rem / 1.5rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0;
+}
+
+.sign-in-dialog::part(content) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 1.5rem 1.5rem;
+}
+
+.sign-in-dialog::part(footer) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1.375rem;
+    padding: 0 1.5rem 1.5rem;
+    border: none;
 }
 
-igc-dialog::part(title),
-igc-dialog::part(footer) {
-    background: #011627;
-    color: #ECAA53;
-}
+.sign-in-avatar::part(base) {
+    width: 3rem;
+    min-width: 0;
+    height: 3rem;
+    padding: 0;
+    border: none;
+    border-radius: 0.75rem;
+    background: #5a1f0c;
+    box-shadow: var(--ig-elevation-6);
+}
+
+.sign-in-avatar igc-icon {
+    --ig-icon-size: 1.125rem;
+
+    color: #f95924;
+}
+
+.sign-in-title {
+    margin: 0;
+}
+
+.sign-in-message {
+    margin-bottom: 0.375rem;
+    font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0.15px;
+}
+
+.sign-in-input {
+    --ig-size: var(--ig-size-small);
+    --ig-font-family: "Nunito Sans", sans-serif;
+    --ig-input-group-idle-text-color: #fcfcfc;
+    --ig-input-group-filled-text-color: #fcfcfc;
+    --ig-input-group-filled-text-hover-color: #fcfcfc;
+    --ig-input-group-focused-text-color: #fcfcfc;
+    --ig-input-group-placeholder-color: #a9b8cc;
+    --ig-input-group-hover-placeholder-color: #d2dbe8;
+    --ig-input-group-idle-secondary-color: #a9b8cc;
+    --ig-input-group-focused-secondary-color: #a9b8cc;
+    --ig-input-group-input-prefix-color: #7d91ab;
+    --ig-input-group-input-prefix-color--filled: #7d91ab;
+    --ig-input-group-input-prefix-color--focused: #7d91ab;
+    --ig-input-group-idle-bottom-line-color: rgb(255 255 255 / 40%);
+    --ig-input-group-hover-bottom-line-color: rgb(255 255 255 / 80%);
+    --ig-input-group-focused-bottom-line-color: #f95924;
+}
+
+.sign-in-input::part(label) {
+    font-size: 0.6875rem;
+    line-height: 0.9375rem;
+    letter-spacing: 0;
+}
+
+.sign-in-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.sign-in-actions igc-button {
+    flex: 1;
+}
+
+.sign-in-actions igc-button::part(base) {
+    height: 1.875rem;
+    border-radius: 0.5rem;
+    font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0.15px;
+    text-transform: none;
+}
+
+.cancel-button {
+    --ig-outlined-button-hover-background: rgb(125 145 171 / 8%);
+    --ig-outlined-button-focus-hover-background: rgb(125 145 171 / 8%);
+    --ig-outlined-button-active-background: rgb(125 145 171 / 16%);
+    --ig-outlined-button-focus-background: rgb(125 145 171 / 16%);
+    --ig-outlined-button-focus-visible-background: rgb(125 145 171 / 16%);
+}
+
+.cancel-button::part(base) {
+    border-color: #7d91ab;
+    color: #7d91ab;
+}
+
+.submit-button::part(base) {
+    background: #f95924;
+    color: #00142b;
+    box-shadow: none;
+}
+
+.submit-button:hover::part(base) {
+    background: #e04f20;
+}
+
+.sign-up {
+    font: 400 0.625rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    text-align: center;
+    color: #a9b8cc;
+}
+
+.sign-up a {
+    color: #f95924;
+    text-decoration: none;
+}