feat: new modal behaviour

examples/web/react/components/modal/modal.css

@@ -33,6 +33,7 @@
     -moz-opacity: 1.0;
     -khtml-opacity: 1.0;
     -webkit-opacity: 1.0;
+    pointer-events: initial;
     transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     -o-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     -ms-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -49,12 +50,12 @@
     -moz-border-radius: 6px 6px 6px 6px;
     -khtml-border-radius: 6px 6px 6px 6px;
     -webkit-border-radius: 6px 6px 6px 6px;
-    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-    -o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-    -ms-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-    -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-    -khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    -o-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    -ms-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
     margin-top: 30px;
     max-width: 100%;
     padding: 24px 24px 24px 24px;

examples/web/react/components/modal/modal.tsx

@@ -9,6 +9,7 @@ type ModalProps = {
     title?: string;
     text?: string;
     visible?: boolean;
+    overlayClose?: boolean;
     style?: string[];
     onConfirm?: () => void;
     onCancel?: () => void;
@@ -18,6 +19,7 @@ export const Modal: FC<ModalProps> = ({
     title = "Alert",
     text = "Do you confirm the following operation?",
     visible = false,
+    overlayClose = true,
     style = [],
     onConfirm,
     onCancel
@@ -38,9 +40,15 @@ export const Modal: FC<ModalProps> = ({
     const getTextHtml = (separator = /\n/g) => ({
         __html: text.replace(separator, "<br/>")
     });
+    const onWindowClick = (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        if (!overlayClose) return;
+        event.stopPropagation();
+    };
     return (
-        <div className={classes()}>
-            <div className="modal-window">
+        <div className={classes()} onClick={onCancel}>
+            <div className="modal-window" onClick={onWindowClick}>
                 <div className="modal-top-buttons">
                     <Button
                         text={""}

examples/web/react/components/tiles/tiles.css

+.tiles > .canvas {
+    background-color: #1b1a17;
+    border: 2px solid #50cb93;
+    box-sizing: content-box;
+    -o-box-sizing: content-box;
+    -ms-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -khtml-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    padding: 8px 8px 8px 8px;
+}

examples/web/react/components/tiles/tiles.tsx

@@ -17,7 +17,7 @@ export const Tiles: FC<TilesProps> = ({
     interval = 500,
     style = []
 }) => {
-    const classes = () => ["title", ...style].join(" ");
+    const classes = () => ["tiles", ...style].join(" ");
     const onCanvas = (structure: CanvasStructure) => {
         setInterval(() => {
             for (let index = 0; index < 384; index++) {