diff --git a/web/package-lock.json b/web/package-lock.json
index b4e502691..adb4c91d0 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -41,6 +41,7 @@
"chartjs-plugin-trendline": "^2.1.6",
"chartjs-plugin-zoom": "^2.2.0",
"chartjs-react": "^4.3.0",
+ "clsx": "^2.1.1",
"cookies-next": "^4.2.1",
"dayjs": "^1.11.13",
"dom-to-image": "^2.6.0",
@@ -6838,6 +6839,15 @@
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
+ "node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -15918,14 +15928,6 @@
"react-dom": "^18.0 || ^19.0"
}
},
- "node_modules/react-data-grid/node_modules/clsx": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
- "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/web/package.json b/web/package.json
index 9b308749e..1b9bba938 100644
--- a/web/package.json
+++ b/web/package.json
@@ -48,6 +48,7 @@
"chartjs-plugin-trendline": "^2.1.6",
"chartjs-plugin-zoom": "^2.2.0",
"chartjs-react": "^4.3.0",
+ "clsx": "^2.1.1",
"cookies-next": "^4.2.1",
"dayjs": "^1.11.13",
"dom-to-image": "^2.6.0",
diff --git a/web/src/app/test/tailwind/page.tsx b/web/src/app/test/tailwind/page.tsx
index 886ce086b..5b8f59f47 100644
--- a/web/src/app/test/tailwind/page.tsx
+++ b/web/src/app/test/tailwind/page.tsx
@@ -1,8 +1,9 @@
import React from 'react';
+import { IndeterminateLinearLoader } from '@/components/ui/loaders/IndeterminateLinearLoader';
export default function TestPage() {
return (
-
+
);
}
diff --git a/web/src/components/ui/grid/BusterResizeRows.tsx b/web/src/components/ui/grid/BusterResizeRows.tsx
index 426e96aba..e7909959b 100644
--- a/web/src/components/ui/grid/BusterResizeRows.tsx
+++ b/web/src/components/ui/grid/BusterResizeRows.tsx
@@ -3,7 +3,7 @@
import React, { useMemo, useRef, useState } from 'react';
import { BusterResizeableGridRow } from './interfaces';
import { BusterResizeColumns } from './BusterResizeColumns';
-import classNames from 'classnames';
+import clsx from 'clsx';
import { BusterNewItemDropzone } from './_BusterBusterNewItemDropzone';
import { MIN_ROW_HEIGHT, TOP_SASH_ID, NEW_ROW_ID, MAX_ROW_HEIGHT } from './config';
import { createStyles } from 'antd-style';
@@ -57,10 +57,10 @@ export const BusterResizeRows: React.FC<{
return (
-
+
= React.memo(({ className = '', trackColor, valueColor, style, height = 2 }) => {
- const { styles, cx } = useStyles();
+ // const { styles, cx } = useStyles();
return (
);
});
IndeterminateLinearLoader.displayName = 'IndeterminateLinearLoader';
-
-const useStyles = createStyles(({ css, token }) => ({
- track: css`
- background: ${token.colorPrimary};
- opacity: 0.6;
- `
-}));
diff --git a/web/src/styles/fontsConfig.ts b/web/src/styles/fontsConfig.ts
deleted file mode 100644
index f87ae6b50..000000000
--- a/web/src/styles/fontsConfig.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const BUSTER_APP_FONT_FAMILY = 'Roobert_Pro';
diff --git a/web/src/styles/loaders.scss b/web/src/styles/loaders.scss
deleted file mode 100644
index ebe815b60..000000000
--- a/web/src/styles/loaders.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.indeterminate-progress-bar {
- height: 4px;
- //background-color: rgba(202, 202, 202, 0.2);
- width: 100%;
- overflow: hidden;
-}
-
-.indeterminate-progress-bar-value {
- width: 100%;
- height: 100%;
- background-color: rgb(112, 112, 112);
- animation: indeterminateAnimation 1s infinite linear;
- transform-origin: 0% 50%;
-}
-
-@keyframes indeterminateAnimation {
- 0% {
- transform: translateX(0) scaleX(0);
- }
- 40% {
- transform: translateX(0) scaleX(0.4);
- }
- 100% {
- transform: translateX(100%) scaleX(0.5);
- }
-}
diff --git a/web/src/styles/styles.scss b/web/src/styles/styles.scss
index 7e0e4276f..d48ed8762 100644
--- a/web/src/styles/styles.scss
+++ b/web/src/styles/styles.scss
@@ -2,7 +2,6 @@
@import './tailwind';
@import './antd';
@import './sql';
-@import './loaders';
@import './monaco';
@import '../components/ui/layout/AppSplitter/SplitPane/themes/default';
@import 'react-data-grid/lib/styles.css';
diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css
index 2f304fa6b..c6659157a 100644
--- a/web/src/styles/tailwind.css
+++ b/web/src/styles/tailwind.css
@@ -32,6 +32,8 @@
--color-primary-dark: #6d28d9;
}
+@import './tailwindAnimations.css';
+
body {
background: 'blue' !important;
}
diff --git a/web/src/styles/tailwindAnimations.css b/web/src/styles/tailwindAnimations.css
new file mode 100644
index 000000000..4e2811cd2
--- /dev/null
+++ b/web/src/styles/tailwindAnimations.css
@@ -0,0 +1,15 @@
+@theme {
+ /* animations */
+ --animate-indeterminate-progress-bar: indeterminate-progress-bar 1s infinite linear;
+ @keyframes indeterminate-progress-bar {
+ 0% {
+ transform: translateX(0) scaleX(0);
+ }
+ 40% {
+ transform: translateX(0) scaleX(0.4);
+ }
+ 100% {
+ transform: translateX(100%) scaleX(0.5);
+ }
+ }
+}