Merge pull request #317 from dolthub/liuliu/left-nav-ui

Web: Left nav UI improvements

web/renderer/components/DatabaseTableNav/NavLinks.tsx

@@ -23,7 +23,12 @@ export default function NavLinks({ className, params }: Props) {
       <Tabs initialActiveIndex={initialActiveIndex}>
         <TabList className={css.tabList}>
           {tabs.map((tab, i) => (
-            <Tab key={tab} name={tab.toLowerCase()} index={i} dark>
+            <Tab
+              key={tab}
+              name={tab.toLowerCase()}
+              index={i}
+              className={css.tab}
+            >
               {tab}
             </Tab>
           ))}

web/renderer/components/DatabaseTableNav/index.module.css

@@ -1,7 +1,7 @@
 .container {
   @apply hidden;
   @screen lg {
-    @apply bg-stone-50 pt-5 flex flex-col;
+    @apply bg-storm-500 pt-8 flex flex-col;
   }
 }
 
@@ -23,20 +23,20 @@
 }
 
 .top {
-  @apply pb-4 -mt-2;
+  @apply pb-4;
 }
 
 .topLine {
   @apply flex justify-between items-center w-full pb-4 px-4;
   @screen lg {
-    @apply px-3;
+    @apply pl-4 pr-3;
   }
 }
 
 .menuIcon {
   @apply hidden;
   @screen lg {
-    @apply block text-primary cursor-pointer mx-1;
+    @apply block cursor-pointer mx-1 text-white;
   }
 }
 
@@ -53,7 +53,7 @@
 }
 
 .createBranch {
-  @apply relative text-base;
+  @apply relative text-base ml-[0.8rem];
 }
 
 .createBranchDisabled a {
@@ -68,7 +68,7 @@
   @apply hidden;
 
   @screen lg {
-    @apply block font-bold text-xl cursor-pointer -ml-4;
+    @apply block font-bold text-xl cursor-pointer -ml-4 text-white border-2 rounded-full border-white;
     path {
       @apply stroke-[3.5rem];
     }
@@ -87,12 +87,28 @@
   @apply text-sm;
 
   li {
-    @apply mx-4 px-2 text-link-1;
+    @apply mx-4 px-2;
   }
 }
 
+.tab {
+  @apply text-storm-50;
+  button {
+    @apply font-normal;
+  }
+}
+
+.active {
+  @apply text-orange-400;
+}
+
 .tabPanel {
   @apply px-0 absolute left-0 right-0 bottom-0 top-9 overflow-auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
 }
 
 .tableNavTrigger {
@@ -111,3 +127,11 @@
     @apply font-semibold;
   }
 }
+
+.schemaSelector {
+  @apply m-0 max-w-none;
+}
+
+.selector {
+  @apply w-[230px] max-w-none;
+}

web/renderer/components/DatabaseTableNav/index.tsx

@@ -71,16 +71,22 @@ function Nav({
             data-cy="left-nav-toggle-icon"
           />
         </div>
-        {isPostgres && params.refName && (
-          <div
-            className={cx(css.openBranchSelector, { [css.closedItem]: !open })}
-          >
-            <SchemasSelector
-              params={{ ...params, refName: params.refName }}
-              routeRefChangeTo={routeRefChangeTo}
-            />
-          </div>
-        )}
+        <div className={css.topLine}>
+          {isPostgres && params.refName && (
+            <div
+              className={cx(css.openBranchSelector, {
+                [css.closedItem]: !open,
+              })}
+            >
+              <SchemasSelector
+                params={{ ...params, refName: "" }}
+                routeRefChangeTo={routeRefChangeTo}
+                className={css.schemaSelector}
+                selectorClassName={css.selector}
+              />
+            </div>
+          )}
+        </div>
       </div>
       <NavLinks
         className={cx(css.openNav, { [css.closedItem]: !open })}

web/renderer/components/DefinitionList/index.module.css

@@ -2,16 +2,16 @@
   @apply mb-10;
 
   h4 {
-    @apply mx-3 mb-1.5 mt-3 text-base;
+    @apply mx-3 mb-1.5 mt-3 text-base text-storm-50;
   }
 }
 
 .text {
-  @apply mb-5 mt-2 mx-5;
+  @apply mb-5 mt-2 mx-5 text-white;
 }
 
 .icon {
-  @apply text-xl mr-2 text-primary rounded-full opacity-25;
+  @apply text-xl mr-2 text-white rounded-full opacity-20;
 }
 
 .item {
@@ -22,11 +22,10 @@
   }
 }
 
-.item:hover .icon {
-  @apply opacity-100;
-
-  &:hover {
-    @apply text-sky-900;
+.item:hover {
+  .icon,
+  .name {
+    @apply text-sky-900 opacity-100;
   }
 }
 
@@ -40,15 +39,15 @@
 
 .selected,
 .item:hover {
-  @apply bg-white text-link-2;
+  @apply bg-storm-200 text-link-2;
 }
 
 .name {
-  @apply text-link-1 text-sm font-semibold;
+  @apply text-white text-sm font-semibold;
 }
 
 .viewing {
-  @apply py-0.5 mr-4 text-coral-400 font-semibold text-sm;
+  @apply py-0.5 mr-3 text-coral-400 bg-white rounded-full px-2 font-semibold text-sm;
 }
 
 .smallLoader {

web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx

@@ -92,7 +92,7 @@ export default function BranchAndTagSelector(props: Props) {
       className={cx(css.branchAndTagSelect, {
         [css.selectForPostgres]: !!props.isPostgres,
       })}
-      label={props.isPostgres ? "Branch" : undefined}
+      label="Branch:"
       horizontal
       selectedOptionFirst
       light

web/renderer/components/FormSelectForRefs/index.module.css

@@ -3,7 +3,7 @@
 }
 
 .branchAndTagSelect {
-  @apply min-w-[270px] max-w-[270px] w-full;
+  @apply w-[230px];
 }
 
 .selectForPostgres {
@@ -31,7 +31,7 @@
 }
 
 .branchLabel {
-  @apply mt-1.5;
+  @apply mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
 }
 
 .doltDisabled {

web/renderer/components/SchemaDiagramButton/index.module.css

@@ -1,5 +1,8 @@
 .diagram {
-  @apply flex text-white ml-3 mt-2 text-base;
+  @apply flex text-white text-base bg-[#FF8964] px-6 items-center;
+  &:hover {
+    @apply bg-coral-400;
+  }
 
   svg {
     @apply mt-1 mr-2 text-sm;

web/renderer/components/SchemasSelector/CreateSchema.tsx

@@ -53,7 +53,7 @@ export default function CreateSchema(props: Props) {
         data-tooltip-content="Create new schema"
         data-tooltip-place="top"
       >
-        <IoAddOutline />
+        <IoAddOutline className={css.createSchIcon} />
       </Button.Link>
       <Tooltip id="create-schema" />
       <ModalOuter

web/renderer/components/SchemasSelector/index.module.css

@@ -7,9 +7,17 @@
 }
 
 .createSch {
-  @apply text-xl ml-2.5 mt-1 font-semibold;
+  @apply text-xl ml-2.5 mt-1 font-semibold text-white;
 
   path {
     @apply stroke-[3.5rem];
   }
 }
+
+.createSchIcon {
+  @apply border-2 rounded-full border-white;
+}
+
+.schemaLabel {
+  @apply mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
+}

web/renderer/components/SchemasSelector/index.tsx

@@ -7,12 +7,15 @@ import {
 import { RefOptionalSchemaParams } from "@lib/params";
 import { RefUrl, ref } from "@lib/urls";
 import { useRouter } from "next/router";
+import cx from "classnames";
 import CreateSchema from "./CreateSchema";
 import css from "./index.module.css";
 
 type Props = {
   params: RefOptionalSchemaParams & { tableName?: string };
   routeRefChangeTo: RefUrl;
+  className?: string;
+  selectorClassName?: string;
 };
 
 type SelectorProps = {
@@ -33,6 +36,7 @@ export function Selector(props: SelectorProps) {
     <FormSelect
       val={props.val ?? res.data.schemas[0]}
       className={props.className}
+      labelClassName={css.schemaLabel}
       onChangeValue={props.onChangeValue}
       options={res.data.schemas.map(v => {
         return {
@@ -41,7 +45,7 @@ export function Selector(props: SelectorProps) {
         };
       })}
       hideSelectedOptions
-      label="Schema"
+      label="Schema:"
       horizontal={props.horizontal}
       light
     />
@@ -82,12 +86,12 @@ export default function SchemasSelector(props: Props) {
   };
 
   return (
-    <span className={css.wrapper}>
+    <span className={cx(css.wrapper, props.className)}>
       <Selector
         params={props.params}
         val={props.params.schemaName}
         onChangeValue={handleChangeRef}
-        className={css.selector}
+        className={cx(css.selector, props.selectorClassName)}
         horizontal
       />
       <CreateSchema {...props} />

web/renderer/components/TableList/Item/index.module.css

@@ -3,7 +3,7 @@
 }
 
 .buttonIcon {
-  @apply text-primary opacity-25 text-2xl mr-4 h-6 mt-1 rounded-full;
+  @apply hidden text-sky-900 text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
 
   &:focus {
     @apply widget-shadow-lightblue outline-none;
@@ -12,43 +12,48 @@
 
 .active,
 .item:hover {
-  @apply bg-white;
-
-  .buttonIcon {
-    @apply font-semibold;
-  }
+  @apply bg-storm-50 text-storm-600;
 }
 
 .item:hover .buttonIcon {
-  @apply opacity-100;
+  @apply block;
+}
 
-  &:hover {
-    @apply text-sky-900;
+.isExpanded {
+  @apply bg-[#fafbfc];
+  .buttonIcon {
+    @apply block;
   }
 }
 
-.isExpanded {
-  background-color: #fafbfc;
+.isExpanded .tableName {
+  @apply text-storm-600 font-semibold;
+}
+
+.isExpanded .table {
+  @apply text-storm-600 font-semibold bg-storm-50;
 }
 
 .table {
   @apply flex justify-between text-sm;
+  &:hover {
+    @apply bg-storm-50;
+    .tableName {
+      @apply text-storm-600;
+    }
+  }
 }
 
 .tableName {
   @apply hidden;
 
   @screen lg {
-    @apply flex p-3 text-link-1 font-semibold w-full text-sm;
+    @apply flex p-3 text-white w-full text-sm;
 
     svg {
       @apply inline-block text-sm mt-1 mr-2;
     }
 
-    &:hover {
-      @apply text-link-2;
-    }
-
     &:focus {
       @apply outline-none;
 
@@ -72,5 +77,5 @@
 }
 
 .tableStatus {
-  @apply text-coral-400 pr-4 mr-1 font-semibold;
+  @apply text-coral-400 bg-white rounded-full py-0.5 px-2 mr-3 font-semibold;
 }