Tweak UI

3 files changed, 56 insertions, 0 deletions

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 {