fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style updates

Browse Source
This commit is contained in:
Henry Dollman
2024-11-12 15:03:15 -05:00
parent 3cd11d6bc4
commit 8a2e821c8f
8 changed files with 48 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
beszel/site/src/components/charts/gpu-power-chart.tsx
View File

@@ -104,7 +104,7 @@ export default memo(function GpuPowerChart({ chartData }: { chartData: ChartData
isAnimationActive={false}
/>
))}
{colors.length < 12 && <ChartLegend content={<ChartLegendContent />} />}
{colors.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
</LineChart>
</ChartContainer>
</div>

8
beszel/site/src/components/login/login.tsx
View File

@@ -7,11 +7,13 @@ import ForgotPassword from "./forgot-pass-form"
import { $router } from "../router"
import { AuthMethodsList } from "pocketbase"
import { t } from "@lingui/macro"
import { useTheme } from "../theme-provider"
export default function () {
const page = useStore($router)
const [isFirstRun, setFirstRun] = useState(false)
const [authMethods, setAuthMethods] = useState<AuthMethodsList>()
const { theme } = useTheme()
useEffect(() => {
document.title = t`Login` + " / Beszel"
@@ -45,7 +47,11 @@ export default function () {
return (
<div className="min-h-svh grid items-center py-12">
<div className="grid gap-5 w-full px-4 mx-auto" style={{ maxWidth: "22em" }}>
<div
className="grid gap-5 w-full px-4 mx-auto"
// @ts-ignore
style={{ maxWidth: "22em", "--border": theme == "light" ? "30 8% 80%" : "220 3% 20%" }}
>
<div className="text-center">
<h1 className="mb-3">
<Logo className="h-7 fill-foreground mx-auto" />

35
beszel/site/src/components/routes/settings/sidebar-nav.tsx
View File

@@ -45,21 +45,26 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
{/* Desktop View */}
<nav className={cn("hidden md:grid gap-1", className)} {...props}>
{items.map((item) => (
<Link
key={item.href}
href={item.href}
className={cn(
buttonVariants({ variant: "ghost" }),
"flex items-center gap-3",
page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
"justify-start"
)}
>
{item.icon && <item.icon className="h-4 w-4" />}
{item.title}
</Link>
))}
{items.map((item) => {
if (item.admin && !isAdmin()) {
return null
}
return (
<Link
key={item.href}
href={item.href}
className={cn(
buttonVariants({ variant: "ghost" }),
"flex items-center gap-3",
page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
"justify-start"
)}
>
{item.icon && <item.icon className="h-4 w-4" />}
{item.title}
</Link>
)
})}
</nav>
</>
)

2
beszel/site/src/components/routes/system.tsx
View File

@@ -656,7 +656,7 @@ function ChartCard({
<CardDescription>{description}</CardDescription>
{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
</CardHeader>
<div className="ps-0 w-[calc(100%-1.5em)] h-52 relative">
<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative">
{<Spinner msg={empty ? t`Waiting for enough records to display` : undefined} />}
{isIntersecting && children}
</div>

2
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -352,7 +352,7 @@ export default function SystemsTable() {
<CardContent className="max-sm:p-2">
<div className="rounded-md border overflow-hidden">
<Table>
<TableHeader className="bg-muted/40">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {

8
beszel/site/src/components/ui/table.tsx
View File

@@ -12,7 +12,9 @@ const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableE
Table.displayName = "Table"
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
({ className, ...props }, ref) => (
<thead ref={ref} className={cn("bg-muted/30 [&_tr]:border-b", className)} {...props} />
)
)
TableHeader.displayName = "TableHeader"
@@ -35,7 +37,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
<tr
ref={ref}
className={cn(
"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted",
"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:bg-muted",
className
)}
{...props}
@@ -49,7 +51,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
<th
ref={ref}
className={cn(
"h-12 px-4 text-start align-middle font-medium dark:bg-muted/25 text-muted-foreground [&:has([role=checkbox])]:pe-0",
"h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
className
)}
{...props}

24
beszel/site/src/index.css
View File

@@ -34,25 +34,25 @@
.dark {
color-scheme: dark;
--background: 220 8% 9.2%;
--background: 220 5.5% 9.5%;
--foreground: 220 2% 97%;
--card: 220 10 11.2%;
--card: 220 5.5% 11%;
--card-foreground: 220 2% 97%;
--popover: 220 8% 9.5%;
--popover: 220 5.5% 9.5%;
--popover-foreground: 220 2% 97%;
--primary: 220 2% 96%;
--primary-foreground: 220 5.88% 10%;
--secondary: 220 8% 16%;
--primary-foreground: 220 4% 10%;
--secondary: 220 4% 16%;
--secondary-foreground: 220 0% 98%;
--muted: 220 14% 16%;
--muted-foreground: 220 5% 67%;
--accent: 220 8% 15.5%;
--accent-foreground: 220 0% 98%;
--muted: 220 6% 16%;
--muted-foreground: 220 4% 67%;
--accent: 220 5% 15.5%;
--accent-foreground: 220 2% 98%;
--destructive: 0 62% 46%;
--destructive-foreground: 0 0% 97%;
--border: 220 4% 16%;
--input: 220 6% 22%;
--ring: 220 5% 80%;
--border: 220 3% 16%;
--input: 220 4% 22%;
--ring: 220 4% 80%;
--radius: 0.8rem;
}
}

2
beszel/site/tailwind.config.js
View File

@@ -8,7 +8,7 @@ module.exports = {
center: true,
padding: "1rem",
screens: {
"2xl": "1400px",
"2xl": "1420px",
},
},
extend: {