fix: provider card UI on dashboard (#7082)

* fix: provider card UI on dashboard Signed-off-by: lstocchi <[email protected]> * fix: move update button to left and reduce padding/margin Signed-off-by: lstocchi <[email protected]> --------- Signed-off-by: lstocchi <[email protected]>
containers · May 13, 2024 · ac5f58a · ac5f58a
1 parent d9fe1f5
commit ac5f58a
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 82 deletions.
diff --git a/packages/renderer/src/lib/dashboard/ProviderCard.svelte b/packages/renderer/src/lib/dashboard/ProviderCard.svelte
@@ -11,8 +11,8 @@ export let provider: ProviderInfo;
  class="flex bg-charcoal-800 rounded-md p-5 gap-3 flex-col flex-nowrap"
  role="region"
  aria-label="{provider.name} Provider">
- <div class="lg:flex lg:flex-row gap-x-4">
- <div class="grid grid-cols-[3rem_1fr] w-min gap-2">
+ <div class="flex flex-col lg:flex-row gap-x-4">
+ <div class="grid grid-cols-[3rem_1fr] w-1/4 gap-2">
  <IconImage image="{provider?.images?.icon}" class="mx-0 max-h-12" alt="{provider.name}"></IconImage>
  <div class="flex flex-col gap-0 text-gray-400 text-lg whitespace-nowrap" aria-label="context-name">
  <div class="flex flex-row gap-1 items-center">
@@ -26,11 +26,15 @@ export let provider: ProviderInfo;
  <div class="flex flex-row" aria-label="Actual State">
  <ProviderStatus status="{provider.status}" />
  </div>
+ <div class="my-3 empty:my-0 w-full">
+ <slot name="update" />
+ </div>
  </div>
  </div>
- <div class="flex items-center flex-row space-x-10 grow flex-nowrap">
+ <div class="flex items-center flex-row space-x-10 mt-5 w-full lg:mt-0 lg:w-3/4 flex-nowrap">
  <slot name="content" />
  </div>
  </div>
+
  <ProviderLinks provider="{provider}" />
 </div>
diff --git a/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte b/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte
@@ -54,26 +54,25 @@ onMount(() => {
 
 <ProviderCard provider="{provider}">
  <svelte:fragment slot="content">
- <p class="text-sm text-gray-700 flex-grow">
- To start working with containers, {provider.name}
- {#if provider.version}
- v{provider.version}
- {/if} needs to be started.
- </p>
-
  {#if !runAtStart && !runInProgress}
- <div class="mt-5">
+ <p class="text-sm text-gray-700 text-center w-2/3">
+ To start working with containers, {provider.name}
+ {#if provider.version}
+ v{provider.version}
+ {/if} needs to be started.
+ </p>
+ <div class="w-1/3 flex justify-center">
  <Button on:click="{() => runProvider()}">
  Run {provider.name}
  </Button>
  </div>
  {/if}
  {#if runAtStart || runInProgress}
- <div class="mt-5">
+ <div class="flex flex-col w-full lg:w-2/3 justify-center items-center">
  {#if initializationContext.mode === InitializeAndStartMode}
  <Steps steps="{InitializationSteps}" current="{1}" />
  {/if}
- <div class="flex flex-col text-gray-700 items-center justify-center" aria-label="Transitioning State">
+ <div class="flex flex-col text-gray-700 items-center" aria-label="Transitioning State">
  <div>Starting</div>
  <div class="my-2">
  <Spinner />
@@ -86,11 +85,11 @@ onMount(() => {
  <ErrorMessage class="flex flex-col mt-2 my-2 text-sm" error="{runError}" />
  {/if}
 
+ <PreflightChecks preflightChecks="{preflightChecks}" />
+ </svelte:fragment>
+ <svelte:fragment slot="update">
  {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
- <div class="mt-5 mb-1 w-full flex justify-around">
- <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
- </div>
+ <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
  {/if}
- <PreflightChecks preflightChecks="{preflightChecks}" />
  </svelte:fragment>
 </ProviderCard>
diff --git a/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte b/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte
@@ -87,11 +87,11 @@ onDestroy(() => {
 
 <ProviderCard provider="{provider}">
  <svelte:fragment slot="content">
- <div>
+ <div class="flex flex-col w-full lg:w-2/3 justify-center items-center">
  {#if initializationContext.mode === InitializeAndStartMode}
  <Steps steps="{InitializationSteps}" />
  {/if}
- <div class="flex flex-col text-gray-700 items-center justify-center" aria-label="Transitioning State">
+ <div class="flex flex-col text-gray-700 items-center" aria-label="Transitioning State">
  <div>Initializing</div>
  <div class="my-2">
  <Spinner />
@@ -107,11 +107,11 @@ onDestroy(() => {
  bind:this="{logsXtermDiv}">
  </div>
 
- {#if provider.updateInfo}
- <div class="mt-5 mb-1 w-full flex justify-around">
- <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
- </div>
- {/if}
  <PreflightChecks preflightChecks="{preflightChecks}" />
  </svelte:fragment>
+ <svelte:fragment slot="update">
+ {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
+ <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
+ {/if}
+ </svelte:fragment>
 </ProviderCard>
diff --git a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
@@ -135,58 +135,60 @@ function onInstallationClick() {
 
 <ProviderCard provider="{provider}">
  <svelte:fragment slot="content">
- <p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
+ <p class="text-sm text-gray-700 w-2/3 text-center" aria-label="Suggested Actions">
  To start working with containers, {provider.name} needs to be initialized.
  </p>
 
- <div class="mt-5 relative" class:hidden="{!initializationButtonVisible}">
- <div class="bg-gray-300 text-white flex">
- <button
- class="float-left bg-purple-600 hover:bg-purple-500 pt-2 pr-3 pl-3 pb-2 text-[13px] text-white mr-px w-[180px]"
- on:click="{onInstallationClick}">
- {installationOptionSelected}
- </button>
- <button
- class="inline-block bg-purple-600 hover:bg-purple-500 text-[13px] text-white pt-2 pr-3 pl-3 pb-2 w-[32px]"
- on:click="{() => updateOptionsMenu(!installationOptionsMenuVisible)}">
- <i class="fas fa-caret-down"></i>
- </button>
- </div>
- <div
- class="z-10 min-w-[130px] m-auto bg-primary text-[13px] text-white absolute w-full"
- class:hidden="{!installationOptionsMenuVisible}">
- <ul class="w-full outline-none bg-charcoal-800 rounded-sm placeholder-gray-700">
- <li>
- <button
- class="w-full p-2 {installationOptionSelected === InitializeOnlyMode
- ? 'bg-purple-600 text-white'
- : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
- on:click="{() => {
- installationOptionSelected = InitializeOnlyMode;
- installationOptionsMenuVisible = false;
- }}">
- {InitializeOnlyMode}
- {provider.name}
- </button>
- </li>
- <li>
- <button
- class="w-full p-2 {installationOptionSelected === InitializeAndStartMode
- ? 'bg-purple-600 text-white'
- : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
- on:click="{() => {
- installationOptionSelected = InitializeAndStartMode;
- installationOptionsMenuVisible = false;
- }}">
- {InitializeAndStartMode}
- {provider.name}
- </button>
- </li>
- </ul>
+ <div class="min-w-[230px] w-1/3 flex justify-center" class:hidden="{!initializationButtonVisible}">
+ <div class="w-[212px] relative">
+ <div class="bg-gray-300 text-white flex w-[212px]">
+ <button
+ class="float-left bg-purple-600 hover:bg-purple-500 pt-2 pr-3 pl-3 pb-2 text-[13px] text-white mr-px w-[180px]"
+ on:click="{onInstallationClick}">
+ {installationOptionSelected}
+ </button>
+ <button
+ class="inline-block bg-purple-600 hover:bg-purple-500 text-[13px] text-white pt-2 pr-3 pl-3 pb-2 w-[32px]"
+ on:click="{() => updateOptionsMenu(!installationOptionsMenuVisible)}">
+ <i class="fas fa-caret-down"></i>
+ </button>
+ </div>
+ <div
+ class="z-10 min-w-[130px] m-auto bg-primary text-[13px] text-white absolute w-full"
+ class:hidden="{!installationOptionsMenuVisible}">
+ <ul class="w-full outline-none bg-charcoal-800 rounded-sm placeholder-gray-700">
+ <li>
+ <button
+ class="w-full p-2 {installationOptionSelected === InitializeOnlyMode
+ ? 'bg-purple-600 text-white'
+ : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
+ on:click="{() => {
+ installationOptionSelected = InitializeOnlyMode;
+ installationOptionsMenuVisible = false;
+ }}">
+ {InitializeOnlyMode}
+ {provider.name}
+ </button>
+ </li>
+ <li>
+ <button
+ class="w-full p-2 {installationOptionSelected === InitializeAndStartMode
+ ? 'bg-purple-600 text-white'
+ : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
+ on:click="{() => {
+ installationOptionSelected = InitializeAndStartMode;
+ installationOptionsMenuVisible = false;
+ }}">
+ {InitializeAndStartMode}
+ {provider.name}
+ </button>
+ </li>
+ </ul>
+ </div>
  </div>
  </div>
 
- <div class="mt-5" class:hidden="{!initializeInProgress}">
+ <div class="flex flex-col w-full lg:w-2/3 justify-center items-center" class:hidden="{!initializeInProgress}">
  {#if installationOptionSelected === InitializeAndStartMode}
  <Steps steps="{InitializationSteps}" />
  {/if}
@@ -206,11 +208,11 @@ function onInstallationClick() {
  bind:this="{logsXtermDiv}">
  </div>
 
+ <PreflightChecks preflightChecks="{preflightChecks}" />
+ </svelte:fragment>
+ <svelte:fragment slot="update">
  {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
- <div class="mt-5 mb-1 w-full flex justify-around">
- <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
- </div>
+ <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
  {/if}
- <PreflightChecks preflightChecks="{preflightChecks}" />
  </svelte:fragment>
 </ProviderCard>
diff --git a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
@@ -17,10 +17,10 @@ let preflightChecks: CheckStatus[] = [];
  <svelte:fragment slot="content">
  <div class="flex flex-col grow">
  <div class="flex flex-row items-center flex-row space-x-10 grow flex-nowrap">
- <p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
+ <p class="text-sm text-gray-700 grow text-center" aria-label="Suggested Actions">
  Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.
  </p>
- <div class="mt-5 mb-1 flex space-x-2">
+ <div class="flex space-x-2 w-full lg:w-1/3 justify-center">
  <ProviderDetectionChecksButton
  onDetectionChecks="{checks => (detectionChecks = checks)}"
  provider="{provider}" />

diff --git a/packages/renderer/src/lib/dashboard/ProviderReady.svelte b/packages/renderer/src/lib/dashboard/ProviderReady.svelte
@@ -13,20 +13,20 @@ let preflightChecks: CheckStatus[] = [];
 <ProviderCard provider="{provider}">
  <svelte:fragment slot="content">
  {#if provider.containerConnections.length > 0}
- <div class="flex flex-row text-sm text-gray-900 mt-4">
+ <div class="flex flex-row text-sm text-gray-900 w-full lg:w-2/3 justify-center items-center">
  <p>
  {provider.containerConnections.map(c => c.name).join(', ')}
  </p>
  </div>
  {/if}
 
- {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
- <div class="mt-5 mb-1 w-full flex justify-around">
- <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
- </div>
- {/if}
  <PreflightChecks preflightChecks="{preflightChecks}" />
 
  <ProviderWarnings provider="{provider}" />
  </svelte:fragment>
+ <svelte:fragment slot="update">
+ {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
+ <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
+ {/if}
+ </svelte:fragment>
 </ProviderCard>
diff --git a/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte b/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte
@@ -55,6 +55,7 @@ async function performUpdate(provider: ProviderInfo) {
  inProgress="{updateInProgress}"
  disabled="{preflightChecksFailed}"
  icon="{faBoxOpen}"
+ padding="px-3 py-0.5"
  on:click="{() => performUpdate(provider)}">
  Update to {provider.updateInfo.version}
  </Button>