ToggleButton changes

packages/web-console/src/components/Sidebar/index.tsx

@@ -1,11 +1,15 @@
 import styled from "styled-components"
 import { Box } from "../Box"
 
-export const Sidebar = styled(Box).attrs({ flexDirection: "column" })<{align?: "top" | "bottom"}>`
+export const Sidebar = styled(Box).attrs({ flexDirection: "column" })<{
+  align?: "top" | "bottom"
+}>`
   width: 4.5rem;
   height: 100%;
   background: ${({ theme }) => theme.color.backgroundDarker};
-  gap: 0;
+  gap: 1rem;
   flex-shrink: 0;
-  justify-content: ${({align}) => align === "top" ? "flex-start" : "flex-end"};
+  justify-content: ${({ align }) =>
+    align === "top" ? "flex-start" : "flex-end"};
+  align-items: center;
 `

packages/web-console/src/components/ToggleButton/index.tsx

@@ -23,7 +23,7 @@
  ******************************************************************************/
 
 import React, { forwardRef, Ref } from "react"
-import styled, { css } from "styled-components"
+import styled, { css, ThemeConsumer } from "styled-components"
 
 import type { Color, FontSize } from "../../types"
 import { color } from "../../utils"
@@ -65,14 +65,16 @@ const baseStyles = css<Props>`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
+  background: ${({ selected, theme }) =>
+    selected ? "#2d303e" : "transparent"};
   border: none;
   outline: 0;
   font-size: ${({ fontSize, theme }) => theme.fontSize[fontSize]};
   font-weight: 400;
   line-height: 1.15;
-  width: 4.5rem;
-  height: 4.5rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 0.4rem;
   cursor: pointer;
   ${bezierTransition};
   ${({ disabled }) => disabled && "cursor: default; pointer-events: none;"};
@@ -86,15 +88,12 @@ const baseStyles = css<Props>`
 
 const getTheme = (normal: ThemeShape, hover: ThemeShape) =>
   css<Props>`
-    background: ${color(normal.background)};
-
     &:hover:not([disabled]) {
       background: ${color(hover.background)};
       opacity: 1;
     }
 
     &:active:not([disabled]) {
-      background: ${color(hover.background)};
       filter: brightness(90%);
     }
   `

packages/web-console/src/consts/index.ts

@@ -53,4 +53,4 @@ const BASE = process.env.NODE_ENV === "production" ? "fara" : "alurin"
 
 export const API = `https://${BASE}.questdb.io`
 
-export const BUTTON_ICON_SIZE = "30px"
+export const BUTTON_ICON_SIZE = "26px"

packages/web-console/src/scenes/Layout/help.tsx

@@ -57,12 +57,13 @@ export const Help = () => {
   const handleShortcutsToggle = useCallback((active) => {
     setShortcutsPopperActive(active)
   }, [])
+  const [open, setOpen] = useState(false)
 
   return (
     <React.Fragment>
-      <DropdownMenu.Root modal={false}>
+      <DropdownMenu.Root modal={false} onOpenChange={setOpen}>
         <DropdownMenu.Trigger asChild>
-          <HelpButton>
+          <HelpButton {...(open && { selected: true })}>
             <IconWithTooltip
               icon={
                 <TooltipWrapper>
@@ -131,11 +132,10 @@ export const Help = () => {
           </DropdownMenuContent>
         </DropdownMenu.Portal>
       </DropdownMenu.Root>
-
       <PopperToggle
         active={shortcutsPopperActive}
         onToggle={handleShortcutsToggle}
-        trigger={<div style={{ height: "0" }} />}
+        trigger={<React.Fragment />}
       >
         <Shortcuts />
       </PopperToggle>