updates

resources/js/components/MagicBar.vue

@@ -85,8 +85,8 @@
                                 </h2>
                                 <ul v-if="magic.length != 0" class="mt-2 -mx-4 text-sm text-white">
                                     <li class="flex items-center px-4 py-2 transition-all cursor-pointer select-none group hover:bg-coolgray-400"
-                                        :class="{ 'bg-coolgray-400': currentFocus === index }" id="option-1" role="option"
-                                        tabindex="-1" v-for="action, index in magic" @click="goThroughSequence(action.id)">
+                                        :class="{ 'bg-coollabs': currentFocus === index }" id="option-1" role="option"
+                                        tabindex="-1" v-for="action, index in magic" @click="goThroughSequence(index)">
                                         <div class="relative">
                                             <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
                                                 stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
@@ -213,19 +213,19 @@ const uuidSelector = ['project', 'destination']
 const nameSelector = ['environment']
 const possibleSequences = {
     server: {
-        newTitle: 'Create a Server',
+        newTitle: 'Create a new Server',
         title: 'Select a server'
     },
     destination: {
-        newTitle: 'Create a Destination',
+        newTitle: 'Create a new Destination',
         title: 'Select a destination'
     },
     project: {
-        newTitle: 'Create a Project',
+        newTitle: 'Create a new Project',
         title: 'Select a project'
     },
     environment: {
-        newTitle: 'Create an Environment',
+        newTitle: 'Create a new Environment',
         title: 'Select an environment'
     },
 }
@@ -397,7 +397,6 @@ async function goThroughSequence(actionId) {
         sequenceState.value.selected = {
             main: id
         }
-
     } else {
         currentSequence = sequenceState.value.sequence[sequenceState.value.currentActionIndex]
         nextSequence = sequenceState.value.sequence[sequenceState.value.currentActionIndex + 1]
@@ -413,7 +412,6 @@ async function goThroughSequence(actionId) {
             [currentSequence]: selectedId
         }
     }
-
     switch (nextSequence) {
         case 'server':
             sequenceState.value.magicActions = await getServers();
@@ -436,6 +434,7 @@ async function goThroughSequence(actionId) {
     sequenceState.value.currentActionIndex += 1
     search.value = ''
     searchInput.value.focus()
+    currentFocus.value = 0
 }
 async function getServers() {
     const { data: { servers } } = await axios.get(`${baseUrl}/servers`);

resources/views/livewire/destination/new/standalone-docker.blade.php

@@ -1,19 +1,25 @@
 <div>
+    <h1>Create a new Destination</h1>
+    <div class="pb-5 text-sm breadcrumbs">
+        <ul>
+            <li>
+                Destinations are used to separate resources in a server.
+            </li>
+        </ul>
+    </div>
     <form class="flex flex-col gap-4" wire:submit.prevent='submit'>
         <div class="flex gap-2">
-            <h1>New Destination</h1>
-            <x-forms.button type="submit">
-                Save
-            </x-forms.button>
+            <x-forms.input id="name" label="Name" required />
+            <x-forms.input id="network" label="Network" required />
         </div>
-        <x-forms.input id="name" label="Name" required />
-        <x-forms.input id="network" label="Network" required />
         <x-forms.select id="server_id" label="Select a server" required>
             <option disabled>Select a server</option>
             @foreach ($servers as $server)
                 <option value="{{ $server->id }}">{{ $server->name }}</option>
             @endforeach
         </x-forms.select>
-
+        <x-forms.button type="submit">
+            Save Destination
+        </x-forms.button>
     </form>
 </div>

resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <h1>New Application</h1>
+    <h1>Create a new Application</h1>
     <div class="pb-4 text-sm">Deploy any public or private git repositories through a Deploy Key.</div>
     <h3 class="py-2">Select a private key</h3>
     @foreach ($private_keys as $key)

resources/views/livewire/project/new/github-private-repository.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <h1>New Application</h1>
+    <h1>Create a new Application</h1>
     <div class="pb-4 text-sm">Deploy any public or private git repositories through a GitHub App.</div>
     @if ($github_apps->count() > 0)
         <form class="flex flex-col" wire:submit.prevent='submit'>

resources/views/livewire/project/new/public-git-repository.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <h1>New Application</h1>
+    <h1>Create a new Application</h1>
     <div class="pb-4 text-sm">Deploy any public git repositories.</div>
     <form class="flex flex-col gap-2" wire:submit.prevent='submit'>
         <div class="flex flex-col gap-2">

resources/views/livewire/server/new/by-ip.blade.php

@@ -1,13 +1,13 @@
 <div>
+    <h1>Create a new Server</h1>
+    <div class="pb-5 text-sm breadcrumbs">
+        <ul>
+            <li>
+                Servers are the main blocks of your infrastructure.
+            </li>
+        </ul>
+    </div>
     <form class="flex flex-col gap-2" wire:submit.prevent='submit'>
-        <h1>Create a new Server</h1>
-        <div class="pb-5 text-sm breadcrumbs">
-            <ul>
-                <li>
-                    Servers are the main blocks of your infrastructure.
-                </li>
-            </ul>
-        </div>
         <div class="flex gap-2">
             <x-forms.input id="name" label="Name" required />
             <x-forms.input id="description" label="Description" />