:art:

5 files changed, 20 insertions, 12 deletions

diff --git a/src/client/app/common/views/components/mute-and-block.vue b/src/client/app/common/views/components/mute-and-block.vue
index b244f975bb..8aac74c4e2 100644
--- a/src/client/app/common/views/components/mute-and-block.vue
+++ b/src/client/app/common/views/components/mute-and-block.vue
@@ -4,9 +4,7 @@
 
 	<section>
 		<header>%i18n:@mute%</header>
-		<ui-info v-if="!muteFetching && mute.length == 0">
-			<p>%i18n:@no-muted-users%</p>
-		</ui-info>
+		<ui-info v-if="!muteFetching && mute.length == 0">%i18n:@no-muted-users%</ui-info>
 		<div class="users" v-if="mute.length != 0">
 			<div v-for="user in mute" :key="user.id">
 				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -16,9 +14,7 @@
 
 	<section>
 		<header>%i18n:@block%</header>
-		<ui-info v-if="!blockFetching && block.length == 0">
-			<p>%i18n:@no-blocked-users%</p>
-		</ui-info>
+		<ui-info v-if="!blockFetching && block.length == 0">%i18n:@no-blocked-users%</ui-info>
 		<div class="users" v-if="block.length != 0">
 			<div v-for="user in block" :key="user.id">
 				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
diff --git a/src/client/app/common/views/components/ui/info.vue b/src/client/app/common/views/components/ui/info.vue
index e2ea1d7164..3d62a3c7aa 100644
--- a/src/client/app/common/views/components/ui/info.vue
+++ b/src/client/app/common/views/components/ui/info.vue
@@ -1,6 +1,7 @@
 <template>
 <div class="ymxyweixqwsxauxldgpvecjepnwxbylu" :class="{ warn }">
 	<i v-if="warn">%fa:exclamation-triangle%</i>
+	<i v-else>%fa:info-circle%</i>
 	<slot></slot>
 </div>
 </template>
@@ -23,11 +24,20 @@ export default Vue.extend({
 	margin 16px 0
 	padding 16px
 	font-size 90%
-
-	> i
-		margin-right 4px
+	background var(--infoBg)
+	color var(--infoFg)
 
 	&.warn
 		background var(--infoWarnBg)
 		color var(--infoWarnFg)
+
+	&:first-child
+		margin-top 0
+
+	&:last-child
+		margin-bottom 0
+
+	> i
+		margin-right 4px
+
 </style>
diff --git a/src/client/app/desktop/views/components/settings.apps.vue b/src/client/app/desktop/views/components/settings.apps.vue
index 7d562f9c11..bf8faf250e 100644
--- a/src/client/app/desktop/views/components/settings.apps.vue
+++ b/src/client/app/desktop/views/components/settings.apps.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="root">
-	<div class="none ui info" v-if="!fetching && apps.length == 0">
-		<p>%fa:info-circle%%i18n:@no-apps%</p>
-	</div>
+	<ui-info v-if="!fetching && apps.length == 0">%i18n:@no-apps%</ui-info>
 	<div class="apps" v-if="apps.length != 0">
 		<div v-for="app in apps">
 			<p><b>{{ app.name }}</b></p>
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index b4bd45744e..7942f64576 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -131,6 +131,8 @@
 		remoteInfoBg: '#42321c',
 		remoteInfoFg: '#ffbd3e',
 
+		infoBg: '#253142',
+		infoFg: '#fff',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
 
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index ea1de39afc..353c9847e0 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -131,6 +131,8 @@
 		remoteInfoBg: '#fff0db',
 		remoteInfoFg: '#573c08',
 
+		infoBg: '#e5f5ff',
+		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
 		infoWarnFg: '#573c08',