Merge branch 'develop'

24 files changed, 234 insertions, 146 deletions

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 53fd0a7c7f..d41dd9d521 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,5 +1,5 @@
 <template>
-<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" appear :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
+<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
 		<slot :item="item" :i="i"></slot>
 		<div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)">
@@ -109,8 +109,6 @@ export default Vue.extend({
 			line-height: 32px;
 			text-align: center;
 			font-size: 12px;
-			border-radius: 64px;
-			background: var(--dateLabelBg);
 			color: var(--dateLabelFg);
 
 			> span {
diff --git a/src/client/components/error.vue b/src/client/components/error.vue
index f4698247b2..7446a7cb5d 100644
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -27,8 +27,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mjndxjcg {
-	max-width: 350px;
-	margin: 0 auto;
 	padding: 32px;
 	text-align: center;
 
diff --git a/src/client/components/google.vue b/src/client/components/google.vue
index 21560008f6..01dcf24bf8 100644
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -1,12 +1,13 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><fa icon="search"/> {{ $t('search') }}</button>
+	<button @click="search"><fa :icon="faSearch"/> {{ $t('search') }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 
 export default Vue.extend({
@@ -14,7 +15,8 @@ export default Vue.extend({
 	props: ['q'],
 	data() {
 		return {
-			query: null
+			query: null,
+			faSearch
 		};
 	},
 	mounted() {
@@ -42,27 +44,17 @@ export default Vue.extend({
 		width: 100%;
 		height: 40px;
 		font-size: 16px;
-		color: var(--googleSearchFg);
-		background: var(--googleSearchBg);
-		border: solid 1px var(--googleSearchBorder);
+		border: solid 1px var(--divider);
 		border-radius: 4px 0 0 4px;
-
-		&:hover {
-			border-color: var(--googleSearchHoverBorder);
-		}
 	}
 
 	> button {
 		flex-shrink: 0;
 		padding: 0 16px;
-		border: solid 1px var(--googleSearchBorder);
+		border: solid 1px var(--divider);
 		border-left: none;
 		border-radius: 0 4px 4px 0;
 
-		&:hover {
-			background-color: var(--googleSearchHoverButton);
-		}
-
 		&:active {
 			box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
 		}
diff --git a/src/client/components/index.ts b/src/client/components/index.ts
index 9e95fba873..87547599a9 100644
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -9,7 +9,6 @@ import ellipsis from './ellipsis.vue';
 import time from './time.vue';
 import url from './url.vue';
 import loading from './loading.vue';
-import SequentialEntrance from './sequential-entrance.vue';
 import error from './error.vue';
 import streamIndicator from './stream-indicator.vue';
 
@@ -23,5 +22,4 @@ Vue.component('mk-time', time);
 Vue.component('mk-url', url);
 Vue.component('mk-loading', loading);
 Vue.component('mk-error', error);
-Vue.component('sequential-entrance', SequentialEntrance);
 Vue.component('stream-indicator', streamIndicator);
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 3bb1bda5e2..79b5150b11 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -90,7 +90,7 @@ export default Vue.extend({
 	> div {
 		background-color: var(--fg);
 		border-radius: 6px;
-		color: var(--secondary);
+		color: var(--accentLighten);
 		display: inline-block;
 		font-size: 14px;
 		font-weight: bold;
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
index 6fee809c40..74e9a29ccf 100644
--- a/src/client/components/menu.vue
+++ b/src/client/components/menu.vue
@@ -1,6 +1,6 @@
 <template>
 <x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction" ref="items">
+	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>
 			<span v-else-if="item.type === 'label'" class="label item" :key="i">
@@ -28,7 +28,7 @@
 				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
 			</button>
 		</template>
-	</sequential-entrance>
+	</div>
 </x-popup>
 </template>
 
@@ -91,7 +91,7 @@ export default Vue.extend({
 	mounted() {
 		if (this.viaKeyboard) {
 			this.$nextTick(() => {
-				focusNext(this.$refs.items.$slots.default[0].elm, true);
+				focusNext(this.$refs.items.children[0], true);
 			});
 		}
 	},
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index 7f6f972896..5efbb8f1e9 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="zlrxdaqttccpwhpaagdmkawtzklsccam">
+<div class="wrpstxzv" v-size="[{ max: 450 }]">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<x-note-header class="header" :note="note" :mini="true"/>
@@ -56,13 +56,12 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.zlrxdaqttccpwhpaagdmkawtzklsccam {
+.wrpstxzv {
 	display: flex;
 	padding: 16px 32px;
 	font-size: 0.9em;
-	background: rgba(0, 0, 0, 0.03);
 
-	@media (max-width: 450px) {
+	&.max-width_450px {
 		padding: 14px 16px;
 	}
 
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 909ed30235..db669309d3 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -79,7 +79,7 @@
 			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply"/>
 </div>
 </template>
 
@@ -684,6 +684,7 @@ export default Vue.extend({
 .note {
 	position: relative;
 	transition: box-shadow 0.1s ease;
+	overflow: hidden;
 
 	&.max-width_500px {
 		font-size: 0.9em;
@@ -749,14 +750,6 @@ export default Vue.extend({
 		opacity: 1;
 	}
 
-	> *:first-child {
-		border-radius: var(--radius) var(--radius) 0 0;
-	}
-
-	> *:last-child {
-		border-radius: 0 0 var(--radius) var(--radius);
-	}
-
 	> .info {
 		display: flex;
 		align-items: center;
@@ -784,6 +777,11 @@ export default Vue.extend({
 		padding-top: 8px;
 	}
 
+	> .reply-to {
+		opacity: 0.7;
+		padding-bottom: 0;
+	}
+
 	> .renote {
 		display: flex;
 		align-items: center;
@@ -937,5 +935,9 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	> .reply {
+		border-top: solid 1px var(--divider);
+	}
 }
 </style>
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index dc93c1f6c4..bc2ae8472c 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -7,22 +7,22 @@
 
 	<mk-error v-if="error" @retry="init()"/>
 
-	<div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);">
-		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+	<div v-if="more && reversed" style="margin-bottom: var(--margin);">
+		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</mk-button>
+		</button>
 	</div>
 
 	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
 		<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</x-list>
 
-	<div class="more" v-if="more && !reversed" style="margin-top: var(--margin);">
-		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+	<div v-if="more && !reversed" style="margin-top: var(--margin);">
+		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</mk-button>
+		</button>
 	</div>
 </div>
 </template>
@@ -111,16 +111,10 @@ export default Vue.extend({
 	&.max-width_500px {
 		> .notes {
 			> ::v-deep *:not(:last-child) {
-				margin-bottom: var(--marginHalf);
+				//margin-bottom: var(--marginHalf);
+				margin-bottom: 0;
 			}
 		}
 	}
-
-	> .more > .button {
-		margin-left: auto;
-		margin-right: auto;
-		height: 48px;
-		width: 100%;
-	}
 }
 </style>
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index ff6d63821f..a17663b01d 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,13 +1,13 @@
 <template>
-<div class="mk-notifications" :class="{ page }">
+<div class="mk-notifications">
 	<x-list class="notifications" :items="items" v-slot="{ item: notification }">
 		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" :key="notification.id"/>
-		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="notification" :class="{ _panel: page }" :key="notification.id"/>
+		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 	</x-list>
 
-	<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
+	<button class="_panel _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-		<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
+		<template v-if="moreFetching"><mk-loading inline/></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import paging from '../scripts/paging';
 import XNotification from './notification.vue';
@@ -43,11 +42,6 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
-		page: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
 	},
 
 	data() {
@@ -60,7 +54,6 @@ export default Vue.extend({
 					includeTypes: this.type ? [this.type] : undefined
 				})
 			},
-			faSpinner
 		};
 	},
 
@@ -94,35 +87,10 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-notifications {
-	&.page {
-		> .notifications {
-			> ::v-deep * {
-				margin-bottom: var(--margin);
-			}
-		}
-	}
-
-	&:not(.page) {
-		> .notifications {
-			> ::v-deep * {
-				margin-bottom: 8px;
-			}
-
-			> .notification {
-				background: var(--panel);
-				border-radius: 6px;
-				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-			}
-		}
-	}
-
-	> .more {
-		display: block;
-		width: 100%;
-		padding: 16px;
-
-		> [data-icon] {
-			margin-right: 4px;
+	> .notifications {
+		> ::v-deep * {
+			//margin-bottom: var(--margin);
+			margin-bottom: 0;
 		}
 	}
 
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index b5b8c2c02d..91c7dab598 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -53,7 +53,7 @@ import Vue from 'vue';
 import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import { erase } from '../../prelude/array';
-import { addTimespan } from '../../prelude/time';
+import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '../../misc/format-time-string';
 import MkInput from './ui/input.vue';
 import MkSelect from './ui/select.vue';
@@ -73,7 +73,7 @@ export default Vue.extend({
 			choices: ['', ''],
 			multiple: false,
 			expiration: 'infinite',
-			atDate: formatDateTimeString(addTimespan(new Date(), 1, 'days'), 'yyyy-MM-dd'),
+			atDate: formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'),
 			atTime: '00:00',
 			after: 0,
 			unit: 'second',
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index b6531474cf..9cb527af23 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -17,7 +17,8 @@
 				:initial-note="initialNote"
 				:instant="instant"
 				@posted="onPosted"
-				@cancel="onCanceled"/>
+				@cancel="onCanceled"
+				style="border-radius: var(--radius);"/>
 		</transition>
 	</div>
 </div>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 2d35cfe167..7b84938d5a 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -586,7 +586,6 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .gafaadew {
 	background: var(--panel);
-	border-radius: var(--radius);
 
 	> header {
 		z-index: 1000;
diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
new file mode 100644
index 0000000000..95b37d3053
--- /dev/null
+++ b/src/client/components/remote-caution.vue
@@ -0,0 +1,36 @@
+<template>
+<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../i18n';
+
+export default Vue.extend({
+	i18n,
+	props: {
+		href: {
+			type: String,
+			required: true
+		},
+	},
+	data() {
+		return {
+			faExclamationTriangle
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.jmgmzlwq {
+	font-size: 0.8em;
+	padding: 16px;
+
+	> a {
+		margin-left: 4px;
+		color: var(--accent);
+	}
+}
+</style>
diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue
deleted file mode 100644
index 50113cff1c..0000000000
--- a/src/client/components/sequential-entrance.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<transition-group v-if="$store.state.device.animation"
-	class="uupnnhew"
-	name="staggered"
-	tag="div"
-	appear
->
-	<slot></slot>
-</transition-group>
-<div v-else>
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	methods: {
-		focus() {
-			this.$slots.default[0].elm.focus();
-		}
-	},
-});
-</script>
-
-<style lang="scss">
-.uupnnhew {
-	> .staggered-enter {
-		opacity: 0;
-		transform: translateY(-64px);
-	}
-
-	@for $i from 1 through 30 {
-		> .staggered-enter-active:nth-child(#{$i}) {
-			transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
-		}
-	}
-}
-</style>
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index 758bc59107..758bc59107 100644..100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 5264224c18..15289c820e 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -124,7 +124,6 @@ export default Vue.extend({
 	&.primary {
 		color: #fff;
 		background: var(--accent);
-		box-shadow: 0 6px 16px var(--accentShadow);
 
 		&:not(:disabled):hover {
 			background: var(--jkhztclx);
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 4e7c9420ab..9d5abdf2dd 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -110,6 +110,7 @@ export default Vue.extend({
 	> header {
 		position: relative;
 		box-shadow: 0 1px 0 0 var(--divider);
+		z-index: 1;
 
 		> .title {
 			margin: 0;
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index 7f04b35de1..e888b7420c 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -1,5 +1,5 @@
 <template>
-<sequential-entrance class="cxiknjgy" :class="{ autoMargin }">
+<div class="cxiknjgy" :class="{ autoMargin }">
 	<slot :items="items"></slot>
 	<div class="empty" v-if="empty" key="_empty_">
 		<slot name="empty"></slot>
@@ -10,7 +10,7 @@
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</mk-button>
 	</div>
-</sequential-entrance>
+</div>
 </template>
 
 <script lang="ts">
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
new file mode 100644
index 0000000000..7fb857f520
--- /dev/null
+++ b/src/client/components/ui/range.vue
@@ -0,0 +1,138 @@
+<template>
+<div class="timctyfi" :class="{ focused, disabled }">
+	<div class="icon"><slot name="icon"></slot></div>
+	<span class="title"><slot name="title"></slot></span>
+	<input
+		type="range"
+		ref="input"
+		v-model="v"
+		:disabled="disabled"
+		:min="min"
+		:max="max"
+		:step="step"
+		:autofocus="autofocus"
+		@focus="focused = true"
+		@blur="focused = false"
+		@input="$emit('input', $event.target.value)"
+	/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		}
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false
+		};
+	},
+	watch: {
+		value(v) {
+			this.v = parseFloat(v);
+		}
+	},
+	mounted() {
+		if (this.autofocus) {
+			this.$nextTick(() => {
+				this.$refs.input.focus();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.timctyfi {
+	position: relative;
+	margin: 8px;
+
+	> .icon {
+		display: inline-block;
+		width: 24px;
+		text-align: center;
+	}
+
+	> .title {
+		pointer-events: none;
+		font-size: 16px;
+		color: var(--inputLabel);
+		overflow: hidden;
+	}
+
+	> input {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background: var(--xxubwiul);
+		height: 7px;
+		margin: 0 8px;
+		outline: 0;
+		border: 0;
+		border-radius: 7px;
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			box-sizing: content-box;
+		}
+
+		&::-moz-range-thumb {
+			-moz-appearance: none;
+			appearance: none;
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+		}
+	}
+}
+</style>
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index a1e89cdf02..ce21949713 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -158,6 +158,11 @@ export default Vue.extend({
 			outline: none;
 			box-shadow: none;
 			color: var(--fg);
+
+			option,
+			optgroup {
+				background: var(--bg);
+			}
 		}
 
 		> .prefix,
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 940d3892db..94d07cbaed 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -230,8 +230,8 @@ export default Vue.extend({
 		position: relative;
 		display: block;
 		font-size: 14px;
-		box-shadow: 0 1px 4px var(--tyvedwbe);
-		border-radius: 4px;
+		box-shadow: 0 0 0 1px var(--divider);
+		border-radius: 6px;
 		overflow: hidden;
 
 		&:hover {
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index a70b3c2d13..9d0c5e4251 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -6,15 +6,15 @@
 			<button class="_button" @click="close()"><fa :icon="faTimes"/></button>
 		</div>
 
-		<sequential-entrance class="users">
-			<router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
+		<div class="users">
+			<router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
 				<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
 				<div class="body">
 					<mk-user-name :user="extract ? extract(item) : item" class="name"/>
 					<mk-acct :user="extract ? extract(item) : item" class="acct"/>
 				</div>
 			</router-link>
-		</sequential-entrance>
+		</div>
 
 		<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
index 28413fd837..dc7b41e286 100644
--- a/src/client/components/visibility-chooser.vue
+++ b/src/client/components/visibility-chooser.vue
@@ -1,6 +1,6 @@
 <template>
 <x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<sequential-entrance class="gqyayizv" :delay="30">
+	<div class="gqyayizv">
 		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
 			<div><fa :icon="faGlobe"/></div>
 			<div>
@@ -29,7 +29,7 @@
 				<span>{{ $t('_visibility.specifiedDescription') }}</span>
 			</div>
 		</button>
-	</sequential-entrance>
+	</div>
 </x-popup>
 </template>