connect lines ui fixes, tab, color, size

dolthub · Jan 23, 2025 · 39d95b0 · 39d95b0
1 parent 94119ba
commit 39d95b0
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 125 deletions.
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx b/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx
@@ -12,19 +12,25 @@ type Props = {
   conn: DatabaseConnectionFragment;
   onDeleteClicked: (n: string) => void;
   borderClassName: string;
+  shorterLine: boolean;
 };
 
 export default function Item({
   conn,
   onDeleteClicked,
   borderClassName,
+  shorterLine,
 }: Props) {
   const { onAdd, err, loading } = useAddConnection(conn);
   const type = getDatabaseType(conn.type ?? undefined, !!conn.isDolt);
   return (
     <>
       <li key={conn.name} className={css.connectionContainer}>
-        <div className={cx(css.line, css[borderClassName])} />
+        <div
+          className={cx(css.line, css[borderClassName], {
+            [css.shorterLine]: shorterLine,
+          })}
+        />
         <div className={css.connection}>
           <div className={cx(css.left, css[type.toLowerCase()])}>
             <Image

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/index.module.css b/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/index.module.css
@@ -4,9 +4,11 @@
 
 .text {
   @apply absolute top-0 left-0;
-
+  h1 {
+    @apply text-left;
+  }
   p {
-    @apply max-w-md text-base my-4;
+    @apply max-w-md text-lg my-4;
   }
   a {
     @apply text-[#FF8964];
@@ -16,6 +18,10 @@
   }
 }
 
+.connections {
+  @apply flex items-center;
+}
+
 .outerEllipse {
   background: radial-gradient(
     circle,
@@ -48,7 +54,11 @@
 }
 
 .line {
-  @apply w-16 h-36 absolute;
+  @apply w-16 h-32 absolute;
+}
+
+.shorterLine {
+  @apply h-20;
 }
 
 .roundedTop {
@@ -60,7 +70,8 @@
 }
 
 .straightLine {
-  @apply border-b-2 border-white bottom-14;
+  @apply border-b-2 border-white;
+  bottom: calc(3.75rem - 1px);
 }
 
 .connection {

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/index.tsx b/web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/index.tsx
@@ -32,44 +32,49 @@ export default function ExistingConnections(props: Props) {
     router.push(href, as).catch(console.error);
   };
 
+  const halfHeight = Math.floor(props.connections.length / 2) * 5;
+  const marginTop = halfHeight < 10 ? `${12 - halfHeight}rem` : "0";
+
   return (
     <div className={css.outer}>
       <div className={css.text}>
-        <h3>Connections</h3>
+        <h1>Connections</h1>
         <p>
           Connect the workbench to any MySQL or PostgreSQL compatible database.
           Use <DoltLink /> or <DoltgresLink /> to unlock version control
           features.
         </p>
       </div>
-      <div className={css.outerEllipse}>
-        <div className={css.innerEllipse}>
-          <img
-            src="/images/d-large-logo.png"
-            alt="Dolt Logo"
-            className={css.dLogo}
-          />
-          <div className={css.leftLine} />
+      <div className={css.connections} style={{ marginTop }}>
+        <div className={css.outerEllipse}>
+          <div className={css.innerEllipse}>
+            <img
+              src="/images/d-large-logo.png"
+              alt="Dolt Logo"
+              className={css.dLogo}
+            />
+            <div className={css.leftLine} />
+          </div>
         </div>
+        <Button className={css.newConnection} onClick={onClick}>
+          Add connection
+        </Button>
+        <div className={css.rightLine} />
+        <ul>
+          {props.connections.map((conn, i) => (
+            <Item
+              conn={conn}
+              key={conn.name}
+              onDeleteClicked={onDeleteClicked}
+              borderClassName={getBorderLineClassName(
+                props.connections.length,
+                i,
+              )}
+              shorterLine={props.connections.length === 2}
+            />
+          ))}
+        </ul>
       </div>
-
-      <Button className={css.newConnection} onClick={onClick}>
-        Add connection
-      </Button>
-      <div className={css.rightLine} />
-      <ul>
-        {props.connections.map((conn, i) => (
-          <Item
-            conn={conn}
-            key={conn.name}
-            onDeleteClicked={onDeleteClicked}
-            borderClassName={getBorderLineClassName(
-              props.connections.length,
-              i,
-            )}
-          />
-        ))}
-      </ul>
       <DeleteModal
         isOpen={deleteModalOpen}
         setIsOpen={setDeleteModalOpen}

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx
@@ -1,28 +1,20 @@
 import {
   Button,
-  ButtonsWithError,
   FormInput,
   FormSelect,
   useTabsContext,
 } from "@dolthub/react-components";
 import { DatabaseType } from "@gen/graphql-types";
-import { useRouter } from "next/router";
-import { connections } from "@lib/urls";
 import { useConfigContext } from "./context/config";
 import css from "./index.module.css";
 
 export default function About() {
   const { state, setState } = useConfigContext();
   const { activeTabIndex, setActiveTabIndex } = useTabsContext();
-  const router = useRouter();
 
   const onNext = () => {
     setActiveTabIndex(activeTabIndex + 1);
   };
-  const onCancel = () => {
-    const { href, as } = connections;
-    router.push(href, as).catch(console.error);
-  };
 
   return (
     <form onSubmit={onNext} className={css.form}>
@@ -58,11 +50,9 @@ export default function About() {
         hideSelectedOptions
         light
       />
-      <ButtonsWithError onCancel={onCancel} className={css.buttons}>
-        <Button type="submit" disabled={!state.name} className={css.button}>
-          Next
-        </Button>
-      </ButtonsWithError>
+      <Button type="submit" disabled={!state.name} className={css.button}>
+        Next
+      </Button>
     </form>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Advanced.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Advanced.tsx
@@ -1,24 +1,17 @@
 import {
   Button,
-  ButtonsWithError,
   Checkbox,
+  ErrorMsg,
+  SmallLoader,
   Tooltip,
 } from "@dolthub/react-components";
-import { connections } from "@lib/urls";
-import { useRouter } from "next/router";
 import css from "./index.module.css";
 import { useConfigContext } from "./context/config";
 import { getCanSubmit } from "./context/utils";
 
 export default function Advanced() {
   const { state, setState, error, onSubmit } = useConfigContext();
   const { canSubmit, message } = getCanSubmit(state);
-  const router = useRouter();
-
-  const onCancel = () => {
-    const { href, as } = connections;
-    router.push(href, as).catch(console.error);
-  };
 
   return (
     <form onSubmit={onSubmit} className={css.form}>
@@ -38,23 +31,20 @@ export default function Advanced() {
         description="Hides Dolt features like branches, logs, and commits for non-Dolt databases. Will otherwise be disabled."
         className={css.checkbox}
       />
-      <ButtonsWithError
-        onCancel={onCancel}
-        className={css.buttons}
-        error={error}
+
+      <Button
+        type="submit"
+        disabled={!canSubmit}
+        className={css.button}
+        data-tooltip-id="submit-message"
+        data-tooltip-content={message}
+        data-tooltip-hidden={canSubmit}
       >
-        <Button
-          type="submit"
-          disabled={!canSubmit}
-          className={css.button}
-          data-tooltip-id="submit-message"
-          data-tooltip-content={message}
-          data-tooltip-hidden={canSubmit}
-        >
-          Launch Workbench
-        </Button>
-        <Tooltip id="submit-message" />
-      </ButtonsWithError>
+        Launch Workbench
+      </Button>
+      {state.loading && <SmallLoader loaded={!state.loading} />}
+      <ErrorMsg err={error} />
+      <Tooltip id="submit-message" />
     </form>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Connection.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Connection.tsx
@@ -1,29 +1,18 @@
-import {
-  Button,
-  ButtonsWithError,
-  FormInput,
-  useTabsContext,
-} from "@dolthub/react-components";
+import { Button, FormInput, useTabsContext } from "@dolthub/react-components";
 import { DatabaseType } from "@gen/graphql-types";
 import { SyntheticEvent } from "react";
-import { useRouter } from "next/router";
-import { connections } from "@lib/urls";
 import css from "./index.module.css";
 import { useConfigContext } from "./context/config";
 
 export default function Connection() {
   const { state, setState } = useConfigContext();
   const { activeTabIndex, setActiveTabIndex } = useTabsContext();
-  const router = useRouter();
 
   const onNext = (e: SyntheticEvent) => {
     e.preventDefault();
     setActiveTabIndex(activeTabIndex + 1);
   };
-  const onCancel = () => {
-    const { href, as } = connections;
-    router.push(href, as).catch(console.error);
-  };
+
   return (
     <form onSubmit={onNext} className={css.form}>
       <FormInput
@@ -84,15 +73,13 @@ export default function Connection() {
         light
         labelClassName={css.label}
       />
-      <ButtonsWithError onCancel={onCancel} className={css.buttons}>
-        <Button
-          type="submit"
-          disabled={!state.connectionUrl || (!state.host && !state.port)}
-          className={css.button}
-        >
-          Next
-        </Button>
-      </ButtonsWithError>
+      <Button
+        type="submit"
+        disabled={!state.connectionUrl && (!state.host || !state.port)}
+        className={css.button}
+      >
+        Next
+      </Button>
     </form>
   );
 }
diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/context/config.tsx b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/context/config.tsx
@@ -23,7 +23,6 @@ export function ConfigProvider({ children }: Props) {
   const router = useRouter();
 
   const [state, setState] = useSetState(defaultState);
-  console.log(state);
   const { mutateFn, ...res } = useMutation({
     hook: useAddDatabaseConnectionMutation,
   });

diff --git a/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css b/web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css
@@ -1,11 +1,5 @@
 .container {
   @apply py-20 bg-stone-50 mb-16;
-  a {
-    @apply text-[#FF8964];
-  }
-  a:hover {
-    @apply text-coral-400;
-  }
 }
 
 .panel {
@@ -17,7 +11,7 @@
 }
 
 .tab {
-  @apply w-32  text-[#9AA5AD];
+  @apply w-32 h-10 text-[#9AA5AD];
   button {
     @apply flex items-center w-full;
   }
@@ -39,8 +33,13 @@
 }
 
 .databaseForm {
-  @apply w-full max-w-2xl mx-auto;
-
+  @apply w-full max-w-2xl mx-auto mt-8;
+  a {
+    @apply text-[#FF8964];
+  }
+  a:hover {
+    @apply text-coral-400;
+  }
   h3 {
     @apply mb-4;
   }
@@ -110,6 +109,15 @@
   @apply mb-3 text-sm w-full;
 }
 
+.form .checkbox {
+  svg {
+    @apply text-[#FF8964];
+    &:hover {
+      @apply bg-coral-400;
+    }
+  }
+}
+
 .instructions {
   @apply mb-8;
 }
@@ -120,10 +128,3 @@
     @apply bg-coral-400;
   }
 }
-
-.buttons button:last-child {
-  @apply text-[#FF8964];
-  &:hover {
-    @apply text-coral-400;
-  }
-}