MusareFork/frontend/components/pages/Banned.vue

<template>
	<div class="container">
		<i class="material-icons">not_interested</i>
		<h4>
			You are banned for
			<strong>{{ moment($parent.ban.expiresAt).fromNow(true) }}</strong>
		</h4>
		<h5 class="reason">
			<strong>Reason: </strong>
			{{ $parent.ban.reason }}
		</h5>
	</div>
</template>
<script>
export default {
	data() {
		return {
			moment
		};
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100vh;
	max-width: 1000px;
	padding: 0 20px;
}

.reason {
	text-align: justify;
}

i.material-icons {
	cursor: default;
	font-size: 65px;
	color: tomato;
}
</style>