chore: changing font sizes and weights in the provider card on the da…

…shboard Signed-off-by: emma kidney <ekidney@redhat.com>
containers · Apr 8, 2024 · 1506b5f · 1506b5f
1 parent 0b77cf2
commit 1506b5f
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 8 deletions.
diff --git a/packages/renderer/src/lib/dashboard/ProviderCard.svelte b/packages/renderer/src/lib/dashboard/ProviderCard.svelte
@@ -11,11 +11,11 @@ export let provider: ProviderInfo;
   <div class="flex flex-row">
     <div class="flex flex-row">
       <IconImage image="{provider?.images?.icon}" class="mx-auto max-h-12" alt="{provider.name}"></IconImage>
-      <div class="flex flex-col text-gray-400 ml-3 whitespace-nowrap" aria-label="context-name">
+      <div class="flex flex-col text-gray-400 text-lg font-bold ml-3 whitespace-nowrap" aria-label="context-name">
         <div class="flex flex-row items-center">
           {provider.name}
           {#if provider.version}
-            <div class="text-gray-800 text-sm pl-1" aria-label="Provider Version">
+            <div class="text-gray-800 text-base font-light pl-1" aria-label="Provider Version">
               v{provider.version}
             </div>
           {/if}

diff --git a/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte b/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte
@@ -48,7 +48,7 @@ onMount(() => {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-base text-gray-700">
+    <p class="text-sm text-gray-700">
       To start working with containers, {provider.name}
       {#if provider.version}
         v{provider.version}

diff --git a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
@@ -135,7 +135,7 @@ function onInstallationClick() {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-base text-gray-700" aria-label="Suggested Actions">
+    <p class="text-sm text-gray-700" aria-label="Suggested Actions">
       To start working with containers, {provider.name} needs to be initialized.
     </p>
 

diff --git a/packages/renderer/src/lib/dashboard/ProviderLinks.svelte b/packages/renderer/src/lib/dashboard/ProviderLinks.svelte
@@ -9,7 +9,7 @@ export let provider: ProviderInfo;
   <div class="mt-2 flex flex-row justify-around">
     {#each provider.links as link}
       {#if link.group === undefined}
-        <Link class="text-sm" externalRef="{link.url}">
+        <Link class="text-base" externalRef="{link.url}">
           {link.title}
         </Link>
       {/if}

diff --git a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
@@ -15,7 +15,7 @@ let preflightChecks: CheckStatus[] = [];
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-base text-gray-700" aria-label="Suggested Actions">
+    <p class="text-sm text-gray-700" 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 w-full flex justify-around">

diff --git a/packages/renderer/src/lib/dashboard/ProviderReady.svelte b/packages/renderer/src/lib/dashboard/ProviderReady.svelte
@@ -13,7 +13,7 @@ let preflightChecks: CheckStatus[] = [];
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
     {#if provider.containerConnections.length > 0}
-      <div class="flex flex-row text-xs text-gray-900 mt-4">
+      <div class="flex flex-row text-sm text-gray-900 mt-4">
         <p>
           {provider.containerConnections.map(c => c.name).join(', ')}
         </p>

diff --git a/packages/renderer/src/lib/ui/ProviderStatus.svelte b/packages/renderer/src/lib/ui/ProviderStatus.svelte
@@ -12,7 +12,7 @@ interface connectionStatusStyle {
   | 'configured'
   | 'unknown';*/
 const roundIconStyle = 'my-auto w-3 h-3 rounded-full';
-const labelStyle = 'my-auto ml-1 font-bold text-[9px]';
+const labelStyle = 'my-auto ml-1 text-base font-medium';
 const statusesStyle = new Map<string, connectionStatusStyle>([
   [
     'ready',