🎨

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>

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>