diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx index 5dbec643..2ddf7c18 100644 --- a/packages/desktop/src/pages/index.tsx +++ b/packages/desktop/src/pages/index.tsx @@ -215,17 +215,14 @@ export default function Page() {
-
-
- {sync.data.path.directory} +
+
+ {getFilename(sync.data.path.directory)}
-
-
- -
+
+ x.id} diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css index 7bf09685..0db3fcf3 100644 --- a/packages/ui/src/components/button.css +++ b/packages/ui/src/components/button.css @@ -45,6 +45,10 @@ border-color: var(--border-focus); background-color: var(--surface-focus); } + + [data-slot="icon"] { + color: var(--icon-strong-base); + } } &[data-variant="ghost"] { @@ -66,7 +70,10 @@ } &[data-size="normal"] { - padding: 0 6px 0 6px; + padding: 0 6px; + &[data-icon] { + padding: 0 6px 0 4px; + } font-size: var(--font-size-small); line-height: var(--line-height-large); @@ -75,7 +82,12 @@ &[data-size="large"] { height: 32px; - padding: 0 8px 0 6px; + padding: 0 8px; + + &[data-icon] { + padding: 0 8px 0 6px; + } + gap: 8px; font-family: var(--font-family-sans); diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx index cae65843..d28e25af 100644 --- a/packages/ui/src/components/button.tsx +++ b/packages/ui/src/components/button.tsx @@ -1,26 +1,32 @@ import { Button as Kobalte } from "@kobalte/core/button" -import { type ComponentProps, splitProps } from "solid-js" +import { type ComponentProps, Show, splitProps } from "solid-js" +import { Icon, IconProps } from "./icon" export interface ButtonProps extends ComponentProps, Pick, "class" | "classList" | "children"> { size?: "normal" | "large" variant?: "primary" | "secondary" | "ghost" + icon?: IconProps["name"] } export function Button(props: ButtonProps) { - const [split, rest] = splitProps(props, ["variant", "size", "class", "classList"]) + const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"]) return ( + + + {props.children} ) diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 36aa99a3..4933ebc7 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -135,6 +135,7 @@ const newIcons = { "chevron-down": ``, "arrow-up": ``, "check-small": ``, + "edit-small-2": ``, } export interface IconProps extends ComponentProps<"svg"> {