css

app/Http/Livewire/Project/Application/Revert.php

@@ -10,7 +10,7 @@ class Revert extends Component
 {
     public Application $application;
     public $images = [];
-    public string $current;
+    public string|null $current;
     public function revertImage($tag)
     {
         dd("Reverting to {$this->application->uuid}:{$tag}");

public/svgs/external-link.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" >
+	<path d="M0 0h24v24H0V0z" fill="none">
+	</path>
+	<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" fill="white">
+	</path>
+</svg>

resources/css/app.css

@@ -16,28 +16,8 @@ textarea {
 select {
     @apply border border-solid border-coolgray-400 rounded p-2 px-4 bg-transparent text-white disabled:text-neutral-600 read-only:select-none outline-none;
 }
-
 button {
-    @apply border-none px-2 p-1 cursor-pointer;
+    @apply border border-solid border-coolgray-200 px-3 p-1 cursor-pointer;
-}
-.main-menu {
-    @apply relative float-left;
-}
-.main-menu:after {
-    content: "/";
-    @apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.3rem];
-}
-.magic-input {
-    @apply w-[25rem] rounded outline-none bg-coolgray-400 focus:bg-neutral-700 text-white;
-}
-.magic-items {
-    @apply absolute top-12 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;
-}
-.magic-item {
-    @apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white;
-}
-.magic-item-focused {
-    @apply bg-neutral-700 text-white;
 }
 h1 {
     @apply text-3xl font-bold pb-4;
@@ -55,3 +35,23 @@ a {
 .box {
     @apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline;
 }
+
+.main-menu {
+    @apply relative float-left;
+}
+.main-menu:after {
+    content: "/";
+    @apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.5rem];
+}
+.magic-input {
+    @apply w-[25rem] rounded outline-none bg-coolgray-400 focus:bg-neutral-700 text-white;
+}
+.magic-items {
+    @apply absolute top-12 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;
+}
+.magic-item {
+    @apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white;
+}
+.magic-item-focused {
+    @apply bg-neutral-700 text-white;
+}

resources/views/components/applications/navbar.blade.php

@@ -1,4 +1,4 @@
-<nav class="flex gap-4 py-2">
+<nav class="flex justify-center gap-4 py-2 border-b-2 border-solid border-coolgray-200 ">
     <a
         href="{{ route('project.application.configuration', [
             'project_uuid' => Route::current()->parameters()['project_uuid'],
@@ -16,7 +16,20 @@
         Deployments
     </a>
     <a target="_blank" href="{{ $gitBranchLocation }}">
-        Open on Git ↗️
+        Open on Git <img class="inline-flex w-4 h-4" src="{{ Vite::asset('public/svgs/external-link.svg') }}">
     </a>
-    <livewire:project.application.deploy :applicationId="$applicationId" />
+    @if (data_get($application, 'ports_mappings_array'))
+        @foreach ($application->ports_mappings_array as $port)
+            @if (config('app.env') === 'local')
+                <a target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">Open
+                    {{ explode(':', $port)[0] }} <img class="inline-flex w-4 h-4"
+                        src="{{ Vite::asset('public/svgs/external-link.svg') }}"></a>
+            @else
+                <a target="_blank"
+                    href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">Open
+                    {{ $port }}</a>
+            @endif
+        @endforeach
+    @endif
+    <livewire:project.application.deploy :applicationId="$application->id" />
 </nav>

resources/views/components/magic-bar.blade.php

@@ -1,4 +1,4 @@
-<div x-data="magicsearchbar" @slash.window="mainMenu = true">
+<div x-data="magicsearchbar" @slash.window="mainMenu = true" class="fixed -translate-x-1/2 left-1/2">
     {{-- Main --}}
     <template x-cloak x-if="isMainMenu">
         <div>

resources/views/components/navbar.blade.php

@@ -20,7 +20,6 @@
                     </a>
                 @endif
             </div>
-            <div class="flex-1"></div>
             <x-magic-bar />
             <div class="flex-1"></div>
             <div class="flex gap-2 text-sm">
@@ -28,7 +27,7 @@
                 <livewire:force-upgrade />
                 <form action="/logout" method="POST">
                     @csrf
-                    <button class="m-1 hover:underline" type="submit">Logout</button>
+                    <button class="m-1 border-none hover:underline" type="submit">Logout</button>
                 </form>
             </div>
         </div>

resources/views/livewire/force-upgrade.blade.php

@@ -1,5 +1,5 @@
 <div>
     @if (auth()->user()->teams->contains(0))
-        <button wire:click='upgrade' class="m-1 hover:underline">Force Upgrade</button>
+        <button wire:click='upgrade' class="m-1 border-none hover:underline">Force Upgrade</button>
     @endif
 </div>

resources/views/livewire/project/application/deploy.blade.php

@@ -12,24 +12,11 @@
         Delete</x-inputs.button>
     <span wire:poll.5000ms='pollingStatus'>
         @if ($application->status === 'running')
-            @if (data_get($application, 'ports_mappings_array'))
-                @foreach ($application->ports_mappings_array as $port)
-                    @if (config('app.env') === 'local')
-                        <a target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">Open
-                            {{ explode(':', $port)[0] }}</a>
-                    @else
-                        <a target="_blank"
-                            href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">Open
-                            {{ $port }}</a>
-                    @endif
-                @endforeach
-            @endif
             <span class="text-xs text-pink-600" wire:loading.delay.longer>Loading current status...</span>
             <span class="text-green-500" wire:loading.remove.delay.longer>{{ $application->status }}</span>
         @else
             <span class="text-xs text-pink-600" wire:loading.delay.longer>Loading current status...</span>
             <span class="text-red-500" wire:loading.remove.delay.longer>{{ $application->status }}</span>
         @endif
-
     </span>
 </div>

resources/views/livewire/project/application/revert.blade.php

@@ -14,8 +14,9 @@
                             <div class="text-sm">
                                 @if (data_get($image, 'is_current'))
                                     <span class="font-bold text-coollabs">LIVE</span>
+                                    |
                                 @endif
-                                | {{ data_get($image, 'tag') }}
+                                {{ data_get($image, 'tag') }}
                             </div>
 
                             <div class="text-xs">{{ data_get($image, 'created_at') }}</div>

resources/views/project/application/configuration.blade.php

@@ -1,5 +1,5 @@
 <x-layout>
-    <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
+    <x-applications.navbar :application="$application" :gitBranchLocation="$application->gitBranchLocation" />
     <h1 class="py-10">Configuration</h1>
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
         <div class="flex flex-col min-w-fit">
@@ -25,7 +25,7 @@
                 @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Previews
             </a> --}}
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full pt-2 pl-8">
             <div x-cloak x-show="activeTab === 'general'">
                 <livewire:project.application.general :application="$application" />
             </div>

resources/views/project/application/deployments.blade.php

@@ -1,5 +1,5 @@
 <x-layout>
-    <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
+    <x-applications.navbar :application="$application" :gitBranchLocation="$application->gitBranchLocation" />
     <h1 class="py-10">Deployments</h1>
     <div class="pt-2">
         @forelse ($deployments as $deployment)