makes few versions of alert

webapp/packages/core-blocks/src/Alert.module.css

@@ -1,45 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2019-2024 DBeaver Corp
- *
- * All Rights Reserved
- *
- * NOTICE:  All information contained herein is, and remains
- * the property of DBeaver Corp and its suppliers, if any.
- * The intellectual and technical concepts contained
- * herein are proprietary to DBeaver Corp and its suppliers
- * and may be covered by U.S. and Foreign Patents,
- * patents in process, and are protected by trade secret or copyright law.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from DBeaver Corp.
- */
-
-.alert {
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  background-color: rgba(34, 139, 230, 0.15);
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.body {
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-}
-
-.title {
-  color: var(--theme-primary);
-  font-weight: 500;
-  margin: 0;
-}
-
-.alert.error {
-  background-color: rgba(255, 77, 79, 0.15);
-
-  .title {
-    color: var(--theme-error);
-  }
-}

webapp/packages/core-blocks/src/Alert.tsx

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -10,28 +10,46 @@ import type { PropsWithChildren } from 'react';
 import { observer } from 'mobx-react-lite';
 
 import { useTranslate } from './localization/useTranslate.js';
-import { useS } from './useS.js';
-import { s } from './s.js';
 import { IconOrImage } from './IconOrImage.js';
-import classes from './Alert.module.css';
+
+type Size = 'small' | 'medium' | 'large';
 
 interface Props {
   title?: string;
   variant?: 'info' | 'error';
+  size?: Size;
   className?: string;
 }
 
-export const Alert = observer<PropsWithChildren<Props>>(function Alert({ title, variant = 'info', className, children }) {
+export const Alert = observer<PropsWithChildren<Props>>(function Alert({ title, variant = 'info', size = 'medium', className, children }) {
   const translate = useTranslate();
-  const styles = useS(classes);
-
   const icon = variant === 'info' ? '/icons/preload/info_icon_sm.svg' : '/icons/preload/error_icon_sm.svg';
+  const sizeClasses: Record<Size, string> = {
+    small: 'tw:gap-2.5 tw:p-3',
+    medium: 'tw:gap-3.5 tw:p-4',
+    large: 'tw:gap-[18px] tw:p-5',
+  };
+  const iconSizes: Record<Size, string> = {
+    small: 'tw:size-4',
+    medium: 'tw:size-5',
+    large: 'tw:size-6',
+  };
+  const titleSizes: Record<Size, string> = {
+    small: 'tw:text-sm',
+    medium: '',
+    large: 'tw:text-lg',
+  };
+
+  const bgColor = variant === 'info' ? 'tw:bg-[rgba(34,139,230,0.15)]' : 'tw:bg-[rgba(255,77,79,0.15)]';
+  const titleColor = variant === 'info' ? 'tw:text-[color:var(--theme-primary)]' : 'tw:text-[color:var(--theme-error)]';
 
   return (
-    <div className={s(styles, { alert: true, error: variant === 'error' }, className)} role="alert">
-      <IconOrImage icon={icon} className="tw:mt-0.5 tw:size-5" />
-      <div className={s(styles, { body: true })}>
-        <h3 className={s(styles, { title: true })}>{title ?? translate(variant === 'info' ? 'ui_information' : 'ui_error')}</h3>
+    <div className={`tw:flex tw:items-start tw:rounded ${bgColor} ${sizeClasses[size]} ${className || ''}`} role="alert">
+      <IconOrImage icon={icon} className={`tw:mt-0.5 ${iconSizes[size]}`} />
+      <div className="tw:flex tw:flex-col tw:gap-2">
+        <h3 className={`tw:font-medium tw:m-0 ${titleColor} ${titleSizes[size]}`}>
+          {title ?? translate(variant === 'info' ? 'ui_information' : 'ui_error')}
+        </h3>
         {children}
       </div>
     </div>

webapp/packages/plugin-sql-editor/src/renderQueryParamsForConfirmation.tsx

@@ -99,7 +99,7 @@ const RenderParametersForm = observer(function RenderParametersForm({
       {!sqlEditorSettingsService.disabled && (
         <SQLCodeEditor value={query} extensions={extensions} className="tw:overflow-auto tw:flex-1/3" readonly />
       )}
-      <Alert title={translate('plugin_sql_editor_bind_parameters_dialog_alert_title')} />
+      <Alert size="small" title={translate('plugin_sql_editor_bind_parameters_dialog_alert_title')} />
     </div>
   );
 });