Tweak UI

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;
+		}
 	}
 }
 

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>

src/client/components/form/link.vue

@@ -66,6 +66,7 @@ export default defineComponent({
 
 		&.active {
 			color: var(--accent);
+			background: var(--panelHighlight);
 		}
 
 		> .icon {

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;

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,

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'],

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,

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,

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,

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,

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'],

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'],

src/client/pages/user/index.vue

@@ -545,7 +545,6 @@ export default defineComponent({
 
 .ftskorzw.narrow {
 	box-sizing: border-box;
-	overflow: hidden;
 	overflow: clip;
 
 	> .punished {