From a88e486468b53145d7745411db02fe507ddffb78 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 11 Apr 2021 21:09:35 +0900
Subject: Tweak UI

---
 src/client/components/form/base.vue  |  8 ++++++--
 src/client/components/form/form.scss | 12 ++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/client/components/form')

diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue
index 249b49c675..b2e429d6bf 100644
--- a/src/client/components/form/base.vue
+++ b/src/client/components/form/base.vue
@@ -20,12 +20,16 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .rbusrurv {
+	// 他のCSSからも参照されるので消さないように
+	--formXPadding: 32px;
+	--formYPadding: 32px;
+
 	line-height: 1.4em;
 	background: var(--bg);
-	padding: 32px;
+	padding: var(--formYPadding) var(--formXPadding);
 
 	&:not(.wide).max-width_400px {
-		padding: 32px 0;
+		--formXPadding: 0px;
 
 		> ::v-deep(*) {
 			._formPanel {
diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index c7f4373544..d9486430be 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -10,9 +10,17 @@
 }
 
 ._formLabel {
+	position: sticky;
+	top: var(--stickyTop, 0px);
+	background: var(--bg);
+	z-index: 2;
 	font-size: 80%;
-	padding: 0 16px 8px 16px;
-	opacity: 0.8;
+	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
+	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
+	color: var(--fgTransparentWeak);
+	background: var(--X17);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
 
 	&:empty {
 		display: none;
-- 
cgit v1.2.3-freya


From d599c1e7409ac78167c43ba36c017af21e6a8f63 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 12 Apr 2021 13:06:00 +0900
Subject: Tweak UI

---
 src/client/components/form/form.scss | 26 ++++++++--------
 src/client/pages/settings/theme.vue  | 60 ++++++++++++++++++++++++------------
 src/client/scripts/theme.ts          |  4 +--
 src/client/style.scss                |  4 +--
 4 files changed, 59 insertions(+), 35 deletions(-)

(limited to 'src/client/components/form')

diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index d9486430be..b8d1429c9d 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -9,32 +9,34 @@
 	}
 }
 
+._formLabel,
+._formCaption {
+	font-size: 80%;
+	color: var(--fgTransparentWeak);
+
+	&:empty {
+		display: none;
+	}
+}
+
 ._formLabel {
 	position: sticky;
 	top: var(--stickyTop, 0px);
-	background: var(--bg);
 	z-index: 2;
-	font-size: 80%;
 	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
 	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
-	color: var(--fgTransparentWeak);
 	background: var(--X17);
 	-webkit-backdrop-filter: blur(10px);
 	backdrop-filter: blur(10px);
+}
 
-	&:empty {
-		display: none;
-	}
+._themeChanging_ ._formLabel {
+	transition: none !important;
+	background: transparent;
 }
 
 ._formCaption {
-	font-size: 80%;
 	padding: 8px 16px 0 16px;
-	opacity: 0.8;
-
-	&:empty {
-		display: none;
-	}
 }
 
 ._formItem {
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 4aba6ea4de..75f27d12e7 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -1,24 +1,5 @@
 <template>
 <FormBase>
-	<FormSelect v-model:value="lightTheme" v-if="!darkMode">
-		<template #label>{{ $ts.themeForLightMode }}</template>
-		<optgroup :label="$ts.lightThemes">
-			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="$ts.darkThemes">
-			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-	<FormSelect v-model:value="darkTheme" v-else>
-		<template #label>{{ $ts.themeForDarkMode }}</template>
-		<optgroup :label="$ts.darkThemes">
-			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="$ts.lightThemes">
-			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-
 	<FormGroup>
 		<div class="rfqxtzch _formItem _formPanel">
 			<div class="darkMode">
@@ -45,6 +26,47 @@
 		<FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
 	</FormGroup>
 
+	<template v-if="darkMode">
+		<FormSelect v-model:value="darkTheme">
+			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model:value="lightTheme">
+			<template #label>{{ $ts.themeForLightMode }}</template>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</template>
+	<template v-else>
+		<FormSelect v-model:value="lightTheme">
+			<template #label>{{ $ts.themeForLightMode }}</template>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model:value="darkTheme">
+			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</template>
+
 	<FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
 	<FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
 
diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts
index 804d808683..f3719a23d8 100644
--- a/src/client/scripts/theme.ts
+++ b/src/client/scripts/theme.ts
@@ -29,10 +29,10 @@ let timeout = null;
 export function applyTheme(theme: Theme, persist = true) {
 	if (timeout) clearTimeout(timeout);
 
-	document.documentElement.classList.add('changing-theme');
+	document.documentElement.classList.add('_themeChanging_');
 
 	timeout = setTimeout(() => {
-		document.documentElement.classList.remove('changing-theme');
+		document.documentElement.classList.remove('_themeChanging_');
 	}, 1000);
 
 	// Deep copy
diff --git a/src/client/style.scss b/src/client/style.scss
index 4b91437a78..a86a2cbffe 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -82,9 +82,9 @@ html {
 	}
 }
 
-html.changing-theme {
+html._themeChanging_ {
 	&, * {
-		transition: background 1s ease !important;
+		transition: background 1s ease, border 1s ease !important;
 	}
 }
 
-- 
cgit v1.2.3-freya


From c0c64a2d5d99e0c99a1c0d1f00016285f3e2d94d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 12 Apr 2021 23:13:58 +0900
Subject: Tweak UI

---
 package.json                          |  1 +
 src/client/components/form/base.vue   |  2 +-
 src/client/components/form/input.vue  |  2 +-
 src/client/components/form/radios.vue |  4 ++--
 src/client/components/form/range.vue  |  2 +-
 src/client/components/form/select.vue |  2 +-
 src/client/components/form/switch.vue |  2 +-
 src/client/ui/default.sidebar.vue     | 19 ++++++++++++++++++-
 webpack.config.ts                     |  6 ++++++
 yarn.lock                             | 19 ++++++++++++++-----
 10 files changed, 46 insertions(+), 13 deletions(-)

(limited to 'src/client/components/form')

diff --git a/package.json b/package.json
index aaa3a43764..91a6732d72 100644
--- a/package.json
+++ b/package.json
@@ -253,6 +253,7 @@
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vue-router": "4.0.5",
 		"vue-style-loader": "4.1.3",
+		"vue-svg-loader": "0.17.0-beta.2",
 		"vuedraggable": "4.0.1",
 		"web-push": "3.4.4",
 		"webpack": "5.27.2",
diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue
index b2e429d6bf..84438a5b32 100644
--- a/src/client/components/form/base.vue
+++ b/src/client/components/form/base.vue
@@ -24,7 +24,7 @@ export default defineComponent({
 	--formXPadding: 32px;
 	--formYPadding: 32px;
 
-	line-height: 1.4em;
+	line-height: 1.3em;
 	background: var(--bg);
 	padding: var(--formYPadding) var(--formXPadding);
 
diff --git a/src/client/components/form/input.vue b/src/client/components/form/input.vue
index f0aa6b0534..c0fa3e716e 100644
--- a/src/client/components/form/input.vue
+++ b/src/client/components/form/input.vue
@@ -215,7 +215,7 @@ export default defineComponent({
 	}
 
 	> .input {
-		$height: 52px;
+		$height: 48px;
 		position: relative;
 
 		> input {
diff --git a/src/client/components/form/radios.vue b/src/client/components/form/radios.vue
index 4561df32e1..3daa7e5bbd 100644
--- a/src/client/components/form/radios.vue
+++ b/src/client/components/form/radios.vue
@@ -69,8 +69,8 @@ export default defineComponent({
 			display: inline-block;
 			vertical-align: bottom;
 			position: relative;
-			width: 20px;
-			height: 20px;
+			width: 16px;
+			height: 16px;
 			margin-right: 8px;
 			background: none;
 			border: 2px solid var(--inputBorder);
diff --git a/src/client/components/form/range.vue b/src/client/components/form/range.vue
index 3452184c55..65d665c70a 100644
--- a/src/client/components/form/range.vue
+++ b/src/client/components/form/range.vue
@@ -69,7 +69,7 @@ export default defineComponent({
 	position: relative;
 
 	> .main {
-		padding: 24px 16px;
+		padding: 22px 16px;
 
 		> input {
 			display: block;
diff --git a/src/client/components/form/select.vue b/src/client/components/form/select.vue
index b865372f56..01f28587dc 100644
--- a/src/client/components/form/select.vue
+++ b/src/client/components/form/select.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			height: 52px;
+			height: 48px;
 			background: none;
 			border: none;
 			border-radius: 0;
diff --git a/src/client/components/form/switch.vue b/src/client/components/form/switch.vue
index a2941c5996..e7ef714c49 100644
--- a/src/client/components/form/switch.vue
+++ b/src/client/components/form/switch.vue
@@ -57,7 +57,7 @@ export default defineComponent({
 	> .main {
 		position: relative;
 		display: flex;
-		padding: 16px;
+		padding: 14px 16px;
 		cursor: pointer;
 
 		> * {
diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue
index 6323393f22..3e956679cd 100644
--- a/src/client/ui/default.sidebar.vue
+++ b/src/client/ui/default.sidebar.vue
@@ -30,6 +30,11 @@
 	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
 	</MkA>
+	<div class="divider"></div>
+	<div class="foo">
+		<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+	</div>
+	<!--<MisskeyLogo class="misskey"/>-->
 </div>
 </template>
 
@@ -44,10 +49,12 @@ import { sidebarDef } from '@client/sidebar';
 import { getAccounts, addAccount, login } from '@client/account';
 import MkButton from '@client/components/ui/button.vue';
 import { StickySidebar } from '@client/scripts/sticky-sidebar';
+import MisskeyLogo from '@/../assets/client/misskey.svg';
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
+		MisskeyLogo,
 	},
 
 	data() {
@@ -315,6 +322,16 @@ export default defineComponent({
 		}
 	}
 
+	> .misskey {
+		fill: currentColor;
+	}
+
+	> .foo {
+		text-align: center;
+		padding: 8px 0 16px 0;
+		opacity: 0.5;
+	}
+
 	> .item {
 		position: relative;
 		display: block;
diff --git a/webpack.config.ts b/webpack.config.ts
index 5ead4f3af2..9f2a3a89af 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -103,6 +103,12 @@ module.exports = {
 					esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
 				}
 			}, postcss]
+		}, {
+			test: /\.svg$/,
+			use: [
+				'vue-loader',
+				'vue-svg-loader',
+			],
 		}, {
 			test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
 			type: 'asset/resource'
diff --git a/yarn.lock b/yarn.lock
index 5c27f8ce03..fb3c82ad9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6613,10 +6613,10 @@ methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-mfm-js@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.12.0.tgz#47be2fdb18869b9e55576fffcc159d0417c670db"
-  integrity sha512-u0IyIMwzsGsOGmctRXcOdWYsh9LWHKHqX+XCBfPjORX+1DCBdonaO6pryOawns6z16Xvus2yZk0KMMqWt2TotQ==
+mfm-js@0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.0.tgz#0952ed6f0dd8553866bde7e646c3d5d3d23aeae9"
+  integrity sha512-snCiszquj6DIOARdgJfI8b6o9PbojAmJe1thrsBkUTxG+XG27rCOmjEL1kc1705XraJo0aVCLR9vE6YmjHiUQg==
   dependencies:
     twemoji-parser "13.0.x"
 
@@ -10050,7 +10050,7 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
-svgo@^1.0.0:
+svgo@^1.0.0, svgo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
   integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
@@ -10980,6 +10980,15 @@ vue-style-loader@4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-loader@0.17.0-beta.2:
+  version "0.17.0-beta.2"
+  resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz#954b2a08b5488998dd81ec371ab5fb5ea4182ef7"
+  integrity sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q==
+  dependencies:
+    loader-utils "^2.0.0"
+    semver "^7.3.2"
+    svgo "^1.3.2"
+
 vue@3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
-- 
cgit v1.2.3-freya


From b9c4a582acd1a96248be4acf42df56b4a43ecaa3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 14 Apr 2021 01:41:49 +0900
Subject: Tweak UI

---
 src/client/components/form/form.scss         |  6 ++++
 src/client/components/form/info.vue          | 49 ++++++++++++++++++++++++++++
 src/client/components/form/link.vue          |  1 +
 src/client/components/modal-page-window.vue  |  2 +-
 src/client/pages/settings/mute-block.vue     |  8 ++---
 src/client/pages/settings/plugin.install.vue |  6 ++--
 src/client/pages/settings/plugin.manage.vue  |  2 --
 src/client/pages/settings/registry.keys.vue  |  2 --
 src/client/pages/settings/registry.value.vue |  6 ++--
 src/client/pages/settings/registry.vue       |  2 --
 src/client/pages/settings/update.vue         |  8 ++---
 src/client/pages/settings/word-mute.vue      |  8 ++---
 src/client/pages/user/index.vue              |  1 -
 13 files changed, 75 insertions(+), 26 deletions(-)
 create mode 100644 src/client/components/form/info.vue

(limited to 'src/client/components/form')

diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index b8d1429c9d..8c01fad727 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -1,11 +1,17 @@
 ._formPanel {
 	background: var(--panel);
 	border-radius: var(--radius);
+	transition: background 0.2s ease;
 
 	&._formClickable {
 		&:hover {
 			//background: var(--panelHighlight);
 		}
+
+		&:active {
+			background: var(--panelHighlight);
+			transition: background 0s;
+		}
 	}
 }
 
diff --git a/src/client/components/form/info.vue b/src/client/components/form/info.vue
new file mode 100644
index 0000000000..a9224c7e65
--- /dev/null
+++ b/src/client/components/form/info.vue
@@ -0,0 +1,49 @@
+<template>
+<div class="fzenkabp _formItem">
+	<div class="_formPanel" :class="{ warn }">
+		<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
+		<i v-else><Fa :icon="faInfoCircle"/></i>
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+export default defineComponent({
+	props: {
+		warn: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	data() {
+		return {
+			faInfoCircle, faExclamationTriangle
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fzenkabp {
+	> div {
+		padding: 14px 16px;
+		font-size: 90%;
+		background: var(--infoBg);
+		color: var(--infoFg);
+
+		&.warn {
+			background: var(--infoWarnBg);
+			color: var(--infoWarnFg);
+		}
+
+		> i {
+			margin-right: 4px;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/link.vue b/src/client/components/form/link.vue
index 2efc6b58c9..af36bcf22c 100644
--- a/src/client/components/form/link.vue
+++ b/src/client/components/form/link.vue
@@ -66,6 +66,7 @@ export default defineComponent({
 
 		&.active {
 			color: var(--accent);
+			background: var(--panelHighlight);
 		}
 
 		> .icon {
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index 24511215da..474a67f985 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -168,7 +168,7 @@ export default defineComponent({
 	}
 
 	> .header {
-		$height: 54px;
+		$height: 52px;
 		$height-narrow: 42px;
 		display: flex;
 		flex-shrink: 0;
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index d1c3d5f29e..11450e049b 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -6,7 +6,7 @@
 	</MkTab>
 	<div v-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination" class="muting">
-			<template #empty><MkInfo>{{ $ts.noUsers }}</MkInfo></template>
+			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
 			<template #default="{items}">
 				<FormGroup>
 					<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
@@ -18,7 +18,7 @@
 	</div>
 	<div v-if="tab === 'block'">
 		<MkPagination :pagination="blockingPagination" class="blocking">
-			<template #empty><MkInfo>{{ $ts.noUsers }}</MkInfo></template>
+			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
 			<template #default="{items}">
 				<FormGroup>
 					<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
@@ -36,7 +36,7 @@ import { defineComponent } from 'vue';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
@@ -48,7 +48,7 @@ export default defineComponent({
 	components: {
 		MkPagination,
 		MkTab,
-		MkInfo,
+		FormInfo,
 		FormBase,
 		FormGroup,
 		FormLink,
diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue
index ecda0a4e0c..bc80188fc6 100644
--- a/src/client/pages/settings/plugin.install.vue
+++ b/src/client/pages/settings/plugin.install.vue
@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<MkInfo warn>{{ $ts._plugin.installWarn }}</MkInfo>
+	<FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo>
 
 	<FormGroup>
 		<FormTextarea v-model:value="code" tall>
@@ -25,7 +25,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormButton from '@client/components/form/button.vue';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { unisonReload } from '@client/scripts/unison-reload';
@@ -40,7 +40,7 @@ export default defineComponent({
 		FormGroup,
 		FormLink,
 		FormButton,
-		MkInfo,
+		FormInfo,
 	},
 
 	emits: ['info'],
diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue
index 16d2225d0b..d7aabe560e 100644
--- a/src/client/pages/settings/plugin.manage.vue
+++ b/src/client/pages/settings/plugin.manage.vue
@@ -36,7 +36,6 @@ import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fo
 import MkButton from '@client/components/ui/button.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkSelect from '@client/components/ui/select.vue';
-import MkInfo from '@client/components/ui/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
@@ -49,7 +48,6 @@ export default defineComponent({
 		MkButton,
 		MkTextarea,
 		MkSelect,
-		MkInfo,
 		FormSwitch,
 		FormBase,
 		FormGroup,
diff --git a/src/client/pages/settings/registry.keys.vue b/src/client/pages/settings/registry.keys.vue
index d2fd75aca1..5cdfdc1332 100644
--- a/src/client/pages/settings/registry.keys.vue
+++ b/src/client/pages/settings/registry.keys.vue
@@ -24,7 +24,6 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInfo from '@client/components/ui/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -37,7 +36,6 @@ import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		MkInfo,
 		FormBase,
 		FormSelect,
 		FormSwitch,
diff --git a/src/client/pages/settings/registry.value.vue b/src/client/pages/settings/registry.value.vue
index bba92bb746..7d5756af99 100644
--- a/src/client/pages/settings/registry.value.vue
+++ b/src/client/pages/settings/registry.value.vue
@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<MkInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</MkInfo>
+	<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
 
 	<template v-if="value">
 		<FormGroup>
@@ -39,7 +39,7 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faCogs, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
@@ -52,7 +52,7 @@ import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		MkInfo,
+		FormInfo,
 		FormBase,
 		FormSelect,
 		FormSwitch,
diff --git a/src/client/pages/settings/registry.vue b/src/client/pages/settings/registry.vue
index a09c309d33..085389fc95 100644
--- a/src/client/pages/settings/registry.vue
+++ b/src/client/pages/settings/registry.vue
@@ -12,7 +12,6 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInfo from '@client/components/ui/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -25,7 +24,6 @@ import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		MkInfo,
 		FormBase,
 		FormSelect,
 		FormSwitch,
diff --git a/src/client/pages/settings/update.vue b/src/client/pages/settings/update.vue
index fb1458da81..d7b2adae56 100644
--- a/src/client/pages/settings/update.vue
+++ b/src/client/pages/settings/update.vue
@@ -1,8 +1,8 @@
 <template>
 <FormBase>
 	<template v-if="meta">
-		<MkInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</MkInfo>
-		<MkInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</MkInfo>
+		<FormInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</FormInfo>
+		<FormInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</FormInfo>
 	</template>
 	<FormGroup>
 		<template #label>{{ instanceName }}</template>
@@ -38,7 +38,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import * as os from '@client/os';
 import { version, instanceName } from '@client/config';
 import * as symbols from '@client/symbols';
@@ -52,7 +52,7 @@ export default defineComponent({
 		FormLink,
 		FormGroup,
 		FormKeyValueView,
-		MkInfo,
+		FormInfo,
 	},
 
 	emits: ['info'],
diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue
index 029eb5d415..79de2ebbdf 100644
--- a/src/client/pages/settings/word-mute.vue
+++ b/src/client/pages/settings/word-mute.vue
@@ -7,14 +7,14 @@
 	<FormBase>
 		<div class="_formItem">
 			<div v-show="tab === 'soft'">
-				<MkInfo>{{ $ts._wordMute.softDescription }}</MkInfo>
+				<FormInfo>{{ $ts._wordMute.softDescription }}</FormInfo>
 				<FormTextarea v-model:value="softMutedWords">
 					<span>{{ $ts._wordMute.muteWords }}</span>
 					<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
 				</FormTextarea>
 			</div>
 			<div v-show="tab === 'hard'">
-				<MkInfo>{{ $ts._wordMute.hardDescription }}</MkInfo>
+				<FormInfo>{{ $ts._wordMute.hardDescription }}</FormInfo>
 				<FormTextarea v-model:value="hardMutedWords">
 					<span>{{ $ts._wordMute.muteWords }}</span>
 					<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
@@ -37,8 +37,8 @@ import FormTextarea from '@client/components/form/textarea.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import FormButton from '@client/components/form/button.vue';
+import FormInfo from '@client/components/form/info.vue';
 import MkTab from '@client/components/tab.vue';
-import MkInfo from '@client/components/ui/info.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
 import * as symbols from '@client/symbols';
@@ -50,7 +50,7 @@ export default defineComponent({
 		FormTextarea,
 		FormKeyValueView,
 		MkTab,
-		MkInfo,
+		FormInfo,
 	},
 
 	emits: ['info'],
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 58f800d186..52b2725964 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -545,7 +545,6 @@ export default defineComponent({
 
 .ftskorzw.narrow {
 	box-sizing: border-box;
-	overflow: hidden;
 	overflow: clip;
 
 	> .punished {
-- 
cgit v1.2.3-freya