fix(ui): prevent update button jitter when checking for updates
- Add min-width to update button to maintain consistent width across states - Ensure all button states have consistent border styling with transparent borders
This commit is contained in:
@@ -258,11 +258,11 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
|
|||||||
<button
|
<button
|
||||||
onClick={handleCheckUpdate}
|
onClick={handleCheckUpdate}
|
||||||
disabled={isCheckingUpdate || isDownloading}
|
disabled={isCheckingUpdate || isDownloading}
|
||||||
className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
|
className={`min-w-[88px] px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
|
||||||
isCheckingUpdate || isDownloading
|
isCheckingUpdate || isDownloading
|
||||||
? "bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed"
|
? "bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed border border-transparent"
|
||||||
: hasUpdate
|
: hasUpdate
|
||||||
? "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white"
|
? "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white border border-transparent"
|
||||||
: showUpToDate
|
: showUpToDate
|
||||||
? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800"
|
? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800"
|
||||||
: "bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-blue-500 dark:text-blue-400 border border-gray-200 dark:border-gray-600"
|
: "bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-blue-500 dark:text-blue-400 border border-gray-200 dark:border-gray-600"
|
||||||
|
|||||||
Reference in New Issue
Block a user