@finos/legend-application-studio 28.16.5 → 28.16.7

package/src/components/editor/editor-group/testable/TestableSharedComponents.tsx

@@ -82,6 +82,7 @@ import {
   BasicValueSpecificationEditor,
   buildDefaultInstanceValue,
 } from '@finos/legend-query-builder';
+import { useApplicationStore } from '@finos/legend-application';
 
 export const SharedDataElementModal = observer(
   (props: {
@@ -92,6 +93,7 @@ export const SharedDataElementModal = observer(
     close: () => void;
   }) => {
     const { filterBy, isReadOnly, close, editorStore, handler } = props;
+    const applicationStore = editorStore.applicationStore;
     const dataElements =
       editorStore.graphManagerState.graph.dataElements.filter((e) =>
         filterBy ? filterBy(e) : true,
@@ -123,7 +125,12 @@ export const SharedDataElementModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="service-test-data-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="service-test-data-modal"
+        >
           <ModalBody>
             <div className="panel__content__form__section">
               <div className="panel__content__form__section__header__label">
@@ -137,7 +144,10 @@ export const SharedDataElementModal = observer(
                   onChange={onDataElementChange}
                   formatOptionLabel={getPackageableElementOptionFormatter({})}
                   value={selectedDataElement}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -313,6 +323,8 @@ const EqualToAsssertionEditor = observer(
 const EqualToJsonAssertFailViewer = observer(
   (props: { equalToJsonAssertFailState: EqualToJsonAssertFailState }) => {
     const { equalToJsonAssertFailState } = props;
+    const applicationStore =
+      equalToJsonAssertFailState.resultState.editorStore.applicationStore;
     const open = (): void => equalToJsonAssertFailState.setDiffModal(true);
     const close = (): void => equalToJsonAssertFailState.setDiffModal(false);
     const expected = equalToJsonAssertFailState.status.expected;
@@ -333,7 +345,13 @@ const EqualToJsonAssertFailViewer = observer(
               paper: 'editor-modal__content',
             }}
           >
-            <Modal darkMode={true} className="editor-modal">
+            <Modal
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              className="editor-modal"
+            >
               <ModalHeader>
                 <div className="equal-to-json-result__diff__summary">
                   <div className="equal-to-json-result__diff__header__label">
@@ -351,7 +369,11 @@ const EqualToJsonAssertFailViewer = observer(
                 <JSONDiffView from={expected} to={actual} lossless={true} />
               </ModalBody>
               <ModalFooter>
-                <ModalFooterButton text="Close" onClick={close} />
+                <ModalFooterButton
+                  text="Close"
+                  onClick={close}
+                  type="secondary"
+                />
               </ModalFooter>
             </Modal>
           </Dialog>
@@ -682,6 +704,7 @@ export const ExternalFormatParameterEditorModal = observer(
       updateParamValue,
       contentTypeParamPair,
     } = props;
+    const applicationStore = useApplicationStore();
     const paramValue =
       varExpression.genericType?.value.rawType === PrimitiveType.BYTE
         ? atob((valueSpec as PrimitiveInstanceValue).values[0] as string)
@@ -694,7 +717,9 @@ export const ExternalFormatParameterEditorModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx('editor-modal lambda-editor__popup__modal')}
         >
           <ModalHeader>
@@ -718,9 +743,11 @@ export const ExternalFormatParameterEditorModal = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <button className="btn btn--dark" onClick={onClose}>
-              Close
-            </button>
+            <ModalFooterButton
+              text="Close"
+              onClick={onClose}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -414,6 +414,9 @@ const PlayGroundSQLExecutionResultGrid = observer(
   }) => {
     const { result, useAdvancedGrid, useLocalMode } = props;
     const data = parseExecutionResultData(result);
+    const applicationStore = useApplicationStore();
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     if (!data) {
       return (
@@ -438,7 +441,12 @@ const PlayGroundSQLExecutionResultGrid = observer(
         );
 
         return (
-          <div className="sql-playground__result__grid ag-theme-balham-dark">
+          <div
+            className={clsx('sql-playground__result__grid', {
+              'ag-theme-balham': !darkMode,
+              'ag-theme-balham-dark': darkMode,
+            })}
+          >
             <DataGrid
               rowData={data.rowData}
               gridOptions={{
@@ -491,7 +499,12 @@ const PlayGroundSQLExecutionResultGrid = observer(
         [],
       );
       return (
-        <div className="sql-playground__result__grid ag-theme-balham-dark">
+        <div
+          className={clsx('sql-playground__result__grid', {
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
+          })}
+        >
           <DataGrid
             rowData={data.rowData}
             overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
@@ -516,7 +529,12 @@ const PlayGroundSQLExecutionResultGrid = observer(
     }
 
     return (
-      <div className="sql-playground__result__grid ag-theme-balham-dark">
+      <div
+        className={clsx('sql-playground__result__grid', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+      >
         <DataGrid
           rowData={data.rowData}
           overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
@@ -670,7 +688,10 @@ export const SQLPlaygroundPanel = observer(() => {
                       options={connectionOptions}
                       onChange={changeConnection}
                       value={selectedConnectionOption}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                       placeholder="Choose a connection..."
                       filterOption={connectionFilterOption}
                     />
@@ -685,7 +706,10 @@ export const SQLPlaygroundPanel = observer(() => {
                       options={connectionOptions}
                       onChange={changeConnection}
                       value={selectedConnectionOption}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                       placeholder="Choose a connection..."
                       filterOption={connectionFilterOption}
                     />

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -123,6 +123,7 @@ const buildElementTypeOption = (type: string): ElementTypeSelectOption => ({
 
 const NewDataElementDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newDataELementDriver =
     editorStore.newElementState.getNewElementDriver(NewDataElementDriver);
   const selectedOption = newDataELementDriver.embeddedDataOption
@@ -160,7 +161,9 @@ const NewDataElementDriverEditor = observer(() => {
         options={options}
         onChange={onTypeSelectionChange}
         value={selectedOption}
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
       />
     </div>
   );
@@ -168,6 +171,7 @@ const NewDataElementDriverEditor = observer(() => {
 
 const NewRuntimeDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newRuntimeDriver = editorStore.newElementState.getNewElementDriver(
     NewPackageableRuntimeDriver,
   );
@@ -195,7 +199,9 @@ const NewRuntimeDriverEditor = observer(() => {
         options={mappingOptions}
         onChange={onMappingSelectionChange}
         value={selectedMappingOption}
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
       />
     </div>
   );
@@ -205,6 +211,7 @@ const NewPureModelConnectionDriverEditor = observer(
   (props: { newConnectionValueDriver: NewPureModelConnectionDriver }) => {
     const { newConnectionValueDriver } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     // class
     const _class = newConnectionValueDriver.class;
     const classOptions = editorStore.graphManagerState.usableClasses
@@ -237,9 +244,14 @@ const NewPureModelConnectionDriverEditor = observer(
             options={classOptions}
             onChange={onClassSelectionChange}
             value={selectedClassOption}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
+              darkMode:
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             })}
           />
         </div>
@@ -266,6 +278,7 @@ const NewConnectionValueDriverEditor = observer(() => {
 
 const NewConnectionDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newConnectionDriver = editorStore.newElementState.getNewElementDriver(
     NewPackageableConnectionDriver,
   );
@@ -330,7 +343,9 @@ const NewConnectionDriverEditor = observer(() => {
           options={connectionOptions}
           onChange={onConnectionChange}
           value={currentConnectionTypeOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="panel__content__form__section__header__label">
@@ -342,7 +357,9 @@ const NewConnectionDriverEditor = observer(() => {
           options={storeOptions}
           onChange={onStoreSelectionChange}
           value={selectedStoreOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <NewConnectionValueDriverEditor />
@@ -352,6 +369,7 @@ const NewConnectionDriverEditor = observer(() => {
 
 const NewServiceDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const runtimeSelectorPlaceholder = 'Choose a compatible runtime...';
   const newServiceDriver =
     editorStore.newElementState.getNewElementDriver(NewServiceDriver);
@@ -389,7 +407,9 @@ const NewServiceDriverEditor = observer(() => {
           options={mappingOptions}
           onChange={onMappingChange}
           value={newServiceDriver.mappingOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="panel__content__form__section__header__label">
@@ -401,7 +421,9 @@ const NewServiceDriverEditor = observer(() => {
           options={newServiceDriver.runtimeOptions}
           onChange={onRuntimeChange}
           value={newServiceDriver.runtimeOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           placeholder={runtimeSelectorPlaceholder}
         />
       </div>
@@ -411,6 +433,7 @@ const NewServiceDriverEditor = observer(() => {
 
 const NewFileGenerationDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newConnectionDriver = editorStore.newElementState.getNewElementDriver(
     NewFileGenerationDriver,
   );
@@ -431,7 +454,9 @@ const NewFileGenerationDriverEditor = observer(() => {
         options={options}
         onChange={onTypeSelectionChange}
         value={newConnectionDriver.typeOption}
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
       />
     </div>
   );
@@ -552,7 +577,10 @@ export const CreateNewLocalConnectionModal = observer(() => {
               onChange={handleTypeChange}
               value={selectedTypeOption}
               isClearable={false}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           <input
@@ -662,7 +690,10 @@ export const CreateNewElementModal = observer(() => {
               onChange={handleTypeChange}
               value={selectedTypeOption}
               isClearable={false}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           <input

package/src/components/editor/side-bar/Explorer.tsx

@@ -303,6 +303,7 @@ const getMockDataEditorLanguage = (
 
 const SampleDataGenerator = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const explorerTreeState = editorStore.explorerTreeState;
   const selectedClass = explorerTreeState.classToGenerateSampleData;
   const [format, setFormat] = useState(GENERATION_DEFAULT_FORMAT);
@@ -387,10 +388,15 @@ const SampleDataGenerator = observer(() => {
             options={classOptions}
             onChange={changeClass}
             value={selectedClassOption}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             filterOption={elementFilterOption}
             formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
+              darkMode:
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             })}
           />
           <div

package/src/components/editor/side-bar/LocalChanges.tsx

@@ -35,6 +35,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import { EntityDiffViewState } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffSideBarItem } from '../editor-group/diff-editor/EntityDiffView.js';
@@ -56,6 +57,7 @@ import { GRAPH_EDITOR_MODE } from '../../../stores/editor/EditorConfig.js';
 
 const PatchLoader = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const localChangesState = editorStore.localChangesState;
   const patchState = localChangesState.patchLoaderState;
   const onClose = (): void => patchState.closeModal();
@@ -72,7 +74,12 @@ const PatchLoader = observer(() => {
     patchState.deleteChange(change);
   return (
     <Dialog onClose={onClose} open={patchState.showModal}>
-      <Modal darkMode={true} className="modal--scrollable patch-loader">
+      <Modal
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        className="modal--scrollable patch-loader"
+      >
         <ModalHeader title="Patch Loader" />
         <ModalBody>
           <PanelLoadingIndicator isLoading={patchState.isLoadingChanges} />
@@ -115,13 +122,12 @@ const PatchLoader = observer(() => {
           )}
         </ModalBody>
         <ModalFooter>
-          <button
-            className="btn btn--dark blocking-alert__action--standard"
+          <ModalFooterButton
+            className="blocking-alert__action--standard"
+            text="Apply Patch"
             onClick={upload}
             disabled={!patchState.changes?.length || !patchState.isValidPatch}
-          >
-            Apply Patch
-          </button>
+          />
         </ModalFooter>
       </Modal>
     </Dialog>

package/src/components/editor/side-bar/ProjectOverview.tsx

@@ -34,6 +34,7 @@ import {
   Modal,
   ModalBody,
   ModalFooter,
+  ModalFooterButton,
   MenuContentItem,
   MenuContent,
   PanelFormBooleanField,
@@ -111,7 +112,12 @@ const ShareProjectModal = observer(
 
     return (
       <Dialog onClose={closeModal} open={open}>
-        <Modal darkMode={true} className="modal--no-padding">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="modal--no-padding"
+        >
           <PanelLoadingIndicator isLoading={isDispatchingAction} />
           <ModalBody>
             <div className="project-overview__share-project__modal__info-entry">
@@ -134,7 +140,10 @@ const ShareProjectModal = observer(
                             }
                           : null
                       }
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                     />
                   </div>
                 ) : (
@@ -154,13 +163,12 @@ const ShareProjectModal = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn--wide btn--dark"
+            <ModalFooterButton
+              className="btn--wide"
+              text="Copy Link"
               disabled={isFetchingProject}
               onClick={copyProjectElementLink}
-            >
-              Copy Link
-            </button>
+            />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -680,7 +688,10 @@ const PatchEditor = observer(() => {
                 placeholder={'Select source version'}
                 isClearable={true}
                 escapeClearsValue={true}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
               />
             </div>
           </div>
@@ -747,7 +758,10 @@ const PatchEditor = observer(() => {
                     placeholder={'Select patch you want to release'}
                     isClearable={true}
                     escapeClearsValue={true}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
               </div>

package/src/components/editor/side-bar/RegisterService.tsx

@@ -162,6 +162,8 @@ const ServiceFailViewer = observer(
     failure: ServiceRegistrationResult | undefined;
   }) => {
     const { globalBulkServiceRegistrationState, failure } = props;
+    const applicationStore =
+      globalBulkServiceRegistrationState.editorStore.applicationStore;
     const closeLogViewer = (): void =>
       globalBulkServiceRegistrationState.setFailingView(undefined);
     return (
@@ -174,7 +176,12 @@ const ServiceFailViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <ModalHeader title={guaranteeNonNullable(failure?.service).path} />
           <ModalBody>
             {failure instanceof ServiceRegistrationFail && (
@@ -186,7 +193,11 @@ const ServiceFailViewer = observer(
             )}
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton text="Close" onClick={closeLogViewer} />
+            <ModalFooterButton
+              text="Close"
+              onClick={closeLogViewer}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -199,6 +210,7 @@ export const RegisterService = observer(
     globalBulkServiceRegistrationState: GlobalBulkServiceRegistrationState;
   }) => {
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const services = editorStore.graphManagerState.graph.ownServices;
     const toggleSelectAllServices = (): void => {
       editorStore.globalBulkServiceRegistrationState.selectAllServices
@@ -334,7 +346,10 @@ export const RegisterService = observer(
             }
           >
             <Modal
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               className={clsx(
                 'editor-modal bulk-service-registration__service__editor',
               )}

package/src/components/editor/side-bar/WorkflowManager.tsx

@@ -198,6 +198,7 @@ const WorkflowJobLogsViewer = observer(
     logState: WorkflowLogState;
   }) => {
     const { workflowState, logState } = props;
+    const applicationStore = workflowState.editorStore.applicationStore;
     const job = guaranteeNonNullable(logState.job);
     const jobIsInProgress = job.status === WorkflowJobStatus.IN_PROGRESS;
     const closeLogViewer = (): void => {
@@ -220,7 +221,12 @@ const WorkflowJobLogsViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <PanelLoadingIndicator
             isLoading={logState.fetchJobLogState.isInProgress}
           />
@@ -245,7 +251,11 @@ const WorkflowJobLogsViewer = observer(
             />
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton text="Close" onClick={closeLogViewer} />
+            <ModalFooterButton
+              text="Close"
+              onClick={closeLogViewer}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/editor/side-bar/WorkspaceSyncConflictResolver.tsx

@@ -31,6 +31,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import type {
   EntityChangeConflict,
@@ -108,7 +109,12 @@ export const WorkspaceSyncConflictResolver = observer(() => {
       classes={{ container: 'search-modal__container' }}
       PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
     >
-      <Modal darkMode={true} className="editor-modal query-builder__dialog">
+      <Modal
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        className="editor-modal query-builder__dialog"
+      >
         <ModalHeader title="Resolve Merge Conflicts" />
         <ModalBody>
           <ResizablePanelGroup orientation="vertical">
@@ -255,17 +261,18 @@ export const WorkspaceSyncConflictResolver = observer(() => {
           </ResizablePanelGroup>
         </ModalBody>
         <ModalFooter>
-          <button
-            className="btn btn--dark"
-            disabled={Boolean(conflicts.length)}
+          <ModalFooterButton
+            text="Apply Resolutions"
             title="Apply Resolutions"
+            disabled={Boolean(conflicts.length)}
             onClick={applyResolutions}
-          >
-            Apply Resolutions
-          </button>
-          <button className="btn btn--dark" title="Aborts" onClick={abort}>
-            Abort
-          </button>
+          />
+          <ModalFooterButton
+            text="Abort"
+            title="Aborts"
+            onClick={abort}
+            type="secondary"
+          />
         </ModalFooter>
       </Modal>
     </Dialog>

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -184,6 +184,7 @@ const TestFailViewer = observer(
     failure: TestError | AssertFail;
   }) => {
     const { globalTestRunnerState, failure } = props;
+    const applicationStore = globalTestRunnerState.editorStore.applicationStore;
     const id =
       failure instanceof TestError
         ? failure.atomicTest.id
@@ -201,7 +202,12 @@ const TestFailViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <PanelLoadingIndicator
             isLoading={globalTestRunnerState.isDispatchingOwnProjectAction}
           />
@@ -231,7 +237,11 @@ const TestFailViewer = observer(
               )}
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton text="Close" onClick={closeLogViewer} />
+            <ModalFooterButton
+              text="Close"
+              onClick={closeLogViewer}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>