style fixes

Author: officialMECH

panda.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
 			borderColor: "white",
 		},
 		a: {
+			padding: 0,
 			color: "link",
 			transition: "color 0.25s",
 			"&:hover": {

src/components/ui/molecules/Checkbox/index.tsx

@@ -24,12 +24,13 @@ const cn = {
 			width: "1em",
 			height: "1em",
 			backgroundColor: "light",
+			borderRadius: "xs",
 		})
 	),
 	indicator: css({
 		position: "relative",
 		color: "container",
-		fontSize: "sm",
+		fontSize: "xs",
 	}),
 };
 

src/components/ui/molecules/Table/actions.tsx

@@ -50,7 +50,7 @@ const cn = {
 		base: { cursor: "pointer" },
 		variants: {
 			active: {
-				true: { color: "text" },
+				true: { color: "{text}" },
 				false: { color: "neutral" },
 			},
 		},

src/components/ui/molecules/Table/cell.tsx

@@ -40,7 +40,6 @@ const cn = {
 		textAlign: "center",
 		gap: 1,
 		height: "fit-content",
-		"& > *": { paddingX: 1 },
 	}),
 	accessor: cva({
 		variants: {

src/components/ui/organisms/Actions/index.tsx

@@ -10,12 +10,13 @@ interface Item {
 }
 interface Props {
 	items: Record<string, Item>;
+	spacing?: number;
 }
 
-function Component({ items }: PropsWithChildren<Props>) {
+function Component({ items, spacing = 2 }: PropsWithChildren<Props>) {
 	const entries = useMemo(() => Object.entries(items), [items]);
 	return (
-		<div className={cn.row}>
+		<div className={cn.row} style={{ gap: `${spacing / 4}em` }}>
 			{entries.map(([key, { icon, render, condition }]) => {
 				if (condition && !condition()) return;
 				return <Fragment key={key}>{render(Icon, { key, icon: icon })}</Fragment>;
@@ -25,7 +26,7 @@ function Component({ items }: PropsWithChildren<Props>) {
 }
 
 const cn = {
-	row: hstack({ padding: 0, gap: 3 }),
+	row: hstack({ padding: 0 }),
 };
 
 export { Component, type Item };

src/components/ui/templates/actions/row.tsx

@@ -17,7 +17,7 @@ interface Props<T> {
 	onDelete?: (ids: string[]) => void;
 }
 
-function Component<T>({ table, ids, onSubmit, onDelete }: Props<T>) {
+function Component<T>({ table, ids, onSubmit, onDelete, ...rest }: Props<T>) {
 	const { key } = useParams("/:key");
 	const { state, dispatch } = useDataset(key);
 	if (!state) throw Error("The dataset does not exist.");
@@ -84,7 +84,7 @@ function Component<T>({ table, ids, onSubmit, onDelete }: Props<T>) {
 	}, [disable, handleDelete, handleSubmit, shared]);
 
 	if (ids.length <= 0) return null;
-	return <Actions items={items} />;
+	return <Actions items={items} spacing={2} />;
 }
 
 export { Component };

src/components/ui/templates/tables/dataset.tsx

@@ -4,7 +4,6 @@ import { RowActions } from "$/components/ui/templates";
 import { characteristics, difficulties } from "$/constants/beatmap";
 import { calc, formatDuration, formatters } from "$/helpers";
 import { Link } from "$/router";
-import { css } from "$/styles/css";
 import { center } from "$/styles/patterns";
 import { token } from "$/styles/tokens";
 import { IEntry } from "$/types";
@@ -32,7 +31,7 @@ export const columns = [
 			return (
 				<Table.Cell context={c} className={center({ gap: 2 })}>
 					<Checkbox id={c.row.id} checked={c.row.getIsSelected()} onCheckedChange={(x) => c.row.toggleSelected(!!x)} />
-					<Link to={"/:key/level/:sid/:bid"} params={{ key: c.table.options.meta!.id, sid, bid }} className={css({ padding: 0 })}>
+					<Link to={"/:key/level/:sid/:bid"} params={{ key: c.table.options.meta!.id, sid, bid }}>
 						<Icon icon={faExternalLink} />
 					</Link>
 				</Table.Cell>