Adjust buttons

questdb · Oct 23, 2024 · 15fa01b · 15fa01b
1 parent 784b11a
commit 15fa01b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/packages/react-components/src/components/Button/skin.ts b/packages/react-components/src/components/Button/skin.ts
@@ -24,6 +24,7 @@ type ColorShape = {
   white: string;
   inherit: string;
   tooltipBackground: string;
+  offWhite: string;
 };
 
 type Color = keyof ColorShape;
@@ -125,16 +126,16 @@ const themes: {
     normal: {
       background: "transparent",
       border: "transparent",
-      color: "foreground",
+      color: "offWhite",
     },
     hover: {
       background: "comment",
       border: "transparent",
-      color: "foreground",
+      color: "offWhite",
     },
     disabled: {
       background: "transparent",
-      border: "gray1",
+      border: "transparent",
       color: "gray1",
     },
   },

diff --git a/packages/react-components/src/theme/color.ts b/packages/react-components/src/theme/color.ts
@@ -22,6 +22,7 @@ export type Color = {
   white: string;
   inherit: string;
   tooltipBackground: string;
+  offWhite: string;
 };
 
 export const color: Color = {
@@ -48,4 +49,5 @@ export const color: Color = {
   white: "#fafafa",
   inherit: "inherit",
   tooltipBackground: "#6272a4",
+  offWhite: "#bdbdbd",
 };
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
@@ -167,6 +167,7 @@ const Console = () => {
               <Allotment.Pane
                 preferredSize={editorSplitterBasis}
                 visible={editorSplitterBasis !== 0 && !sm}
+                minSize={250}
               >
                 <Schema />
               </Allotment.Pane>

diff --git a/packages/web-console/src/scenes/Result/index.tsx b/packages/web-console/src/scenes/Result/index.tsx
@@ -168,7 +168,7 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
       tooltipText: "Freeze left column",
       trigger: (
         <Button
-          skin={gridFreezeLeftState > 0 ? "success" : "secondary"}
+          skin={gridFreezeLeftState > 0 ? "success" : "transparent"}
           onClick={() => {
             gridRef?.current?.toggleFreezeLeft()
             gridRef?.current?.focus()
@@ -182,7 +182,7 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
       tooltipText: "Move selected column to the front",
       trigger: (
         <Button
-          skin="secondary"
+          skin="transparent"
           onClick={gridRef?.current?.shuffleFocusedColumnToFront}
         >
           <HandPointLeft size="18px" />
@@ -192,7 +192,10 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
     {
       tooltipText: "Reset grid layout",
       trigger: (
-        <Button skin="secondary" onClick={gridRef?.current?.clearCustomLayout}>
+        <Button
+          skin="transparent"
+          onClick={gridRef?.current?.clearCustomLayout}
+        >
           <Reset size="18px" />
         </Button>
       ),
@@ -201,7 +204,7 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
       tooltipText: "Refresh",
       trigger: (
         <Button
-          skin="secondary"
+          skin="transparent"
           onClick={() => {
             const sql = gridRef?.current?.getSQL()
             if (sql) {
@@ -247,7 +250,7 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
             placement="bottom"
             trigger={
               <Button
-                skin="secondary"
+                skin="transparent"
                 onClick={() => {
                   const sql = gridRef?.current?.getSQL()
                   if (sql) {

diff --git a/packages/web-console/src/scenes/Schema/index.tsx b/packages/web-console/src/scenes/Schema/index.tsx
@@ -107,11 +107,7 @@ const ToolbarToggleButton = styled(PrimaryToggleButton)`
   &&:not(:disabled) {
     width: auto;
     padding: 0 1rem;
-    border: 1px solid ${({ theme }) => theme.color.selection};
     height: 3rem;
-    background: ${({ theme }) => theme.color.selection};
-    color: ${({ selected, theme }) =>
-      theme.color[`${selected ? "green" : "foreground"}`]};
   }
 `
 
@@ -376,7 +372,7 @@ const Schema = ({
                       placement="bottom"
                       trigger={
                         <Button
-                          skin="secondary"
+                          skin="transparent"
                           data-hook="schema-copy-to-clipboard-button"
                           disabled={selectedTables.length === 0}
                           onClick={copySchemasToClipboard}
@@ -395,7 +391,7 @@ const Schema = ({
                       placement="bottom"
                       trigger={
                         <Button
-                          skin="secondary"
+                          skin="transparent"
                           data-hook="schema-select-all-button"
                           onClick={() => {
                             selectedTables.length === tables?.length
@@ -428,7 +424,7 @@ const Schema = ({
                       trigger={
                         <Button
                           data-hook="schema-cancel-select-button"
-                          skin="secondary"
+                          skin="transparent"
                           onClick={() => {
                             setSelectedTables([])
                             setSelectOpen(false)