react-autoql 7.4.0-alpha.0 → 8.0.0-alpha.6

package/dist/autoql.esm.css

@@ -1531,17 +1531,19 @@ g.legendOrdinal .legendTitle tspan {
   font-size: inherit; }
 
 .no-columns-error-message {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 20px;
   font-size: 13px; }
   .no-columns-error-message .warning-icon {
     font-size: 22px;
     display: block;
-    margin-bottom: -13px;
-    text-align: center; }
+    margin-bottom: 10px;
+    color: var(--react-autoql-warning-color); }
   .no-columns-error-message .eye-icon {
-    vertical-align: bottom;
-    line-height: 18px; }
+    vertical-align: middle; }
 
 .query-output-footer {
   display: flex;
@@ -2228,6 +2230,10 @@ g.legendOrdinal .legendTitle tspan {
   .rule-simple-validation-container .expression-term-validation-valid {
     color: var(--react-autoql-success-color); }
 
+.data-alert-condition-statement .data-alert-condition-statement-query1,
+.data-alert-condition-statement .data-alert-condition-statement-query2 {
+  font-style: italic; }
+
 .notification-rule-outer-container {
   position: relative;
   padding-bottom: 5px; }
@@ -2303,9 +2309,6 @@ g.legendOrdinal .legendTitle tspan {
     padding: 10px 20px;
     font-weight: 500;
     color: var(--react-autoql-accent-color); }
-    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-query1,
-    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-query2 {
-      font-style: italic; }
     .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-operator {
       text-decoration: underline; }
     .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alerts-container,
@@ -2559,9 +2562,6 @@ g.legendOrdinal .legendTitle tspan {
   display: inline-flex;
   align-items: flex-end; }
 
-.data-alert-schedule-builder-step .data-alert-condition-statement {
-  font-style: italic; }
-
 .data-alert-schedule-builder-step .schedule-builder-at-connector {
   padding-bottom: 8px; }
 
@@ -2581,7 +2581,7 @@ g.legendOrdinal .legendTitle tspan {
 
 .data-alert-schedule-builder-step .frequency-type-container {
   padding: 3px 5px;
-  margin-bottom: 20px; }
+  margin-bottom: 15px; }
   .data-alert-schedule-builder-step .frequency-type-container .react-autoql-select {
     padding-left: 2px; }
 
@@ -2594,6 +2594,9 @@ g.legendOrdinal .legendTitle tspan {
     width: 100%;
     min-width: -moz-fit-content;
     min-width: fit-content; }
+  .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-info-tooltip {
+    color: var(--react-autoql-accent-color);
+    opacity: 1; }
   .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-data-alert-frequency-option.check-frequency {
     display: flex;
     width: 300px;
@@ -2641,7 +2644,7 @@ g.legendOrdinal .legendTitle tspan {
           display: block;
           margin-top: 16px;
           text-align: center;
-          font-weight: 500;
+          color: var(--react-autoql-accent-color);
           cursor: pointer; }
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz-dot {
       width: 2em;
@@ -2656,14 +2659,16 @@ g.legendOrdinal .legendTitle tspan {
       border-radius: 50%;
       justify-content: center;
       background: var(--react-autoql-background-color-secondary);
-      border: 1px solid var(--react-autoql-text-color-primary);
-      color: var(--react-autoql-text-color-primary);
+      border: 1px solid var(--react-autoql-accent-color);
+      color: var(--react-autoql-accent-color);
       transition: opacity 0.2s ease; }
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz-dot span {
         font-size: 1rem;
         font-variant-numeric: tabular-nums; }
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active {
       color: var(--react-autoql-accent-color); }
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-hoz-title, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-hoz-title {
+        font-weight: 500; }
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-hoz-dot,
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-connector, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-hoz-dot,
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-connector {
@@ -2675,7 +2680,7 @@ g.legendOrdinal .legendTitle tspan {
       background: var(--react-autoql-warning-color);
       color: var(--react-autoql-text-color-accent); }
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-dot,
-    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-title,
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-title-container .react-autoql-step-hoz-title,
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-connector {
       cursor: default !important;
       color: var(--react-autoql-text-color-placeholder);
@@ -2687,10 +2692,13 @@ g.legendOrdinal .legendTitle tspan {
     position: absolute; }
     .react-autoql-steps-hoz-container .react-autoql-step-connector-container .react-autoql-step-connector {
       display: block;
-      border-color: var(--react-autoql-text-color-primary);
+      border-color: var(--react-autoql-accent-color);
       border-top-style: solid;
       border-top-width: 1px; }
 
+.data-alert-settings-modal-content {
+  padding: 20px 100px; }
+
 .react-autoql-data-alert-setting-group {
   display: flex;
   flex-direction: row; }
@@ -2743,20 +2751,49 @@ g.legendOrdinal .legendTitle tspan {
         white-space: nowrap; }
 
 .react-autoql-data-alert-modal-body {
-  padding: 20px; }
+  padding: 0; }
+
+.react-autoql-data-alert-creation-modal {
+  height: calc(100vh - 90px); }
+  .react-autoql-data-alert-creation-modal .react-autoql-modal-footer {
+    padding: 0; }
+    .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .data-alert-modal-query-summary-container {
+      position: relative; }
+      .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .data-alert-modal-query-summary-container .data-alert-modal-query-summary-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        opacity: 0.2;
+        background: var(--react-autoql-accent-color); }
+      .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .data-alert-modal-query-summary-container .data-alert-modal-query-summary {
+        position: relative;
+        padding: 10px 20px;
+        text-align: center;
+        color: var(--react-autoql-text-color-primary); }
+    .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .react-autoql-data-alert-modal-footer {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 10px; }
 
 .react-autoql-data-alert-modal-content {
   height: 400px;
   max-height: 90vh;
-  padding: 0px 80px;
   display: flex;
   flex-direction: column; }
+  .react-autoql-data-alert-modal-content .react-autoql-steps-hoz-container {
+    padding: 40px 100px;
+    padding-bottom: 20px; }
   .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step {
     font-weight: 400;
     font-size: 15px;
-    padding-top: 15px; }
+    padding: 100px;
+    padding-top: 15px;
+    padding-bottom: 20px; }
     .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step .react-autoql-data-alert-frequency-option {
-      margin-right: 10px; }
+      margin-right: 5px; }
     .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step .data-alert-modal-condition-title {
       margin-top: 20px;
       margin-bottom: 5px; }
@@ -2809,6 +2846,13 @@ g.legendOrdinal .legendTitle tspan {
           animation: none; }
         .react-autoql-data-alert-modal-content .compose-message-section .preview-section .data-alert-preview .react-autoql-notification-extra-content {
           display: none !important; }
+  .react-autoql-data-alert-modal-content .data-alert-modal-step-content-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%; }
   .react-autoql-data-alert-modal-content .react-autoql-step-content p {
     margin-bottom: 0.5em;
     margin-top: 0.5em;
@@ -2820,11 +2864,6 @@ g.legendOrdinal .legendTitle tspan {
   .react-autoql-data-alert-modal-content .data-alert-chunked-rt {
     color: var(--react-autoql-text-color-primary); }
 
-.react-autoql-data-alert-modal-footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-between; }
-
 .modal-footer-button-container {
   display: flex;
   flex-direction: row; }
@@ -3466,7 +3505,6 @@ g.legendOrdinal .legendTitle tspan {
     .chat-single-message-container .query-more-btn:hover {
       opacity: 1; }
   .chat-single-message-container .react-autoql-response-content-container .query-output-error-message,
-  .chat-single-message-container .react-autoql-response-content-container .no-columns-error-message,
   .chat-single-message-container .react-autoql-response-content-container .feedback-message {
     margin: 0;
     text-align: left; }
@@ -3776,9 +3814,6 @@ g.legendOrdinal .legendTitle tspan {
     list-style-type: none; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__input--focused {
     outline: none; }
-  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__input::-ms-clear,
-  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-container {
-    display: none; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion {
     cursor: pointer;
     padding: 2px;