Fixed tailwindcss classes (#629)

frontend/.flowbite-react/init.tsx

@@ -10,7 +10,7 @@ import { StoreInit } from "flowbite-react/store/init";
 import React from "react";
 
 export const CONFIG = {
-  dark: true,
+  dark: false,
   prefix: "",
   version: 4,
 };

frontend/src/App.tsx

@@ -1,6 +1,5 @@
 import Header from "./layout/Header";
 import { HashRouter, Outlet, Route, Routes, useParams } from "react-router";
-import "./index.css";
 import Installed from "./pages/Installed";
 import RepositoryPage from "./pages/Repository";
 import Revision from "./pages/Revision";

frontend/src/components/InstalledPackages/InstalledPackagesHeader.tsx

@@ -32,7 +32,7 @@ export default function InstalledPackagesHeader({
 
         <div className="w-1/3">
           <input
-            className="border-installed-charts-filter  rounded-sm p-1 text-sm w-11/12"
+            className="border border-installed-charts-filter  rounded-sm p-1 text-sm w-11/12"
             placeholder="Filter..."
             type="text"
             onChange={(ev) => setFilterKey(ev.target.value)}

frontend/src/components/modal/Modal.tsx

@@ -78,7 +78,7 @@ const Modal = ({
   return createPortal(
     <>
       {isOpen && (
-        <div className="fixed inset-0 bg-gray-500 bg-black/75 transition-opacity ">
+        <div className="fixed inset-0 bg-black/75 transition-opacity ">
           <div className="flex justify-center">
             <div
               style={{

frontend/src/index.css

@@ -2,11 +2,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Inter:wght@400;500&family=Poppins:wght@500;600&family=Roboto+Slab:wght@400;700")
 layer(base);
 
-/* Tailwind directives */
 @import "tailwindcss";
 
-@plugin 'flowbite/plugin';
-@source "../node_modules/flowbite";
 @plugin "flowbite-react/plugin/tailwindcss";
 @source "../.flowbite-react/class-list.json";
 
@@ -42,73 +39,65 @@ layer(base);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
 }
 @utility error-dialog {
-  border: var(--color-error-border);
+  border: 1px solid var(--color-error-border);
   background-color: var(--color-error-background);
   color: var(--color-error-color);
 }
 
-@layer utilities {
+@theme {
-  /* Theme variables (CSS-first approach) */
+  --font-roboto: "Roboto", serif;
-  :root {
+  --font-roboto-slab: "Roboto Slab", serif;
-    /* Fonts */
+  --font-sans: "Roboto", "Graphik", "sans-serif";
-    --font-roboto: "Roboto", serif;
+  --font-serif: "Merriweather", "serif";
-    --font-roboto-slab: "Roboto Slab", serif;
+  --font-inter: "Inter", serif;
-    --font-inter: "Inter", serif;
+  --font-poppins: "Poppins", sans-serif;
-    --font-poppins: "Poppins", sans-serif;
+  --font-sf-mono:
-    --font-sf-mono:
+    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-      SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
-      monospace;
 
-    /* Font weights */
+  --font-weight-thin: 100;
-    --font-weight-thin: 100;
+  --font-weight-hairline: 100;
-    --font-weight-hairline: 100;
+  --font-weight-extralight: 200;
-    --font-weight-extralight: 200;
+  --font-weight-light: 300;
-    --font-weight-light: 300;
+  --font-weight-normal: 400;
-    --font-weight-normal: 400;
+  --font-weight-semibold: 500;
-    --font-weight-semibold: 500;
+  --font-weight-extrabold: 600;
-    --font-weight-extrabold: 600;
+  --font-weight-bold: 700;
-    --font-weight-bold: 700;
 
-    /* Colors */
+  --color-body: #3d4048;
-    --color-body: #3d4048;
+  --color-cluster-list: #3d4048;
-    --color-white: #ffffff;
+  --color-dark: #3d4048;
-    --color-gray-100: #f3f4f6;
+  --color-tab-color: #3b3d45;
-    --color-gray-200: #e5e7eb;
+  --color-primary: #1347ff;
-    --color-gray-300: #d1d5db;
+  --color-secondary: #eceff2;
-    --color-cluster-list: #3d4048;
+  --color-muted: #707583;
-    --color-dark: #3d4048;
+  --color-error-border: #dc3545;
-    --color-tab-color: #3b3d45;
+  --color-error-background: #f9d7da;
-    --color-primary: #1347ff;
+  --color-error-color: #842029;
-    --color-secondary: #eceff2;
+  --color-failed: #fc1683;
-    --color-muted: #707583;
+  --color-deployed: #1fa470;
-    --color-error-border: #dc3545;
+  --color-superseded: #9195a1;
-    --color-error-background: #f9d7da;
+  --color-pending: #5ab0ff;
-    --color-error-color: #842029;
+  --color-danger: #ff0072;
-    --color-failed: #fc1683;
+  --color-text-danger: #fc1683;
-    --color-deployed: #1fa470;
+  --color-text-warning: #ffc107;
-    --color-superseded: #9195a1;
+  --color-text-success: #a4f8d7;
-    --color-pending: #5ab0ff;
+  --color-upgradable: #0d6efd;
-    --color-danger: #ff0072;
+  --color-warning: #ffa800;
-    --color-text-danger: #fc1683;
+  --color-success: #00c2ab;
-    --color-text-warning: #ffc107;
+  --color-border-deployed: #1be99a;
-    --color-text-success: #a4f8d7;
+  --color-revision-light: #dcdddf;
-    --color-upgradable: #0d6efd;
+  --color-revision-dark: #007bff;
-    --color-warning: #ffa800;
+  --color-installed-charts-filter: #dad8ce;
-    --color-success: #00c2ab;
+  --color-dropdown: #e9ecef;
-    --color-border-deployed: #1be99a;
+  --color-chart-values: #eceff2;
-    --color-revision-light: #dcdddf;
+  --color-add-repo: #0b5ed7;
-    --color-revision-dark: #007bff;
+  --color-link-color: #0d6efd;
-    --color-installed-charts-filter: #dad8ce;
+  --color-body-background: #f4f7fa;
-    --color-dropdown: #e9ecef;
+  --color-repository: #d6effe;
-    --color-chart-values: #eceff2;
+  --color-revision: #d6effe;
-    --color-add-repo: #0b5ed7;
+  --color-header-install: #ebefff;
-    --color-link-color: #0d6efd;
+  --color-upgrade-color: #fc1683;
-    --color-body-background: #f4f7fa;
-    --color-repository: #d6effe;
-    --color-revision: #d6effe;
-    --color-header-install: #ebefff;
-    --color-upgrade-color: #fc1683;
-  }
 }
 
 /* Base layer */

frontend/src/main.tsx

@@ -1,3 +1,4 @@
+import { initThemeMode } from "flowbite-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ThemeInit } from "../.flowbite-react/init";
@@ -10,3 +11,5 @@ createRoot(document.getElementById("root") as HTMLElement).render(
     <App />
   </StrictMode>
 );
+
+initThemeMode();

frontend/vite.config.ts

@@ -1,7 +1,8 @@
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import { viteStaticCopy } from "vite-plugin-static-copy";
-import tailwindcss from "@tailwindcss/vite";
+import flowbiteReact from "flowbite-react/plugin/vite";
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
@@ -10,6 +11,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       react(),
       tailwindcss(),
+      flowbiteReact(),
       viteStaticCopy({
         targets: [
           {

frontend/yarn.lock

@@ -224,24 +224,6 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@emnapi/core@^1.5.0", "@emnapi/core@^1.6.0":
-  version "1.6.0"
-  dependencies:
-    "@emnapi/wasi-threads" "1.1.0"
-    tslib "^2.4.0"
-
-"@emnapi/runtime@^1.5.0", "@emnapi/runtime@^1.6.0":
-  version "1.6.0"
-  dependencies:
-    tslib "^2.4.0"
-
-"@emnapi/wasi-threads@^1.1.0", "@emnapi/wasi-threads@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz"
-  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
-  dependencies:
-    tslib "^2.4.0"
-
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz"
@@ -654,15 +636,6 @@
   dependencies:
     "@types/mdx" "^2.0.0"
 
-"@napi-rs/wasm-runtime@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz"
-  integrity sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==
-  dependencies:
-    "@emnapi/core" "^1.5.0"
-    "@emnapi/runtime" "^1.5.0"
-    "@tybys/wasm-util" "^0.10.1"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -1514,13 +1487,6 @@
     node-addon-api "^8.3.1"
     node-gyp-build "^4.8.4"
 
-"@tybys/wasm-util@^0.10.1":
-  version "0.10.1"
-  resolved "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz"
-  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
-  dependencies:
-    tslib "^2.4.0"
-
 "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz"
@@ -4098,7 +4064,12 @@ ieee754@^1.1.13, ieee754@^1.2.1:
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.2.0:
+  version "5.2.4"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
+ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -4807,13 +4778,6 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
 luxon@^3.7.2:
   version "3.7.2"
   resolved "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz"
@@ -5471,12 +5435,7 @@ react-intersection-observer@^10.0.0:
   resolved "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-10.0.0.tgz"
   integrity sha512-JJRgcnFQoVXmbE5+GXr1OS1NDD1gHk0HyfpLcRf0575IbJz+io8yzs4mWVlfaqOQq1FiVjLvuYAdEEcrrCfveg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -5808,29 +5767,17 @@ scheduler@^0.27.0:
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz"
   integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
 
-semver@^6.3.0, semver@^6.3.1:
+semver@^6.3.0:
   version "6.3.1"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.7, semver@^7.5.4:
+semver@^6.3.1:
-  version "7.7.3"
+  version "6.3.1"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
-  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.5.3:
+semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
-  version "7.5.4"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
-semver@^7.6.0:
-  version "7.7.3"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz"
-  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
-
-semver@^7.6.2:
   version "7.7.3"
   resolved "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz"
   integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
@@ -6502,14 +6449,11 @@ tslib@^1.8.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0:
+tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
-tslib@^2.4.0:
-  version "2.8.1"
-
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
@@ -6866,11 +6810,6 @@ yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
 yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"