#RI-31 - fix pr comments

Author: egor-zalenski

src/webviews/src/modules/keys-tree/components/keys-summary/KeysSummary.tsx

@@ -128,7 +128,7 @@ export const KeysSummary = (props: Props) => {
         onClick={handleToggleShowTree}
         data-testid="keys-summary"
       >
-        {<Chevron open={showTree} display={isMultiDbIndex} />}
+        {<Chevron open={showTree} hidden={!isMultiDbIndex} />}
         {<DbIndex />}
         {<Summary />}
       </div>

src/webviews/src/ui/icons/chevron/Chevron.tsx

@@ -1,20 +1,26 @@
 import React from 'react'
 import cx from 'classnames'
-
 import { VscChevronDown, VscChevronRight } from 'react-icons/vsc'
-import styles from './styles.module.scss'
+import { IconBaseProps } from 'react-icons/lib'
 
-export interface Props {
+export interface Props extends IconBaseProps {
   open?: boolean
-  display?: boolean
+  hidden?: boolean
+  className?: string
 }
 
-export const Chevron = ({ open = false, display = true }: Props) => {
-  if (!display) return null
+export const Chevron = ({ open = false, hidden = false, className = '', ...props }: Props) => {
+  if (hidden) return null
 
   return open ? (
-    <VscChevronDown className={cx(styles.icon, styles.iconNested)} />
+    <VscChevronDown
+      {...props}
+      className={cx('sidebar-icon', 'sidebar-icon-nested', className)}
+    />
   ) : (
-    <VscChevronRight className={cx(styles.icon, styles.iconNested)} />
+    <VscChevronRight
+      {...props}
+      className={cx('sidebar-icon', 'sidebar-icon-nested', className)}
+    />
   )
 }

src/webviews/src/ui/icons/chevron/styles.module.scss

@@ -1,20 +1,28 @@
 import React from 'react'
+import cx from 'classnames'
+import { IconBaseProps } from 'react-icons/lib'
 
 import DatabaseOfflineIconSvg from 'uiSrc/assets/database/database_icon_offline.svg?react'
 import DatabaseActiveIconSvg from 'uiSrc/assets/database/database_icon_active.svg?react'
-import styles from './styles.module.scss'
 
-export interface Props {
+export interface Props extends IconBaseProps {
   open?: boolean
-  display?: boolean
+  hidden?: boolean
+  className?: string
 }
 
-export const DatabaseIcon = ({ open = false, display = true }: Props) => {
-  if (!display) return null
+export const DatabaseIcon = ({ open = false, hidden = false, className = '', ...props }: Props) => {
+  if (hidden) return null
 
   return open ? (
-    <DatabaseActiveIconSvg className={styles.icon} />
+    <DatabaseActiveIconSvg
+      {...props}
+      className={cx('sidebar-icon', className)}
+     />
   ) : (
-    <DatabaseOfflineIconSvg className={styles.icon} />
+    <DatabaseOfflineIconSvg
+      {...props}
+      className={cx('sidebar-icon', className)}
+    />
   )
 }

src/webviews/src/ui/icons/database/DatabaseIcon.tsx

@@ -53,6 +53,14 @@ vscode-button::part(control) {
       @apply border-none;
     }
   }
+
+  .sidebar-icon {
+    @apply mr-2 w-[14px] h-[14px] min-w-[14px] ml-[3px];
+
+    &-nested {
+      @apply m-0;
+    }
+  }
 }
 
 .table-loading:before {