Elgato_dark/podman-desktop
1
0
Fork 0
mirror of https://github.com/podman-desktop/podman-desktop synced 2026-05-24 10:18:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: light mode for help page (#7345) (#7471)

Browse source 
Signed-off-by: lstocchi <lstocchi@redhat.com>
This commit is contained in:
Luca Stocchi 2024-06-06 11:15:23 +02:00 committed by GitHub
parent a614c8d0c8
commit 9e1aa36bb1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/main/src/plugin/color-registry.ts
View file

@ -926,5 +926,9 @@ export class ColorRegistry {
dark: colorPalette.white + '2',
light: colorPalette.black + '2',
});
this.registerColor(`${button}help-link-text`, {
dark: colorPalette.gray[100],
light: colorPalette.charcoal[900],
});
}
}

66
packages/renderer/src/lib/help/HelpPage.svelte
View file

@ -25,41 +25,41 @@ $: contributedLinks = $providerInfos
<div slot="content" class="flex flex-col min-w-full h-fit">
<div class="min-w-full flex-1 px-5 pb-5 space-y-5">
<!-- Getting Started -->
<div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
<div class="text-lg">Getting Started</div>
<div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
<div class="text-[var(--pd-content-header)] text-lg">Getting Started</div>
<div class="grid grid-cols-1 md:grid-cols-2 py-3">
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://podman-desktop.io/docs/intro')}"
title="https://podman-desktop.io/docs/intro">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Getting started</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Getting started</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://podman-desktop.io/docs/troubleshooting')}"
title="https://podman-desktop.io/docs/troubleshooting">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Troubleshooting guide</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Troubleshooting guide</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://podman-desktop.io/features')}"
title="https://podman-desktop.io/features">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">View all features</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">View all features</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://podman-desktop.io/extend')}"
title="https://podman-desktop.io/extend">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Extend podman desktop</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Extend podman desktop</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
@ -71,18 +71,18 @@ $: contributedLinks = $providerInfos
{#if contributedLinks.size > 0}
{#each [...contributedLinks] as [group, links]}
{#if links.length > 0}
<div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
<div class="text-lg">{group}</div>
<div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
<div class="text-[var(--pd-content-header)] text-lg">{group}</div>
<div class="grid grid-cols-1 md:grid-cols-2 py-3">
{#each links as link, index}
{@const evenItems = index % 2 !== 0}
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer {evenItems
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer text-[var(--pd-button-help-link-text)] {evenItems
? 'md:place-content-end md:ml-2'
: 'md:border-r-2'}"
on:click="{() => window.openExternal(link.url)}"
title="{link.url}">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">
<p class="py-2 md:text-ellipsis md:overflow-hidden">
{link.title}
</p>
<i
@ -97,33 +97,33 @@ $: contributedLinks = $providerInfos
{/if}
<!-- Get in Touch -->
<div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
<div class="text-lg">Get in Touch</div>
<div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
<div class="text-[var(--pd-content-header)] text-lg">Get in Touch</div>
<div class="grid grid-cols-1 md:grid-cols-2 py-3">
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://github.com/containers/podman-desktop/issues/new/choose')}"
title="https://github.com/containers/podman-desktop/issues/new/choose">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Report a bug</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Report a bug</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-exclamation-triangle ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
on:click="{() =>
window.openExternal('https://github.com/containers/podman-desktop/discussions/categories/general')}"
title="https://github.com/containers/podman-desktop/discussions/categories/general">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Create a GitHub discussion</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Create a GitHub discussion</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-exclamation-triangle ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.events.send('display-feedback', '')}"
title="Share your Feedback">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Share your Feedback</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Share your Feedback</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comment ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
@ -132,43 +132,41 @@ $: contributedLinks = $providerInfos
</div>
<!-- Communication -->
<div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
<div class="text-lg">Communication</div>
<div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
<div class="text-[var(--pd-content-header)] text-lg">Communication</div>
<div class="grid grid-cols-1 md:grid-cols-2 py-3">
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://discord.com/invite/x5GzFF6QH4')}"
title="https://discordapp.com/invite/TCTB38RWpf">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Discord: Join #general channel</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Discord: Join #general channel</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://libera.chat')}"
title="https://libera.chat">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">
Libera.Chat: Join #podman-desktop channel
</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Libera.Chat: Join #podman-desktop channel</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://fedora.im')}"
title="https://fedora.im">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Matrix: Join #podman-desktop channel</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Matrix: Join #podman-desktop channel</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>
</button>
<button
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
on:click="{() => window.openExternal('https://slack.k8s.io')}"
title="https://slack.k8s.io">
<p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Slack: Join #podman-desktop channel</p>
<p class="py-2 md:text-ellipsis md:overflow-hidden">Slack: Join #podman-desktop channel</p>
<i
class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
aria-hidden="true"></i>