Fixed tailwindcss classes (#629)

This commit is contained in:
yuri-sakharov
2025-11-30 21:36:16 +02:00
committed by GitHub
parent 7572f00f7c
commit 73f74d77bb
9 changed files with 427 additions and 629 deletions

View File

@@ -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";

View File

@@ -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)}

View File

@@ -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={{

View File

@@ -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 variables (CSS-first approach) */
:root {
/* Fonts */
--font-roboto: "Roboto", serif;
--font-roboto-slab: "Roboto Slab", serif;
--font-inter: "Inter", serif;
--font-poppins: "Poppins", sans-serif;
--font-sf-mono:
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
@theme {
--font-roboto: "Roboto", serif;
--font-roboto-slab: "Roboto Slab", serif;
--font-sans: "Roboto", "Graphik", "sans-serif";
--font-serif: "Merriweather", "serif";
--font-inter: "Inter", serif;
--font-poppins: "Poppins", sans-serif;
--font-sf-mono:
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
/* Font weights */
--font-weight-thin: 100;
--font-weight-hairline: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-extrabold: 600;
--font-weight-bold: 700;
--font-weight-thin: 100;
--font-weight-hairline: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-extrabold: 600;
--font-weight-bold: 700;
/* Colors */
--color-body: #3d4048;
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-cluster-list: #3d4048;
--color-dark: #3d4048;
--color-tab-color: #3b3d45;
--color-primary: #1347ff;
--color-secondary: #eceff2;
--color-muted: #707583;
--color-error-border: #dc3545;
--color-error-background: #f9d7da;
--color-error-color: #842029;
--color-failed: #fc1683;
--color-deployed: #1fa470;
--color-superseded: #9195a1;
--color-pending: #5ab0ff;
--color-danger: #ff0072;
--color-text-danger: #fc1683;
--color-text-warning: #ffc107;
--color-text-success: #a4f8d7;
--color-upgradable: #0d6efd;
--color-warning: #ffa800;
--color-success: #00c2ab;
--color-border-deployed: #1be99a;
--color-revision-light: #dcdddf;
--color-revision-dark: #007bff;
--color-installed-charts-filter: #dad8ce;
--color-dropdown: #e9ecef;
--color-chart-values: #eceff2;
--color-add-repo: #0b5ed7;
--color-link-color: #0d6efd;
--color-body-background: #f4f7fa;
--color-repository: #d6effe;
--color-revision: #d6effe;
--color-header-install: #ebefff;
--color-upgrade-color: #fc1683;
}
--color-body: #3d4048;
--color-cluster-list: #3d4048;
--color-dark: #3d4048;
--color-tab-color: #3b3d45;
--color-primary: #1347ff;
--color-secondary: #eceff2;
--color-muted: #707583;
--color-error-border: #dc3545;
--color-error-background: #f9d7da;
--color-error-color: #842029;
--color-failed: #fc1683;
--color-deployed: #1fa470;
--color-superseded: #9195a1;
--color-pending: #5ab0ff;
--color-danger: #ff0072;
--color-text-danger: #fc1683;
--color-text-warning: #ffc107;
--color-text-success: #a4f8d7;
--color-upgradable: #0d6efd;
--color-warning: #ffa800;
--color-success: #00c2ab;
--color-border-deployed: #1be99a;
--color-revision-light: #dcdddf;
--color-revision-dark: #007bff;
--color-installed-charts-filter: #dad8ce;
--color-dropdown: #e9ecef;
--color-chart-values: #eceff2;
--color-add-repo: #0b5ed7;
--color-link-color: #0d6efd;
--color-body-background: #f4f7fa;
--color-repository: #d6effe;
--color-revision: #d6effe;
--color-header-install: #ebefff;
--color-upgrade-color: #fc1683;
}
/* Base layer */

View File

@@ -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();