Tweak UI

1 files changed, 17 insertions, 3 deletions

diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue
index 2a48faccb3..d04dc07624 100644
--- a/src/client/components/form/suspense.vue
+++ b/src/client/components/form/suspense.vue
@@ -9,9 +9,9 @@
 		<slot :result="result"></slot>
 	</div>
 	<div class="_formItem" v-else>
-		<div class="_formPanel">
-			error!
-			<button @click="retry">retry</button>
+		<div class="_formPanel eiurkvay">
+			<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
+			<MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
 		</div>
 	</div>
 </transition>
@@ -20,8 +20,13 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import './form.scss';
+import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({
+	components: {
+		MkButton
+	},
+
 	props: {
 		p: {
 			type: Function as PropType<() => Promise<any>>,
@@ -84,4 +89,13 @@ export default defineComponent({
 .fade-leave-to {
 	opacity: 0;
 }
+
+.eiurkvay {
+	padding: 16px;
+	text-align: center;
+
+	> .retry {
+		margin-top: 16px;
+	}
+}
 </style>