diff --git a/src/app.css b/src/app.css index 21347a2..7ea5445 100644 --- a/src/app.css +++ b/src/app.css @@ -3352,8 +3352,8 @@ align-items: end; gap: 10px; } - .compare-field { display: grid; gap: 4px; min-width: 0; } - .compare-field span { color: var(--color-ink-faint); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } + .compare-field { display: grid; gap: 6px; min-width: 0; } + .compare-field > span { color: var(--color-ink-muted); font-size: 10.5px; font-weight: 750; } .compare-target-help { display: flex; align-items: flex-start; @@ -3527,8 +3527,8 @@ .compare-dialog-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .compare-dialog-title > div { min-width: 0; } .compare-dialog-mark { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); border-radius: 10px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, transparent); } - .compare-dialog-title h2 { margin: 0; color: var(--color-accent); font-size: 18px; font-weight: 700; line-height: 1.2; } - .compare-dialog-title p { margin: 3px 0 0; color: var(--color-ink); font-size: 11px; font-weight: 400; line-height: 1.35; } + .compare-dialog-title h2 { margin: 0; color: var(--color-ink); font-size: 18px; font-weight: 700; line-height: 1.2; } + .compare-dialog-title p { margin: 3px 0 0; color: var(--color-ink-dim); font-size: 11px; font-weight: 400; line-height: 1.35; } .global-search-dialog { width: min(1180px, calc(100vw - 32px)); height: min(840px, calc(100vh - 32px)); @@ -3553,8 +3553,8 @@ .compare-select-shell { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; } .compare-select-body { display: grid; align-content: start; gap: 12px; min-height: 0; padding: 18px 20px 20px; overflow: auto; } .compare-target-panel { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: color-mix(in srgb, var(--app-settings-row-bg) 72%, transparent); } - .compare-target-heading h3 { margin: 0; color: var(--color-accent); font-size: 18px; font-weight: 700; line-height: 1.2; } - .compare-target-heading p { margin: 4px 0 0; color: var(--color-ink); font-size: 11px; font-weight: 400; line-height: 1.45; } + .compare-target-heading h3 { margin: 0; color: var(--color-ink); font-size: 14px; font-weight: 700; line-height: 1.2; } + .compare-target-heading p { margin: 3px 0 0; color: var(--color-ink-dim); font-size: 10.5px; font-weight: 400; line-height: 1.4; } .compare-arrow-shell { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border-subtle); border-radius: 9px; color: var(--color-accent); background: var(--color-surface-raised); } .compare-select-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 11px 16px; border-top: 1px solid var(--color-border-subtle); background: var(--app-dialog-chrome); } .compare-select-footer > span { color: var(--color-ink-faint); font-size: 9.5px; } diff --git a/src/lib/components/CompareSelectDialog.svelte b/src/lib/components/CompareSelectDialog.svelte index a6e5277..bbf7980 100644 --- a/src/lib/components/CompareSelectDialog.svelte +++ b/src/lib/components/CompareSelectDialog.svelte @@ -47,9 +47,21 @@ let remoteBranches = $derived(branches.filter((branch) => branch.remote)); let targetCount = $derived(branches.length + commits.length); let compareOptions = $derived([ - ...localBranches.map((branch) => ({ value: branchValue(branch), label: `${branch.name}${branch.current ? " (current)" : ""}`, group: "Branches - Local" })), - ...remoteBranches.map((branch) => ({ value: branchValue(branch), label: branch.name, group: "Branches - Remote" })), - ...commits.map((item) => ({ value: item.hash, label: commitOptionLabel(item), group: "Commits" })), + ...localBranches.map((branch) => ({ + value: branchValue(branch), + label: `${branch.name}${branch.current ? (isGerman ? " (aktuell)" : " (current)") : ""}`, + group: isGerman ? "Lokale Branches" : "Local branches", + })), + ...remoteBranches.map((branch) => ({ + value: branchValue(branch), + label: branch.name, + group: isGerman ? "Remote-Branches" : "Remote branches", + })), + ...commits.map((item) => ({ + value: item.hash, + label: commitOptionLabel(item), + group: "Commits", + })), ]); function handleSubmit(event: SubmitEvent) {