From 11afa8140c5706c8ad105e50cef63df83db66e7a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 14 Nov 2018 16:30:58 +0900
Subject: [PATCH] [Client] Improve alert component

---
 package.json                                  |   1 -
 src/client/app/admin/views/announcements.vue  |  10 +-
 src/client/app/admin/views/emoji.vue          |  16 +-
 src/client/app/admin/views/instance.vue       |   6 +-
 src/client/app/app.styl                       |  26 ---
 .../app/common/scripts/check-for-update.ts    |   2 +-
 .../app/common/scripts/fuck-ad-block.ts       |   7 +-
 src/client/app/common/scripts/note-mixin.ts   |   7 +-
 .../app/common/views/components/alert.vue     | 179 ++++++++++++++++++
 .../app/common/views/components/note-menu.vue |  10 +-
 src/client/app/common/views/components/ok.vue | 175 -----------------
 .../views/components/password-settings.vue    |   7 +-
 .../views/components/profile-editor.vue       |   2 +-
 .../app/common/views/components/theme.vue     |  14 +-
 .../app/common/views/components/ui/button.vue |   2 +
 .../views/components/ui/horizon-group.vue     |  22 ++-
 src/client/app/desktop/api/update-avatar.ts   |  14 +-
 src/client/app/desktop/api/update-banner.ts   |  12 +-
 src/client/app/desktop/script.ts              |  16 --
 .../app/desktop/views/components/dialog.vue   | 168 ----------------
 .../desktop/views/components/drive.file.vue   |   7 +-
 .../desktop/views/components/drive.folder.vue |   7 +-
 .../app/desktop/views/components/drive.vue    |  14 +-
 .../app/desktop/views/components/home.vue     |   7 +-
 .../app/desktop/views/components/settings.vue |   6 +-
 .../views/pages/deck/deck.user-column.vue     |   4 +-
 .../desktop/views/pages/user/user.profile.vue |   2 +-
 src/client/app/init.ts                        |  10 +-
 src/client/app/mobile/script.ts               |  16 --
 .../app/mobile/views/components/dialog.vue    | 167 ----------------
 .../app/mobile/views/pages/settings.vue       |   4 +-
 31 files changed, 268 insertions(+), 672 deletions(-)
 create mode 100644 src/client/app/common/views/components/alert.vue
 delete mode 100644 src/client/app/common/views/components/ok.vue
 delete mode 100644 src/client/app/desktop/views/components/dialog.vue
 delete mode 100644 src/client/app/mobile/views/components/dialog.vue

diff --git a/package.json b/package.json
index abacaa7275..a11ee907ea 100644
--- a/package.json
+++ b/package.json
@@ -221,7 +221,6 @@
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader": "1.2.1",
-		"vue-sweetalert2": "1.5.9",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
 		"vuewordcloud": "18.7.11",
diff --git a/src/client/app/admin/views/announcements.vue b/src/client/app/admin/views/announcements.vue
index 75e316bcf0..d1c4284064 100644
--- a/src/client/app/admin/views/announcements.vue
+++ b/src/client/app/admin/views/announcements.vue
@@ -48,15 +48,15 @@ export default Vue.extend({
 		},
 
 		remove(i) {
-			this.$swal({
+			this.$root.alert({
 				type: 'warning',
 				text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title),
 				showCancelButton: true
 			}).then(res => {
-				if (!res.value) return;
+				if (!res) return;
 				this.announcements = this.announcements.filter((_, j) => j !== i);
 				this.save(true);
-				this.$swal({
+				this.$root.alert({
 					type: 'success',
 					text: this.$t('_remove.removed')
 				});
@@ -68,13 +68,13 @@ export default Vue.extend({
 				broadcasts: this.announcements
 			}).then(() => {
 				if (!silent) {
-					this.$swal({
+					this.$root.alert({
 						type: 'success',
 						text: this.$t('saved')
 					});
 				}
 			}).catch(e => {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/app/admin/views/emoji.vue b/src/client/app/admin/views/emoji.vue
index 68092fef56..6810340a3e 100644
--- a/src/client/app/admin/views/emoji.vue
+++ b/src/client/app/admin/views/emoji.vue
@@ -75,13 +75,13 @@ export default Vue.extend({
 				url: this.url,
 				aliases: this.aliases.split(' ').filter(x => x.length > 0)
 			}).then(() => {
-				this.$swal({
+				this.$root.alert({
 					type: 'success',
 					text: this.$t('add-emoji.added')
 				});
 				this.fetchEmojis();
 			}).catch(e => {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: e
 				});
@@ -103,12 +103,12 @@ export default Vue.extend({
 				url: emoji.url,
 				aliases: emoji.aliases.split(' ').filter(x => x.length > 0)
 			}).then(() => {
-				this.$swal({
+				this.$root.alert({
 					type: 'success',
 					text: this.$t('updated')
 				});
 			}).catch(e => {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: e
 				});
@@ -116,23 +116,23 @@ export default Vue.extend({
 		},
 
 		removeEmoji(emoji) {
-			this.$swal({
+			this.$root.alert({
 				type: 'warning',
 				text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name),
 				showCancelButton: true
 			}).then(res => {
-				if (!res.value) return;
+				if (!res) return;
 
 				this.$root.api('admin/emoji/remove', {
 					id: emoji.id
 				}).then(() => {
-					this.$swal({
+					this.$root.alert({
 						type: 'success',
 						text: this.$t('remove-emoji.removed')
 					});
 					this.fetchEmojis();
 				}).catch(e => {
-					this.$swal({
+					this.$root.alert({
 						type: 'error',
 						text: e
 					});
diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue
index 130a78e5c5..e52a20d708 100644
--- a/src/client/app/admin/views/instance.vue
+++ b/src/client/app/admin/views/instance.vue
@@ -149,7 +149,7 @@ export default Vue.extend({
 			this.$root.api('admin/invite').then(x => {
 				this.inviteCode = x.code;
 			}).catch(e => {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: e
 				});
@@ -181,12 +181,12 @@ export default Vue.extend({
 				githubClientId: this.githubClientId,
 				githubClientSecret: this.githubClientSecret,
 			}).then(() => {
-				this.$swal({
+				this.$root.alert({
 					type: 'success',
 					text: this.$t('saved')
 				});
 			}).catch(e => {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 3d8218dbda..13b0133287 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -123,29 +123,3 @@ pre
 
 [data-icon]
 	display inline-block
-
-.swal2-container
-	z-index 10000 !important
-
-	&.swal2-shown
-		background-color rgba(0, 0, 0, 0.5) !important
-
-.swal2-popup
-	background var(--face) !important
-
-.swal2-content
-	color var(--text) !important
-
-.swal2-confirm
-	background-color var(--primary) !important
-	border-left-color var(--primary) !important
-	border-right-color var(--primary) !important
-	color var(--primaryForeground) !important
-
-	&:hover
-		background-image none !important
-		background-color var(--primaryDarken5) !important
-
-	&:active
-		background-image none !important
-		background-color var(--primaryDarken5) !important
diff --git a/src/client/app/common/scripts/check-for-update.ts b/src/client/app/common/scripts/check-for-update.ts
index 377eccc6b5..7fe9d8d50c 100644
--- a/src/client/app/common/scripts/check-for-update.ts
+++ b/src/client/app/common/scripts/check-for-update.ts
@@ -22,7 +22,7 @@ export default async function($root: any, force = false, silent = false) {
 		}
 
 		if (!silent) {
-			$root.$dialog({
+			$root.alert({
 				title: $root.$t('@.update-available-title'),
 				text: $root.$t('@.update-available', { newer, current })
 			});
diff --git a/src/client/app/common/scripts/fuck-ad-block.ts b/src/client/app/common/scripts/fuck-ad-block.ts
index 8d0a3e2785..f5cc1b71f2 100644
--- a/src/client/app/common/scripts/fuck-ad-block.ts
+++ b/src/client/app/common/scripts/fuck-ad-block.ts
@@ -4,12 +4,9 @@ export default ($root: any) => {
 	require('fuckadblock');
 
 	function adBlockDetected() {
-		$root.$dialog({
+		$root.alert({
 			title: $root.$t('@.adblock.detected'),
-			text: $root.$t('@.adblock.warning'),
-			actins: [{
-				text: 'OK'
-			}]
+			text: $root.$t('@.adblock.warning')
 		});
 	}
 
diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 9f1a4c6eea..80935927d5 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -3,7 +3,6 @@ import { sum } from '../../../../prelude/array';
 import shouldMuteNote from './should-mute-note';
 import MkNoteMenu from '../views/components/note-menu.vue';
 import MkReactionPicker from '../views/components/reaction-picker.vue';
-import Ok from '../views/components/ok.vue';
 
 function focus(el, fn) {
 	const target = fn(el);
@@ -142,7 +141,11 @@ export default (opts: Opts = {}) => ({
 			this.$root.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				/*this.$root.alert({
+					pointer: false,
+					autoClose: true
+				});*/
 			});
 		},
 
diff --git a/src/client/app/common/views/components/alert.vue b/src/client/app/common/views/components/alert.vue
new file mode 100644
index 0000000000..8f307f86ea
--- /dev/null
+++ b/src/client/app/common/views/components/alert.vue
@@ -0,0 +1,179 @@
+<template>
+<div class="felqjxyj" :class="{ pointer }">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main">
+		<div class="icon" :class="type"><fa :icon="icon"/></div>
+		<header v-if="title" v-html="title"></header>
+		<div class="body" v-if="text" v-html="text"></div>
+		<ui-horizon-group no-grow class="buttons">
+			<ui-button @click="ok" primary>OK</ui-button>
+			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
+		</ui-horizon-group>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: 'info'
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: String,
+			required: true
+		},
+		showCancelButton: {
+			type: Boolean,
+			default: false
+		},
+		pointer: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	computed: {
+		icon(): any {
+			switch (this.type) {
+				case 'success': return 'check';
+				case 'error': return faTimesCircle;
+				case 'warning': return 'exclamation-triangle';
+				case 'info': return 'info-circle';
+				case 'question': return faQuestionCircle;
+			}
+		}
+	},
+
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				scale: [1.2, 1],
+				duration: 300,
+				easing: [0, 0.5, 0.5, 1]
+			});
+		});
+	},
+
+	methods: {
+		ok() {
+			this.$emit('ok');
+			this.close();
+		},
+
+		cancel() {
+			this.$emit('cancel');
+			this.close();
+		},
+
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [ 0.5, -0.5, 1, 0.5 ],
+				complete: () => this.destroyDom()
+			});
+		},
+
+		onBgClick() {
+			this.cancel();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.felqjxyj
+	display flex
+	align-items center
+	justify-content center
+	position fixed
+	z-index 30000
+	top 0
+	left 0
+	width 100%
+	height 100%
+
+	&:not(.pointer)
+		pointer-events none
+
+	> .bg
+		display block
+		position fixed
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		margin auto
+		padding 32px 42px
+		min-width 320px
+		max-width 480px
+		width calc(100% - 32px)
+		text-align center
+		background var(--face)
+		border-radius 8px
+		color var(--faceText)
+		opacity 0
+
+		> .icon
+			font-size 32px
+
+			&.success
+				color #37ec92
+
+			&.error
+				color #ec4137
+
+			&.warning
+				color #ecb637
+
+			> *
+				display block
+				margin 0 auto
+
+		> .header
+			margin 16px 0
+			font-weight bold
+
+		> .body
+			margin 16px 0
+
+</style>
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index 86b3820c36..d45c9c8835 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -9,7 +9,6 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 import { url } from '../../../config';
 import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
-import Ok from './ok.vue';
 import { concat, intersperse } from '../../../../../prelude/array';
 
 export default Vue.extend({
@@ -79,7 +78,8 @@ export default Vue.extend({
 			this.$root.api('i/pin', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				//this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
@@ -105,7 +105,8 @@ export default Vue.extend({
 			this.$root.api('notes/favorites/create', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				//this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
@@ -114,7 +115,8 @@ export default Vue.extend({
 			this.$root.api('notes/favorites/delete', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$root.new(Ok);
+				// TODO
+				//this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
diff --git a/src/client/app/common/views/components/ok.vue b/src/client/app/common/views/components/ok.vue
deleted file mode 100644
index 63bd784b18..0000000000
--- a/src/client/app/common/views/components/ok.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-<div class="yvbkymdqeusiqucuuloahhiqflzinufs">
-	<div class="bg" ref="bg"></div>
-	<div class="body" ref="body">
-		<div class="icon">
-			<div class="circle left"></div>
-			<span class="check tip"></span>
-			<span class="check long"></span>
-			<div class="ring"></div>
-			<div class="fix"></div>
-			<div class="circle right"></div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	mounted() {
-		this.$nextTick(() => {
-			anime({
-				targets: this.$refs.bg,
-				opacity: 1,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.body,
-				opacity: 1,
-				scale: [1.2, 1],
-				duration: 300,
-				easing: [0, 0.5, 0.5, 1]
-			});
-		});
-
-		setTimeout(() => {
-			anime({
-				targets: this.$refs.bg,
-				opacity: 0,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.body,
-				opacity: 0,
-				scale: 0.8,
-				duration: 300,
-				easing: [0.5, 0, 1, 0.5],
-				complete: () => this.destroyDom()
-			});
-		}, 1250);
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.yvbkymdqeusiqucuuloahhiqflzinufs
-	pointer-events none
-
-	> .bg
-		display block
-		position fixed
-		z-index 10000
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(#000, 0.7)
-		opacity 0
-
-	> .body
-		position fixed
-		z-index 10000
-		top 0
-		right 0
-		left 0
-		bottom 0
-		margin auto
-		width 150px
-		height 150px
-		background var(--face)
-		border-radius 8px
-		opacity 0
-
-		> .icon
-			display flex
-			justify-content center
-			position absolute
-			top 0
-			right 0
-			left 0
-			bottom 0
-			width 5em
-			height 5em
-			margin auto
-			border .25em solid transparent
-			border-radius 50%
-			line-height 5em
-			cursor default
-			box-sizing content-box
-			user-select none
-			zoom normal
-			border-color #a5dc86
-
-			> .circle
-				position absolute
-				width 3.75em
-				height 7.5em
-				transform rotate(45deg)
-				border-radius 50%
-				background var(--face)
-
-				&.left
-					top -.4375em
-					left -2.0635em
-					transform rotate(-45deg)
-					transform-origin 3.75em 3.75em
-					border-radius 7.5em 0 0 7.5em
-
-				&.right
-					top -.6875em
-					left 1.875em
-					transform rotate(-45deg)
-					transform-origin 0 3.75em
-					border-radius 0 7.5em 7.5em 0
-					animation swal2-rotate-success-circular-line 4.25s ease-in
-
-			> .check
-				display block
-				position absolute
-				height .3125em
-				border-radius .125em
-				background-color #a5dc86
-				z-index 2
-
-				&.tip
-					top 2.875em
-					left .875em
-					width 1.5625em
-					transform rotate(45deg)
-					animation swal2-animate-success-line-tip .75s
-
-				&.long
-					top 2.375em
-					right .5em
-					width 2.9375em
-					transform rotate(-45deg)
-					animation swal2-animate-success-line-long .75s
-
-			> .fix
-				position absolute
-				top .5em
-				left 1.625em
-				width .4375em
-				height 5.625em
-				transform rotate(-45deg)
-				z-index 1
-				background var(--face)
-
-			> .ring
-				position absolute
-				top -.25em
-				left -.25em
-				width 100%
-				height 100%
-				border .25em solid rgba(165,220,134,.3)
-				border-radius 50%
-				z-index 2
-				box-sizing content-box
-</style>
diff --git a/src/client/app/common/views/components/password-settings.vue b/src/client/app/common/views/components/password-settings.vue
index 8661b51538..356f8b2fa4 100644
--- a/src/client/app/common/views/components/password-settings.vue
+++ b/src/client/app/common/views/components/password-settings.vue
@@ -25,12 +25,9 @@ export default Vue.extend({
 						type: 'password'
 					}).then(newPassword2 => {
 						if (newPassword !== newPassword2) {
-							this.$dialog({
+							this.$root.alert({
 								title: null,
-								text: this.$t('not-match'),
-								actions: [{
-									text: 'OK'
-								}]
+								text: this.$t('not-match')
 							});
 							return;
 						}
diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue
index 034c3bed8c..bbb2fdb800 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/src/client/app/common/views/components/profile-editor.vue
@@ -193,7 +193,7 @@ export default Vue.extend({
 				this.$store.state.i.bannerUrl = i.bannerUrl;
 
 				if (notify) {
-					this.$swal({
+					this.$root.alert({
 						type: 'success',
 						text: this.$t('saved')
 					});
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 4a6d066d7f..fac11d9efb 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 			try {
 				theme = JSON5.parse(code);
 			} catch (e) {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: this.$t('invalid-theme')
 				});
@@ -234,7 +234,7 @@ export default Vue.extend({
 			}
 
 			if (theme.id == null) {
-				this.$swal({
+				this.$root.alert({
 					type: 'error',
 					text: this.$t('invalid-theme')
 				});
@@ -242,7 +242,7 @@ export default Vue.extend({
 			}
 
 			if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
-				this.$swal({
+				this.$root.alert({
 					type: 'info',
 					text: this.$t('already-installed')
 				});
@@ -254,7 +254,7 @@ export default Vue.extend({
 				key: 'themes', value: themes
 			});
 
-			this.$swal({
+			this.$root.alert({
 				type: 'success',
 				text: this.$t('installed').replace('{}', theme.name)
 			});
@@ -267,7 +267,7 @@ export default Vue.extend({
 				key: 'themes', value: themes
 			});
 
-			this.$swal({
+			this.$root.alert({
 				type: 'info',
 				text: this.$t('uninstalled').replace('{}', theme.name)
 			});
@@ -304,7 +304,7 @@ export default Vue.extend({
 			const theme = this.myTheme;
 
 			if (theme.name == null || theme.name.trim() == '') {
-				this.$swal({
+				this.$root.alert({
 					type: 'warning',
 					text: this.$t('theme-name-required')
 				});
@@ -318,7 +318,7 @@ export default Vue.extend({
 				key: 'themes', value: themes
 			});
 
-			this.$swal({
+			this.$root.alert({
 				type: 'success',
 				text: this.$t('saved')
 			});
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 132518da92..ee8366e89d 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -57,6 +57,7 @@ export default Vue.extend({
 	text-align center
 	font-weight normal
 	font-size 16px
+	line-height 24px
 	border none
 	border-radius 6px
 	outline none
@@ -85,6 +86,7 @@ export default Vue.extend({
 	&.inline
 		display inline-block
 		width auto
+		min-width 100px
 
 	&.primary
 		font-weight bold
diff --git a/src/client/app/common/views/components/ui/horizon-group.vue b/src/client/app/common/views/components/ui/horizon-group.vue
index b9c7cf5cbe..0d4eafae52 100644
--- a/src/client/app/common/views/components/ui/horizon-group.vue
+++ b/src/client/app/common/views/components/ui/horizon-group.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze" :class="{ inputs }">
+<div class="vnxwkwuf" :class="{ inputs, noGrow }">
 	<slot></slot>
 </div>
 </template>
@@ -15,21 +15,27 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		noGrow: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.pfzekjfwkwvadvlujpdnnxfggqgqjoze
-	display flex
-
+.vnxwkwuf
 	&.inputs
 		margin 32px 0
 
-	> *
-		flex 1
+	&:not(.noGrow)
+		display flex
 
-		&:not(:last-child)
-			margin-right 16px
+		> *
+			flex 1
+
+	> *:not(:last-child)
+		margin-right 16px
 </style>
diff --git a/src/client/app/desktop/api/update-avatar.ts b/src/client/app/desktop/api/update-avatar.ts
index ae8b723ea6..e0215aa34f 100644
--- a/src/client/app/desktop/api/update-avatar.ts
+++ b/src/client/app/desktop/api/update-avatar.ts
@@ -8,12 +8,9 @@ export default ($root: any) => {
 
 		const regex = RegExp('\.(jpg|jpeg|png|gif|webp|bmp|tiff)$');
 		if (!regex.test(file.name) ) {
-			$root.$dialog({
+			$root.alert({
 				title: '%fa:info-circle% %i18n:desktop.invalid-filetype%',
-				text: null,
-				actions: [{
-					text: '%i18n:common.got-it%'
-				}]
+				text: null
 			});
 			return reject('invalid-filetype');
 		}
@@ -90,12 +87,9 @@ export default ($root: any) => {
 				value: i.avatarUrl
 			});
 
-			$root.$dialog({
+			$root.alert({
 				title: '%fa:info-circle% %i18n:desktop.avatar-updated%',
-				text: null,
-				actions: [{
-					text: '%i18n:common.got-it%'
-				}]
+				text: null
 			});
 
 			return i;
diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
index c338d4e95c..36582684ec 100644
--- a/src/client/app/desktop/api/update-banner.ts
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -10,10 +10,7 @@ export default ($root: any) => {
 		if (!regex.test(file.name) ) {
 			$root.dialog({
 				title: '%fa:info-circle% %i18n:desktop.invalid-filetype%',
-				text: null,
-				actions: [{
-					text: '%i18n:common.got-it%'
-				}]
+				text: null
 			});
 			return reject('invalid-filetype');
 		}
@@ -90,12 +87,9 @@ export default ($root: any) => {
 				value: i.bannerUrl
 			});
 
-			$root.$dialog({
+			$root.alert({
 				title: '%fa:info-circle% %i18n:desktop.banner-updated%',
-				text: null,
-				actions: [{
-					text: '%i18n:common.got-it%'
-				}]
+				text: null
 			});
 
 			return i;
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index f2d27fa16e..cb23613164 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -34,7 +34,6 @@ import PostFormWindow from './views/components/post-form-window.vue';
 import RenoteFormWindow from './views/components/renote-form-window.vue';
 import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
 import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
-import Dialog from './views/components/dialog.vue';
 import InputDialog from './views/components/input-dialog.vue';
 import Notification from './views/components/ui-notification.vue';
 
@@ -114,21 +113,6 @@ init(async (launch) => {
 				});
 			},
 
-			$dialog(opts) {
-				return new Promise<string>((res, rej) => {
-					const o = opts || {};
-					const d = this.$root.new(Dialog, {
-						title: o.title,
-						text: o.text,
-						modal: o.modal,
-						buttons: o.actions
-					});
-					d.$once('clicked', id => {
-						res(id);
-					});
-				});
-			},
-
 			$input(opts) {
 				return new Promise<string>((res, rej) => {
 					const o = opts || {};
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
deleted file mode 100644
index 2664105bdc..0000000000
--- a/src/client/app/desktop/views/components/dialog.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-<div class="mk-dialog">
-	<div class="bg" ref="bg" @click="onBgClick"></div>
-	<div class="main" ref="main">
-		<header v-html="title" :class="$style.header"></header>
-		<div class="body" v-html="text"></div>
-		<div class="buttons">
-			<button v-for="button in buttons" @click="click(button)">{{ button.text }}</button>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	props: {
-		title: {
-			type: String,
-			required: false
-		},
-		text: {
-			type: String,
-			required: true
-		},
-		buttons: {
-			type: Array,
-			default: () => {
-				return [{
-					text: 'OK'
-				}];
-			}
-		},
-		modal: {
-			type: Boolean,
-			default: false
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			(this.$refs.bg as any).style.pointerEvents = 'auto';
-			anime({
-				targets: this.$refs.bg,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.main,
-				opacity: 1,
-				scale: [1.2, 1],
-				duration: 300,
-				easing: [0, 0.5, 0.5, 1]
-			});
-		});
-	},
-	methods: {
-		click(button) {
-			this.$emit('clicked', button.id);
-			this.close();
-		},
-		close() {
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.bg,
-				opacity: 0,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			(this.$refs.main as any).style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.main,
-				opacity: 0,
-				scale: 0.8,
-				duration: 300,
-				easing: [ 0.5, -0.5, 1, 0.5 ],
-				complete: () => this.destroyDom()
-			});
-		},
-		onBgClick() {
-			if (!this.modal) {
-				this.close();
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-dialog
-	> .bg
-		display block
-		position fixed
-		z-index 8192
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(#000, 0.7)
-		opacity 0
-		pointer-events none
-
-	> .main
-		display block
-		position fixed
-		z-index 8192
-		top 20%
-		left 0
-		right 0
-		margin 0 auto 0 auto
-		padding 32px 42px
-		width 480px
-		background #fff
-		opacity 0
-
-		> .body
-			margin 1em 0
-			color #888
-
-		> .buttons
-			> button
-				display inline-block
-				float right
-				margin 0
-				padding 10px 10px
-				font-size 1.1em
-				font-weight normal
-				text-decoration none
-				color #888
-				background transparent
-				outline none
-				border none
-				border-radius 0
-				cursor pointer
-				transition color 0.1s ease
-
-				i
-					margin 0 0.375em
-
-				&:hover
-					color var(--primary)
-
-				&:active
-					color var(--primaryDarken10)
-					transition color 0s ease
-
-</style>
-
-<style lang="stylus" module>
-
-
-.header
-	margin 1em 0
-	color var(--primary)
-	// color #43A4EC
-	font-weight bold
-
-	&:empty
-		display none
-
-	> i
-		margin-right 0.5em
-
-</style>
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 7840d7e748..a643064078 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -170,12 +170,9 @@ export default Vue.extend({
 
 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$dialog({
+			this.$root.alert({
 				title: this.$t('contextmenu.copied'),
-				text: this.$t('contextmenu.copied-url-to-clipboard'),
-				actions: [{
-					text: this.$t('@.ok')
-				}]
+				text: this.$t('contextmenu.copied-url-to-clipboard')
 			});
 		},
 
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index fe9bad2c28..5558f65c3e 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -155,12 +155,9 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$dialog({
+							this.$root.alert({
 								title: this.$t('unable-to-process'),
-								text: this.$t('circular-reference-detected'),
-								actions: [{
-									text: this.$t('@.ok')
-								}]
+								text: this.$t('circular-reference-detected')
 							});
 							break;
 						default:
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index 08dbfd2fa9..c4e9e102d5 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -313,12 +313,9 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$dialog({
+							this.$root.alert({
 								title: this.$t('unable-to-process'),
-								text: this.$t('circular-reference-detected'),
-								actions: [{
-									text: this.$t('@.ok')
-								}]
+								text: this.$t('circular-reference-detected')
 							});
 							break;
 						default:
@@ -343,12 +340,9 @@ export default Vue.extend({
 					folderId: this.folder ? this.folder.id : undefined
 				});
 
-				this.$dialog({
+				this.$root.alert({
 					title: this.$t('url-upload-requested'),
-					text: this.$t('may-take-time'),
-					actions: [{
-						text: this.$t('@.ok')
-					}]
+					text: this.$t('may-take-time')
 				});
 			});
 		},
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 500773ee9f..492edc67d6 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -186,12 +186,9 @@ export default Vue.extend({
 
 	methods: {
 		hint() {
-			this.$dialog({
+			this.$root.alert({
 				title: this.$t('@.customization-tips.title'),
-				text: this.$t('@.customization-tips.paragraph'),
-				actions: [{
-					text: this.$t('@.customization-tips.gotit')
-				}]
+				text: this.$t('@.customization-tips.paragraph')
 			});
 		},
 
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index d652c2def1..99e8064cea 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -549,12 +549,12 @@ export default Vue.extend({
 				this.checkingForUpdate = false;
 				this.latestVersion = newer;
 				if (newer == null) {
-					this.$dialog({
+					this.$root.alert({
 						title: this.$t('no-updates'),
 						text: this.$t('no-updates-desc')
 					});
 				} else {
-					this.$dialog({
+					this.$root.alert({
 						title: this.$t('update-available'),
 						text: this.$t('update-available-desc')
 					});
@@ -563,7 +563,7 @@ export default Vue.extend({
 		},
 		clean() {
 			localStorage.clear();
-			this.$dialog({
+			this.$root.alert({
 				title: this.$t('cache-cleared'),
 				text: this.$t('cache-cleared-desc')
 			});
diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
index 27da5427b9..8336828c0c 100644
--- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
@@ -87,7 +87,6 @@ import XNotes from './deck.notes.vue';
 import XNote from '../../components/note.vue';
 import Menu from '../../../../common/views/components/menu.vue';
 import MkUserListsWindow from '../../components/user-lists-window.vue';
-import Ok from '../../../../common/views/components/ok.vue';
 import { concat } from '../../../../../../prelude/array';
 import * as ApexCharts from 'apexcharts';
 
@@ -308,7 +307,8 @@ export default Vue.extend({
 							listId: list.id,
 							userId: this.user.id
 						});
-						this.$root.new(Ok);
+						// TODO
+						//this.$root.new(Ok);
 					});
 				}
 			}];
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index e369d724e8..63bb60bcb3 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -101,7 +101,7 @@ export default Vue.extend({
 					listId: list.id,
 					userId: this.user.id
 				});
-				this.$dialog({
+				this.$root.alert({
 					title: 'Done!',
 					text: this.$t('list-pushed').replace('{user}', this.user.name).replace('{list}', list.title)
 				});
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index d1ac060564..60f4ab31fe 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -7,7 +7,6 @@ import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import VAnimateCss from 'v-animate-css';
 import VModal from 'vue-js-modal';
-import VueSweetalert2 from 'vue-sweetalert2';
 import VueI18n from 'vue-i18n';
 
 import VueHotkey from './common/hotkey';
@@ -16,6 +15,7 @@ import checkForUpdate from './common/scripts/check-for-update';
 import MiOS from './mios';
 import { clientVersion as version, codename, lang } from './config';
 import { builtinThemes, lightTheme, applyTheme } from './theme';
+import Alert from './common/views/components/alert.vue';
 
 if (localStorage.getItem('theme') == null) {
 	applyTheme(lightTheme);
@@ -258,7 +258,6 @@ Vue.use(VueRouter);
 Vue.use(VAnimateCss);
 Vue.use(VModal);
 Vue.use(VueHotkey);
-Vue.use(VueSweetalert2);
 Vue.use(VueI18n);
 
 Vue.component('fa', FontAwesomeIcon);
@@ -430,6 +429,13 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void,
 						document.body.appendChild(x.$el);
 						return x;
 					},
+					alert(opts) {
+						return new Promise((res) => {
+							const vm = this.new(Alert, opts);
+							vm.$once('ok', () => res(true));
+							vm.$once('cancel', () => res(false));
+						});
+					}
 				},
 				router,
 				render: createEl => createEl(App)
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 5622e233df..116ffce1dc 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -35,7 +35,6 @@ import MkFollow from '../common/views/pages/follow.vue';
 import PostForm from './views/components/post-form-dialog.vue';
 import FileChooser from './views/components/drive-file-chooser.vue';
 import FolderChooser from './views/components/drive-folder-chooser.vue';
-import Dialog from './views/components/dialog.vue';
 
 /**
  * init
@@ -99,21 +98,6 @@ init((launch) => {
 				});
 			},
 
-			$dialog(opts) {
-				return new Promise<string>((res, rej) => {
-					const o = opts || {};
-					const d = this.$root.new(Dialog, {
-						title: o.title,
-						text: o.text,
-						modal: o.modal,
-						buttons: o.actions
-					});
-					d.$once('clicked', id => {
-						res(id);
-					});
-				});
-			},
-
 			$notify(message) {
 				alert(message);
 			}
diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
deleted file mode 100644
index ca9ccd8246..0000000000
--- a/src/client/app/mobile/views/components/dialog.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-<div class="mk-dialog">
-	<div class="bg" ref="bg" @click="onBgClick"></div>
-	<div class="main" ref="main">
-		<header v-html="title" :class="$style.header"></header>
-		<div class="body" v-html="text"></div>
-		<div class="buttons">
-			<button v-for="button in buttons" @click="click(button)">{{ button.text }}</button>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	props: {
-		title: {
-			type: String,
-			required: false
-		},
-		text: {
-			type: String,
-			required: true
-		},
-		buttons: {
-			type: Array,
-			default: () => {
-				return [{
-					text: 'OK'
-				}];
-			}
-		},
-		modal: {
-			type: Boolean,
-			default: false
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			(this.$refs.bg as any).style.pointerEvents = 'auto';
-			anime({
-				targets: this.$refs.bg,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.main,
-				opacity: 1,
-				scale: [1.2, 1],
-				duration: 300,
-				easing: [0, 0.5, 0.5, 1]
-			});
-		});
-	},
-	methods: {
-		click(button) {
-			this.$emit('clicked', button.id);
-			this.close();
-		},
-		close() {
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.bg,
-				opacity: 0,
-				duration: 300,
-				easing: 'linear'
-			});
-
-			(this.$refs.main as any).style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.main,
-				opacity: 0,
-				scale: 0.8,
-				duration: 300,
-				easing: [ 0.5, -0.5, 1, 0.5 ],
-				complete: () => this.destroyDom()
-			});
-		},
-		onBgClick() {
-			if (!this.modal) {
-				this.close();
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-dialog
-	> .bg
-		display block
-		position fixed
-		z-index 8192
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(#000, 0.7)
-		opacity 0
-		pointer-events none
-
-	> .main
-		display block
-		position fixed
-		z-index 8192
-		top 20%
-		left 0
-		right 0
-		margin 0 auto 0 auto
-		padding 16px
-		width calc(100% - 32px)
-		max-width 300px
-		background #fff
-		opacity 0
-
-		> .body
-			margin 1em 0
-			color #888
-
-		> .buttons
-			> button
-				display inline-block
-				float right
-				margin 0
-				padding 0 10px
-				font-size 1.1em
-				font-weight normal
-				text-decoration none
-				color #888
-				background transparent
-				outline none
-				border none
-				border-radius 0
-				cursor pointer
-				transition color 0.1s ease
-
-				i
-					margin 0 0.375em
-
-				&:hover
-					color var(--primary)
-
-				&:active
-					color var(--primaryDarken10)
-					transition color 0s ease
-
-</style>
-
-<style lang="stylus" module>
-.header
-	margin 0 0 1em 0
-	color var(--primary)
-	// color #43A4EC
-	font-weight bold
-
-	&:empty
-		display none
-
-	> i
-		margin-right 0.5em
-
-</style>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 2bd64b6270..fceaebc66d 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -360,12 +360,12 @@ export default Vue.extend({
 				this.checkingForUpdate = false;
 				this.latestVersion = newer;
 				if (newer == null) {
-					this.$dialog({
+					this.$root.alert({
 						title: this.$t('no-updates'),
 						text: this.$t('no-updates-desc')
 					});
 				} else {
-					this.$dialog({
+					this.$root.alert({
 						title: this.$t('update-available'),
 						text: this.$t('update-available-desc')
 					});