feat: backups alignment with Figma (#5559)

* feat: backup admonitions

* feat: align modals + fix backupitem

* fix: body needs opac 80

* fix: lint

packages/ui/src/layouts/wrapped/hosting/manage/files.vue

@@ -21,8 +21,8 @@
 		</div>
 
 		<div v-else key="content" class="contents">
-			<Admonition v-if="serverBusy" type="warning" class="mb-5">
-				<template #header>{{ busyTooltip }}</template>
+			<Admonition v-if="nonBackupBusyReasons.length > 0" type="warning" class="mb-5">
+				<template #header>{{ formatMessage(nonBackupBusyReasons[0].reason) }}</template>
 				File operations are disabled while the operation is in progress.
 			</Admonition>
 			<div class="relative flex w-full flex-col">
@@ -327,6 +327,13 @@ const serverBusy = computed(() => busyReasons.value.length > 0)
 const busyTooltip = computed(() =>
 	busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
 )
+const nonBackupBusyReasons = computed(() =>
+	busyReasons.value.filter(
+		(r) =>
+			r.reason.id !== 'servers.busy.backup-creating' &&
+			r.reason.id !== 'servers.busy.backup-restoring',
+	),
+)
 const queryClient = useQueryClient()
 
 interface BaseOperation {