rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): improve upgrade modal loading indicators visibility in light mode

Browse source 
Change yellow loading indicators to black in light mode for better
visibility while keeping warning (yellow) color for dark mode.
This commit is contained in:
Claude 2025-12-25 18:18:26 +00:00
parent b7e0f5577d
commit 707bfacbcd
No known key found for this signature in database
2 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
resources/views/components/upgrade-progress.blade.php
View file

@ -17,7 +17,7 @@
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300" <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{ :class="{
'bg-success border-success': currentStep > 1, 'bg-success border-success': currentStep > 1,
'bg-warning/20 border-warning': currentStep === 1, 'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 1,
'border-neutral-400 dark:border-coolgray-300': currentStep < 1 'border-neutral-400 dark:border-coolgray-300': currentStep < 1
}"> }">
<template x-if="currentStep > 1"> <template x-if="currentStep > 1">
@ -26,7 +26,7 @@
</svg> </svg>
</template> </template>
<template x-if="currentStep === 1"> <template x-if="currentStep === 1">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg> </svg>
@ -38,7 +38,7 @@
<span class="mt-1.5 text-xs font-medium transition-colors duration-300" <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{ :class="{
'text-success': currentStep > 1, 'text-success': currentStep > 1,
'text-warning': currentStep === 1, 'text-black dark:text-warning': currentStep === 1,
'text-neutral-500 dark:text-neutral-400': currentStep < 1 'text-neutral-500 dark:text-neutral-400': currentStep < 1
}">Preparing</span> }">Preparing</span>
</div> </div>
@ -52,7 +52,7 @@
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300" <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{ :class="{
'bg-success border-success': currentStep > 2, 'bg-success border-success': currentStep > 2,
'bg-warning/20 border-warning': currentStep === 2, 'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 2,
'border-neutral-400 dark:border-coolgray-300': currentStep < 2 'border-neutral-400 dark:border-coolgray-300': currentStep < 2
}"> }">
<template x-if="currentStep > 2"> <template x-if="currentStep > 2">
@ -61,7 +61,7 @@
</svg> </svg>
</template> </template>
<template x-if="currentStep === 2"> <template x-if="currentStep === 2">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg> </svg>
@ -73,7 +73,7 @@
<span class="mt-1.5 text-xs font-medium transition-colors duration-300" <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{ :class="{
'text-success': currentStep > 2, 'text-success': currentStep > 2,
'text-warning': currentStep === 2, 'text-black dark:text-warning': currentStep === 2,
'text-neutral-500 dark:text-neutral-400': currentStep < 2 'text-neutral-500 dark:text-neutral-400': currentStep < 2
}">Helper</span> }">Helper</span>
</div> </div>
@ -87,7 +87,7 @@
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300" <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{ :class="{
'bg-success border-success': currentStep > 3, 'bg-success border-success': currentStep > 3,
'bg-warning/20 border-warning': currentStep === 3, 'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 3,
'border-neutral-400 dark:border-coolgray-300': currentStep < 3 'border-neutral-400 dark:border-coolgray-300': currentStep < 3
}"> }">
<template x-if="currentStep > 3"> <template x-if="currentStep > 3">
@ -96,7 +96,7 @@
</svg> </svg>
</template> </template>
<template x-if="currentStep === 3"> <template x-if="currentStep === 3">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg> </svg>
@ -108,7 +108,7 @@
<span class="mt-1.5 text-xs font-medium transition-colors duration-300" <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{ :class="{
'text-success': currentStep > 3, 'text-success': currentStep > 3,
'text-warning': currentStep === 3, 'text-black dark:text-warning': currentStep === 3,
'text-neutral-500 dark:text-neutral-400': currentStep < 3 'text-neutral-500 dark:text-neutral-400': currentStep < 3
}">Image</span> }">Image</span>
</div> </div>
@ -122,7 +122,7 @@
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300" <div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{ :class="{
'bg-success border-success': currentStep > 4, 'bg-success border-success': currentStep > 4,
'bg-warning/20 border-warning': currentStep === 4, 'bg-black/20 border-black dark:bg-warning/20 dark:border-warning': currentStep === 4,
'border-neutral-400 dark:border-coolgray-300': currentStep < 4 'border-neutral-400 dark:border-coolgray-300': currentStep < 4
}"> }">
<template x-if="currentStep > 4"> <template x-if="currentStep > 4">
@ -131,7 +131,7 @@
</svg> </svg>
</template> </template>
<template x-if="currentStep === 4"> <template x-if="currentStep === 4">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="size-4 text-black dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg> </svg>
@ -143,7 +143,7 @@
<span class="mt-1.5 text-xs font-medium transition-colors duration-300" <span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{ :class="{
'text-success': currentStep > 4, 'text-success': currentStep > 4,
'text-warning': currentStep === 4, 'text-black dark:text-warning': currentStep === 4,
'text-neutral-500 dark:text-neutral-400': currentStep < 4 'text-neutral-500 dark:text-neutral-400': currentStep < 4
}">Restart</span> }">Restart</span>
</div> </div>

2
resources/views/livewire/upgrade.blade.php
View file

@ -81,7 +81,7 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5
<div class="p-4 rounded-lg bg-neutral-200 dark:bg-coolgray-200"> <div class="p-4 rounded-lg bg-neutral-200 dark:bg-coolgray-200">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<template x-if="!upgradeComplete && !upgradeError"> <template x-if="!upgradeComplete && !upgradeError">
<svg class="w-5 h-5 text-warning animate-spin" <svg class="w-5 h-5 text-black dark:text-warning animate-spin"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle> stroke-width="4"></circle>