🎨

packages/frontend/src/components/global/MkError.vue

@@ -4,20 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
-	<div :class="$style.root">
-		<img v-if="instance.serverErrorImageUrl" :class="$style.img" :src="instance.serverErrorImageUrl" draggable="false"/>
-		<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
-		<MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
-	</div>
-</Transition>
+<MkResult type="error">
+	<MkButton :class="$style.button" rounded @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
+</MkResult>
 </template>
 
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
-import { prefer } from '@/preferences.js';
-import { instance } from '@/instance.js';
 
 const emit = defineEmits<{
 	(ev: 'retry'): void;
@@ -25,25 +19,7 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss" module>
-.root {
-	padding: 32px;
-	text-align: center;
-  align-items: center;
-}
-
-.text {
-	margin: 0 0 8px 0;
-}
-
 .button {
 	margin: 0 auto;
 }
-
-.img {
-	vertical-align: bottom;
-  width: 128px;
-	height: 128px;
-	margin-bottom: 16px;
-	border-radius: 16px;
-}
 </style>