From cc29d8c7c9e2af34d1432963e61cff587aba7dc5 Mon Sep 17 00:00:00 2001 From: wadii Date: Thu, 25 Sep 2025 18:29:49 +0200 Subject: [PATCH 1/4] feat: added-preflight-false --- frontend/package-lock.json | 727 ++++++++++++++++++ frontend/package.json | 3 + frontend/postcss.config.js | 6 + frontend/tailwind.config.js | 202 +++++ .../FeatureAnalytics.container.tsx | 2 +- .../feature-summary/FeatureName.tsx | 2 +- .../components/pages/ChangeRequestsPage.tsx | 2 - frontend/web/main.js | 1 + .../web/styles/components/_list-item.scss | 2 +- frontend/web/styles/styles.scss | 1 + frontend/web/styles/tailwind.css | 3 + frontend/webpack/loaders.js | 2 +- .../webpack/webpack.config.django.prod.js | 2 +- frontend/webpack/webpack.config.local.js | 8 +- frontend/webpack/webpack.config.prod.js | 2 +- package-lock.json | 6 + 16 files changed, 962 insertions(+), 9 deletions(-) create mode 100644 frontend/postcss.config.js create mode 100644 frontend/tailwind.config.js create mode 100644 frontend/web/styles/tailwind.css create mode 100644 package-lock.json diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 44116740b4ff..3ac3f9a9491c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -140,6 +140,7 @@ "@types/react-window-infinite-loader": "^1.0.9", "@typescript-eslint/eslint-plugin": "5.4.0", "@typescript-eslint/parser": "5.4.0", + "autoprefixer": "^10.4.21", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "2.27.5", @@ -149,11 +150,13 @@ "eslint-plugin-react-hooks": "4.3.0", "eslint-plugin-sort-destructure-keys": "^1.4.0", "eslint-plugin-sort-keys-fix": "^1.1.2", + "eslint-plugin-tailwindcss": "^3.18.2", "minimist": "^1.2.8", "nodemon": "^3.0.1", "raw-loader": "0.5.1", "react-refresh": "^0.14.2", "ssgrtk": "^0.3.5", + "tailwindcss": "^3.4.17", "testcafe": "^3.2.0", "typescript": "4.6.4" }, @@ -168,6 +171,19 @@ "integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==", "license": "MIT" }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@amplitude/analytics-browser": { "version": "2.22.0", "resolved": "https://registry.npmjs.org/@amplitude/analytics-browser/-/analytics-browser-2.22.0.tgz", @@ -3098,6 +3114,84 @@ "react-dom": ">=16.8.6" } }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz", + "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.12", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz", @@ -3972,6 +4066,17 @@ "node": ">=12.0.0" } }, + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.17", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.17.tgz", @@ -5725,6 +5830,13 @@ "dev": true, "license": "MIT" }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, + "license": "MIT" + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -5976,6 +6088,44 @@ "node": ">=4" } }, + "node_modules/autoprefixer": { + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -6719,6 +6869,16 @@ "tslib": "^2.0.3" } }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001731", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz", @@ -8094,6 +8254,13 @@ "integrity": "sha512-w1Eqih66egbSr2eOoGZ+NsdF7HdxmKDo3pKFBySEGsmVvwWWNXzNCDcKrbFnd23Jf7kH1M806OfelXwu+Jk11g==", "license": "BSD-3-Clause" }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/diff": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz", @@ -8115,6 +8282,13 @@ "node": ">=8" } }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, + "license": "MIT" + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -9015,6 +9189,23 @@ "node": ">=6.0.0" } }, + "node_modules/eslint-plugin-tailwindcss": { + "version": "3.18.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.18.2.tgz", + "integrity": "sha512-QbkMLDC/OkkjFQ1iz/5jkMdHfiMu/uwujUHLAJK5iwNHD8RTxVTlsUezE0toTZ6VhybNBsk+gYGPDq2agfeRNA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-glob": "^3.2.5", + "postcss": "^8.4.4" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "tailwindcss": "^3.4.0" + } + }, "node_modules/eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -9906,6 +10097,36 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/foreground-child": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", + "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", + "dev": true, + "license": "ISC", + "dependencies": { + "cross-spawn": "^7.0.6", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/foreground-child/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/form-data": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.5.tgz", @@ -9944,6 +10165,20 @@ "node": ">= 0.6" } }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/free-email-domains": { "version": "1.2.20", "resolved": "https://registry.npmjs.org/free-email-domains/-/free-email-domains-1.2.20.tgz", @@ -12154,6 +12389,22 @@ "node": ">=0.10.0" } }, + "node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } + }, "node_modules/jake": { "version": "10.9.4", "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz", @@ -12201,6 +12452,16 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/jquery": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", @@ -13815,6 +14076,18 @@ "dev": true, "license": "ISC" }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.11", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", @@ -14004,6 +14277,16 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -14037,6 +14320,16 @@ "node": ">=0.10.0" } }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/object-inspect": { "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", @@ -14399,6 +14692,13 @@ "node": ">=6" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "dev": true, + "license": "BlueOak-1.0.0" + }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -14862,6 +15162,93 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", + "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "lilconfig": "^3.0.0", + "yaml": "^2.3.4" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, + "node_modules/postcss-load-config/node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, "node_modules/postcss-loader": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz", @@ -14963,6 +15350,46 @@ "postcss": "^8.1.0" } }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-nested/node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/postcss-selector-parser": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", @@ -16091,6 +16518,26 @@ "react-dom": ">=16.8.0" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/read-cache/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-file-relative": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/read-file-relative/-/read-file-relative-1.2.0.tgz", @@ -17459,6 +17906,39 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, + "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/string-width/node_modules/ansi-regex": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", @@ -17585,6 +18065,20 @@ "node": ">=8" } }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", @@ -17670,6 +18164,86 @@ "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", "license": "MIT" }, + "node_modules/sucrase": { + "version": "3.35.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", + "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "glob": "^10.3.10", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/sucrase/node_modules/brace-expansion": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sucrase/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sucrase/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -17727,6 +18301,78 @@ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", "license": "MIT" }, + "node_modules/tailwindcss": { + "version": "3.4.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", + "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.6", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tailwindcss/node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, + "license": "MIT" + }, + "node_modules/tailwindcss/node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/tailwindcss/node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/tapable": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz", @@ -18856,6 +19502,29 @@ "dev": true, "license": "MIT" }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -19008,6 +19677,13 @@ "utf8-byte-length": "^1.0.1" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/ts-node": { "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", @@ -20278,6 +20954,57 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, + "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/wrap-ansi/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index f0baabc601dc..17446f43247c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -165,6 +165,7 @@ "@types/react-window-infinite-loader": "^1.0.9", "@typescript-eslint/eslint-plugin": "5.4.0", "@typescript-eslint/parser": "5.4.0", + "autoprefixer": "^10.4.21", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "2.27.5", @@ -174,11 +175,13 @@ "eslint-plugin-react-hooks": "4.3.0", "eslint-plugin-sort-destructure-keys": "^1.4.0", "eslint-plugin-sort-keys-fix": "^1.1.2", + "eslint-plugin-tailwindcss": "^3.18.2", "minimist": "^1.2.8", "nodemon": "^3.0.1", "raw-loader": "0.5.1", "react-refresh": "^0.14.2", "ssgrtk": "^0.3.5", + "tailwindcss": "^3.4.17", "testcafe": "^3.2.0", "typescript": "4.6.4" }, diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 000000000000..6e41d9535350 --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + autoprefixer: {}, + tailwindcss: {}, + }, +} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js new file mode 100644 index 000000000000..0ac3462a0224 --- /dev/null +++ b/frontend/tailwind.config.js @@ -0,0 +1,202 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./web/**/*.{js,ts,jsx,tsx}', './common/**/*.{js,ts,jsx,tsx}'], + corePlugins: { + preflight: false, // This allows to fix the headers by avoiding the default tailwind reset + }, + darkMode: 'class', + plugins: [], + // Uses .dark class for dark mode + theme: { + extend: { + borderRadius: { + DEFAULT: '6px', + 'lg': '8px', + 'sm': '4px', + 'xlg': '10px', + }, + + colors: { + // Alert colors + alert: { + 'danger-bg': 'rgba(254, 239, 241)', + 'danger-dark-bg': 'rgba(34, 23, 40)', + 'info-bg': 'rgba(236, 249, 252)', + 'info-dark-bg': 'rgba(15, 32, 52)', + 'success-bg': 'rgba(39, 171, 149, 0.08)', + 'success-dark-bg': 'rgba(17, 32, 46)', + 'warning-bg': 'rgba(255, 248, 240)', + 'warning-dark-bg': 'rgba(34, 31, 39)', + }, + + // Alpha colors for overlays and subtle backgrounds + alpha: { + 'basic-16': 'rgba(101, 109, 123, 0.16)', + 'basic-24': 'rgba(101, 109, 123, 0.24)', + 'basic-32': 'rgba(101, 109, 123, 0.32)', + 'basic-48': 'rgba(101, 109, 123, 0.48)', + 'basic-8': 'rgba(101, 109, 123, 0.08)', + 'black-16': 'rgba(0, 0, 0, 0.16)', + 'black-32': 'rgba(0, 0, 0, 0.32)', + 'black-8': 'rgba(0, 0, 0, 0.08)', + 'primary-16': 'rgba(149, 108, 255, 0.16)', + 'primary-24': 'rgba(149, 108, 255, 0.24)', + 'primary-32': 'rgba(149, 108, 255, 0.32)', + 'white-16': 'rgba(255, 255, 255, 0.16)', + 'primary-8': 'rgba(149, 108, 255, 0.08)', + 'white-24': 'rgba(255, 255, 255, 0.24)', + 'white-32': 'rgba(255, 255, 255, 0.32)', + 'white-8': 'rgba(255, 255, 255, 0.08)', + 'white-48': 'rgba(255, 255, 255, 0.48)', + }, + + // Background colors + bg: { + 'dark-100': '#2d3443', + 'dark-200': '#202839', + 'dark-300': '#161d30', + 'dark-400': '#15192b', + 'dark-500': '#101628', + 'light-100': '#ffffff', + 'light-200': '#fafafb', + 'light-300': '#eff1f4', + 'light-500': '#e0e3e9', + }, + + // Body colors + body: { + DEFAULT: '#1a2634', + dark: '#ffffff', + }, + + // Checkbox colors + checkbox: { + border: 'rgba(101, 109, 123, 0.24)', + 'border-dark': 'rgba(255, 255, 255, 0.24)', + 'checked-hover-border': '#4e25db', + 'focus-bg': 'rgba(149, 108, 255, 0.08)', + 'focus-border': '#906af6', + 'hover-border': '#6837fc', + }, + + // Semantic colors + danger: { + 400: '#f57c78', + DEFAULT: '#ef4d56', + }, + + 'dark-text': '#ff0000', + + // Header colors + header: { + DEFAULT: '#1e0d26', + dark: '#ffffff', + }, + + info: '#0aaddf', + + // Input colors + input: { + bg: '#fff', + 'bg-alt': '#f7f7f7', + 'bg-dark': '#161d30', + 'border': 'rgba(101, 109, 123, 0.16)', + 'border-dark': '#15192b', + 'placeholder': 'rgba(157, 164, 174, 1)', + 'placeholder-dark': 'rgba(157, 164, 174, 1)', + }, + + // Primary colors + primary: { + 400: '#906af6', + 600: '#4e25db', + 700: '#3919b7', + 800: '#2a2054', + 900: '#1E0D26', + DEFAULT: '#6837fc', + }, + + // Secondary colors + secondary: { + 400: '#fae392', + 500: '#F7D56E', + 600: '#e5c55f', + 700: '#d4b050', + DEFAULT: '#fae392', + }, + + success: { + 400: '#56ccad', + 600: '#13787b', + DEFAULT: '#27ab95', + }, + + // Text colors + text: { + 'icon-grey': '#656d7b', + 'icon-light': '#ffffff', + 'icon-light-grey': 'rgba(157, 164, 174, 1)', + }, + + warning: '#ff9f43', + }, + + fontFamily: { + header: ['OpenSans', 'sans-serif'], + sans: ['OpenSans', 'sans-serif'], + }, + + fontSize: { + '2xl': '24px', + '3xl': '30px', + '4xl': '36px', + '5xl': '48px', + '6xl': '60px', + 'base': '16px', + 'lg': '18px', + 'sm': '14px', + 'xl': '20px', + 'xs': '12px', + }, + + height: { + 'btn': '44px', + 'btn-lg': '56px', + 'btn-sm': '40px', + 'btn-xsm': '32px', + 'input': '44px', + 'input-lg': '58px', + 'input-sm': '42px', + 'input-xsm': '34px', + 'textarea': '120px', + 'textarea-lg': '128px', + 'textarea-sm': '100px', + }, + + opacity: { + 'disabled': '0.32', + }, + + spacing: { + 'btn-x': '20px', + 'btn-x-lg': '24px', + 'btn-x-sm': '16px', + 'input-x': '16px', + 'input-x-lg': '20px', + 'input-x-sm': '14px', + 'input-y': '12px', + 'input-y-lg': '16px', + 'input-y-sm': '8px', + }, + + transitionDuration: { + 'button': '400ms', + 'highlight': '450ms', + }, + + transitionTimingFunction: { + 'material': 'cubic-bezier(0.23, 1, 0.32, 1)', + }, + }, + }, +} diff --git a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics/FeatureAnalytics.container.tsx b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics/FeatureAnalytics.container.tsx index d013121cc2dd..a501a402a405 100644 --- a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics/FeatureAnalytics.container.tsx +++ b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics/FeatureAnalytics.container.tsx @@ -17,7 +17,7 @@ const FeatureAnalytics: React.FC = ({ usageData }) => { {!!usageData &&
Flag events for last 30 days
} {!usageData && ( -
+
)} diff --git a/frontend/web/components/feature-summary/FeatureName.tsx b/frontend/web/components/feature-summary/FeatureName.tsx index 82b985841791..b5c284cd5285 100644 --- a/frontend/web/components/feature-summary/FeatureName.tsx +++ b/frontend/web/components/feature-summary/FeatureName.tsx @@ -19,7 +19,7 @@ const FeatureName: FC = ({ name }) => { wordBreak: 'break-all', }} > - {name} + {name} diff --git a/frontend/web/components/pages/ChangeRequestsPage.tsx b/frontend/web/components/pages/ChangeRequestsPage.tsx index 29466861e2bf..51a356414390 100644 --- a/frontend/web/components/pages/ChangeRequestsPage.tsx +++ b/frontend/web/components/pages/ChangeRequestsPage.tsx @@ -161,7 +161,6 @@ export const ChangeRequestsInner: FC = ({
{changeRequestsDisabled &&

{ChangeRequestsDisabledMessage}

} - = ({ users={users} /> - Date: Thu, 25 Sep 2025 18:39:42 +0200 Subject: [PATCH 2/4] feat: postcss-config --- frontend/postcss.config.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 6e41d9535350..4193e8ab57cc 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -1,6 +1,3 @@ module.exports = { - plugins: { - autoprefixer: {}, - tailwindcss: {}, - }, + plugins: [require('tailwindcss'), require('autoprefixer')], } From dfd2cffecd50c3f17ff0f4874755ecdd756a6d31 Mon Sep 17 00:00:00 2001 From: wadii Date: Thu, 25 Sep 2025 18:50:16 +0200 Subject: [PATCH 3/4] feat: tailwind-as-dependency --- frontend/package-lock.json | 53 ++------------------------------------ frontend/package.json | 4 +-- 2 files changed, 4 insertions(+), 53 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3ac3f9a9491c..59918101a881 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -32,6 +32,7 @@ "@slack/web-api": "^6.9.1", "animejs": "3.0.1", "array-find-index": "^1.0.2", + "autoprefixer": "^10.4.21", "babel-loader": "8.3.0", "babel-plugin-module-resolver": "^4.1.0", "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3", @@ -113,6 +114,7 @@ "semver": "^7.5.2", "style-loader": "1.3.0", "suppress-exit-code": "^1.0.0", + "tailwindcss": "^3.4.17", "terser-webpack-plugin": "^5.3.6", "testcafe-react-selectors": "^5.0.3", "toml": "^3.0.0", @@ -140,7 +142,6 @@ "@types/react-window-infinite-loader": "^1.0.9", "@typescript-eslint/eslint-plugin": "5.4.0", "@typescript-eslint/parser": "5.4.0", - "autoprefixer": "^10.4.21", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "2.27.5", @@ -156,7 +157,6 @@ "raw-loader": "0.5.1", "react-refresh": "^0.14.2", "ssgrtk": "^0.3.5", - "tailwindcss": "^3.4.17", "testcafe": "^3.2.0", "typescript": "4.6.4" }, @@ -175,7 +175,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", - "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -3118,7 +3117,6 @@ "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", - "dev": true, "license": "ISC", "dependencies": { "string-width": "^5.1.2", @@ -3136,7 +3134,6 @@ "version": "6.2.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz", "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==", - "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -3149,7 +3146,6 @@ "version": "6.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", - "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -3162,7 +3158,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^6.0.1" @@ -3178,7 +3173,6 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", - "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^6.1.0", @@ -4070,7 +4064,6 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "dev": true, "license": "MIT", "optional": true, "engines": { @@ -5834,7 +5827,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "dev": true, "license": "MIT" }, "node_modules/anymatch": { @@ -6092,7 +6084,6 @@ "version": "10.4.21", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", - "dev": true, "funding": [ { "type": "opencollective", @@ -6873,7 +6864,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", - "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -8258,7 +8248,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", - "dev": true, "license": "Apache-2.0" }, "node_modules/diff": { @@ -8286,7 +8275,6 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", - "dev": true, "license": "MIT" }, "node_modules/doctrine": { @@ -10101,7 +10089,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", - "dev": true, "license": "ISC", "dependencies": { "cross-spawn": "^7.0.6", @@ -10118,7 +10105,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true, "license": "ISC", "engines": { "node": ">=14" @@ -10169,7 +10155,6 @@ "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", - "dev": true, "license": "MIT", "engines": { "node": "*" @@ -12393,7 +12378,6 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", - "dev": true, "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/cliui": "^8.0.2" @@ -12456,7 +12440,6 @@ "version": "1.21.7", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", - "dev": true, "license": "MIT", "bin": { "jiti": "bin/jiti.js" @@ -14080,7 +14063,6 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "dev": true, "license": "MIT", "dependencies": { "any-promise": "^1.0.0", @@ -14281,7 +14263,6 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -14324,7 +14305,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", - "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -14696,7 +14676,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true, "license": "BlueOak-1.0.0" }, "node_modules/param-case": { @@ -15166,7 +15145,6 @@ "version": "15.1.0", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", - "dev": true, "license": "MIT", "dependencies": { "postcss-value-parser": "^4.0.0", @@ -15184,7 +15162,6 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", - "dev": true, "license": "MIT", "dependencies": { "camelcase-css": "^2.0.1" @@ -15204,7 +15181,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", - "dev": true, "funding": [ { "type": "opencollective", @@ -15240,7 +15216,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", - "dev": true, "license": "MIT", "engines": { "node": ">=14" @@ -15354,7 +15329,6 @@ "version": "6.2.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", - "dev": true, "funding": [ { "type": "opencollective", @@ -15380,7 +15354,6 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, "license": "MIT", "dependencies": { "cssesc": "^3.0.0", @@ -16522,7 +16495,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", - "dev": true, "license": "MIT", "dependencies": { "pify": "^2.3.0" @@ -16532,7 +16504,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -17911,7 +17882,6 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", @@ -17926,14 +17896,12 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true, "license": "MIT" }, "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -18070,7 +18038,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -18168,7 +18135,6 @@ "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", @@ -18191,7 +18157,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", - "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0" @@ -18201,7 +18166,6 @@ "version": "10.4.5", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", - "dev": true, "license": "ISC", "dependencies": { "foreground-child": "^3.1.0", @@ -18222,7 +18186,6 @@ "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", - "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^2.0.1" @@ -18238,7 +18201,6 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", - "dev": true, "license": "ISC", "engines": { "node": ">=16 || 14 >=14.17" @@ -18305,7 +18267,6 @@ "version": "3.4.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==", - "dev": true, "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", @@ -18343,14 +18304,12 @@ "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", - "dev": true, "license": "MIT" }, "node_modules/tailwindcss/node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", - "dev": true, "license": "MIT", "engines": { "node": ">=14" @@ -18363,7 +18322,6 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, "license": "MIT", "dependencies": { "cssesc": "^3.0.0", @@ -19506,7 +19464,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "dev": true, "license": "MIT", "dependencies": { "any-promise": "^1.0.0" @@ -19516,7 +19473,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "dev": true, "license": "MIT", "dependencies": { "thenify": ">= 3.1.0 < 4" @@ -19681,7 +19637,6 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", - "dev": true, "license": "Apache-2.0" }, "node_modules/ts-node": { @@ -20959,7 +20914,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.0.0", @@ -20977,14 +20931,12 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true, "license": "MIT" }, "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -20994,7 +20946,6 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", diff --git a/frontend/package.json b/frontend/package.json index 17446f43247c..3c318777ef0d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -57,6 +57,7 @@ "@slack/web-api": "^6.9.1", "animejs": "3.0.1", "array-find-index": "^1.0.2", + "autoprefixer": "^10.4.21", "babel-loader": "8.3.0", "babel-plugin-module-resolver": "^4.1.0", "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3", @@ -138,6 +139,7 @@ "semver": "^7.5.2", "style-loader": "1.3.0", "suppress-exit-code": "^1.0.0", + "tailwindcss": "^3.4.17", "terser-webpack-plugin": "^5.3.6", "testcafe-react-selectors": "^5.0.3", "toml": "^3.0.0", @@ -165,7 +167,6 @@ "@types/react-window-infinite-loader": "^1.0.9", "@typescript-eslint/eslint-plugin": "5.4.0", "@typescript-eslint/parser": "5.4.0", - "autoprefixer": "^10.4.21", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "2.27.5", @@ -181,7 +182,6 @@ "raw-loader": "0.5.1", "react-refresh": "^0.14.2", "ssgrtk": "^0.3.5", - "tailwindcss": "^3.4.17", "testcafe": "^3.2.0", "typescript": "4.6.4" }, From 680d781287d6e5572bbb1ef4f7be992b1fffc3ae Mon Sep 17 00:00:00 2001 From: wadii Date: Tue, 30 Sep 2025 09:17:54 +0200 Subject: [PATCH 4/4] feat: wip-experimentations --- frontend/tailwind.config.js | 11 +- .../components/navigation/TabMenu/Tabs.tsx | 2 +- .../navigation/navbars/OrganisationNavbar.tsx | 2 +- .../pages/UsersAndPermissionsPage.tsx | 2 +- frontend/web/styles/components/_input.scss | 570 +++++++++--------- frontend/web/styles/flexbox/_index.scss | 2 +- frontend/web/styles/styles.scss | 43 ++ 7 files changed, 340 insertions(+), 292 deletions(-) diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 0ac3462a0224..72f91061aaf6 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,6 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./web/**/*.{js,ts,jsx,tsx}', './common/**/*.{js,ts,jsx,tsx}'], + content: [ + './web/components/**/*.{js,ts,jsx,tsx}', + './web/pages/**/*.{js,ts,jsx,tsx}', + './common/components/**/*.{js,ts,jsx,tsx}', + ], corePlugins: { preflight: false, // This allows to fix the headers by avoiding the default tailwind reset }, @@ -42,12 +46,12 @@ module.exports = { 'primary-16': 'rgba(149, 108, 255, 0.16)', 'primary-24': 'rgba(149, 108, 255, 0.24)', 'primary-32': 'rgba(149, 108, 255, 0.32)', - 'white-16': 'rgba(255, 255, 255, 0.16)', 'primary-8': 'rgba(149, 108, 255, 0.08)', + 'white-16': 'rgba(255, 255, 255, 0.16)', 'white-24': 'rgba(255, 255, 255, 0.24)', 'white-32': 'rgba(255, 255, 255, 0.32)', - 'white-8': 'rgba(255, 255, 255, 0.08)', 'white-48': 'rgba(255, 255, 255, 0.48)', + 'white-8': 'rgba(255, 255, 255, 0.08)', }, // Background colors @@ -133,6 +137,7 @@ module.exports = { // Text colors text: { + DEFAULT: '#FF0000', 'icon-grey': '#656d7b', 'icon-light': '#ffffff', 'icon-light-grey': 'rgba(157, 164, 174, 1)', diff --git a/frontend/web/components/navigation/TabMenu/Tabs.tsx b/frontend/web/components/navigation/TabMenu/Tabs.tsx index 6616777d6a36..3c0afa8ced27 100644 --- a/frontend/web/components/navigation/TabMenu/Tabs.tsx +++ b/frontend/web/components/navigation/TabMenu/Tabs.tsx @@ -170,7 +170,7 @@ const Tabs: React.FC = ({
{overflow.length > 0 && !isMeasuring && (
= ({}) => { gap={3} key={AccountStore.getOrganisation()?.id} containerClassName='px-2 pb-1 pb-md-0 pb-mb-0 bg-faint' - className='py-0 d-flex' + className='py-0 flex' > = ({ json={users} /> - +

yolo

Manage Users and Permissions
diff --git a/frontend/web/styles/components/_input.scss b/frontend/web/styles/components/_input.scss index 310d4189253d..967852a3d81c 100644 --- a/frontend/web/styles/components/_input.scss +++ b/frontend/web/styles/components/_input.scss @@ -51,309 +51,309 @@ textarea { } } -@import '~react-datepicker/dist/react-datepicker.css'; +// @import '~react-datepicker/dist/react-datepicker.css'; -.input-container, -.react-datepicker-wrapper .react-datepicker__input-container { - font-family: $font-family; - font-size: $input-font-size; - display: inline-block; - position: relative; - transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; - background-color: transparent !important; - &.invalid hr, - &.invalid hr.highlight { - border-color: $alert-danger-border-color; - } +// .input-container, +// .react-datepicker-wrapper .react-datepicker__input-container { +// font-family: $font-family; +// font-size: $input-font-size; +// display: inline-block; +// position: relative; +// transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; +// background-color: transparent !important; +// &.invalid hr, +// &.invalid hr.highlight { +// border-color: $alert-danger-border-color; +// } - label { - position: absolute; - line-height: 22px; - top: 38px; - transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; - z-index: 1; - cursor: text; - transform: perspective(1px) scale(0.75) translate3d(0px, -28px, 0px); - transform-origin: left top 0px; - pointer-events: none; - margin-bottom: 0.5rem; - -webkit-user-select: none; - } - input.input, - input[type='text'], - input[type='password'] { - width: 100%; - border: 1px solid $input-border-color; - outline: none; - box-shadow: none; - background-image: none; - padding: $input-padding; - -webkit-appearance: none; - background-image: none; - border-radius: $border-radius; +// label { +// position: absolute; +// line-height: 22px; +// top: 38px; +// transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; +// z-index: 1; +// cursor: text; +// transform: perspective(1px) scale(0.75) translate3d(0px, -28px, 0px); +// transform-origin: left top 0px; +// pointer-events: none; +// margin-bottom: 0.5rem; +// -webkit-user-select: none; +// } +// input.input, +// input[type='text'], +// input[type='password'] { +// width: 100%; +// border: 1px solid $input-border-color; +// outline: none; +// box-shadow: none; +// background-image: none; +// padding: $input-padding; +// -webkit-appearance: none; +// background-image: none; +// border-radius: $border-radius; - &:read-only { - color: #777; - } - &:disabled { - border: 1px solid $basic-alpha-8; - color: $text-icon-light-grey; - & + .input-icon-right { - path { - fill: $text-icon-light-grey; - opacity: $btn-disabled-opacity; - } - } - } - } +// &:read-only { +// color: #777; +// } +// &:disabled { +// border: 1px solid $basic-alpha-8; +// color: $text-icon-light-grey; +// & + .input-icon-right { +// path { +// fill: $text-icon-light-grey; +// opacity: $btn-disabled-opacity; +// } +// } +// } +// } - input, - input:-webkit-autofill, - textarea:-webkit-autofill, - select:-webkit-autofill { - font-weight: $input-font-weight; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - padding: 0px; - position: relative; - width: 100%; - border: none; - outline: none; - box-shadow: none; - background-image: none; - -webkit-appearance: none; - background-image: none; - color: rgba(0, 0, 0, 0.870588); - height: 100%; - background-color: $input-bg; - &::-webkit-input-placeholder { - font-family: $font-family; - font-weight: 400; - } - } +// input, +// input:-webkit-autofill, +// textarea:-webkit-autofill, +// select:-webkit-autofill { +// font-weight: $input-font-weight; +// -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +// padding: 0px; +// position: relative; +// width: 100%; +// border: none; +// outline: none; +// box-shadow: none; +// background-image: none; +// -webkit-appearance: none; +// background-image: none; +// color: rgba(0, 0, 0, 0.870588); +// height: 100%; +// background-color: $input-bg; +// &::-webkit-input-placeholder { +// font-family: $font-family; +// font-weight: 400; +// } +// } - hr { - border-bottom-width: 1px; - border-style: none none solid; - border-color: $input-border-color; - bottom: 8px; - box-sizing: content-box; - margin: 0px; - position: absolute; - width: 100%; - &.highlight { - border-bottom-width: 2px; - border-color: $input-border-highlight-color; - transform: scaleX(0); - transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; - } - } +// hr { +// border-bottom-width: 1px; +// border-style: none none solid; +// border-color: $input-border-color; +// bottom: 8px; +// box-sizing: content-box; +// margin: 0px; +// position: absolute; +// width: 100%; +// &.highlight { +// border-bottom-width: 2px; +// border-color: $input-border-highlight-color; +// transform: scaleX(0); +// transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; +// } +// } - &.error hr { - border-color: $alert-danger-border-color; - } +// &.error hr { +// border-color: $alert-danger-border-color; +// } - &.error, - &.focused { - hr.highlight { - transform: scaleX(1); - } - } -} +// &.error, +// &.focused { +// hr.highlight { +// transform: scaleX(1); +// } +// } +// } -.dark .input-container, -.dark .react-datepicker-wrapper .react-datepicker__input-container { - input, - input:-webkit-autofill, - textarea:-webkit-autofill, - select:-webkit-autofill { - background-color: $input-bg-dark; - color: $body-color-dark; - } -} -.dark textarea { - background-color: $input-bg-dark; - color: $body-color-dark; - border-color: $input-bg-dark; - &::placeholder { - color: $input-placeholder-color-dark !important; - } - &:hover { - border-color: $white-alpha-8; - } - &:focus { - border-color: $primary; - } -} +// .dark .input-container, +// .dark .react-datepicker-wrapper .react-datepicker__input-container { +// input, +// input:-webkit-autofill, +// textarea:-webkit-autofill, +// select:-webkit-autofill { +// background-color: $input-bg-dark; +// color: $body-color-dark; +// } +// } +// .dark textarea { +// background-color: $input-bg-dark; +// color: $body-color-dark; +// border-color: $input-bg-dark; +// &::placeholder { +// color: $input-placeholder-color-dark !important; +// } +// &:hover { +// border-color: $white-alpha-8; +// } +// &:focus { +// border-color: $primary; +// } +// } -.input-container.password, -.input-container.search { - input.input { - padding-right: 46px; - &-sm { - padding-right: 40px; - } - &-xsm { - padding-right: 36px; - } - &-lg { - padding-right: 48px; - } - } -} +// .input-container.password, +// .input-container.search { +// input.input { +// padding-right: 46px; +// &-sm { +// padding-right: 40px; +// } +// &-xsm { +// padding-right: 36px; +// } +// &-lg { +// padding-right: 48px; +// } +// } +// } -.input-icon-right { - position: absolute; - right: 12px; - top: 12px; - &:hover { - path { - fill: $primary; - } - } - &.input-sm { - top: 9px; - } - &.input-xsm { - top: 7px; - right: 8px; - } - &.input-lg { - top: 16px; - } -} -.react-datepicker-time__input input { - border: 1px solid $input-border-color; - padding: 2px; - border-radius: $border-radius; - color: white; - background-color: $primary; - &::-webkit-calendar-picker-indicator { - filter: invert(48%) sepia(13%) saturate(0%) hue-rotate(130deg) - brightness(200%) contrast(80%); - } -} -.dark { - .react-datepicker-time__input input { - border: 1px solid $input-border-color; - padding: 2px; - border-radius: $border-radius; - color: white; - background-color: $primary900; - &::-webkit-calendar-picker-indicator { - filter: invert(48%) sepia(13%) saturate(0%) hue-rotate(130deg) - brightness(200%) contrast(80%); - } - } -} +// .input-icon-right { +// position: absolute; +// right: 12px; +// top: 12px; +// &:hover { +// path { +// fill: $primary; +// } +// } +// &.input-sm { +// top: 9px; +// } +// &.input-xsm { +// top: 7px; +// right: 8px; +// } +// &.input-lg { +// top: 16px; +// } +// } +// .react-datepicker-time__input input { +// border: 1px solid $input-border-color; +// padding: 2px; +// border-radius: $border-radius; +// color: white; +// background-color: $primary; +// &::-webkit-calendar-picker-indicator { +// filter: invert(48%) sepia(13%) saturate(0%) hue-rotate(130deg) +// brightness(200%) contrast(80%); +// } +// } +// .dark { +// .react-datepicker-time__input input { +// border: 1px solid $input-border-color; +// padding: 2px; +// border-radius: $border-radius; +// color: white; +// background-color: $primary900; +// &::-webkit-calendar-picker-indicator { +// filter: invert(48%) sepia(13%) saturate(0%) hue-rotate(130deg) +// brightness(200%) contrast(80%); +// } +// } +// } -.dark { - .MuiFormControl-root > div { - &:hover:before { - border-color: $input-bg-dark !important; - } - &:before { - border-color: $input-bg-dark; - } - &:before { - border-color: $input-bg-dark; - } - } - .MuiInputBase-input { - color: $body-color-dark; - } - .MuiChip-root { - color: $dark-highlight-color; - background: $panel-bg-dark; +// .dark { +// .MuiFormControl-root > div { +// &:hover:before { +// border-color: $input-bg-dark !important; +// } +// &:before { +// border-color: $input-bg-dark; +// } +// &:before { +// border-color: $input-bg-dark; +// } +// } +// .MuiInputBase-input { +// color: $body-color-dark; +// } +// .MuiChip-root { +// color: $dark-highlight-color; +// background: $panel-bg-dark; - &:hover { - background: $panel-bg-dark; - svg { - color: $hr-border-color; - } - } - svg { - color: $primary900; - } - } -} +// &:hover { +// background: $panel-bg-dark; +// svg { +// color: $hr-border-color; +// } +// } +// svg { +// color: $primary900; +// } +// } +// } -.dark { - input[type='checkbox'] { - & + label .checkbox { - border: 1px solid $checkbox-border-color-dark; - background-color: transparent; - } - &:checked + label .checkbox { - border: none; - background-color: white; - } - & + label { - color: $text-icon-light; - } - } -} +// .dark { +// input[type='checkbox'] { +// & + label .checkbox { +// border: 1px solid $checkbox-border-color-dark; +// background-color: transparent; +// } +// &:checked + label .checkbox { +// border: none; +// background-color: white; +// } +// & + label { +// color: $text-icon-light; +// } +// } +// } -input[type='checkbox'] { - display: none; +// input[type='checkbox'] { +// display: none; - & + label { - font-size: $font-sm; - font-weight: normal; - line-height: $line-height-sm; - } +// & + label { +// font-size: $font-sm; +// font-weight: normal; +// line-height: $line-height-sm; +// } - &:focus + label .checkbox { - background-color: $checkbox-focus-bg; - border: 1px solid $checkbox-focus-border-color; - box-shadow: 0px 0px 0px 3px rgba(51, 102, 255, 0.32); - } +// &:focus + label .checkbox { +// background-color: $checkbox-focus-bg; +// border: 1px solid $checkbox-focus-border-color; +// box-shadow: 0px 0px 0px 3px rgba(51, 102, 255, 0.32); +// } - &:disabled + label { - opacity: $btn-disabled-opacity; - &:hover .checkbox { - border: 1px solid $checkbox-border-color; - } - } - &:checked:disabled + label { - opacity: $btn-disabled-opacity; - &:hover .checkbox { - border: none; - path { - fill: $primary; - } - } - } +// &:disabled + label { +// opacity: $btn-disabled-opacity; +// &:hover .checkbox { +// border: 1px solid $checkbox-border-color; +// } +// } +// &:checked:disabled + label { +// opacity: $btn-disabled-opacity; +// &:hover .checkbox { +// border: none; +// path { +// fill: $primary; +// } +// } +// } - & + label:hover .checkbox { - border: 1px solid $checkbox-hover-border-color; - } +// & + label:hover .checkbox { +// border: 1px solid $checkbox-hover-border-color; +// } - &:checked + label .checkbox { - border: none; - } +// &:checked + label .checkbox { +// border: none; +// } - &:checked + label:hover .checkbox { - path { - fill: $checkbox-checked-hover-border-color; - } - } - &:checked:focus + label .checkbox { - box-shadow: none; - path { - fill: $checkbox-focus-border-color; - } - } +// &:checked + label:hover .checkbox { +// path { +// fill: $checkbox-checked-hover-border-color; +// } +// } +// &:checked:focus + label .checkbox { +// box-shadow: none; +// path { +// fill: $checkbox-focus-border-color; +// } +// } - & + label .checkbox { - display: inline-block; - width: $checkbox-width; - height: $checkbox-width; - border: 1px solid $checkbox-border-color; - border-radius: $border-radius-sm; - vertical-align: bottom; - background-color: white; - svg { - vertical-align: baseline; - } - } -} +// & + label .checkbox { +// display: inline-block; +// width: $checkbox-width; +// height: $checkbox-width; +// border: 1px solid $checkbox-border-color; +// border-radius: $border-radius-sm; +// vertical-align: bottom; +// background-color: white; +// svg { +// vertical-align: baseline; +// } +// } +// } diff --git a/frontend/web/styles/flexbox/_index.scss b/frontend/web/styles/flexbox/_index.scss index 8a569ff3cde9..a01f9a6e4b5b 100644 --- a/frontend/web/styles/flexbox/_index.scss +++ b/frontend/web/styles/flexbox/_index.scss @@ -2,7 +2,7 @@ .flex { @include flexbox(); - @include flex-direction(column) + // @include flex-direction(column) } .flex-row { diff --git a/frontend/web/styles/styles.scss b/frontend/web/styles/styles.scss index f0e1c0c6efe0..a395fd9d6d8c 100644 --- a/frontend/web/styles/styles.scss +++ b/frontend/web/styles/styles.scss @@ -1,3 +1,4 @@ +@tailwind base; @import "tailwind.css"; @import "variables"; @import "3rdParty/index"; @@ -6,6 +7,48 @@ @import "project/index"; @import "project/segments"; +:root { + --text-primary: theme('colors.red.600'); + --primary-font: OpenSans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.dark { + --text-primary: theme('colors.yellow.600'); +} + +@layer base { + body { + margin: 0; + font-family: var(--primary-font); + font-size: 14px; + // font-weight: 400; + line-height: 1.5; + color: var(--bs-dark); + background-color: var(--bs-white); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + a { + font-weight: 500; + } + p { + color: var(--text-primary) !important; + } +} + +// Add these new rules +.tabs { + hr { + border-color: var(--tab-border); + } + + .pill { + background: var(--tab-pill-bg); + color: var(--tab-text) !important; + border-color: var(--tab-border); + } +} + .butter-bar { margin-top: 8px; margin-bottom: 4px;