ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests Packages Releases Activity

improve dark mode styling

Browse Source
This commit is contained in:
mbecker20
2024-04-09 23:36:38 -07:00
parent 6394275570
commit 215b35575d
8 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/config/util.tsx
View File

@@ -135,8 +135,7 @@ export const DoubleInput = <
onChange={(e) => onRightChange(e.target.value as T[R], i)}
/>
<Button
variant="outline"
// intent="warning"
variant="secondary"
onClick={() => onRemove(i)}
>
<MinusCircle className="w-4 h-4" />
@@ -144,8 +143,7 @@ export const DoubleInput = <
</div>
))}
<Button
variant="outline"
// intent="success"
variant="secondary"
className="flex items-center gap-2 w-[200px] place-self-end"
onClick={onAdd}
>

4
frontend/src/components/resources/build/config.tsx
View File

@@ -190,7 +190,7 @@ const ExtraArgs = ({
}}
/>
<Button
variant="outline"
variant="secondary"
onClick={() =>
set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
}
@@ -201,7 +201,7 @@ const ExtraArgs = ({
))}
<Button
variant="outline"
variant="secondary"
className="flex items-center gap-2 w-[200px] place-self-end"
onClick={() => set({ extra_args: [...args, ""] })}
>

4
frontend/src/components/resources/deployment/config/components/extra-args.tsx
View File

@@ -25,7 +25,7 @@ export const ExtraArgs = ({
}}
/>
<Button
variant="outline"
variant="secondary"
onClick={() =>
set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
}
@@ -36,7 +36,7 @@ export const ExtraArgs = ({
))}
<Button
variant="outline"
variant="secondary"
className="flex items-center gap-2 w-[200px] place-self-end"
onClick={() => set({ extra_args: [...args, ""] })}
>

2
frontend/src/components/topbar.tsx
View File

@@ -43,7 +43,7 @@ import {
export const Topbar = () => {
return (
<div className="sticky top-0 border-b bg-background z-50 w-full">
<div className="sticky top-0 border-b z-50 w-full bg-card text-card-foreground shadow">
<div className="container flex items-center justify-between py-4 gap-8">
<div className="flex items-center gap-4">
<Link to={"/"} className="text-2xl tracking-widest">

5
frontend/src/components/updates/resource.tsx
View File

@@ -17,6 +17,7 @@ import { UpdateDetails, UpdateUser } from "./details";
import { UpdateStatus } from "@monitor/client/dist/types";
import { fmt_date, fmt_version } from "@lib/formatting";
import { version_is_none } from "@lib/utils";
import { Card } from "@ui/card";
const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
const Icon = () => {
@@ -28,7 +29,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
return (
<UpdateDetails id={update.id}>
<div className="p-4 border rounded-md flex justify-between cursor-pointer hover:bg-accent transition-colors text-sm">
<Card className="p-4 flex justify-between cursor-pointer hover:bg-accent/50 transition-colors text-sm">
<div>
<div className="flex items-center gap-2">
<Icon />
@@ -49,7 +50,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
<UpdateUser user_id={update.operator} />
</div>
</div>
</div>
</Card>
</UpdateDetails>
);
};

2
frontend/src/components/util.tsx
View File

@@ -83,7 +83,7 @@ export const ActionButton = forwardRef<
) => (
<Button
size={size}
variant={variant || "outline"}
variant={variant || "secondary"}
className={cn("flex items-center justify-between w-[170px]", className)}
onClick={onClick}
onBlur={onBlur}

30
frontend/src/globals.css
View File

@@ -22,17 +22,16 @@
font-family: Inter;
}
pre {
@apply bg-accent/50 min-h-full text-xs p-4 whitespace-pre-wrap scroll-m-4 break-all rounded-md;
@apply bg-card text-card-foreground border rounded-xl min-h-full text-xs p-4 whitespace-pre-wrap scroll-m-4 break-all;
}
}
/*
HUE: 0, 220.1
SAT: 0.1%, 20.1%, 40.1%, 60.1%, 80.1%
LIT: 5.2%, 11.2%, 20.2%, 40.2%, 60.2%, 80.2% 90.2%, 98.2%
*/
@layer base {
/*
HUE: 0, 220.1
SAT: 0.1%, 20.1%, 40.1%, 60.1%, 80.1%
LIT: 5.2%, 11.2%, 20.2%, 40.2%, 60.2%, 80.2% 90.2%, 98.2%
*/
:root {
--background: 220.1 0.1% 98.3%;
--foreground: 220.1 40.1% 5.2%;
@@ -65,14 +64,19 @@
--radius: 0.5rem;
}
/*
HUE: 0, 220.1
SAT: 0.1%, 20.1%, 40.1%, 60.1%, 80.1%
LIT: 6.2%, 11.2%, 20.2%, 40.2%, 60.2%, 80.2% 90.2%, 98.2%
*/
.dark {
--background: 220.1 40.1% 5.2%;
--background: 220.1 40.1% 6.2%;
--foreground: 220.1 40.1% 98.2%;
--card: 220.1 40.1% 5.2%;
--card: 220.1 40.1% 8.2%;
--card-foreground: 220.1 40.1% 98.2%;
--popover: 220.1 40.1% 5.2%;
--popover: 220.1 40.1% 6.2%;
--popover-foreground: 220.1 40.1% 98.2%;
--primary: 220.1 40.1% 98.2%;
@@ -82,7 +86,7 @@
--secondary-foreground: 220.1 40.1% 98.2%;
--muted: 220.1 40.1% 20.2%;
--muted-foreground: 220.1 20.1% 65.1%;
--muted-foreground: 220.1 20.1% 60.2;
--accent: 220.1 40.1% 20.2%;
--accent-foreground: 220.1 40.1% 98.2%;
@@ -90,8 +94,8 @@
--destructive: 0 60.1% 30.6%;
--destructive-foreground: 220.1 40.1% 98.2%;
--border: 220.1 40.1% 20.2%;
--input: 220.1 40.1% 20.2%;
--border: 220.1 40.1% 17.2%;
--input: 220.1 40.1% 15.2%;
--ring: 220.1 40.1% 80.2%;
}
}

2
frontend/src/ui/data-table.tsx
View File

@@ -38,7 +38,7 @@ export function DataTable<TData, TValue>({
});
return (
<div className="rounded-md border">
<div className="rounded-xl border bg-card text-card-foreground shadow">
<Table className="table-fixed">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (