query style

finos · Jun 22, 2023 · 2a119c2 · 2a119c2
1 parent 448d4ba
commit 2a119c2
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 27 deletions.
diff --git a/.changeset/charming-canaries-chant.md b/.changeset/charming-canaries-chant.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-extension-dsl-service': patch
+---
diff --git a/.changeset/grand-goldfinches-gamble.md b/.changeset/grand-goldfinches-gamble.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-application-query-bootstrap': patch
+---
diff --git a/.changeset/raucous-roosters-run.md b/.changeset/raucous-roosters-run.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-lego': patch
+---
diff --git a/.changeset/sordid-swans-sway.md b/.changeset/sordid-swans-sway.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-query-builder': patch
+---
diff --git a/packages/legend-application-query-bootstrap/style/index.scss b/packages/legend-application-query-bootstrap/style/index.scss
@@ -238,7 +238,7 @@
   }
 
   .query-builder__projection__options__sort__sortby--btn {
-    background: var(--color-dark-grey-500);
+    background: var(--color-legacylight-light-blue-100);
   }
 
   .lambda-editor__popup__content {
@@ -512,7 +512,12 @@
       color: var(--color-dark-grey-500);
     }
 
-    &__mode--selected {
+    &__mode:hover {
+      background: var(--color-light-grey-200);
+    }
+
+    &__mode--selected,
+    &__mode--selected:hover {
       background: var(--color-legacylight-light-blue-200);
       color: var(--color-light-grey-100);
     }
@@ -541,6 +546,18 @@
     }
   }
 
+  // ---------------------------- Service Register Modal -------------------------------
+
+  .service-register-modal__input__label {
+    background: var(--color-light-grey-50);
+    color: var(--color-legacylight-dark-grey-200);
+    border-color: var(--color-light-grey-250);
+  }
+
+  .service-register-modal__group__content {
+    border-color: var(--color-light-grey-250);
+  }
+
   // ---------------------------- Other -------------------------------
 
   .query-builder__dnd__placeholder .dnd__entry-dropzone__placeholder__content {
@@ -1268,6 +1285,7 @@
     .query-builder__result__values__table__cell--active {
       background-color: var(--color-navy-600);
     }
+
     // ------------------------------------ Other / Modal ---------------------------------------
 
     .query-builder__tooltip {

diff --git a/packages/legend-extension-dsl-service/src/components/query/ServiceRegisterModal.tsx b/packages/legend-extension-dsl-service/src/components/query/ServiceRegisterModal.tsx
@@ -37,6 +37,7 @@ import {
   Modal,
   ModalTitle,
   Panel,
+  PanelDivider,
   PanelFullContent,
   PanelLoadingIndicator,
   RocketIcon,
@@ -114,6 +115,10 @@ const ServiceRegisterModal = observer(
     const toggleActivateService = (): void =>
       setActivateService(!activateService);
 
+    const darkMode =
+      !editorStore.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+
     const registerService = editorStore.applicationStore.guardUnhandledError(
       async (): Promise<void> => {
         if (
@@ -217,7 +222,7 @@ const ServiceRegisterModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="search-modal">
+        <Modal darkMode={darkMode} className="search-modal">
           <ModalTitle title="Register Service Semi-interactively..." />
           <Panel>
             <PanelLoadingIndicator isLoading={registrationState.isInProgress} />
@@ -256,7 +261,7 @@ const ServiceRegisterModal = observer(
                       placeholder="Enter an owner..."
                       spellCheck={false}
                       inputValue={text}
-                      darkMode={true}
+                      darkMode={darkMode}
                       onInputChange={onTextChange}
                       onChange={onUserOptionChange}
                       isMulti={true}
@@ -274,7 +279,7 @@ const ServiceRegisterModal = observer(
                       options={envOptions}
                       onChange={onServerEnvChange}
                       value={selectedEnvOption}
-                      darkMode={true}
+                      darkMode={darkMode}
                     />
                   </div>
                 </div>
@@ -301,6 +306,7 @@ const ServiceRegisterModal = observer(
                   </div>
                 </div>
               </div>
+              <PanelDivider />
             </PanelFullContent>
           </Panel>
           <div className="search-modal__actions">

diff --git a/packages/legend-extension-dsl-service/style/_service-register-modal.scss b/packages/legend-extension-dsl-service/style/_service-register-modal.scss
@@ -78,7 +78,7 @@
       width: 9.4rem;
       background: var(--color-dark-grey-200);
       font-family: 'Roboto Mono', monospace;
-      font-size: 1.4rem;
+      font-size: 1.3rem;
       padding: 0 1rem;
       border-radius: 0.2rem 0 0 0.2rem;
       color: var(--color-dark-grey-500);
@@ -90,7 +90,7 @@
     }
 
     &__service-owner__selector {
-      overflow-y: scroll;
+      overflow-y: auto;
     }
 
     & + & {

diff --git a/packages/legend-lego/src/code-editor/CodeDiffView.tsx b/packages/legend-lego/src/code-editor/CodeDiffView.tsx
@@ -53,7 +53,10 @@ export const CodeDiffView = observer(
         const element = editorRef.current;
         const _editor = monacoEditorAPI.createDiffEditor(element, {
           ...getBaseCodeEditorOptions(),
-          theme: CODE_EDITOR_THEME.DEFAULT_DARK,
+          theme: applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled
+            ? CODE_EDITOR_THEME.BUILT_IN__VSCODE_LIGHT
+            : CODE_EDITOR_THEME.DEFAULT_DARK,
           readOnly: true,
         });
         setEditor(_editor);

diff --git a/packages/legend-query-builder/src/components/data-access/DataAccessOverview.tsx b/packages/legend-query-builder/src/components/data-access/DataAccessOverview.tsx
@@ -29,6 +29,7 @@ import {
   RefreshIcon,
   TimesCircleIcon,
   clsx,
+  PanelDivider,
 } from '@finos/legend-art';
 import {
   DataGrid,
@@ -234,7 +235,21 @@ const DataAccessOverviewGrid = observer(
     const { dataAccessState } = props;
 
     return (
-      <div className="data-access-overview__grid ag-theme-balham-dark">
+      <div
+        className={clsx(
+          'data-access-overview__grid',
+          {
+            'ag-theme-balham-dark':
+              !dataAccessState.applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled,
+          },
+          {
+            'ag-theme-balham':
+              dataAccessState.applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled,
+          },
+        )}
+      >
         <DataGrid
           rowData={dataAccessState.datasets}
           gridOptions={{
@@ -284,6 +299,10 @@ export const DataAccessOverview = observer(
     const { dataAccessState, compact } = props;
     const applicationStore = useApplicationStore();
 
+    const isLoading =
+      dataAccessState.surveyDatasetsState.isInProgress ||
+      dataAccessState.checkEntitlementsState.isInProgress;
+
     useEffect(() => {
       dataAccessState.intialize().catch(applicationStore.alertUnhandledError);
     }, [applicationStore, dataAccessState]);
@@ -294,12 +313,13 @@ export const DataAccessOverview = observer(
           'data-access-overview--compact': Boolean(compact),
         })}
       >
-        <PanelLoadingIndicator
-          isLoading={
-            dataAccessState.surveyDatasetsState.isInProgress ||
-            dataAccessState.checkEntitlementsState.isInProgress
-          }
-        />
+        {isLoading && (
+          <>
+            <PanelLoadingIndicator isLoading={true} />
+            <PanelDivider />
+            <PanelDivider />
+          </>
+        )}
         <DataAccessOverviewChart dataAccessState={dataAccessState} />
         <DataAccessOverviewGrid dataAccessState={dataAccessState} />
       </div>

diff --git a/packages/legend-query-builder/style/_data-access-overview.scss b/packages/legend-query-builder/style/_data-access-overview.scss
@@ -122,28 +122,40 @@
       --ag-even-row-background-color: var(--color-dark-grey-50);
       --ag-row-hover-color: var(--color-dark-blue-shade-100);
       --ag-row-border-color: var(--color-dark-grey-200);
-    }
-
-    .ag-header-cell-text {
-      font-weight: 700;
-    }
 
-    .ag-cell-value {
-      word-break: break-word;
+      .ag-center-cols-viewport {
+        // stripped background for remaining height of the grid when there are not enough rows
+        // See https://css-tricks.com/stripes-css/
+        background: repeating-linear-gradient(
+          135deg,
+          var(--color-dark-grey-50),
+          var(--color-dark-grey-50) 0.5rem,
+          var(--color-dark-grey-80) 0.5rem,
+          var(--color-dark-grey-80) 1rem
+        );
+      }
     }
 
     .ag-center-cols-viewport {
       // stripped background for remaining height of the grid when there are not enough rows
       // See https://css-tricks.com/stripes-css/
       background: repeating-linear-gradient(
         135deg,
-        var(--color-dark-grey-50),
-        var(--color-dark-grey-50) 0.5rem,
-        var(--color-dark-grey-80) 0.5rem,
-        var(--color-dark-grey-80) 1rem
+        var(--color-light-grey-50),
+        var(--color-light-grey-50) 0.5rem,
+        var(--color-light-grey-200) 0.5rem,
+        var(--color-light-grey-200) 1rem
       );
     }
 
+    .ag-header-cell-text {
+      font-weight: 700;
+    }
+
+    .ag-cell-value {
+      word-break: break-word;
+    }
+
     ::-webkit-scrollbar-track-piece {
       background: transparent;
     }

diff --git a/packages/legend-query-builder/style/_query-builder.scss b/packages/legend-query-builder/style/_query-builder.scss
@@ -316,7 +316,12 @@
     cursor: pointer;
   }
 
-  &__mode--selected {
+  &__mode:hover {
+    background: var(--color-dark-grey-200);
+  }
+
+  &__mode--selected,
+  &__mode--selected:hover {
     background: var(--color-blue-200);
   }
 }
@@ -978,4 +983,8 @@
     height: 100%;
     padding: 2rem;
   }
+
+  .panel-loading-indicator__container {
+    margin-top: -2rem;
+  }
 }