🎨

src/client/components/error.vue

@@ -1,5 +1,6 @@
 <template>
 <div class="mjndxjcg _panel">
+	<img src="https://xn--931a.moe/assets/error.jpg" alt=""/>
 	<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
 	<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
 </div>
@@ -38,5 +39,12 @@ export default Vue.extend({
 	> .button {
 		margin: 0 auto;
 	}
+
+	> img {
+		vertical-align: bottom;
+		height: 150px;
+		margin-bottom: 16px;
+		border-radius: 16px;
+	}
 }
 </style>

src/client/components/notes.vue

@@ -1,6 +1,9 @@
 <template>
 <div class="mk-notes" v-size="[{ max: 500 }]">
-	<div class="empty" v-if="empty">{{ $t('noNotes') }}</div>
+	<div class="empty _panel" v-if="empty">
+		<img src="https://xn--931a.moe/assets/info.jpg" alt=""/>
+		<div>{{ $t('noNotes') }}</div>
+	</div>
 
 	<mk-error v-if="error" @retry="init()"/>
 
@@ -24,8 +27,6 @@ import i18n from '../i18n';
 import paging from '../scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
-import getUserName from '../../misc/get-user-name';
-import getNoteSummary from '../../misc/get-note-summary';
 
 export default Vue.extend({
 	i18n,
@@ -85,14 +86,15 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .mk-notes {
 	> .empty {
-		margin: 0 auto;
 		padding: 32px;
 		text-align: center;
-		background: rgba(0, 0, 0, 0.3);
-		color: #fff;
-		-webkit-backdrop-filter: blur(16px);
-		backdrop-filter: blur(16px);
-		border-radius: 6px;
+
+		> img {
+			vertical-align: bottom;
+			height: 128px;
+			margin-bottom: 16px;
+			border-radius: 16px;
+		}
 	}
 
 	> .notes {

src/client/pages/not-found.vue

@@ -1,11 +1,13 @@
 <template>
-<div class="">
+<div class="ipledcug">
 	<portal to="icon"><fa :icon="faExclamationTriangle"/></portal>
 	<portal to="title">{{ $t('notFound') }}</portal>
 
 	<section class="_card">
-		<div class="_title"><fa :icon="faExclamationTriangle"/> {{ $t('notFound') }}</div>
-		<div class="_content">{{ $t('notFoundDescription') }}</div>
+		<div class="_content">
+			<img src="https://xn--931a.moe/assets/not-found.jpg" alt=""/>
+			<div>{{ $t('notFoundDescription') }}</div>
+		</div>
 	</section>
 </div>
 </template>
@@ -33,4 +35,18 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
+.ipledcug {
+	> ._card {
+		> ._content {
+			text-align: center;
+					
+			> img {
+				vertical-align: bottom;
+				height: 150px;
+				margin-bottom: 16px;
+				border-radius: 16px;
+			}
+		}
+	}
+}
 </style>