minor css fix (#3596)

finos · Oct 14, 2024 · 9368892 · 9368892
1 parent 51b0fd6
commit 9368892
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 25 deletions.
diff --git a/.changeset/spicy-spies-behave.md b/.changeset/spicy-spies-behave.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-query-builder': patch
+---
diff --git a/packages/legend-query-builder/src/components/data-cube/QueryBuilderDataCube.tsx b/packages/legend-query-builder/src/components/data-cube/QueryBuilderDataCube.tsx
@@ -21,12 +21,11 @@ import { QueryBuilderDataCubeApplicationEngine } from '../../stores/data-cube/Qu
 import {
   clsx,
   Dialog,
-  EmptyWindowRestoreIcon,
   Modal,
+  ModalFooter,
+  ModalFooterButton,
   TimesIcon,
-  WindowMaximizeIcon,
 } from '@finos/legend-art';
-import { useState } from 'react';
 import { createDataCubeEngineFromQueryBuilder } from '../../stores/data-cube/QueryBuilderDataCubeEngineHelper.js';
 
 const QueryBuilderDataCube = observer(
@@ -55,37 +54,25 @@ const QueryBuilderDataCube = observer(
 export const QueryBuilderDataCubeDialog = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
-    const [isMaximized, setIsMaximized] = useState(false);
-    const toggleMaximize = (): void => setIsMaximized(!isMaximized);
     const closeModal = () => queryBuilderState.setIsCubeEnabled(false);
     return (
       <Dialog
         open={true}
         onClose={closeModal}
-        classes={{ container: 'dataspace-info-modal__container' }}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
       >
         <Modal
           darkMode={false}
-          className={clsx('editor-modal query-builder__dialog', {
-            'query-builder__dialog--expanded': isMaximized,
-          })}
+          className={clsx('editor-modal query-builder-data-cube__dialog')}
         >
-          <div className="query-builder__dialog__header">
-            <div className="query-builder__dialog__header__actions">
+          <div className="query-builder-data-cube__dialog__header">
+            <div className="query-builder-data-cube__dialog__header__actions">
               <button
-                className="query-builder__dialog__header__action"
-                tabIndex={-1}
-                onClick={toggleMaximize}
-                title={isMaximized ? 'Minimize' : 'Maximize'}
-              >
-                {isMaximized ? (
-                  <EmptyWindowRestoreIcon />
-                ) : (
-                  <WindowMaximizeIcon />
-                )}
-              </button>
-              <button
-                className="query-builder__dialog__header__action"
+                className="query-builder-data-cube__dialog__header__action"
                 tabIndex={-1}
                 onClick={closeModal}
                 title="Close"
@@ -94,9 +81,12 @@ export const QueryBuilderDataCubeDialog = observer(
               </button>
             </div>
           </div>
-          <div className="query-builder__dialog__content">
+          <div className="query-builder-data-cube__dialog__content">
             <QueryBuilderDataCube queryBuilderState={queryBuilderState} />
           </div>
+          <ModalFooter>
+            <ModalFooterButton onClick={closeModal}>Close</ModalFooterButton>
+          </ModalFooter>
         </Modal>
       </Dialog>
     );

diff --git a/packages/legend-query-builder/style/_query-builder.scss b/packages/legend-query-builder/style/_query-builder.scss
@@ -747,6 +747,68 @@
   }
 }
 
+.query-builder-data-cube__dialog {
+  height: calc(100vh);
+  width: calc(100vw - 4rem);
+  border: none !important;
+
+  &__header {
+    @include flexVCenter;
+
+    height: 3rem;
+    justify-content: flex-end;
+  }
+
+  &__header__actions {
+    @include flexVCenter;
+
+    height: 100%;
+  }
+
+  &__header__action {
+    @include flexCenter;
+
+    height: 100%;
+    width: 3rem;
+
+    svg {
+      font-size: 1.6rem;
+      color: var(--color-dark-shade-300);
+    }
+
+    &:hover svg {
+      color: var(--color-dark-shade-800);
+    }
+  }
+
+  &__header__custom-action {
+    @include flexCenter;
+
+    height: 2.8rem;
+    padding: 0 1rem;
+    border-radius: 0.2rem;
+    font-size: 1.4rem;
+    margin-right: 1rem;
+    color: var(--color-dark-shade-800);
+    font-weight: 500;
+    border: 0.1rem solid var(--color-dark-shade-300);
+
+    &:not([disabled]):hover {
+      background: var(--color-dark-shade-50);
+    }
+
+    &[disabled] {
+      color: var(--color-dark-shade-230);
+      border-color: var(--color-dark-shade-100);
+      background: transparent;
+    }
+  }
+
+  &__content {
+    height: calc(100% - 8rem);
+  }
+}
+
 .query-builder__constants {
   &__modal {
     &__content {