diff --git a/src/app/globals.css b/src/app/globals.css index 6cf72ed..02fd020 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,125 +1,189 @@ @import "tailwindcss"; @import "tw-animate-css"; +/* @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"); */ -@custom-variant dark (&:is(.dark *)); - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); - --color-card: var(--card); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --radius-2xl: calc(var(--radius) + 8px); - --radius-3xl: calc(var(--radius) + 12px); - --radius-4xl: calc(var(--radius) + 16px); -} - -:root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); -} - -.dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); -} - +/* ========================= + Theme variables +========================= */ @layer base { - * { - @apply border-border outline-ring/50; + :root { + --background: 0 0% 4%; + --foreground: 0 0% 95%; + + --card: 0 0% 7%; + --card-foreground: 0 0% 95%; + + --popover: 0 0% 7%; + --popover-foreground: 0 0% 95%; + + --primary: 180 100% 50%; + --primary-foreground: 0 0% 4%; + + --secondary: 0 0% 12%; + --secondary-foreground: 0 0% 95%; + + --muted: 0 0% 15%; + --muted-foreground: 0 0% 55%; + + --accent: 0 0% 12%; + --accent-foreground: 0 0% 95%; + + --destructive: 0 70% 50%; + --destructive-foreground: 0 0% 95%; + + --success: 142 70% 45%; + --success-foreground: 0 0% 4%; + + --warning: 38 92% 50%; + --warning-foreground: 0 0% 4%; + + --border: 0 0% 18%; + --input: 0 0% 12%; + --ring: 180 100% 50%; + + --radius: 0.25rem; + + --sidebar-background: 0 0% 5%; + --sidebar-foreground: 0 0% 70%; + --sidebar-primary: 180 100% 50%; + --sidebar-primary-foreground: 0 0% 4%; + --sidebar-accent: 0 0% 10%; + --sidebar-accent-foreground: 0 0% 95%; + --sidebar-border: 0 0% 15%; + --sidebar-ring: 180 100% 50%; + + --chart-1: 180 100% 50%; + --chart-2: 142 70% 45%; + --chart-3: 38 92% 50%; + --chart-4: 0 70% 50%; + --chart-5: 270 70% 50%; } + + .dark { + --background: 0 0% 4%; + --foreground: 0 0% 95%; + --card: 0 0% 7%; + --card-foreground: 0 0% 95%; + --popover: 0 0% 7%; + --popover-foreground: 0 0% 95%; + --primary: 180 100% 50%; + --primary-foreground: 0 0% 4%; + --secondary: 0 0% 12%; + --secondary-foreground: 0 0% 95%; + --muted: 0 0% 15%; + --muted-foreground: 0 0% 55%; + --accent: 0 0% 12%; + --accent-foreground: 0 0% 95%; + --destructive: 0 70% 50%; + --destructive-foreground: 0 0% 95%; + --border: 0 0% 18%; + --input: 0 0% 12%; + --ring: 180 100% 50%; + } + + * { + border-color: hsl(var(--border)); + } + body { - @apply bg-background text-foreground; + background-color: hsl(var(--background)); + color: hsl(var(--foreground)); + font-family: Inter, system-ui, sans-serif; + -webkit-font-smoothing: antialiased; + } +} + +/* ========================= + Components +========================= */ +@layer components { + .terminal-text { + @apply font-mono text-sm tracking-tight; + } + + .stat-value { + @apply font-mono text-2xl font-semibold tracking-tight; + } + + .status-dot { + @apply w-2 h-2 rounded-full; + } + + .status-running { + background-color: hsl(var(--success)); + box-shadow: 0 0 8px hsl(var(--success) / 0.5); + } + + .status-stopped { + background-color: hsl(var(--muted-foreground)); + } + + .status-error { + background-color: hsl(var(--destructive)); + box-shadow: 0 0 8px hsl(var(--destructive) / 0.5); + } + + .status-pending { + background-color: hsl(var(--warning)); + box-shadow: 0 0 8px hsl(var(--warning) / 0.5); + } + + .log-line { + @apply font-mono text-xs py-0.5 px-2 transition-colors; + } + + .log-line:hover { + background-color: hsl(var(--muted) / 0.5); + } + + .log-timestamp { + margin-right: 0.75rem; + color: hsl(var(--muted-foreground)); + } + + .log-info { + color: hsl(var(--primary)); + } + + .log-warn { + color: hsl(var(--warning)); + } + + .log-error { + color: hsl(var(--destructive)); + } + + .data-table-row { + border-bottom: 1px solid hsl(var(--border)); + } + + .data-table-row:hover { + background-color: hsl(var(--muted) / 0.3); + } + + .metric-bar { + height: 0.375rem; + border-radius: 9999px; + background-color: hsl(var(--muted)); + overflow: hidden; + } + + .metric-bar-fill { + height: 100%; + border-radius: 9999px; + transition: all 500ms; + } +} + +/* ========================= + Utilities +========================= */ +@layer utilities { + .glow-primary { + box-shadow: 0 0 20px hsl(var(--primary) / 0.15); + } + + .border-glow { + box-shadow: inset 0 0 0 1px hsl(var(--border)); } } diff --git a/src/components/dashboard/DashboardSidebar.tsx b/src/components/dashboard/DashboardSidebar.tsx index d3cbf27..e66ec3b 100644 --- a/src/components/dashboard/DashboardSidebar.tsx +++ b/src/components/dashboard/DashboardSidebar.tsx @@ -17,7 +17,7 @@ import { usePathname } from "next/navigation"; import Link from "next/link"; const navigation = [ - { name: "Overview", href: "/", icon: LayoutGrid }, + { name: "Overview", href: "/overview", icon: LayoutGrid }, { name: "Applications", href: "/applications", icon: Box }, { name: "Containers", href: "/containers", icon: Terminal }, { name: "Nodes", href: "/nodes", icon: Server }, diff --git a/tailwind.config.ts b/tailwind.config.ts index 0332543..e394a31 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,112 +1,72 @@ import type { Config } from "tailwindcss"; -export default { - darkMode: ["class"], - content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], - prefix: "", +const config: Config = { + // darkMode: ["class"], + content: ["./src/**/*.{ts,tsx,js,jsx}", "./app/**/*.{ts,tsx,js,jsx}"], theme: { - container: { - center: true, - padding: "1rem", - screens: { - "2xl": "1600px", - }, - }, extend: { - fontFamily: { - sans: ["Inter", "system-ui", "sans-serif"], - mono: ["JetBrains Mono", "monospace"], - }, colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - success: { - DEFAULT: "hsl(var(--success))", - foreground: "hsl(var(--success-foreground))", - }, - warning: { - DEFAULT: "hsl(var(--warning))", - foreground: "hsl(var(--warning-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, + card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, - sidebar: { - DEFAULT: "hsl(var(--sidebar-background))", - foreground: "hsl(var(--sidebar-foreground))", - primary: "hsl(var(--sidebar-primary))", - "primary-foreground": "hsl(var(--sidebar-primary-foreground))", - accent: "hsl(var(--sidebar-accent))", - "accent-foreground": "hsl(var(--sidebar-accent-foreground))", - border: "hsl(var(--sidebar-border))", - ring: "hsl(var(--sidebar-ring))", + + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", }, - chart: { - "1": "hsl(var(--chart-1))", - "2": "hsl(var(--chart-2))", - "3": "hsl(var(--chart-3))", - "4": "hsl(var(--chart-4))", - "5": "hsl(var(--chart-5))", + + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", }, + + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + + success: { + DEFAULT: "hsl(var(--success))", + foreground: "hsl(var(--success-foreground))", + }, + + warning: { + DEFAULT: "hsl(var(--warning))", + foreground: "hsl(var(--warning-foreground))", + }, + + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", }, + borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - "pulse-glow": { - "0%, 100%": { opacity: "1" }, - "50%": { opacity: "0.5" }, - }, - "slide-in": { - from: { opacity: "0", transform: "translateY(-4px)" }, - to: { opacity: "1", transform: "translateY(0)" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "pulse-glow": "pulse-glow 2s ease-in-out infinite", - "slide-in": "slide-in 0.2s ease-out", - }, }, }, plugins: [require("tailwindcss-animate")], -} satisfies Config; +}; + +export default config;