diff --git a/src/lib/components/IntegrationSettingsPage.svelte b/src/lib/components/IntegrationSettingsPage.svelte index 3d8bf61..3993a1b 100644 --- a/src/lib/components/IntegrationSettingsPage.svelte +++ b/src/lib/components/IntegrationSettingsPage.svelte @@ -23,9 +23,10 @@ const current = $derived(selected === "azure-devops" ? selectedAzureOrganization : settings.providers[selected]); const currentAccountId = $derived(selected === "azure-devops" ? selectedAzureOrganization?.id : undefined); + // Azure DevOps path: simple-icons/simple-icons, tag 11.15.0 (icons/azuredevops.svg). const azureDevOpsIcon: SimpleIcon = { title: "Azure DevOps", slug: "azuredevops", hex: "0078D4", source: "https://azure.microsoft.com/products/devops", svg: "", - path: "M0 8.877 2.247 5.91l8.405-3.416v19.127l-8.405-3.53L0 15.123V8.877Zm12.154-6.968 11.846 2.423v15.336l-11.846 2.423V1.909Z", + path: "M0 8.877L2.247 5.91l8.405-3.416V.022l7.37 5.393L2.966 8.338v8.225L0 15.707zm24-4.45v14.651l-5.753 4.9-9.303-3.057v3.056l-5.978-7.416 15.057 1.798V5.415z", }; const providerIcons: Record = { github: siGithub, gitlab: siGitlab, "gitlab-self-hosted": siGitlab, "azure-devops": azureDevOpsIcon, gitea: siGitea }; @@ -37,6 +38,8 @@ } function providerColor(provider: GitIntegrationProvider): string { + if (provider === "gitea") return "var(--provider-gitea-ink, #85c64a)"; + if (provider === "azure-devops") return "var(--provider-azure-ink, #3da9f4)"; return provider === "github" ? "var(--color-ink)" : `#${providerIcons[provider].hex}`; } @@ -161,11 +164,19 @@ } +{#snippet providerLogo(provider: GitIntegrationProvider, large = false)} + +{/snippet} + +
{#each gitIntegrationProviders as provider} @@ -174,7 +185,7 @@
- + {@render providerLogo(selected, true)}

{providerLabel(selected)}

{providerDescription(selected)}

{#if selected === "azure-devops"} {settings.azureDevOpsOrganizations.length} {isGerman ? "Orgas" : "orgs"} @@ -236,10 +247,12 @@ .integration-providers > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 9px 10px; border: 1px solid var(--color-border-subtle); border-radius: 9px; color: var(--color-ink-dim); background: var(--app-settings-row-bg); text-align: left; } .integration-providers > button:hover { color: var(--color-ink); border-color: var(--color-border); background: var(--color-surface-hover); } .integration-providers > button.active { border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border)); color: var(--color-ink); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-raised)); box-shadow: inset 2px 0 0 var(--color-accent); } - .provider-logo { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--provider-color) 34%, var(--color-border)); border-radius: 8px; color: var(--provider-color); background: color-mix(in srgb, var(--provider-color) 10%, transparent); } - .provider-logo svg { width: 17px; height: 17px; fill: currentColor; } - .provider-logo-large { width: 42px; height: 42px; border-radius: 10px; } - .provider-logo-large svg { width: 22px; height: 22px; } + .provider-logo { position:relative;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid var(--color-border-subtle);border-radius:6px;color:var(--provider-color);background:var(--color-surface-raised); } + .provider-brand-icon { display:block;width:24px;height:24px;fill:currentColor; } + .provider-logo-large { width:46px;height:46px;flex-basis:46px; } + .provider-logo-large .provider-brand-icon { width:30px;height:30px; } + .provider-instance-badge { position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--color-border-input);border-radius:3px;background:var(--app-dialog-bg);color:var(--color-ink-muted); } + :global(:root[data-theme="light"]) .provider-logo { --provider-gitea-ink:#527c24;--provider-azure-ink:#0078d4; } .provider-copy { display: grid; min-width: 0; gap: 3px; } .provider-copy strong { color: inherit; font-size: 11px; } .provider-copy small { overflow: hidden; color: var(--color-ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }