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 ( -
+
Test
TESTING!
@@ -17,6 +18,12 @@ export default function TestPage() { This is a not link This is a link
+
+ + + + +
); } 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); + } + } +}