Improve wording for Kubernetes actions (#633)

* Improve wording for Kubernetes actions

### What does this PR do?

* Changes the wording of Kubernetes to indicate the action more
* When in a title, YAML and just YAML should be used, but when referring
  to in a sentence it should be `.yaml` for adding a file, etc.
* Changes the titles for navigation so it's not as "capitalized".
  (titles should not capitalize words such as "of" or "there", etc.)

### Screenshot/screencast of this PR

<!-- Please include a screenshot or a screencast explaining what is doing this PR -->

### What issues does this PR fix or reference?

<!-- Please include any related issue from Podman Desktop repository (or from another issue tracker).
-->

N/A

### How to test this PR?

<!-- Please explain steps to reproduce -->

Run `yarn watch` and look at the UI :)

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

* Update based on review and change run to play

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

packages/renderer/src/lib/ContainerList.svelte

@@ -261,10 +261,10 @@ function toggleAllContainerGroups(value: boolean) {
         on:click="{() => runContainerYaml()}"
         class="pf-c-button pf-m-primary"
         type="button"
-        title="Run pod/containers from kubernetes .YAML file ">
+        title="Play pod/containers from kubernetes YAML file ">
         <div class="flex flex-row align-text-top justify-start items-center">
           <KubePlayIcon />
-          Play YAML
+          Play Kubernetes YAML
         </div>
       </button>
     {/if}

packages/renderer/src/lib/container/ContainerPlayKubefile.svelte

@@ -72,7 +72,7 @@ onDestroy(() => {
 });
 
 async function getKubernetesfileLocation() {
-  const result = await window.openFileDialog('Select .YAML file to play', {
+  const result = await window.openFileDialog('Select a .yaml file to play', {
     name: 'YAML files',
     extensions: ['yaml', 'yml'],
   });
@@ -88,20 +88,20 @@ async function getKubernetesfileLocation() {
 {/if}
 
 {#if providerConnections.length > 0}
-  <NavPage title="Run pod/containers from a Kubernetes .YAML file" searchEnabled="{false}">
+  <NavPage title="Play Pods or Containers from a Kubernetes YAML File" searchEnabled="{false}">
     <div slot="empty" class="bg-zinc-700 p-5 h-full">
       <div class="bg-zinc-800 px-6 py-4 space-y-6 lg:px-8 sm:pb-6 xl:pb-8">
         <div class="text-xl font-medium">Select file:</div>
         <div hidden="{runStarted}">
           <label for="containerFilePath" class="block mb-2 text-sm font-medium text-gray-300"
-            >Kubernetes .YAML file</label>
+            >Kubernetes YAML file</label>
           <input
             on:click="{() => getKubernetesfileLocation()}"
             name="containerFilePath"
             id="containerFilePath"
             bind:value="{kubernetesYamlFilePath}"
             readonly
-            placeholder="Select .YAML file to run..."
+            placeholder="Select a .yaml file to play"
             class="w-full p-2 outline-none text-sm bg-zinc-900 rounded-sm text-gray-400 placeholder-gray-400"
             required />
         </div>
@@ -148,7 +148,7 @@ async function getKubernetesfileLocation() {
                 <KubePlayIcon />
               {/if}
 
-              Run
+              Play
             </div>
           </button>
         {/if}

packages/renderer/src/lib/ui/NavPage.svelte

@@ -9,7 +9,7 @@ export let searchEnabled: boolean = true;
   <div class="min-w-full">
     <div class="flex">
       <div class="pt-5 px-5">
-        <p class="text-xl capitalize">{title}</p>
+        <p class="text-xl first-letter:uppercase">{title}</p>
         <p class="text-sm text-gray-400">
           {subtitle}
         </p>