From cbb025453442b60793b68cce773a68feccf69fd7 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Thu, 12 Dec 2024 12:31:03 -0800
Subject: [PATCH 1/6] views, definitions

---
 .../components/DatabaseTableNav/NavLinks.tsx  |  7 ++++-
 .../DatabaseTableNav/index.module.css         | 12 +++++---
 .../DefinitionList/index.module.css           | 19 ++++++------
 .../TableList/Item/index.module.css           | 30 ++++++++++++-------
 .../components/TableList/index.module.css     |  4 +--
 .../components/Views/index.module.css         |  8 ++++-
 6 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/web/renderer/components/DatabaseTableNav/NavLinks.tsx b/web/renderer/components/DatabaseTableNav/NavLinks.tsx
index 1e7dd71d..f41c3f64 100644
--- a/web/renderer/components/DatabaseTableNav/NavLinks.tsx
+++ b/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>
           ))}
diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index 9fc1ab18..4eec5e80 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/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-5 flex flex-col;
   }
 }
 
@@ -36,7 +36,7 @@
 .menuIcon {
   @apply hidden;
   @screen lg {
-    @apply block text-primary cursor-pointer mx-1;
+    @apply block cursor-pointer mx-1 text-white;
   }
 }
 
@@ -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;
     path {
       @apply stroke-[3.5rem];
     }
@@ -87,10 +87,14 @@
   @apply text-sm;
 
   li {
-    @apply mx-4 px-2 text-link-1;
+    @apply mx-4 px-2;
   }
 }
 
+.tab {
+  @apply text-storm-50;
+}
+
 .tabPanel {
   @apply px-0 absolute left-0 right-0 bottom-0 top-9 overflow-auto;
 }
diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css
index cc245450..978b7a5e 100644
--- a/web/renderer/components/DefinitionList/index.module.css
+++ b/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-25;
 }
 
 .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,11 +39,11 @@
 
 .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 {
diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css
index 055dedd5..243f894b 100644
--- a/web/renderer/components/TableList/Item/index.module.css
+++ b/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 text-white text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
 
   &:focus {
     @apply widget-shadow-lightblue outline-none;
@@ -12,7 +12,7 @@
 
 .active,
 .item:hover {
-  @apply bg-white;
+  @apply bg-storm-50 text-storm-600;
 
   .buttonIcon {
     @apply font-semibold;
@@ -20,35 +20,43 @@
 }
 
 .item:hover .buttonIcon {
-  @apply opacity-100;
+  @apply text-sky-900;
+}
 
-  &:hover {
+.isExpanded {
+  @apply bg-[#fafbfc];
+  .buttonIcon {
     @apply text-sky-900;
   }
 }
 
-.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;
 
diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
index 0ca36080..6c2752ff 100644
--- a/web/renderer/components/TableList/index.module.css
+++ b/web/renderer/components/TableList/index.module.css
@@ -1,10 +1,10 @@
 .addTable {
   @apply hidden;
   @screen lg {
-    @apply flex my-8 mx-3 text-sm text-sky-900;
+    @apply flex my-8 mx-3 text-sm text-white;
 
     &:hover {
-      @apply text-link-2;
+      @apply text-sky-300;
     }
 
     svg {
diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css
index 543ce9c5..6a344c8c 100644
--- a/web/renderer/components/Views/index.module.css
+++ b/web/renderer/components/Views/index.module.css
@@ -3,7 +3,13 @@
 }
 
 .text {
-  @apply my-4 mx-5;
+  @apply my-4 mx-5 text-storm-50;
+  a {
+    @apply text-white;
+    &:hover {
+      @apply text-sky-300;
+    }
+  }
 }
 
 .icon {

From 498749d03234659e29f0e6c37740c03524bcac49 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Thu, 12 Dec 2024 13:50:45 -0800
Subject: [PATCH 2/6] colors

---
 .../components/DefinitionList/index.module.css |  4 ++--
 web/renderer/components/Views/index.module.css | 18 +++++++-----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css
index 978b7a5e..051d61f3 100644
--- a/web/renderer/components/DefinitionList/index.module.css
+++ b/web/renderer/components/DefinitionList/index.module.css
@@ -11,7 +11,7 @@
 }
 
 .icon {
-  @apply text-xl mr-2 text-white rounded-full opacity-25;
+  @apply text-xl mr-2 text-white rounded-full;
 }
 
 .item {
@@ -25,7 +25,7 @@
 .item:hover {
   .icon,
   .name {
-    @apply text-sky-900  opacity-100;
+    @apply text-sky-900;
   }
 }
 
diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css
index 6a344c8c..e965a7ca 100644
--- a/web/renderer/components/Views/index.module.css
+++ b/web/renderer/components/Views/index.module.css
@@ -13,7 +13,7 @@
 }
 
 .icon {
-  @apply text-2xl mr-2 text-primary rounded-full opacity-25;
+  @apply text-2xl mr-2 text-white rounded-full;
 }
 
 .item {
@@ -24,14 +24,6 @@
   }
 }
 
-.item:hover .icon {
-  @apply opacity-100;
-
-  &:hover {
-    @apply text-sky-900;
-  }
-}
-
 .button {
   @apply flex justify-between items-center w-full;
 
@@ -42,11 +34,15 @@
 
 .selected,
 .item:hover {
-  @apply bg-white text-link-2;
+  @apply bg-storm-50;
+  .name,
+  .icon {
+    @apply text-storm-600;
+  }
 }
 
 .name {
-  @apply text-link-1 text-sm font-semibold;
+  @apply text-white text-sm font-semibold;
 }
 
 .viewing {

From 7d08936b34548c6cc11b915ed453b9f7d7cedbee Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Mon, 16 Dec 2024 14:24:55 -0800
Subject: [PATCH 3/6] table, view, definition list

---
 .../DatabaseTableNav/index.module.css         |  2 +-
 .../DefinitionList/index.module.css           |  4 +--
 .../SchemaDiagramButton/index.module.css      |  5 +++-
 .../SchemasSelector/CreateSchema.tsx          |  2 +-
 .../SchemasSelector/index.module.css          |  4 +++
 .../TableList/Item/index.module.css           | 10 ++-----
 .../components/TableList/index.module.css     |  8 +++++
 web/renderer/components/TableList/index.tsx   | 30 +++++++++----------
 .../components/Views/index.module.css         |  1 -
 9 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index 4eec5e80..aba9ce4c 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/web/renderer/components/DatabaseTableNav/index.module.css
@@ -68,7 +68,7 @@
   @apply hidden;
 
   @screen lg {
-    @apply block font-bold text-xl cursor-pointer -ml-4 text-white;
+    @apply block font-bold text-xl cursor-pointer -ml-4 text-white border-2 rounded-full border-white;
     path {
       @apply stroke-[3.5rem];
     }
diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css
index 051d61f3..27c18fd6 100644
--- a/web/renderer/components/DefinitionList/index.module.css
+++ b/web/renderer/components/DefinitionList/index.module.css
@@ -11,7 +11,7 @@
 }
 
 .icon {
-  @apply text-xl mr-2 text-white rounded-full;
+  @apply text-xl mr-2 text-white rounded-full opacity-20;
 }
 
 .item {
@@ -25,7 +25,7 @@
 .item:hover {
   .icon,
   .name {
-    @apply text-sky-900;
+    @apply text-sky-900 opacity-100;
   }
 }
 
diff --git a/web/renderer/components/SchemaDiagramButton/index.module.css b/web/renderer/components/SchemaDiagramButton/index.module.css
index 14df9c2c..3b2bc24c 100644
--- a/web/renderer/components/SchemaDiagramButton/index.module.css
+++ b/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] rounded-full px-6 items-center;
+  &:hover {
+    @apply bg-coral-400;
+  }
 
   svg {
     @apply mt-1 mr-2 text-sm;
diff --git a/web/renderer/components/SchemasSelector/CreateSchema.tsx b/web/renderer/components/SchemasSelector/CreateSchema.tsx
index 1374e414..042930bf 100644
--- a/web/renderer/components/SchemasSelector/CreateSchema.tsx
+++ b/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
diff --git a/web/renderer/components/SchemasSelector/index.module.css b/web/renderer/components/SchemasSelector/index.module.css
index 55facae1..5d7cd291 100644
--- a/web/renderer/components/SchemasSelector/index.module.css
+++ b/web/renderer/components/SchemasSelector/index.module.css
@@ -13,3 +13,7 @@
     @apply stroke-[3.5rem];
   }
 }
+
+.createSchIcon {
+  @apply border-2 rounded-full border-white;
+}
diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css
index 243f894b..442d9c6a 100644
--- a/web/renderer/components/TableList/Item/index.module.css
+++ b/web/renderer/components/TableList/Item/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .buttonIcon {
-  @apply text-white text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
+  @apply text-storm-50 opacity-20 text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
 
   &:focus {
     @apply widget-shadow-lightblue outline-none;
@@ -13,20 +13,16 @@
 .active,
 .item:hover {
   @apply bg-storm-50 text-storm-600;
-
-  .buttonIcon {
-    @apply font-semibold;
-  }
 }
 
 .item:hover .buttonIcon {
-  @apply text-sky-900;
+  @apply text-sky-900 opacity-100;
 }
 
 .isExpanded {
   @apply bg-[#fafbfc];
   .buttonIcon {
-    @apply text-sky-900;
+    @apply text-sky-900 opacity-100;
   }
 }
 
diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
index 6c2752ff..b853ecd7 100644
--- a/web/renderer/components/TableList/index.module.css
+++ b/web/renderer/components/TableList/index.module.css
@@ -1,3 +1,7 @@
+.tableList {
+  @apply pb-4;
+}
+
 .addTable {
   @apply hidden;
   @screen lg {
@@ -16,3 +20,7 @@
 .empty {
   @apply my-4 mx-5;
 }
+
+.bottom {
+  @apply flex items-center justify-between px-6 border-t border-white border-opacity-10;
+}
diff --git a/web/renderer/components/TableList/index.tsx b/web/renderer/components/TableList/index.tsx
index 3f13a71e..186b752a 100644
--- a/web/renderer/components/TableList/index.tsx
+++ b/web/renderer/components/TableList/index.tsx
@@ -7,7 +7,7 @@ import { Maybe } from "@dolthub/web-utils";
 import useTableNames from "@hooks/useTableNames";
 import { RefOptionalSchemaParams } from "@lib/params";
 import { createTable } from "@lib/urls";
-import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus";
+import { AiOutlinePlusCircle } from "@react-icons/all-files/ai/AiOutlinePlusCircle";
 import { useEffect } from "react";
 import Item from "./Item";
 import css from "./index.module.css";
@@ -33,25 +33,25 @@ function Inner(props: InnerProps) {
     <div>
       <Tooltip id="primary-key-tip" content="primary key" place="left" />
       {props.tables.length ? (
-        <>
-          <ol>
-            {props.tables.map(t => (
-              <Item key={t} tableName={t} params={props.params} />
-            ))}
-          </ol>
-          <SchemaDiagramButton {...props} />
-        </>
+        <ol className={css.tableList}>
+          {props.tables.map(t => (
+            <Item key={t} tableName={t} params={props.params} />
+          ))}
+        </ol>
       ) : (
         <p className={css.empty}>
           No tables found for <code>{props.params.refName}</code>
         </p>
       )}
-      <HideForNoWritesWrapper params={props.params}>
-        <Link {...createTable(props.params)} className={css.addTable}>
-          <AiOutlinePlus />
-          Add new table
-        </Link>
-      </HideForNoWritesWrapper>
+      <div className={css.bottom}>
+        {props.tables.length > 0 && <SchemaDiagramButton {...props} />}
+        <HideForNoWritesWrapper params={props.params}>
+          <Link {...createTable(props.params)} className={css.addTable}>
+            <AiOutlinePlusCircle />
+            Add new table
+          </Link>
+        </HideForNoWritesWrapper>
+      </div>
     </div>
   );
 }
diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css
index e965a7ca..f73e40a5 100644
--- a/web/renderer/components/Views/index.module.css
+++ b/web/renderer/components/Views/index.module.css
@@ -32,7 +32,6 @@
   }
 }
 
-.selected,
 .item:hover {
   @apply bg-storm-50;
   .name,

From 55d76a3d8a6b9a3ff9293ef5fb90933afb5b9304 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Tue, 17 Dec 2024 11:33:13 -0800
Subject: [PATCH 4/6] hide icons, bottom, scroll

---
 web/renderer/components/DatabaseTableNav/index.module.css | 5 +++++
 web/renderer/components/TableList/Item/index.module.css   | 7 ++++---
 web/renderer/components/TableList/index.module.css        | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index aba9ce4c..fe6c401b 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/web/renderer/components/DatabaseTableNav/index.module.css
@@ -97,6 +97,11 @@
 
 .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 {
diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css
index 442d9c6a..cb7e4649 100644
--- a/web/renderer/components/TableList/Item/index.module.css
+++ b/web/renderer/components/TableList/Item/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .buttonIcon {
-  @apply text-storm-50 opacity-20 text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
+  @apply hidden text-sky-900 text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
 
   &:focus {
     @apply widget-shadow-lightblue outline-none;
@@ -16,13 +16,13 @@
 }
 
 .item:hover .buttonIcon {
-  @apply text-sky-900 opacity-100;
+  @apply block;
 }
 
 .isExpanded {
   @apply bg-[#fafbfc];
   .buttonIcon {
-    @apply text-sky-900 opacity-100;
+    @apply block;
   }
 }
 
@@ -33,6 +33,7 @@
 .isExpanded .table {
   @apply text-storm-600 font-semibold bg-storm-50;
 }
+
 .table {
   @apply flex justify-between text-sm;
   &:hover {
diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
index b853ecd7..a00ad9ce 100644
--- a/web/renderer/components/TableList/index.module.css
+++ b/web/renderer/components/TableList/index.module.css
@@ -22,5 +22,5 @@
 }
 
 .bottom {
-  @apply flex items-center justify-between px-6 border-t border-white border-opacity-10;
+  @apply bg-storm-500 flex items-center justify-between px-6 border-t border-white border-opacity-10 fixed bottom-0 min-w-96 w-96;
 }

From 7a8dbc1c05452b693ab4aec8b7db7dc12913c646 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Tue, 31 Dec 2024 13:12:53 -0800
Subject: [PATCH 5/6] selectors

---
 .../DatabaseTableNav/index.module.css         | 21 +++++++++--
 .../components/DatabaseTableNav/index.tsx     | 37 +++++++++++--------
 .../BranchAndTagSelector.tsx                  |  2 +-
 .../FormSelectForRefs/index.module.css        |  4 +-
 .../SchemasSelector/index.module.css          |  6 ++-
 .../components/SchemasSelector/index.tsx      | 10 +++--
 6 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index fe6c401b..4345b48a 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/web/renderer/components/DatabaseTableNav/index.module.css
@@ -29,14 +29,14 @@
 .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 cursor-pointer mx-1 text-white;
+    @apply flex justify-end items-center w-full pt-2 pb-4 px-4 cursor-pointer text-white;
   }
 }
 
@@ -45,7 +45,7 @@
 }
 
 .openBranchSelector {
-  @apply opacity-100 transition-opacity duration-75 min-w-[200px];
+  @apply opacity-100 transition-opacity duration-75 min-w-[200px] w-full;
 }
 
 .openNav {
@@ -93,6 +93,13 @@
 
 .tab {
   @apply text-storm-50;
+  button {
+    @apply font-normal;
+  }
+}
+
+.active {
+  @apply text-orange-400;
 }
 
 .tabPanel {
@@ -120,3 +127,11 @@
     @apply font-semibold;
   }
 }
+
+.schemaSelector {
+  @apply m-0 max-w-none;
+}
+
+.selector {
+  @apply w-[264px] max-w-none;
+}
diff --git a/web/renderer/components/DatabaseTableNav/index.tsx b/web/renderer/components/DatabaseTableNav/index.tsx
index 89dde13a..caded337 100644
--- a/web/renderer/components/DatabaseTableNav/index.tsx
+++ b/web/renderer/components/DatabaseTableNav/index.tsx
@@ -47,6 +47,12 @@ function Nav({
       })}
     >
       <div className={css.top}>
+        <div className={css.menuIcon}>
+          <GiHamburgerMenu
+            onClick={toggleMenu}
+            data-cy="left-nav-toggle-icon"
+          />
+        </div>
         <div className={css.topLine}>
           <div
             className={cx(css.openBranchSelector, { [css.closedItem]: !open })}
@@ -65,22 +71,23 @@ function Nav({
               <NewBranchLink params={params} open={open} />
             </NotDoltWrapper>
           </HideForNoWritesWrapper>
-          <GiHamburgerMenu
-            onClick={toggleMenu}
-            className={css.menuIcon}
-            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 })}
diff --git a/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx
index b71c9012..e06f91e3 100644
--- a/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx
+++ b/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
diff --git a/web/renderer/components/FormSelectForRefs/index.module.css b/web/renderer/components/FormSelectForRefs/index.module.css
index 46f24814..96d9aa3c 100644
--- a/web/renderer/components/FormSelectForRefs/index.module.css
+++ b/web/renderer/components/FormSelectForRefs/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .branchAndTagSelect {
-  @apply min-w-[270px] max-w-[270px] w-full;
+  @apply w-[264px];
 }
 
 .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 {
diff --git a/web/renderer/components/SchemasSelector/index.module.css b/web/renderer/components/SchemasSelector/index.module.css
index 5d7cd291..6ed282d6 100644
--- a/web/renderer/components/SchemasSelector/index.module.css
+++ b/web/renderer/components/SchemasSelector/index.module.css
@@ -7,7 +7,7 @@
 }
 
 .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];
@@ -17,3 +17,7 @@
 .createSchIcon {
   @apply border-2 rounded-full border-white;
 }
+
+.schemaLabel {
+  @apply mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
+}
diff --git a/web/renderer/components/SchemasSelector/index.tsx b/web/renderer/components/SchemasSelector/index.tsx
index 4c895c47..54933cac 100644
--- a/web/renderer/components/SchemasSelector/index.tsx
+++ b/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} />

From 2ba37df1495022b8ed469399d52fd70262c74137 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Thu, 2 Jan 2025 12:16:39 -0800
Subject: [PATCH 6/6] buttons ui

---
 .../components/DatabaseTableNav/index.module.css     | 12 ++++++------
 web/renderer/components/DatabaseTableNav/index.tsx   | 11 +++++------
 .../components/DefinitionList/index.module.css       |  2 +-
 .../components/FormSelectForRefs/index.module.css    |  2 +-
 .../components/SchemaDiagramButton/index.module.css  |  2 +-
 .../components/TableList/Item/index.module.css       |  2 +-
 web/renderer/components/TableList/index.module.css   |  6 +++---
 web/renderer/components/Views/index.module.css       |  2 +-
 8 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index 4345b48a..2acebb7a 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/web/renderer/components/DatabaseTableNav/index.module.css
@@ -1,7 +1,7 @@
 .container {
   @apply hidden;
   @screen lg {
-    @apply bg-storm-500 pt-5 flex flex-col;
+    @apply bg-storm-500 pt-8 flex flex-col;
   }
 }
 
@@ -23,7 +23,7 @@
 }
 
 .top {
-  @apply pb-4 -mt-2;
+  @apply pb-4;
 }
 
 .topLine {
@@ -36,7 +36,7 @@
 .menuIcon {
   @apply hidden;
   @screen lg {
-    @apply flex justify-end items-center w-full pt-2 pb-4 px-4 cursor-pointer text-white;
+    @apply block cursor-pointer mx-1 text-white;
   }
 }
 
@@ -45,7 +45,7 @@
 }
 
 .openBranchSelector {
-  @apply opacity-100 transition-opacity duration-75 min-w-[200px] w-full;
+  @apply opacity-100 transition-opacity duration-75 min-w-[200px];
 }
 
 .openNav {
@@ -53,7 +53,7 @@
 }
 
 .createBranch {
-  @apply relative text-base;
+  @apply relative text-base ml-[0.8rem];
 }
 
 .createBranchDisabled a {
@@ -133,5 +133,5 @@
 }
 
 .selector {
-  @apply w-[264px] max-w-none;
+  @apply w-[230px] max-w-none;
 }
diff --git a/web/renderer/components/DatabaseTableNav/index.tsx b/web/renderer/components/DatabaseTableNav/index.tsx
index caded337..1b3a1573 100644
--- a/web/renderer/components/DatabaseTableNav/index.tsx
+++ b/web/renderer/components/DatabaseTableNav/index.tsx
@@ -47,12 +47,6 @@ function Nav({
       })}
     >
       <div className={css.top}>
-        <div className={css.menuIcon}>
-          <GiHamburgerMenu
-            onClick={toggleMenu}
-            data-cy="left-nav-toggle-icon"
-          />
-        </div>
         <div className={css.topLine}>
           <div
             className={cx(css.openBranchSelector, { [css.closedItem]: !open })}
@@ -71,6 +65,11 @@ function Nav({
               <NewBranchLink params={params} open={open} />
             </NotDoltWrapper>
           </HideForNoWritesWrapper>
+          <GiHamburgerMenu
+            onClick={toggleMenu}
+            className={css.menuIcon}
+            data-cy="left-nav-toggle-icon"
+          />
         </div>
         <div className={css.topLine}>
           {isPostgres && params.refName && (
diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css
index 27c18fd6..769b9df2 100644
--- a/web/renderer/components/DefinitionList/index.module.css
+++ b/web/renderer/components/DefinitionList/index.module.css
@@ -47,7 +47,7 @@
 }
 
 .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 {
diff --git a/web/renderer/components/FormSelectForRefs/index.module.css b/web/renderer/components/FormSelectForRefs/index.module.css
index 96d9aa3c..89b45a9c 100644
--- a/web/renderer/components/FormSelectForRefs/index.module.css
+++ b/web/renderer/components/FormSelectForRefs/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .branchAndTagSelect {
-  @apply w-[264px];
+  @apply w-[230px];
 }
 
 .selectForPostgres {
diff --git a/web/renderer/components/SchemaDiagramButton/index.module.css b/web/renderer/components/SchemaDiagramButton/index.module.css
index 3b2bc24c..01efe7bb 100644
--- a/web/renderer/components/SchemaDiagramButton/index.module.css
+++ b/web/renderer/components/SchemaDiagramButton/index.module.css
@@ -1,5 +1,5 @@
 .diagram {
-  @apply flex text-white text-base bg-[#FF8964] rounded-full px-6 items-center;
+  @apply flex text-white text-base bg-[#FF8964] px-6 items-center;
   &:hover {
     @apply bg-coral-400;
   }
diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css
index cb7e4649..a61b6150 100644
--- a/web/renderer/components/TableList/Item/index.module.css
+++ b/web/renderer/components/TableList/Item/index.module.css
@@ -77,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;
 }
diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
index a00ad9ce..e26a9953 100644
--- a/web/renderer/components/TableList/index.module.css
+++ b/web/renderer/components/TableList/index.module.css
@@ -1,14 +1,14 @@
 .tableList {
-  @apply pb-4;
+  @apply pb-20;
 }
 
 .addTable {
   @apply hidden;
   @screen lg {
-    @apply flex my-8 mx-3 text-sm text-white;
+    @apply flex my-8 mx-3 text-sm text-white font-normal;
 
     &:hover {
-      @apply text-sky-300;
+      @apply text-[#FF8964];
     }
 
     svg {
diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css
index f73e40a5..8b3e4621 100644
--- a/web/renderer/components/Views/index.module.css
+++ b/web/renderer/components/Views/index.module.css
@@ -45,5 +45,5 @@
 }
 
 .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 px-2 rounded-full font-semibold text-sm;
 }