Develop

package.json

@@ -87,6 +87,7 @@
     "@mdi/font": "^7.2.96",
     "@mdi/js": "^7.1.96",
     "@react-google-maps/api": "^2.20.3",
+    "@uiw/react-color": "^2.4.1",
     "aws-rum-web": "^1.19.0",
     "chart.js": "^4.4.1",
     "clean-webpack-plugin": "^4.0.0",

react/assets/forus-platform/scss/_common/blocks/block-banner-editor.scss

@@ -0,0 +1,215 @@
+.block.block-banner-editor {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: #fff;
+    position: relative;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .banner-editor-preview {
+        display: flex;
+        flex-direction: row;
+        flex: 1 1 auto;
+        position: relative;
+        border-bottom: 1px solid var(--border-color);
+        padding: 30px 30px;
+
+        .banner-editor-preview-photo {
+            display: flex;
+            flex: 0 0 100%;
+            background-size: cover;
+            background-position: center;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-right: 1px solid var(--border-color);
+            z-index: 0;
+
+            .banner-editor-photo-pattern {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-size: 10px;
+            }
+        }
+
+        .banner-editor-preview-content {
+            display: flex;
+            flex: 0 0 100%;
+            background: #fff;
+            color: #000;
+            flex-direction: column;
+            justify-content: center;
+            gap: 10px;
+            padding: 30px 30px;
+            z-index: 1;
+            border-radius: 4px;
+
+            .banner-editor-title {
+                font: 500 15px/20px var(--base-font);
+            }
+
+            .banner-editor-description {
+                font: 500 12px/18px var(--base-font) !important;
+
+                p {
+                    margin-bottom: 5px;
+                }
+            }
+
+            .banner-editor-actions {
+            }
+        }
+
+        &.banner-editor-preview-collapse {
+            padding: 0;
+        }
+    }
+
+    .banner-editor-controls {
+        display: flex;
+        flex-direction: row;
+        padding: 0 20px;
+        gap: 15px;
+
+        .banner-editor-control {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+            padding: 12px 0;
+            position: relative;
+
+            .banner-editor-control-label {
+                color: #595959;
+                font: 500 11px/30px var(--base-font);
+            }
+
+            .banner-editor-control-value {
+                color: #134478;
+                font: 700 11px/30px var(--base-font);
+                display: flex;
+                gap: 0;
+                flex-direction: row;
+                align-items: center;
+                cursor: pointer;
+                position: relative;
+
+                & > .mdi {
+                    font-size: 18px;
+                    color: #646f79;
+                }
+            }
+
+            .banner-editor-control-color {
+                padding: 0 5px;
+                border: 1px solid var(--border-color);
+                border-radius: 5px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                gap: 5px;
+                position: relative;
+                background: #fcfcfc;
+                cursor: pointer;
+
+                .banner-editor-control-color-preview {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 4px;
+                    box-shadow: 1px 1px 5px 0 rgba(25, 39, 52, 0.11);
+                }
+
+                & > .mdi {
+                    font-size: 18px;
+                    color: #646f79;
+                }
+            }
+
+            .banner-editor-dropdown {
+                position: absolute;
+                top: 100%;
+                left: 17px;
+                width: 240px;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                z-index: 1;
+
+                .banner-editor-dropdown-close {
+                    position: absolute;
+                    right: 5px;
+                    top: 5px;
+                    display: flex;
+                    height: 20px;
+                    width: 20px;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 20px;
+                }
+
+                .banner-editor-dropdown-body {
+                    padding: 12px;
+                    background-color: #fff;
+                    border: 1px solid var(--border-color);
+                    border-radius: var(--border-radius);
+                    display: flex;
+                    flex-direction: column;
+                    gap: 12px;
+                    width: 100%;
+                    position: relative;
+                    box-shadow: 0 13px 36px 0 rgba(0, 0, 0, 0.2);
+                }
+
+                .banner-editor-dropdown-separator {
+                    height: 1px;
+                    background: var(--border-color);
+                }
+
+                .banner-editor-dropdown-actions {
+                    display: flex;
+                    flex-direction: row;
+                    gap: 12px;
+
+                    & > * {
+                        flex: 1 1 50%;
+                        margin: 0 0;
+                        justify-content: center;
+                    }
+                }
+
+                .banner-editor-dropdown-triangle {
+                    width: 0;
+                    height: 0;
+                    border-style: solid;
+                    border-width: 0 16px 16px 16px;
+                    border-color: transparent transparent #ffffff transparent;
+                    transform: rotate(0deg);
+                    margin-bottom: -5px;
+                    margin-left: 10px;
+                    z-index: 1;
+                }
+            }
+        }
+
+        .banner-editor-controls-buttons {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 10px;
+
+            & > * {
+                margin: 0 0;
+            }
+        }
+    }
+}

react/assets/forus-platform/scss/_common/blocks/block-color-picker.scss

@@ -0,0 +1,11 @@
+.block.block-color-picker {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: #fff;
+    position: relative;
+
+    .color-picker-saturation {
+
+    }
+}

react/assets/forus-platform/scss/_common/blocks/block-critera-editor.scss

@@ -1,7 +1,7 @@
 &.block-criteria-editor {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 20px;
 
     .criterion-list {
         display: flex;