From c4886127a6ecde0f43de5ce24451919f07d4e5b8 Mon Sep 17 00:00:00 2001
From: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com>
Date: Tue, 27 May 2025 19:49:05 +0400
Subject: [PATCH] dbeaver/pro#5821 Style fixes (#3479)

* dbeaver/pro#5821 fix: add cursor pointer to icon button

* dbeaver/pro#5821 refactor: change view button type

* dbeaver/pro#5821 feat: add UiSpinner styles for theme integration

* dbeaver/pro#5821 fix: update button class

* dbeaver/pro#5821 fix: improve buttons in driver management

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
---
 .../@dbeaver/ui-kit/src/IconButton/IconButton.css     |  2 ++
 .../src/FormControls/InputFileTextContent.tsx         |  2 +-
 .../core-blocks/src/FormControls/InputFiles.tsx       | 11 +++++++++--
 webapp/packages/core-theming/src/ThemeService.ts      |  1 +
 webapp/packages/core-theming/src/styles/UiSpinner.css |  5 +++++
 .../ImageValue/ImageValuePresentation.tsx             |  4 ++--
 6 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 webapp/packages/core-theming/src/styles/UiSpinner.css

diff --git a/common-react/@dbeaver/ui-kit/src/IconButton/IconButton.css b/common-react/@dbeaver/ui-kit/src/IconButton/IconButton.css
index 0708d50de6..91ac7b9726 100644
--- a/common-react/@dbeaver/ui-kit/src/IconButton/IconButton.css
+++ b/common-react/@dbeaver/ui-kit/src/IconButton/IconButton.css
@@ -17,6 +17,8 @@
     color: var(--dbv-kit-icon-btn-foreground);
     background-color: var(--dbv-kit-icon-btn-background);
 
+    cursor: pointer;
+
     &:focus-visible,
     &[data-focus-visible] {
       outline: var(--dbv-kit-icon-btn-outline-width) solid var(--dbv-kit-icon-btn-outline-color);
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
index 1bf4b4c6ce..d7108bcdc4 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
@@ -139,7 +139,7 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
         {children}
       </FieldLabel>
       <UploadArea title={tooltip} disabled={disabled} accept={accept} reset onChange={handleChange}>
-        <Button icon="/icons/import.svg" tag="div" variant="secondary" disabled={disabled}>
+        <Button className="tw:inline-flex" icon="/icons/import.svg" tag="div" variant="secondary" disabled={disabled}>
           {translate('ui_upload_file')}
         </Button>
       </UploadArea>
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx b/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
index 4d90661c72..f4f46c5854 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
@@ -176,13 +176,20 @@ export const InputFiles: InputFilesType = observer(
     }
 
     return (
-      <Field {...layoutProps} className={s(styles, { field: true }, className)}>
+      <Field {...layoutProps} className={className}>
         <FieldLabel title={labelTooltip || rest.title} required={required} className={s(styles, { fieldLabel: true })}>
           {children}
         </FieldLabel>
         <div className={s(styles, { inputContainer: true })}>
           <UploadArea ref={ref} {...rest} name={name} value={value} required={required} onChange={handleChange}>
-            <Button iconPlacement="start" className="tw:inline-flex" icon="/icons/import.svg" tag="div" loading={loading} variant="secondary">
+            <Button
+              iconPlacement="start"
+              className="tw:inline-flex tw:justify-center"
+              icon="/icons/import.svg"
+              tag="div"
+              loading={loading}
+              variant="secondary"
+            >
               {text}
             </Button>
           </UploadArea>
diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts
index dd28f8c316..9911b96f8f 100644
--- a/webapp/packages/core-theming/src/ThemeService.ts
+++ b/webapp/packages/core-theming/src/ThemeService.ts
@@ -21,6 +21,7 @@ import './styles/main/normalize.pure.css';
 import './styles/main/typography.pure.scss';
 import './styles/UiCheckbox.css';
 import './styles/UiIconButton.css';
+import './styles/UiSpinner.css';
 import { DEFAULT_THEME_ID, themes } from './themes.js';
 import { ThemeSettingsService } from './ThemeSettingsService.js';
 import type { ClassCollection } from './themeUtils.js';
diff --git a/webapp/packages/core-theming/src/styles/UiSpinner.css b/webapp/packages/core-theming/src/styles/UiSpinner.css
new file mode 100644
index 0000000000..7198f44247
--- /dev/null
+++ b/webapp/packages/core-theming/src/styles/UiSpinner.css
@@ -0,0 +1,5 @@
+@layer base {
+  .dbv-kit-spinner {
+    --dbv-kit-spinner-stroke-color: var(--theme-primary);
+  }
+}
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
index cb73e3ca57..c1c4e81cf8 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
@@ -47,7 +47,7 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
   );
   const data = useValuePanelImageValue({ model, resultIndex });
   const loading = model.isLoading();
-  const valueSize = bytesToSize(isResultSetContentValue(data.cellValue) ? data.cellValue.contentLength ?? 0 : 0);
+  const valueSize = bytesToSize(isResultSetContentValue(data.cellValue) ? (data.cellValue.contentLength ?? 0) : 0);
   const isTruncatedMessageDisplay = !!data.truncated && !data.src;
   const isDownloadable = isTruncatedMessageDisplay && !!data.selectedCell && data.contentAction.isDownloadable(data.selectedCell);
   const isCacheDownloading = isDownloadable && data.contentAction.isLoading(data.selectedCell);
@@ -83,7 +83,7 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
           {isTruncatedMessageDisplay && (
             <QuotaPlaceholder model={data.model} resultIndex={data.resultIndex} elementKey={data.selectedCell}>
               {isDownloadable && (
-                <Button disabled={loading} loading={isCacheDownloading} loader onClick={data.loadFullImage}>
+                <Button variant="secondary" disabled={loading} loading={isCacheDownloading} loader onClick={data.loadFullImage}>
                   {`${translate('ui_view')} (${valueSize})`}
                 </Button>
               )}