fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-20 10:19:27 +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} isAnimationActive={false}
/> />
))} ))}
{colors.length < 12 && <ChartLegend content={<ChartLegendContent />} />} {colors.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
</LineChart> </LineChart>
</ChartContainer> </ChartContainer>
</div> </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 { $router } from "../router"
import { AuthMethodsList } from "pocketbase" import { AuthMethodsList } from "pocketbase"
import { t } from "@lingui/macro" import { t } from "@lingui/macro"
import { useTheme } from "../theme-provider"
export default function () { export default function () {
const page = useStore($router) const page = useStore($router)
const [isFirstRun, setFirstRun] = useState(false) const [isFirstRun, setFirstRun] = useState(false)
const [authMethods, setAuthMethods] = useState<AuthMethodsList>() const [authMethods, setAuthMethods] = useState<AuthMethodsList>()
const { theme } = useTheme()
useEffect(() => { useEffect(() => {
document.title = t`Login` + " / Beszel" document.title = t`Login` + " / Beszel"
@@ -45,7 +47,11 @@ export default function () {
return ( return (
<div className="min-h-svh grid items-center py-12"> <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"> <div className="text-center">
<h1 className="mb-3"> <h1 className="mb-3">
<Logo className="h-7 fill-foreground mx-auto" /> <Logo className="h-7 fill-foreground mx-auto" />

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

@@ -45,7 +45,11 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
{/* Desktop View */} {/* Desktop View */}
<nav className={cn("hidden md:grid gap-1", className)} {...props}> <nav className={cn("hidden md:grid gap-1", className)} {...props}>
{items.map((item) => ( {items.map((item) => {
if (item.admin && !isAdmin()) {
return null
}
return (
<Link <Link
key={item.href} key={item.href}
href={item.href} href={item.href}
@@ -59,7 +63,8 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
{item.icon && <item.icon className="h-4 w-4" />} {item.icon && <item.icon className="h-4 w-4" />}
{item.title} {item.title}
</Link> </Link>
))} )
})}
</nav> </nav>
</> </>
) )

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

@@ -656,7 +656,7 @@ function ChartCard({
<CardDescription>{description}</CardDescription> <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>} {cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
</CardHeader> </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} />} {<Spinner msg={empty ? t`Waiting for enough records to display` : undefined} />}
{isIntersecting && children} {isIntersecting && children}
</div> </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"> <CardContent className="max-sm:p-2">
<div className="rounded-md border overflow-hidden"> <div className="rounded-md border overflow-hidden">
<Table> <Table>
<TableHeader className="bg-muted/40"> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => { {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" Table.displayName = "Table"
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( 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" TableHeader.displayName = "TableHeader"
@@ -35,7 +37,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
<tr <tr
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}
@@ -49,7 +51,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
<th <th
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}

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

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

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

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