refactor: the loading result screen

Author: invisal

src/renderer/components/Toolbar/index.tsx

@@ -9,6 +9,8 @@ interface ToolbarItemProps {
   badge?: number;
   disabled?: boolean;
   onClick?: () => void;
+  primary?: boolean;
+  destructive?: boolean;
 }
 
 export default function Toolbar({
@@ -37,10 +39,20 @@ Toolbar.Item = function ({
   onClick,
   badge,
   disabled,
+  destructive,
+  primary,
 }: ToolbarItemProps) {
+  const className = [
+    styles.button,
+    destructive ? styles.destructive : undefined,
+    primary ? styles.primary : undefined,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return (
     <li
-      className={styles.button}
+      className={className}
       onClick={disabled ? undefined : onClick}
       style={{ opacity: disabled ? 0.5 : 1 }}
     >

src/renderer/components/Toolbar/styles.module.scss

@@ -60,6 +60,10 @@
   }
 }
 
+.button.destructive {
+  color: var(--color-critical);
+}
+
 .toolbar {
   ul {
     list-style-type: none;

src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultLoading.tsx

@@ -2,8 +2,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styles from './styles.module.scss';
 import { useEffect, useState, useCallback } from 'react';
-import Button from 'renderer/components/Button';
-import Stack from 'renderer/components/Stack';
+import Toolbar from 'renderer/components/Toolbar';
 
 export default function QueryResultLoading() {
   const [initialTime] = useState(Date.now());
@@ -25,12 +24,11 @@ export default function QueryResultLoading() {
   return (
     <div className={styles.result}>
       <div className={styles.container}></div>
-      <div className={styles.footer} style={{ padding: '5px 10px' }}>
-        <Stack>
+      <Toolbar shadowTop>
+        <Toolbar.Text>
           <div
             style={{
               width: 125,
-              borderRight: '1px solid var(--color-surface-hover)',
               alignItems: 'center',
               display: 'flex',
             }}
@@ -39,11 +37,14 @@ export default function QueryResultLoading() {
             <FontAwesomeIcon icon={faSpinner} spin /> &nbsp;{' '}
             {Math.round((currentTime - initialTime) / 1000)}s
           </div>
-          <Button destructive onClick={onTerminateQueryClicked}>
-            Terminate
-          </Button>
-        </Stack>
-      </div>
+        </Toolbar.Text>
+        <Toolbar.Separator />
+        <Toolbar.Item
+          onClick={onTerminateQueryClicked}
+          text="Terminate"
+          destructive
+        />
+      </Toolbar>
     </div>
   );
 }

src/renderer/screens/DatabaseScreen/QueryResultViewer/styles.module.scss

@@ -7,20 +7,6 @@
   color: var(--color-text);
 }
 
-.footer {
-  box-shadow: var(--color-shadow) 0 1.95px 5px;
-}
-
-.footerPage {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footerAction {
-  flex-grow: 1;
-}
-
 .container {
   flex-grow:  1;
   white-space: nowrap;

src/renderer/screens/DatabaseScreen/QueryWindow.tsx

@@ -205,7 +205,7 @@ export default function QueryWindow({
   }, [tabKey, setTabData, initialSql]);
 
   return (
-    <Splitter vertical primaryIndex={1} secondaryInitialSize={200}>
+    <Splitter vertical primaryIndex={1} secondaryInitialSize={500}>
       <div className={styles.queryContainer}>
         <QueryHeader tabKey={tabKey} onSave={savedQuery} />