ui: redesign

resources/views/livewire/upgrade.blade.php

@@ -1,8 +1,7 @@
-<li @if ($isUpgradeAvailable) title="New version available" @else title="No upgrade available" @endif
+<div @if ($isUpgradeAvailable) title="New version available" @else title="No upgrade available" @endif
     x-init="$wire.checkUpdate" x-data>
     @if ($isUpgradeAvailable)
-        <button wire:key="upgrade" wire:click='upgrade' class="hover:bg-transparent focus:bg-transparent"
-            x-on:click="upgrade">
+        <button wire:key="upgrade" wire:click='upgrade' class="menu-item" x-on:click="upgrade">
             @if ($showProgress)
                 <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 lds-heart" viewBox="0 0 24 24"
@@ -11,6 +10,7 @@
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                 </svg>
+                Inprogress
             @else
                 <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox="0 0 24 24"
@@ -22,10 +22,11 @@
                     <path d="M9 21h6" />
                     <path d="M9 18h6" />
                 </svg>
+                Upgrade
             @endif
         </button>
     @else
-        <button class="hover:bg-transparent">
+        <button class="menu-item">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transition-colors text-neutral-700"
                 viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                 stroke-linejoin="round">
@@ -35,6 +36,7 @@
                 <path d="M9 21h6" />
                 <path d="M9 18h6" />
             </svg>
+            <div class="w-20"></div>
         </button>
     @endif
-</li>
+</div>