From e825d3be83112daf9015ce82cb00ef911e236bef Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Apr 2021 12:00:07 +0900
Subject: Tweak UI

---
 src/client/components/form/suspense.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'src/client/components')

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>
-- 
cgit v1.2.3-freya