* #RIVS-282 - [Regression] The entire db scanned tooltip is displayed for a sec when clicking on Scan more

* #RIVS-277 - [Regression] Incorrect displaying in white theme

Author: egor-zalenski

src/webviews/src/components/scan-more/ScanMore.tsx

@@ -7,6 +7,7 @@ import { Tooltip } from 'uiSrc/ui'
 import styles from './styles.module.scss'
 
 export interface Props {
+  loading: boolean
   disabled: boolean
   text?: string
   loadMoreItems?: (config: any) => void
@@ -16,14 +17,15 @@ export interface Props {
 
 export const ScanMore: FC<Props> = ({
   disabled,
+  loading,
   text,
   loadMoreItems,
 }) => (
   <div className={styles.container}>
     <div className="sidebar-nesting-level" />
-    <Tooltip content={disabled ? l10n.t('The entire database has been scanned.') : ''}>
+    <Tooltip content={(disabled && !loading) ? l10n.t('The entire database has been scanned.') : ''}>
       <VSCodeButton
-        disabled={disabled}
+        disabled={disabled || loading}
         data-testid="scan-more"
         className={styles.btn}
         onClick={loadMoreItems}

src/webviews/src/components/upload-file/styles.module.scss

@@ -3,7 +3,7 @@
 }
 
 .uploadBtn {
-  @apply flex cursor-pointer py-1 items-center;
+  @apply flex cursor-pointer py-1 items-center text-vscode-foreground;
 }
 
 .emptyBtn {

src/webviews/src/modules/add-key/components/AddKeyReJSON/AddKeyReJSON.tsx

@@ -104,7 +104,7 @@ export const AddKeyReJSON = (props: Props) => {
         <MonacoJson
           value={ReJSONValue}
           onChange={setReJSONValue}
-          wrapperClassName={!isJsonLoaded ? 'h-[calc(100vh-330px)]' : 'h-[calc(100vh-300px)]'}
+          wrapperClassName={!isJsonLoaded ? 'h-[calc(100vh-340px)]' : 'h-[calc(100vh-300px)]'}
           disabled={loading}
           data-testid="json-value"
         />

src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx

@@ -19,7 +19,7 @@ import { Database, checkConnectToDatabase, deleteDatabases, useSelectedKeyStore
 import DatabaseOfflineIconSvg from 'uiSrc/assets/database/database_icon_offline.svg?react'
 import DatabaseActiveIconSvg from 'uiSrc/assets/database/database_icon_active.svg?react'
 import { PopoverDelete } from 'uiSrc/components'
-import { RefreshBtn } from 'uiSrc/ui'
+import { RefreshBtn, Tooltip } from 'uiSrc/ui'
 import { useKeysApi, useKeysInContext } from '../../hooks/useKeys'
 
 import styles from './styles.module.scss'
@@ -141,10 +141,17 @@ export const DatabaseWrapper = ({ children, database }: Props) => {
           {showTree && (<DatabaseActiveIconSvg className={styles.icon} />)}
           {!showTree && (<VscChevronRight className={cx(styles.icon, styles.iconNested)} />)}
           {!showTree && (<DatabaseOfflineIconSvg className={styles.icon} />)}
-          <div className={styles.databaseName}>
-            <div className="truncate">{name}</div>
-            <div>{getDbIndex(database.db)}</div>
-          </div>
+          <Tooltip
+            content={formatLongName(name, 100, 20)}
+            position="bottom center"
+            keepTooltipInside={false}
+            mouseEnterDelay={1000}
+          >
+            <div className={styles.databaseName}>
+              <div className="truncate">{name}</div>
+              <div>{getDbIndex(database.db)}</div>
+            </div>
+          </Tooltip>
         </div>
         <div className="flex pr-3.5">
           {showTree && (

src/webviews/src/modules/keys-tree/components/keys-tree-filter/KeyTreeFilter.tsx

@@ -119,7 +119,7 @@ export const KeyTreeFilter = () => {
           <Select
             options={sortOptions}
             idSelected={typeSelected}
-            containerClassName="select-without-border min-w-1 w-full"
+            containerClassName="min-w-1 w-full"
             onChange={onChangeType}
             testid="tree-view-filter-select"
           />

src/webviews/src/modules/keys-tree/components/keys-tree-header/KeysTreeHeader.tsx

@@ -45,7 +45,8 @@ export const KeysTreeHeader = ({ database }: Props) => {
       />
       {isShowScanMore(scanned, total, nextCursor) && (
         <ScanMore
-          disabled={loading || isDisableScanMore(scanned, total, nextCursor)}
+          loading={loading}
+          disabled={isDisableScanMore(scanned, total, nextCursor)}
           loadMoreItems={loadMoreItems}
           text={l10n.t('({0}{1} Scanned)', notAccurateScanned, numberWithSpaces(scannedDisplay))}
         />

src/webviews/src/styles/base/_select.scss

@@ -11,10 +11,10 @@ vscode-dropdown {
 }
 
 .database-form-select {
-  @apply bg-vscode-input-background h-9;
+  @apply h-9;
 
   &__option {
-    @apply bg-vscode-input-background h-9 pl-2 items-center text-vscode-foreground #{!important};
+    @apply h-9 pl-2 items-center text-vscode-foreground #{!important};
   }
 
   &::part(listbox) {

src/webviews/src/ui/select/styles.module.scss

@@ -15,7 +15,11 @@
 }
 
 .option {
-  @apply min-w-[80px];
+  @apply min-w-[80px] bg-vscode-input-background;
+
+  &:hover {
+    background-color: var(--vscode-sideBarTitle-background);
+  }
 }
 
 :global{

src/webviews/src/ui/text-area/styles.module.scss

@@ -5,7 +5,6 @@ $inputMinWidth: 100px;
 .input {
   @apply bg-vscode-input-background text-vscode-input-foreground border-vscode-input-border focus:border-vscode-inputOption-activeBorder outline-none p-3 border-solid border;
 
-  border-color: transparent;
   border-radius: $cornerRadiusRound;
   min-width: $inputMinWidth;
 }