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>

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);

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>

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>

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';

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);
+  }
+}

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>
               )}