Elgato_dark/podman-desktop
1
0
Fork 0
mirror of https://github.com/podman-desktop/podman-desktop synced 2026-04-21 17:47:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

chore: switch to tailwindcss v4

Browse source 
fixes https://github.com/podman-desktop/podman-desktop/issues/10795
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
This commit is contained in:
Florent Benoit 2025-01-29 16:42:22 +01:00 committed by Florent BENOIT
parent fd66684b6e
commit df281f281c
55 changed files with 580 additions and 364 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -167,7 +167,6 @@
"lint-staged": "^15.4.3",
"minimist": "^1.2.8",
"msw": "^2.7.0",
"postcss-import": "^16.1.0",
"prettier": "^3.3.3",
"proxy": "^2.2.0",
"typescript": "5.6.3",

6
packages/renderer/package.json
View file

@ -17,6 +17,7 @@
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@sveltejs/vite-plugin-svelte": "5.0.3",
"@tailwindcss/vite": "^4.0.1",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/svelte": "^5.2.6",
@ -26,7 +27,6 @@
"@types/validator": "^13.12.2",
"@typescript-eslint/eslint-plugin": "^8.21.0",
"@xterm/addon-serialize": "^0.13.0",
"autoprefixer": "^10.4.20",
"eslint-plugin-svelte": "^2.46.1",
"filesize": "^10.1.6",
"humanize-duration": "^3.32.1",
@ -35,14 +35,12 @@
"micromark-extension-directive": "^3.0.2",
"moment": "^2.30.1",
"monaco-editor": "^0.52.2",
"postcss": "^8.5.1",
"postcss-load-config": "^6.0.1",
"svelte": "5.19.6",
"svelte-check": "^4.1.4",
"svelte-eslint-parser": "^0.43.0",
"svelte-fa": "^4.0.3",
"svelte-steps": "2.4.1",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.0.1",
"tslib": "^2.8.1",
"typescript": "^5.6.3",
"vite": "^6.0.11",

10
packages/renderer/src/app.css
View file

@ -1,6 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@config '../../../tailwind.config.cjs';
/* Disable dragging links elements */
a {
@ -9,3 +8,8 @@ a {
-webkit-user-drag: none;
-webkit-app-region: no-drag;
}
@theme {
--spacing-leftnavbar: 48px;
--spacing-leftsidebar: 170px;
}

2
packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
View file

@ -156,7 +156,7 @@ async function onInstallationClick(): Promise<void> {
<div
class="z-10 min-w-[130px] m-auto bg-primary text-[13px] text-[var(--pd-button-text)] absolute w-full"
class:hidden={!installationOptionsMenuVisible}>
<ul class="w-full outline-none bg-[var(--pd-dropdown-bg)] rounded-sm placeholder-[var(--pd-content-text)]">
<ul class="w-full outline-hidden bg-[var(--pd-dropdown-bg)] rounded-xs placeholder-[var(--pd-content-text)]">
<li>
<button
class="w-full p-2 bg-[var(--pd-button-primary-bg)] text-[var(--pd-button-text)] hover:bg-[var(--pd-button-primary-hover-bg)] cursor-pointer"

2
packages/renderer/src/lib/dashboard/ProviderLinks.svelte
View file

@ -7,7 +7,7 @@ export let provider: ProviderInfo;
</script>
{#if provider.links.length > 0}
<div class="mt-2 flex relative w-full content-stretch items-center flex-row justify-around flex-grow flex-nowrap">
<div class="mt-2 flex relative w-full content-stretch items-center flex-row justify-around grow flex-nowrap">
{#each provider.links as link}
{#if link.group === undefined}
<Link class="text-base" on:click={(): Promise<void> => window.openExternal(link.url)}>

4
packages/renderer/src/lib/dialogs/CommandPalette.svelte
View file

@ -171,7 +171,7 @@ async function onInputChange(): Promise<void> {
<div class="flex justify-center items-center mt-1">
<div
bind:this={outerDiv}
class="bg-[var(--pd-content-card-bg)] w-[700px] max-h-fit shadow-sm p-2 rounded shadow-[var(--pd-input-field-stroke)] text-sm">
class="bg-[var(--pd-content-card-bg)] w-[700px] max-h-fit shadow-xs p-2 rounded-sm shadow-[var(--pd-input-field-stroke)] text-sm">
<div class="w-full flex flex-row">
<input
bind:this={inputElement}
@ -179,7 +179,7 @@ async function onInputChange(): Promise<void> {
type="text"
bind:value={inputValue}
on:input={onInputChange}
class="px-1 w-full text-[var(--pd-input-field-focused-text)] bg-[var(--pd-input-field-focused-bg)] border border-[var(--pd-input-field-stroke)] focus:outline-none" />
class="px-1 w-full text-[var(--pd-input-field-focused-text)] bg-[var(--pd-input-field-focused-bg)] border border-[var(--pd-input-field-stroke)] focus:outline-hidden" />
</div>
<ul class="max-h-[50vh] overflow-y-auto flex flex-col">
{#each filteredCommandInfoItems as item, i}

8
packages/renderer/src/lib/dialogs/QuickPickInput.svelte
View file

@ -293,11 +293,11 @@ async function handleKeydown(e: KeyboardEvent): Promise<void> {
<div class="flex justify-center items-center mt-1">
<div
bind:this={outerDiv}
class="w-[700px] {mode === 'InputBox' ? 'h-fit' : ''} shadow-sm p-2 rounded shadow-[var(--pd-input-field-stroke)] text-sm overflow-hidden">
class="w-[700px] {mode === 'InputBox' ? 'h-fit' : ''} shadow-xs p-2 rounded-sm shadow-[var(--pd-input-field-stroke)] text-sm overflow-hidden">
{#if title}
<div
aria-label="title"
class="w-full bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-select-hover-text)] text-center max-w-[700px] truncate cursor-default">
class="w-full bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-input-select-hover-text)] text-center max-w-[700px] truncate cursor-default">
{title}
</div>
{/if}
@ -309,7 +309,7 @@ async function handleKeydown(e: KeyboardEvent): Promise<void> {
bind:value={inputValue}
class="px-1 w-full h-20 text-[var(--pd-input-select-hover-text)] border {validationError
? 'border-[var(--pd-input-field-stroke-error)]'
: 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-none"
: 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-hidden"
placeholder={placeHolder}></textarea>
{:else}
<input
@ -319,7 +319,7 @@ async function handleKeydown(e: KeyboardEvent): Promise<void> {
bind:value={inputValue}
class="px-1 w-full text-[var(--pd-input-select-hover-text)] border {validationError
? 'border-[var(--pd-input-field-stroke-error)]'
: 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-none"
: 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-hidden"
placeholder={placeHolder} />
{/if}
{#if quickPickCanPickMany}

2
packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte
View file

@ -76,7 +76,7 @@ async function installExtension(): Promise<void> {
on:click={installExtension}
hidden={!extension.fetchable}
title="Install {extension.displayName} v{extension.fetchVersion} Extension"
class="border-2 relative rounded border-[var(--pd-button-secondary)] text-[var(--pd-button-secondary)] hover:text-[var(--pd-button-text)] hover:bg-[var(--pd-button-secondary-hover)] hover:border-[var(--pd-button-secondary-hover)] w-10 p-2 text-center cursor-pointer flex flex-row justify-center">
class="border-2 relative rounded-sm border-[var(--pd-button-secondary)] text-[var(--pd-button-secondary)] hover:text-[var(--pd-button-text)] hover:bg-[var(--pd-button-secondary-hover)] hover:border-[var(--pd-button-secondary-hover)] w-10 p-2 text-center cursor-pointer flex flex-row justify-center">
<LoadingIcon
icon={faDownload}
iconSize="1x"

4
packages/renderer/src/lib/feedback/feedbackForms/DevelopersFeedback.svelte
View file

@ -123,7 +123,7 @@ async function openGitHub(): Promise<void> {
id="tellUsWhyFeedback"
data-testid="tellUsWhyFeedback"
bind:value={tellUsWhyFeedback}
class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"
class="w-full p-2 outline-hidden text-sm bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"
placeholder="Please enter your feedback here, we appreciate and review all comments"></textarea>
<label for="contactInformation" class="block mt-4 mb-2 text-sm font-medium text-[var(--pd-modal-text)]"
@ -134,7 +134,7 @@ async function openGitHub(): Promise<void> {
id="contactInformation"
bind:value={contactInformation}
placeholder="Enter email address, or leave blank for anonymous feedback"
class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]" />
class="w-full p-2 outline-hidden text-sm bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]" />
</svelte:fragment>
<svelte:fragment slot="validation">
{#if smileyRating === 0}

4
packages/renderer/src/lib/feedback/feedbackForms/GitHubIssueFeedback.svelte
View file

@ -76,7 +76,7 @@ async function previewOnGitHub(): Promise<void> {
aria-label="Issue Title"
bind:value={issueTitle}
placeholder={titlePlaceholder}
class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"/>
class="w-full p-2 outline-hidden text-sm bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"/>
<!-- issue body -->
<label for="issueDescription" class="block mt-4 mb-2 text-sm font-medium text-[var(--pd-modal-text)]"
@ -88,7 +88,7 @@ async function previewOnGitHub(): Promise<void> {
aria-label="Issue Description"
id="issueDescription"
bind:value={issueDescription}
class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"
class="w-full p-2 outline-hidden text-sm bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"
placeholder={descriptionPlaceholder}></textarea>
<!-- additional form content for bug category -->

2
packages/renderer/src/lib/help/HelpMenu.svelte
View file

@ -28,7 +28,7 @@ onDestroy(() => window.removeEventListener('resize', updateMenuLocation));
data-testid="help-menu">
<div
title="Help Menu Items"
class="z-10 m-1 rounded-md shadow-lg bg-[var(--pd-dropdown-bg)] ring-2 ring-[var(--pd-dropdown-ring)] hover:ring-[var(--pd-dropdown-hover-ring)] divide-y divide-[var(--pd-dropdown-divider)] focus:outline-none">
class="z-10 m-1 rounded-md shadow-lg bg-[var(--pd-dropdown-bg)] ring-2 ring-[var(--pd-dropdown-ring)] hover:ring-[var(--pd-dropdown-hover-ring)] divide-y divide-[var(--pd-dropdown-divider)] focus:outline-hidden">
<slot />
</div>
</div>

4
packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte
View file

@ -359,8 +359,8 @@ async function abortBuild(): Promise<void> {
>Build arguments</label>
{#each buildArgs as buildArg, index}
<div class="flex flex-row items-center space-x-2 mb-2">
<Input bind:value={buildArg.key} name="inputKey" placeholder="Key" class="flex-grow" required />
<Input bind:value={buildArg.value} placeholder="Value" class="flex-grow" required />
<Input bind:value={buildArg.key} name="inputKey" placeholder="Key" class="grow" required />
<Input bind:value={buildArg.value} placeholder="Value" class="grow" required />
<Button
on:click={(): void => deleteBuildArg(index)}
icon={faMinusCircle}

2
packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
View file

@ -118,7 +118,7 @@ onMount(() => {
{#if displayValueFieldInput}
<input
type="text"
class="w-40 outline-none bg-[var(--pd-input-field-bg)] focus:bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-content-text)]"
class="w-40 outline-hidden bg-[var(--pd-input-field-bg)] focus:bg-[var(--pd-input-field-focused-bg)] rounded-xs text-[var(--pd-content-text)]"
bind:value={additionalValue}
bind:this={inputHtmlElement}
on:keydown={handleKeydownAdditionalField} />

2
packages/renderer/src/lib/markdown/Markdown.spec.ts
View file

@ -53,7 +53,7 @@ describe('Custom button', () => {
const markdownContent = screen.getByRole('region', { name: 'markdown-content' });
expect(markdownContent).toBeInTheDocument();
expect(markdownContent).toContainHTML(
'<a class="px-4 py-[6px] rounded-[4px] !text-white text-[13px] whitespace-nowrap bg-purple-600 hover:bg-purple-500 !no-underline">Name of the button</a>',
'<a class="px-4 py-[6px] rounded-[4px] text-white! text-[13px] whitespace-nowrap bg-purple-600 hover:bg-purple-500 no-underline!">Name of the button</a>',
);
});

2
packages/renderer/src/lib/markdown/micromark-button-directive.ts
View file

@ -60,7 +60,7 @@ export function button(d: Directive): void {
} else {
// If href is passed in, make this an anchor tag but make it look like a button
this.tag(
'<a class="px-4 py-[6px] rounded-[4px] !text-white text-[13px] whitespace-nowrap bg-purple-600 hover:bg-purple-500 !no-underline"',
'<a class="px-4 py-[6px] rounded-[4px] text-white! text-[13px] whitespace-nowrap bg-purple-600 hover:bg-purple-500 no-underline!"',
);
// Href & title

2
packages/renderer/src/lib/markdown/micromark-warnings-directive.ts
View file

@ -90,7 +90,7 @@ export function warnings(this: CompileContext, d: Directive): boolean {
// add the warning description
if (item.description) {
// add title to the left
this.tag('<div class="flex-grow">');
this.tag('<div class="grow">');
this.raw(item.description);
this.tag('</div>');
}

4
packages/renderer/src/lib/onboarding/Onboarding.svelte
View file

@ -324,7 +324,7 @@ $: globalOnboarding = global;
role="region"
aria-label="Onboarding Body"
class="flex flex-col bg-[var(--pd-content-card-bg)] text-[var(--pd-details-body-text)] {globalOnboarding
? 'flex-auto fixed top-0 left-0 right-0 bottom-0 bg-no-repeat z-[45] pt-9 overflow-y-auto'
? 'flex-auto fixed top-0 left-0 right-0 bottom-0 bg-no-repeat z-45 pt-9 overflow-y-auto'
: 'h-full overflow-y-auto w-full overflow-x-hidden'}"
class:bodyWithBar={!activeStep.step.completionEvents || activeStep.step.completionEvents.length === 0}>
<div class="flex flex-col h-full">
@ -485,7 +485,7 @@ $: globalOnboarding = global;
<div
class="flex flex-row-reverse p-6 bg-[var(--pd-content-bg)] fixed {globalOnboarding
? 'w-full'
: 'w-[calc(100%-theme(width.leftnavbar)-theme(width.leftsidebar))] mb-5'} bottom-0 pr-10 max-h-20 bg-opacity-90 z-20"
: 'w-[calc(100%-(var(--width-leftnavbar))-(var(--width-leftsidebar)))] mb-5'} bottom-0 pr-10 max-h-20 bg-opacity-90 z-20"
role="group"
aria-label="Step Buttons">
<Button

4
packages/renderer/src/lib/pod/DeployPodToKube.svelte
View file

@ -474,7 +474,7 @@ function updateKubeResult(): void {
bind:value={ingressPort}
name="serviceName"
id="serviceName"
class=" cursor-default w-full p-2 outline-none text-sm bg-[var(--pd-select-bg)] rounded-sm text-[var(--pd-content-card-text)]"
class=" cursor-default w-full p-2 outline-hidden text-sm bg-[var(--pd-select-bg)] rounded-xs text-[var(--pd-content-card-text)]"
aria-label="Select a Port"
required>
<option value="" disabled selected>Select a port</option>
@ -524,7 +524,7 @@ function updateKubeResult(): void {
<label for="namespaceToUse" class="block mb-1 text-sm font-medium text-[var(--pd-content-card-header-text)]"
>Kubernetes Namespace:</label>
<select
class="w-full p-2 outline-none text-sm bg-[var(--pd-select-bg)] rounded-sm text-[var(--pd-content-card-text)]"
class="w-full p-2 outline-hidden text-sm bg-[var(--pd-select-bg)] rounded-xs text-[var(--pd-content-card-text)]"
aria-label="Select a Kubernetes Namespace"
name="namespaceChoice"
bind:value={currentNamespace}>

8
packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
View file

@ -227,7 +227,7 @@ function navigateToContainers(): void {
<WarningMessage class="flex flex-row w-full mb-2" error={getWarningText()} />
{/if}
<div class="mb-2">
<span class="block font-semibold rounded text-[var(--pd-content-card-header-text)]"
<span class="block font-semibold rounded-sm text-[var(--pd-content-card-header-text)]"
>Name of the pod:</span>
</div>
<div class="mb-4">
@ -242,7 +242,7 @@ function navigateToContainers(): void {
<div class="mb-2">
<span
class="block font-semibold rounded text-[var(--pd-content-card-header-text)]"
class="block font-semibold rounded-sm text-[var(--pd-content-card-header-text)]"
aria-label="Containers">Containers to replicate to the pod:</span>
</div>
<div class="w-full bg-[var(--pd-content-card-inset-bg)] mb-4 max-h-40 overflow-y-auto">
@ -259,7 +259,7 @@ function navigateToContainers(): void {
{#if mapPortExposed.size > 0}
<div class="mb-2">
<span
class="block font-semibold rounded text-[var(--pd-content-card-header-text)]"
class="block font-semibold rounded-sm text-[var(--pd-content-card-header-text)]"
aria-label="Exposed ports">All selected ports will be exposed:</span>
</div>
<div class="bg-[var(--pd-content-card-inset-bg)] mb-4 max-h-40 overflow-y-auto">
@ -280,7 +280,7 @@ function navigateToContainers(): void {
{#if providerConnections.length > 1}
<label
for="providerConnectionName"
class="block mb-2 font-semibold rounded text-[var(--pd-content-card-header-text)]"
class="block mb-2 font-semibold rounded-sm text-[var(--pd-content-card-header-text)]"
>Container engine:</label>
<Dropdown
class="w-full"

2
packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
View file

@ -216,7 +216,7 @@ async function connect(contextName: string): Promise<void> {
{/if}
{/if}
<!-- Centered items div -->
<div class="pl-3 flex-grow flex flex-col justify-center">
<div class="pl-3 grow flex flex-col justify-center">
<div class="flex flex-col items-left">
{#if context.currentContext}
<span class="text-sm text-[var(--pd-invert-content-card-text)]" aria-label="Current Context"

2
packages/renderer/src/lib/preferences/docker-compat/PreferencesDockerCompatibilityContributions.svelte
View file

@ -172,7 +172,7 @@ async function onChangeProperty(property: PropertyWithDisplayName, value: unknow
{#each groupItems.items as groupItem}
<div class="container flex flex-row w-full pt-2" role="list" aria-label="{groupItem.name}">
<!-- column with the group-->
<div class="h-full bg-[var(--pd-button-primary-bg)] rounded p-1">
<div class="h-full bg-[var(--pd-button-primary-bg)] rounded-sm p-1">
<IconImage
image={groupItem.icon}
alt={groupItem.name}

4
packages/renderer/src/lib/preferences/item-formats/FloatNumberItem.svelte
View file

@ -68,13 +68,13 @@ function assertNumericValueIsValid(value: number): boolean {
</script>
<div
class="flex flex-row rounded-sm bg-[var(--pd-input-field-bg)] text-sm divide-x divide-[var(--pd-dropdown-divider)] w-24 border-b"
class="flex flex-row rounded-xs bg-[var(--pd-input-field-bg)] text-sm divide-x divide-[var(--pd-dropdown-divider)] w-24 border-b"
class:border-[var(--pd-state-info)]={!numberInputInvalid}
class:border-[var(--pd-state-error)]={numberInputInvalid}>
<Tooltip topRight tip={numberInputErrorMessage}>
<input
type="text"
class="w-full px-2 outline-none focus:outline-none text-[var(--pd-input-field-focused-text)] text-sm py-0.5"
class="w-full px-2 outline-hidden focus:outline-hidden text-[var(--pd-input-field-focused-text)] text-sm py-0.5"
name={record.id}
bind:value={recordValue}
on:keypress={onNumberInputKeyPress}

2
packages/renderer/src/lib/task-manager/LegacyTaskManagerGroup.svelte
View file

@ -23,7 +23,7 @@ let lastItem = (a: unknown[], i: number): boolean => i === a.length - 1;
<Fa class="mr-1" size="0.45x" icon={icon} />
<div class="flex-nowrap uppercase font-bold text-xs">{title} ({tasks.length})</div>
</div>
<hr class="flex-grow flex w-max h-[2px] bg-[var(--pd-modal-header-text)] border-0" />
<hr class="grow flex w-max h-[2px] bg-[var(--pd-modal-header-text)] border-0" />
</div>
<div class="w-full">
{#each tasks as task, index}

4
packages/renderer/src/lib/task-manager/LegacyTaskManagerItem.svelte
View file

@ -68,7 +68,7 @@ async function doExecuteAction(task: TaskInfo): Promise<void> {
<Fa size="0.875x" icon={icon} />
</div>
{#if task.state !== 'completed' && task.cancellable}
<div class="items-end flex flex-grow">
<div class="items-end flex grow">
<Tooltip tip="Cancel the task" topRight>
<button class="cursor-pointer" on:click={cancelTask} aria-label="Cancel task {task.name}">
<Fa size="0.875x" icon={faTimesCircle} />
@ -84,7 +84,7 @@ async function doExecuteAction(task: TaskInfo): Promise<void> {
{task.name}
</div>
<div class="flex flex-col flex-grow items-end">
<div class="flex flex-col grow items-end">
<!-- if completed task, display a close icon-->
{#if task.state === 'completed'}
<button title="Clear notification" class="text-[var(--pd-modal-text)]" on:click={(): Promise<void> => closeCompleted(task)}

2
packages/renderer/src/lib/task-manager/ProgressBar.spec.ts
View file

@ -54,7 +54,7 @@ test('Expect aria-label to be propagated', async () => {
expect(container).toBeDefined();
});
test('Expect progress to be rounded', async () => {
test('Expect progress to be rounded-sm', async () => {
const { getByText } = render(ProgressBar, { progress: 5 / 3, 'aria-label': 'hello-world' });
const progress = getByText('2%');

2
packages/renderer/src/lib/task-manager/TaskManager.svelte
View file

@ -44,7 +44,7 @@ const taskWordPlural = $derived(selectedItemsNumber > 1 ? 'tasks' : 'task');
{#if showTaskManager}
<div
bind:this={outsideWindow}
class="fixed bottom-8 right-4 bg-[var(--pd-modal-bg)] min-h-96 h-3/4 w-[calc(100%-52px-theme(width.leftnavbar))] z-40 border border-[var(--pd-modal-border)] rounded-md shadow-xl shadow-black">
class="fixed bottom-8 right-4 bg-[var(--pd-modal-bg)] min-h-96 h-3/4 w-[calc(100%-52px-(var(--spacing-leftnavbar)))] z-40 border border-[var(--pd-modal-border)] rounded-md shadow-xl shadow-black">
<NavPage title="Tasks" bind:searchTerm={searchTerm}>
<svelte:fragment slot="additional-actions">
<TaskManagerClearAllButton />

2
packages/renderer/src/lib/toast/ToastCustomUi.svelte
View file

@ -51,7 +51,7 @@ const executeAction = async (): Promise<void> => {
<span class="ml-1">{taskInfo.progress}%</span>
{/if}
<div class="flex flex-grow flex-col items-end">
<div class="flex grow flex-col items-end">
<CloseButton class="text-[var(--pd-modal-text)]" on:click={closeAction} />
</div>
</div>

4
packages/renderer/src/lib/troubleshooting/TroubleshootingPageStore.svelte
View file

@ -21,12 +21,12 @@ async function fetch(): Promise<void> {
let openDetails = false;
</script>
<div class="flex flex-col bg-[var(--pd-invert-content-card-bg)] p-2 items-center rounded w-full">
<div class="flex flex-col bg-[var(--pd-invert-content-card-bg)] p-2 items-center rounded-sm w-full">
<div><svelte:component this={eventStoreInfo.iconComponent} size="20" /></div>
<div class="text-xl">
<button
disabled={fetchInProgress}
class="underline outline-none"
class="underline outline-hidden"
title="Open Details"
aria-label="Open Details"
on:click={(): boolean => (openDetails = true)}>

2
packages/renderer/src/lib/ui/Badge.svelte
View file

@ -26,6 +26,6 @@ onMount(async () => {
});
</script>
<div class="text-[var(--pd-badge-text)] text-xs me-2 px-1 py-0.5 rounded select-none {customClass} {$$props.class}" style={customStyle}>
<div class="text-[var(--pd-badge-text)] text-xs me-2 px-1 py-0.5 rounded-sm select-none {customClass} {$$props.class}" style={customStyle}>
{label}
</div>

4
packages/renderer/src/lib/ui/TerminalSearchControls.svelte
View file

@ -73,10 +73,10 @@ function onKeyUp(e: KeyboardEvent): void {
/>
</div>
<div class="space-x-1">
<button aria-label="Previous Match" class="p-2 rounded hover:bg-[var(--pd-action-button-details-bg)]" onclick={(): void => onSearchPrevious(true)}>
<button aria-label="Previous Match" class="p-2 rounded-sm hover:bg-[var(--pd-action-button-details-bg)]" onclick={(): void => onSearchPrevious(true)}>
<Fa icon={faArrowUp}/>
</button>
<button aria-label="Next Match" class="p-2 rounded hover:bg-[var(--pd-action-button-details-bg)]" onclick={(): void => onSearchNext(true)}>
<button aria-label="Next Match" class="p-2 rounded-sm hover:bg-[var(--pd-action-button-details-bg)]" onclick={(): void => onSearchNext(true)}>
<Fa icon={faArrowDown}/>
</button>
</div>

2
packages/renderer/src/lib/ui/TitleBar.svelte
View file

@ -15,7 +15,7 @@ onMount(async () => {
<header
id="navbar"
class="bg-[var(--pd-titlebar-bg)] body-font z-[999] relative {platform === 'win32'
class="bg-[var(--pd-titlebar-bg)] body-font z-999 relative {platform === 'win32'
? 'min-h-[32px]'
: 'min-h-[38px]'} border-[var(--pd-global-nav-bg-border)] border-b-[1px]"
style="-webkit-app-region: drag;">

2
packages/renderer/src/lib/volume/CreateVolume.svelte
View file

@ -70,7 +70,7 @@ export let volumeName = '';
<label for="providerChoice" class="py-3 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
>Container Engine
<select
class="w-full p-2 outline-none bg-[var(--pd-select-bg)] rounded-sm text-[var(--pd-content-card-text)]"
class="w-full p-2 outline-hidden bg-[var(--pd-select-bg)] rounded-xs text-[var(--pd-content-card-text)]"
aria-label="Provider Choice"
disabled={createVolumeFinished}
bind:value={selectedProvider}>

6
packages/renderer/src/lib/welcome/WelcomePage.svelte
View file

@ -95,18 +95,18 @@ function startOnboardingQueue(): void {
class="flex flex-col flex-auto fixed top-0 left-0 right-0 bottom-0 bg-[var(--pd-content-card-bg)] bg-no-repeat z-50"
style="background-image: url({bgImage}); background-position: 50% -175%; background-size: 100% 75%">
<!-- Header -->
<div class="flex flex-row flex-none backdrop-blur p-6 mt-10">
<div class="flex flex-row flex-none backdrop-blur-sm p-6 mt-10">
<div class="flex flex-auto text-lg font-bold">Get started with Podman Desktop</div>
</div>
<!-- Body -->
<div class="flex flex-col justify-center content-center flex-auto backdrop-blur p-2 overflow-y-auto">
<div class="flex flex-col justify-center content-center flex-auto backdrop-blur-sm p-2 overflow-y-auto">
<div class="flex justify-center p-2"><DesktopIcon /></div>
<div class="flex justify-center text-lg font-bold p-2">
<span class="mr-2">🎉</span>Welcome to Podman Desktop v{podmanDesktopVersion} !
</div>
<div class="flex flex-row justify-center">
<div class="bg-[var(--pd-content-card-inset-bg)] px-4 pb-4 pt-2 rounded">
<div class="bg-[var(--pd-content-card-inset-bg)] px-4 pb-4 pt-2 rounded-sm">
{#if onboardingProviders && onboardingProviders.length > 0}
<div class="flex justify-center text-sm text-[var(--pd-content-card-text)] pb-2">
<div>Choose the extensions to include:</div>

3
packages/renderer/vite.config.js
View file

@ -24,6 +24,7 @@ import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';
import { coverageConfig } from '../../vitest-shared-extensions.config';
import tailwindcss from '@tailwindcss/vite';
let filename = fileURLToPath(import.meta.url);
const PACKAGE_ROOT = path.dirname(filename);
@ -39,7 +40,7 @@ export default defineConfig({
'/@api/': join(PACKAGE_ROOT, '../api/src') + '/',
},
},
plugins: [svelte({ hot: !process.env.VITEST }), svelteTesting()],
plugins: [tailwindcss(), svelte({ hot: !process.env.VITEST }), svelteTesting()],
optimizeDeps: {
exclude: ['tinro'],
},

6
packages/ui/package.json
View file

@ -146,21 +146,19 @@
"devDependencies": {
"@sveltejs/package": "^2.3.9",
"@sveltejs/vite-plugin-svelte": "5.0.3",
"@tailwindcss/vite": "^4.0.1",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/svelte": "^5.2.6",
"@testing-library/user-event": "^14.6.1",
"@tsconfig/svelte": "^5.0.4",
"@typescript-eslint/eslint-plugin": "^8.21.0",
"autoprefixer": "^10.4.20",
"eslint-plugin-svelte": "^2.46.1",
"jsdom": "^26.0.0",
"postcss": "^8.5.1",
"postcss-load-config": "^6.0.1",
"svelte": "5.19.6",
"svelte-check": "^4.1.4",
"svelte-eslint-parser": "^0.43.0",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.0.1",
"tslib": "^2.8.1",
"typescript": "^5.6.3",
"vite": "^6.0.11",

2
packages/ui/src/lib/carousel/Carousel.svelte
View file

@ -55,7 +55,7 @@ function rotateRight(): void {
<Fa class="w-8 h-8" icon={faChevronLeft} color="black" />
</button>
<div id="carousel-cards-{containerId}" class="flex flex-grow gap-3 overflow-hidden">
<div id="carousel-cards-{containerId}" class="flex grow gap-3 overflow-hidden">
{#each visibleCards as card}
<slot card={card} />
{/each}

2
packages/ui/src/lib/dropdownMenu/DropDownMenuItems.svelte
View file

@ -41,6 +41,6 @@ onDestroy(() => {
bind:clientHeight={dropDownHeight}
bind:clientWidth={dropDownWidth}
bind:this={dropDownElement}
class="{sideAlign} absolute z-10 m-2 rounded-md shadow-lg bg-[var(--pd-dropdown-bg)] ring-2 ring-[var(--pd-dropdown-ring)] hover:ring-[var(--pd-dropdown-hover-ring)] divide-y divide-[var(--pd-dropdown-divider)] focus:outline-none">
class="{sideAlign} absolute z-10 m-2 rounded-md shadow-lg bg-[var(--pd-dropdown-bg)] ring-2 ring-[var(--pd-dropdown-ring)] hover:ring-[var(--pd-dropdown-hover-ring)] divide-y divide-[var(--pd-dropdown-divider)] focus:outline-hidden">
<slot />
</div>

2
packages/ui/src/lib/screen/EmptyScreen.svelte
View file

@ -62,7 +62,7 @@ let copyTextDivElement: HTMLDivElement;
{/if}
{#if commandline}
<div
class="flex flex-row bg-[var(--pd-details-empty-cmdline-bg)] items-center justify-between rounded-sm p-3 mt-4">
class="flex flex-row bg-[var(--pd-details-empty-cmdline-bg)] items-center justify-between rounded-xs p-3 mt-4">
<div
class="font-mono text-[var(--pd-details-empty-cmdline-text)]"
bind:this={copyTextDivElement}

2
packages/ui/src/lib/statusIcon/StatusIcon.svelte
View file

@ -14,7 +14,7 @@ $: solid = status === 'RUNNING' || status === 'STARTING' || status === 'USED' ||
<div class="grid place-content-center" style="position:relative">
<div
class="grid place-content-center rounded aspect-square text-xs"
class="grid place-content-center rounded-sm aspect-square text-xs"
class:bg-[var(--pd-status-running)]={status === 'RUNNING' || status === 'USED'}
class:bg-[var(--pd-status-starting)]={status === 'STARTING'}
class:bg-[var(--pd-status-degraded)]={status === 'DEGRADED'}

2
packages/ui/src/lib/table/Table.svelte
View file

@ -188,7 +188,7 @@ function toggleChildren(name: string | undefined): void {
<!-- Table header -->
<div role="rowgroup">
<div
class="grid grid-table gap-x-0.5 h-7 sticky top-0 text-[var(--pd-table-header-text)] uppercase z-[2]"
class="grid grid-table gap-x-0.5 h-7 sticky top-0 text-[var(--pd-table-header-text)] uppercase z-2"
role="row">
<div class="whitespace-nowrap justify-self-start" role="columnheader"></div>
{#if row.info.selectable}

2
packages/ui/src/lib/tooltip/Tooltip.spec.ts
View file

@ -45,5 +45,5 @@ test('tooltip z order', async () => {
// get the tooltip
const tooltip = screen.getByText('my tooltip');
expect(tooltip.parentElement).toHaveClass('z-[60]');
expect(tooltip.parentElement).toHaveClass('z-60');
});

2
packages/ui/src/lib/tooltip/Tooltip.svelte
View file

@ -68,7 +68,7 @@ export let left = false;
<slot />
</span>
<div
class="whitespace-nowrap absolute tooltip opacity-0 inline-block transition-opacity duration-150 ease-in-out pointer-events-none text-sm z-[60]"
class="whitespace-nowrap absolute tooltip opacity-0 inline-block transition-opacity duration-150 ease-in-out pointer-events-none text-sm z-60"
class:left={left}
class:right={right}
class:bottom={bottom}

5
packages/ui/vite.config.js
View file

@ -1,5 +1,5 @@
/**********************************************************************
* Copyright (C) 2024 Red Hat, Inc.
* Copyright (C) 2024-2025 Red Hat, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -24,6 +24,7 @@ import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';
import { coverageConfig } from '../../vitest-shared-extensions.config';
import tailwindcss from '@tailwindcss/vite';
let filename = fileURLToPath(import.meta.url);
const PACKAGE_ROOT = path.dirname(filename);
@ -38,7 +39,7 @@ export default defineConfig({
'/@/': join(PACKAGE_ROOT, 'src') + '/',
},
},
plugins: [svelte({ hot: !process.env.VITEST }), svelteTesting()],
plugins: [tailwindcss(), svelte({ hot: !process.env.VITEST }), svelteTesting()],
test: {
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
globals: true,

644
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

25
postcss.config.cjs
View file

@ -1,25 +0,0 @@
/**********************************************************************
* Copyright (C) 2022 Red Hat, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* SPDX-License-Identifier: Apache-2.0
***********************************************************************/
module.exports = {
plugins: {
tailwindcss: {},
'postcss-import': {},
autoprefixer: {},
},
};

13
tailwind.config.cjs
View file

@ -27,19 +27,6 @@ module.exports = {
],
darkMode: 'class',
theme: {
extend: {
transitionProperty: {
width: 'width',
},
width: {
leftnavbar: '48px',
leftsidebar: '170px',
},
minWidth: {
leftnavbar: '48px',
leftsidebar: '170px',
},
},
fontSize: {
xs: '10px',
sm: '11px',

3
website/docusaurus.config.js
View file

@ -35,8 +35,7 @@ const config = {
return {
name: 'docusaurus-tailwindcss',
configurePostCss(postcssOptions) {
postcssOptions.plugins.push(require('tailwindcss'));
postcssOptions.plugins.push(require('autoprefixer'));
postcssOptions.plugins.push(require('@tailwindcss/postcss'));
return postcssOptions;
},
};

4
website/package.json
View file

@ -45,12 +45,12 @@
"@docusaurus/module-type-aliases": "^3.7.0",
"@docusaurus/tsconfig": "^3.7.0",
"@docusaurus/types": "^3.7.0",
"autoprefixer": "^10.4.20",
"@tailwindcss/postcss": "^4.0.1",
"markdownlint": "^0.37.4",
"markdownlint-cli2": "^0.17.2",
"markdownlint-cli2-formatter-summarize": "^0.0.7",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.0.1",
"typedoc": "^0.27.6",
"typedoc-plugin-markdown": "^4.4.1",
"typescript": "^5.6.3",

10
website/src/css/custom.css
View file

@ -1,12 +1,10 @@
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
* docusaurus uses Infima for CSS but here we load tailwind with
* 'important' configuration so default style will be Tailwind css
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@config '../../tailwind.config.js';
/* manrope variable font */
@font-face {

2
website/src/pages/downloads/linux.tsx
View file

@ -60,7 +60,7 @@ export function LinuxDownloads(): JSX.Element {
<h3 className="mt-0">Podman Desktop for Linux</h3>
<div className="pt-8">
<Link
className="mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-500 rounded text-md font-semibold"
className="mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-hidden hover:bg-purple-500 rounded-sm text-md font-semibold"
to={downloadData.flatpak}>
<FontAwesomeIcon size="1x" icon={faDownload} className="mr-2" />
Download Now

2
website/src/pages/downloads/macos.tsx
View file

@ -116,7 +116,7 @@ export function MacOSDownloads(): JSX.Element {
<h3 className="mt-0">Podman Desktop for macOS</h3>
<div className="pt-8">
<Link
className="mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-500 rounded text-md font-semibold"
className="mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-hidden hover:bg-purple-500 rounded-sm text-md font-semibold"
to={downloadData.universal}>
<FontAwesomeIcon size="1x" icon={faDownload} className="mr-2" />
Download Now

2
website/src/pages/downloads/windows.tsx
View file

@ -115,7 +115,7 @@ export function WindowsDownloads(): JSX.Element {
<h3 className="mt-0">Podman Desktop for Windows</h3>
<div className="pt-8">
<Link
className="mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-500 rounded text-md font-semibold"
className="mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-hidden hover:bg-purple-500 rounded-sm text-md font-semibold"
to={downloadData.setupX64}>
<FontAwesomeIcon size="1x" icon={faDownload} className="mr-2" />
Download Now

6
website/src/pages/extensions/ai-lab/index.tsx
View file

@ -89,14 +89,14 @@ export default function Home(): JSX.Element {
{/* buttons section */}
<div className="mt-4 flex justify-center items-center gap-x-4">
<Link
className="items-center mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-500 rounded-xl text-md font-semibold"
className="items-center mt-auto no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 focus:outline-hidden hover:bg-purple-500 rounded-xl text-md font-semibold"
to={'/docs/ai-lab/installing'}>
<FontAwesomeIcon size="1x" icon={faRocket} className="mr-2" />
Get started
</Link>
<Link
className="items-center mt-auto no-underline hover:no-underline inline-flex text-charcoal-500 dark:text-white border-0 py-2 px-6 focus:outline-none text-md font-semibold"
className="items-center mt-auto no-underline hover:no-underline inline-flex text-charcoal-500 dark:text-white border-0 py-2 px-6 focus:outline-hidden text-md font-semibold"
to={'https://github.com/containers/podman-desktop-extension-ai-lab'}>
Learn more on GitHub
<FontAwesomeIcon size="1x" icon={faArrowRight} className="ml-2" />
@ -104,7 +104,7 @@ export default function Home(): JSX.Element {
</div>
{/* Application video */}
<div className="my-12 rounded-xl from-purple-500 bg-gradient-to-r to-fuschia-500">
<div className="my-12 rounded-xl from-purple-500 bg-linear-to-r to-fuschia-500">
<div className="p-8">
<video className="rounded-xl w-full h-full" controls>
<source

12
website/src/pages/features/index.tsx
View file

@ -10,7 +10,7 @@ function FeatureManageContainers(): JSX.Element {
<div>
<section className="text-gray-900 bg-zinc-200 dark:bg-charcoal-600 dark:text-gray-700 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<div className="lg:grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
Manage containers
<br className="hidden lg:inline-block" />
@ -49,7 +49,7 @@ function FeatureManageImages(): JSX.Element {
}}
/>
</div>
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<div className="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
Build, Pull and Push images
</h1>
@ -70,7 +70,7 @@ function FeatureManagementFromTrayIcon(): JSX.Element {
<div>
<section className="text-gray-900 bg-zinc-200 dark:bg-charcoal-600 dark:text-gray-700 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<div className="lg:grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
Management from the tray icon
<br className="hidden lg:inline-block" />
@ -116,7 +116,7 @@ function FeatureManageResources(): JSX.Element {
}}
/>
</div>
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<div className="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
Manage Podman resources
<br className="hidden lg:inline-block" />
@ -137,7 +137,7 @@ function FeatureManagePods(): JSX.Element {
<div>
<section className="text-gray-900 bg-zinc-200 dark:bg-charcoal-600 dark:text-gray-700 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<div className="lg:grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
Create and start Pods with Podman
<br className="hidden lg:inline-block" />
@ -182,7 +182,7 @@ function FeatureDDExtensions(): JSX.Element {
}}
/>
</div>
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<div className="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
Import Docker Desktop extensions
</h1>

80
website/src/pages/index.tsx
View file

@ -48,7 +48,7 @@ function DownloadClientLinks(): JSX.Element {
mainButton = (
<div>
<Link
className="no-underline hover:no-underline inline-flex text-white hover:text-white bg-violet-600 border-0 py-4 px-8 mt-6 mb-1 focus:outline-none hover:bg-violet-700 rounded text-lg"
className="no-underline hover:no-underline inline-flex text-white hover:text-white bg-violet-600 border-0 py-4 px-8 mt-6 mb-1 focus:outline-hidden hover:bg-violet-700 rounded-sm text-lg"
to={'/downloads/' + url}>
<FontAwesomeIcon size="2x" icon={varIcon as IconProp} className="px-2" /> Download Now
</Link>
@ -60,7 +60,7 @@ function DownloadClientLinks(): JSX.Element {
otherButton = (
<div>
<Link
className="underline font-semibold hover:underline ml-4 inline-flex py-2 px-6 my-4 focus:outline-none text-lg"
className="underline font-semibold hover:underline ml-4 inline-flex py-2 px-6 my-4 focus:outline-hidden text-lg"
to="/downloads">
Other downloads
</Link>
@ -70,7 +70,7 @@ function DownloadClientLinks(): JSX.Element {
mainButton = (
<div>
<Link
className="no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 mt-6 mb-1 focus:outline-none hover:bg-purple-600 rounded text-lg"
className="no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 mt-6 mb-1 focus:outline-hidden hover:bg-purple-600 rounded-sm text-lg"
to="/downloads">
Download Page
</Link>
@ -90,7 +90,7 @@ function DownloadGenericLinks(): JSX.Element {
return (
<div className="flex justify-center">
<Link
className="no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 mt-6 mb-1 focus:outline-none hover:bg-purple-600 rounded text-lg"
className="no-underline hover:no-underline inline-flex text-white hover:text-white bg-purple-500 border-0 py-2 px-6 mt-6 mb-1 focus:outline-hidden hover:bg-purple-600 rounded-sm text-lg"
to="/downloads">
Download Page
</Link>
@ -239,7 +239,7 @@ function Extensibility(): JSX.Element {
<div className="flex flex-col items-center">
<Link
title="Extend Podman Desktop"
className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
className="no-underline hover:no-underline text-gray-900 dark:text-white dark:hover:text-violet-600 "
to="/extend">
<div className="mt-3 text-purple-800 dark:text-purple-400 inline-flex items-center">
Learn More
@ -277,10 +277,10 @@ function Configure(): JSX.Element {
<div className="container px-5 pb-5 mx-auto">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCogs} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Registries</h2>
<p className="leading-relaxed text-base">
<a href="/docs/containers/registries">Manage OCI registries. Add/edit/delete registries.</a>
@ -289,10 +289,10 @@ function Configure(): JSX.Element {
</div>
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCogs} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Proxy</h2>
<p className="leading-relaxed text-base">
<a href="/docs/proxy">Configure your proxy settings.</a>
@ -301,10 +301,10 @@ function Configure(): JSX.Element {
</div>
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCogs} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">
Resources Utilization
</h2>
@ -313,10 +313,10 @@ function Configure(): JSX.Element {
</div>
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCogs} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">
Container Engines
</h2>
@ -351,10 +351,10 @@ function EnterpriseReady(): JSX.Element {
</h1>
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/3 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCertificate} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Code signing</h2>
<p className="leading-relaxed text-base">
@ -363,10 +363,10 @@ function EnterpriseReady(): JSX.Element {
</div>
</div>
<div className="p-4 md:w-1/3 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCloudArrowDown} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Proxy</h2>
<p className="leading-relaxed text-base">
<a href="/docs/proxy">Configure proxy within the tool. Avoid any painful files to edit.</a>
@ -374,10 +374,10 @@ function EnterpriseReady(): JSX.Element {
</div>
</div>
<div className="p-4 md:w-1/3 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faCogs} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Registries</h2>
<p className="leading-relaxed text-base">
<a href="/docs/proxy">Manage OCI registries. Add/edit/delete registries.</a>
@ -411,12 +411,12 @@ function RunAnywhere(): JSX.Element {
<div className="flex rounded-lg h-full bg-zinc-100 hover:bg-purple-500 dark:hover:bg-purple-700 dark:bg-charcoal-800 bg-opacity-60 p-8 flex-col">
<div className="flex items-center mb-3 flex-col">
<FontAwesomeIcon size="4x" icon={faWindows} />
<div className="inline-flex items-center justify-center rounded-full text-gray-900 dark:text-gray-400 flex-shrink-0"></div>
<div className="inline-flex items-center justify-center rounded-full text-gray-900 dark:text-gray-400 shrink-0"></div>
<h2 className=" text-lg title-font font-medium"> Windows</h2>
</div>
<div className="flex-grow">
<div className="flex-grow w-full">
<div className="grow">
<div className="grow w-full">
<p className="text-base text-center">exe or setup.exe</p>
</div>
</div>
@ -429,10 +429,10 @@ function RunAnywhere(): JSX.Element {
<div className="flex rounded-lg h-full bg-zinc-100 hover:bg-purple-500 dark:hover:bg-purple-700 dark:bg-charcoal-800 bg-opacity-60 p-8 flex-col">
<div className="flex items-center mb-3 flex-col">
<FontAwesomeIcon size="4x" icon={faApple} />
<div className="inline-flex items-center justify-center rounded-full text-gray-900 dark:text-gray-400 flex-shrink-0"></div>
<div className="inline-flex items-center justify-center rounded-full text-gray-900 dark:text-gray-400 shrink-0"></div>
<h2 className=" text-lg title-font font-medium"> macOS</h2>
</div>
<div className="flex-grow w-full">
<div className="grow w-full">
<p className="text-base text-center">arm64, x64 or unified dmg</p>
</div>
</div>
@ -444,10 +444,10 @@ function RunAnywhere(): JSX.Element {
<div className="flex rounded-lg h-full bg-zinc-100 hover:bg-purple-500 dark:hover:bg-purple-700 dark:bg-charcoal-800 bg-opacity-60 p-8 flex-col">
<div className="flex items-center mb-3 flex-col">
<FontAwesomeIcon size="4x" icon={faLinux} />
<div className="inline-flex items-center justify-center rounded-full text-gray-900 dark:text-gray-400 flex-shrink-0"></div>
<div className="inline-flex items-center justify-center rounded-full text-gray-900 dark:text-gray-400 shrink-0"></div>
<h2 className=" text-lg title-font font-medium"> Linux</h2>
</div>
<div className="flex-grow">
<div className="grow">
<p className="text-base text-center">Flatpak or AMD64 binary (tar.gz)</p>
</div>
</div>
@ -472,10 +472,10 @@ function MainFeatures(): JSX.Element {
<div className="container px-5 pb-5 mx-auto">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faGears} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Build</h2>
<p className="leading-relaxed text-base list-disc">
<a href="/docs/containers/images/building-an-image">
@ -486,10 +486,10 @@ function MainFeatures(): JSX.Element {
</div>
</div>
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faRocket} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Run</h2>
<p className="leading-relaxed text-base list-disc">
@ -507,10 +507,10 @@ function MainFeatures(): JSX.Element {
</div>
</div>
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faGaugeHigh} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Inspect</h2>
<p className="leading-relaxed text-base list-disc">
<FontAwesomeIcon icon={faRocket} className="text-purple-700 w-3 h-3 mt-1 mr-2" />
@ -523,10 +523,10 @@ function MainFeatures(): JSX.Element {
</div>
</div>
<div className="p-4 md:w-1/4 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faDiagramProject} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Push</h2>
<p className="leading-relaxed text-base list-disc">
<a href="/docs/containers/images/pushing-an-image-to-a-registry">
@ -547,7 +547,7 @@ function MainFeatures(): JSX.Element {
<div className="flex flex-col text-center w-full mb-5">
<Link
title="Discover More"
className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
className="no-underline hover:no-underline text-gray-900 dark:text-white dark:hover:text-violet-600 "
to="/features">
<div className="mt-3 text-purple-800 dark:text-purple-400 inline-flex items-center">
Discover More
@ -583,10 +583,10 @@ function Pods(): JSX.Element {
<div className="container px-5 pb-5 mx-auto">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/2 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-700 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faGears} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">
Working with pods
</h2>
@ -601,10 +601,10 @@ function Pods(): JSX.Element {
</div>
</div>
<div className="p-4 md:w-1/2 flex">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 flex-shrink-0">
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-700 text-purple-800 mb-4 shrink-0">
<FontAwesomeIcon size="2x" icon={faGaugeHigh} className="w-6 h-6 " />
</div>
<div className="flex-grow pl-6">
<div className="grow pl-6">
<h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">
Working with Kubernetes
</h2>
@ -635,7 +635,7 @@ function Pods(): JSX.Element {
<div className="flex flex-col text-center w-full mb-5">
<Link
title="Discover More"
className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
className="no-underline hover:no-underline text-gray-900 dark:text-white dark:hover:text-violet-600 "
to="/features">
<div className="mt-3 text-purple-800 dark:text-purple-400 inline-flex items-center">
Discover More